@php
    use App\Enums\Tasks\RelatedToType;
    use App\Enums\Tasks\Status;
@endphp

<x-Dashboard.Layout.Layout title="Task {{ $task->title }}">


    <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">Edit Task</h6>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form class="card-body" method="POST" action="{{ route('tasks.update', $task) }}">
                        @csrf
                        @method('PUT')
                        <div class="row g-3">
                            <div class="col-md-6">
                                <x-forms.input-label.basic name="title" required
                                    value="{{ old('title', $task->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', $task->due_date->format('Y-m-d')) }}" 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', $task->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 name="assigned_to" required class="select2">
                                    <option value="">Select user</option>
                                    @foreach ($usersSelect as $id => $fullName)
                                        <option value="{{ $id }}" @selected(old('assigned_to', $task->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 @selected(old('related_to_type', $task->related_to_type) == $relatedToType->value) value="{{ $relatedToType->value }}">
                                            {{ strtolower($relatedToType->name) }}
                                        </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" :disabled="isset($lead)">
                                    @if (isset($lead))
                                        <option selected value="{{ $lead->id }}">
                                            {{ $lead?->getNameAttribute() }}
                                        </option>
                                            <input type="hidden" name="related_to_id" value="{{ $lead->id }}">

                                    @else
                                        <option value="">Select</option>
                                    @endif
                                </x-forms.select.basic>
                            </div>
                            <div class="col-md-12" id="lead-action">
                                <x-forms.labels.basic>
                                    Lead Action
                                </x-forms.labels.basic>
                                <x-forms.select.basic name="lead_action_id" class="select2">
                                    <option value="">Select Product Category</option>
                                    @foreach ($getLeadActions as $leadAction)
                                        <option value="{{ $leadAction->id }}" @selected(old('lead_action_id', $task->lead_action_id) == $leadAction->id)>
                                            {{ $leadAction->action }}
                                        </option>
                                    @endforeach
                                    <!-- Add your product categories here -->
                                </x-forms.select.basic>
                            </div>
                            <div class="col-12">
                                <x-forms.labels.basic>
                                    Notes
                                </x-forms.labels.basic>
                                <x-forms.textarea.basic
                                    name="notes">{{ old('notes', $task->notes) }}</x-forms.textarea.basic>
                            </div>

                            <div class="col-12 pt-4 text-end">
                                <x-forms.buttons.primary class="float-end">
                                    Update
                                </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', str($task->related_to_type)->replace('\\', '\\\\')) }}";
        const oldRelatedToId = "{{ old('related_to_id', $task->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) {
            const getData = getRelatedToData(type);

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

            const data = await getData();

            // Clear previous options
            relatedToSelect.innerHTML = '';

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

            // 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);
        });

        // Load related_to_id options on page load if there's an old related_to_type
        if (oldRelatedToType) {
            loadRelatedToOptions(oldRelatedToType, oldRelatedToId);
        }
    </script>

</x-Dashboard.Layout.Layout>