@php 
    use App\Enums\Tasks\RelatedToType;
    use App\Enums\Tasks\Status; 
@endphp
<x-Dashboard.Layout.Layout title="Tasks">
<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 col-md-12">
            <div class="card border-0">
                <div class="card-header">
                    <h6 class="text-lg font-weight-semibold mb-0">Create Task</h6>
                </div>
                <form class="card-body" method="POST" action="{{ route('tasks.store') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <x-forms.input-label.basic name="title" required value="{{ old('title') }}">
                                Title
                            </x-forms.input-label.basic>
                        </div>

                        <div class="col-md-6">
                            <x-forms.input-label.basic name="due_date" required value="{{ old('due_date') }}"
                                                       type="date">
                                Due date
                            </x-forms.input-label.basic>
                        </div>

                        <div class="col-md-6">
                            <x-forms.labels.basic>
                                Status
                            </x-forms.labels.basic>
                            <x-forms.select.basic name="status" required class="select2">
                                <option value="">Select status</option>
                                @foreach(Status::cases() as $status)
                                    <option
                                        value="{{ $status->value }}"
                                        @selected(old('status') === $status->value)
                                    >
                                        {{ str($status->value)->replace('_', '')->ucfirst() }}
                                    </option>
                                @endforeach
                            </x-forms.select.basic>
                        </div>

                        <div class="col-md-6">
                            <x-forms.labels.basic>
                                Assigned to
                            </x-forms.labels.basic>
                            <x-forms.select.basic
                                class="select2"
                                name="assigned_to"
                                required
                            >
                                <option value="">Select user</option>
                                @foreach($usersSelect as $id => $fullName)
                                    <option
                                        value="{{ $id }}"
                                        @selected(old('assigned_to') == $id)
                                    >
                                        {{ $fullName }}
                                    </option>
                                @endforeach
                            </x-forms.select.basic>
                        </div>

                        <div class="col-md-6">
                            <x-forms.labels.basic>
                                Related to type
                            </x-forms.labels.basic>
                            <x-forms.select.basic  id="relatedToTypeSelect" name="related_to_type" required>
                                <option value="">Select type</option>
                                @foreach(RelatedToType::cases() as $relatedToType)
                                <option
                                    value="{{ $relatedToType->value }}"
                                    @selected((old('related_to_type')) == $relatedToType->value)
                                >
                                    {{ str($relatedToType->name)->lower() }}
                                </option>
                            @endforeach
                            </x-forms.select.basic>
                        </div>

                        <div class="col-md-6">
                            <x-forms.labels.basic>
                                Related to
                            </x-forms.labels.basic>
                            <x-forms.select.basic
                                name="related_to_id"
                                id="relatedToSelect"
                                required
                            >
                                <option value="">Select</option>
                            </x-forms.select.basic>
                        </div>

                        <div class="col-12">
                            <x-forms.labels.basic>
                                Notes
                            </x-forms.labels.basic>
                            <x-forms.textarea.basic name="notes" value="{{ old('notes') }}"/>
                        </div>

                        <div class="col-12 pt-4 text-end">
                            <x-forms.buttons.primary class="float-end">
                                Submit
                            </x-forms.buttons.primary>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    const relatedToTypeSelect = document.getElementById('relatedToTypeSelect');
    const relatedToSelect = document.getElementById('relatedToSelect');

    const apiRoutes = {
        lead: @json(route('api.v1.leads.list')),
        contact: @json(route('api.v1.contacts.list')),
        deal: @json(route('api.v1.products.list')),
    };

    const oldRelatedToType = "{{ old('related_to_type') }}";
    const oldRelatedToId = "{{ old('related_to_id') }}";

    function getRelatedToData(relatedTo) {
        const map = {
            'App\\Models\\Lead': async () => {
                const res = await fetch(apiRoutes.lead);
                return await res.json();
            },
            'App\\Models\\Contact': async () => {
                const res = await fetch(apiRoutes.contact);
                return await res.json();
            },
            'App\\Models\\Product': async () => {
                const res = await fetch(apiRoutes.deal);
                return await res.json();
            }
        };

        return map[relatedTo];
    }

    async function loadRelatedToOptions(type, selectedId = null) {

        relatedToSelect.innerHTML = '';

        // Add a placeholder option
        const placeholder = document.createElement('option');
        placeholder.textContent = 'Select';
        placeholder.disabled = true;
        placeholder.selected = !selectedId;
        relatedToSelect.appendChild(placeholder);

        const getData = getRelatedToData(type);

        if (!getData) {
            console.warn('No API handler for:', type);
            return;
        }

        const data = await getData();

        // Populate options
        Object.entries(data).forEach(([id, name]) => {
            const option = document.createElement('option');
            option.value = id;
            option.textContent = name;
            if (selectedId && id == selectedId) {
                option.selected = true;
            }
            relatedToSelect.appendChild(option);
        });
    }

    relatedToTypeSelect.addEventListener('change', e => {
        loadRelatedToOptions(e.target.value);
    });

    function getQueryParams() {
        const urlParams = new URLSearchParams(window.location.search);
        return {
            related_to_type: urlParams.get('related_to_type'),
            related_to_id: urlParams.get('related_to_id')
        };
    }

    const initialParams = getQueryParams();

    const initType = initialParams.related_to_type || oldRelatedToType;
    const initId = initialParams.related_to_id || oldRelatedToId;

    if (initType) {
        relatedToTypeSelect.value = initType;
        loadRelatedToOptions(initType, initId);
    }
</script>
</x-Dashboard.Layout.Layout>