@php
    use App\Enums\Calls\OutcomeType;
    use App\Enums\Calls\RelatedToType;
    use App\Models\CallStatus;
@endphp
<x-Dashboard.Layout.Layout title="Edit call">
    @push('style')
        <link rel="stylesheet" href="{{asset('assets/css/dashboard/call/call.css')}}">
    @endpush
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-12">


                <div class="card d-flex flex-row justify-content-between align-items-start p-24 card-body mb-24">
                    <div class="d-flex flex-column gap-20">
                        <div class="text-lg mb-0 d-flex gap-20 align-items-center">
                            <span class="fs-4">
                                Change Status
                            </span>
                            
                        </div>
                        
                    </div>
                    <div class="d-flex">
                        <button type="button" id="notAnsweredCallBtn" class="btn btn-outline-primary d-flex align-items-center gap-2 px-6 py-2 rounded fs-6 m-2">
                                Not answered
                        </button>
                        <form id="scheduleModalForm" action="{{ route('calls.update.action', $call->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="action" value="interested">

                            <button type="submit" class="btn btn-outline-primary d-flex align-items-center gap-2 px-6 py-2 rounded fs-6 m-2">
                                 Interested
                            </button>
                        </form>
                        <button type="button"  id="notInterestedBtn" class="btn btn-outline-primary d-flex align-items-center gap-2 px-6 py-2 rounded fs-6 m-2">
                            Not Interested
                        </button>
                        <button type="button"  id="scheduleCallBtn" class="btn btn-outline-primary d-flex align-items-center gap-2 px-6 py-2 rounded fs-6 m-2">
                            Reschedule
                        </button>
                       
                        {{-- @foreach (OutcomeType::cases() as $action)
                            <button @if($action->value=='reschedule') id="scheduleCallBtn" @elseif($action->value=='not_interested') id="notInterestedBtn" @else   @endif class="btn btn-outline-primary d-flex align-items-center gap-2 px-6 py-2 rounded fs-6 m-2">
                                {{ str($action->value)->replace('_', ' ')->lower()->ucfirst()}}
                            </button>
                        @endforeach --}}
                    </div>
                    
                </div>

                    <!-- Schedule a call Modal -->
                    <div class="modal fade" id="scheduleModal" tabindex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form id="scheduleModalForm" action="{{ route('calls.update.action', $call->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="scheduleModalLabel">Schedule a Call</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <input type="hidden" name="action" value="reschedule">
                                    
                                    <div class="modal-body">
                                        <div>
                                            <x-forms.input-label.basic
                                                name="schedule_call_time"
                                                required
                                                value="{{ old('schedule_call_time') }}"
                                                type="time"
                                            >
                                                Schedule a call with this lead tomorrow at:
                                            </x-forms.input-label.basic>
                                        </div>

                                    </div>

                                    <div class="modal-footer">
                                        <x-forms.buttons.primary id="scheduleModalSubmit">
                                            Save
                                        </x-forms.buttons.primary>

                                        <x-forms.buttons.secondary type="button" data-bs-dismiss="modal">
                                            Close
                                        </x-forms.buttons.secondary>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Not Answered a call Modal -->
                    <div class="modal fade" id="notAnsweredModal" tabindex="-1" aria-labelledby="notAnsweredModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form id="scheduleModalForm" action="{{ route('calls.update.action', $call->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="scheduleModalLabel">Time For Call</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <input type="hidden" name="action" value="not_answered">
                                    
                                    <div class="modal-body">
                                        <div>
                                            <x-forms.input-label.basic
                                                name="schedule_call_time"
                                                required
                                                value="{{ old('schedule_call_time') }}"
                                                type="time"
                                            >
                                                Schedule a call with this lead tomorrow at:
                                            </x-forms.input-label.basic>
                                        </div>

                                    </div>

                                    <div class="modal-footer">
                                        <x-forms.buttons.primary id="scheduleModalSubmit">
                                            Save
                                        </x-forms.buttons.primary>

                                        <x-forms.buttons.secondary type="button" data-bs-dismiss="modal">
                                            Close
                                        </x-forms.buttons.secondary>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Not intersted  a call Modal -->
                    <div class="modal fade" id="notInterestedModal" tabindex="-1" aria-labelledby="notInterestedModal" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form action="{{ route('calls.update.action', $call->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="action" value="not_interested">

                                    <div class="modal-header">
                                        <h5 class="modal-title" id="notInterestedModal">Reason for Call</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div>
                                                <x-forms.labels.basic>
                                                    Reasons
                                                </x-forms.labels.basic>
                                                <x-forms.select.basic class="select2" name="reason_id">
                                                    <option value="">Select Reason</option>
                                                    @foreach($reasons as $reason)
                                                        <option
                                                            value="{{ $reason->id }}"
                                                            @selected(old('reason',$call->reason_id) === $reason->id)
                                                        >
                                                            {{ str($reason->reason)->replace('_', ' ')->lower()->ucfirst() }}</option>
                                                    @endforeach
                                                </x-forms.select.basic>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <x-forms.buttons.primary type="submit">
                                            Save
                                        </x-forms.buttons.primary>

                                        <x-forms.buttons.secondary type="button" data-bs-dismiss="modal">
                                            Close
                                        </x-forms.buttons.secondary>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>


                <div class="card border-0">
                    <div class="card-header">
                        <h6 class="text-lg font-weight-semibold mb-0">Edit call</h6>
                    </div>
                    <form class="card-body" method="POST" action="{{ route('calls.update', $call->id) }}">
                        @csrf
                        @method('PUT')
                        @include('dashboard.calls._form',['btn_text'=>'Save','call'=>$call])
                    </form>
                </div>
            </div>
        </div>
    </div>
    @push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="{{asset('assets/js/dashboard/call/call.js')}}"></script>
    <script src="{{asset('assets/js/dashboard/jquery/call/call.js')}}"></script>
    <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($call->related_to_type)->replace('\\', '\\\\')) }}";
        const oldRelatedToId = "{{ old('related_to_id', $call->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);
        }
        
        function handleScheduleCallBtn() {
            document.getElementById('scheduleCallBtn')
                .addEventListener('click', () => {
                    const modal = new bootstrap.Modal(document.getElementById('scheduleModal'));
                    modal.show();
                });
        }
        function handlenotAnsweredCallBtn() {
            document.getElementById('notAnsweredCallBtn')
                .addEventListener('click', () => {
                    const modal = new bootstrap.Modal(document.getElementById('notAnsweredModal'));
                    modal.show();
                });
            }
        function handlenotInterestedBtn() {
            document.getElementById('notInterestedBtn')
                .addEventListener('click', () => {
                    const modal = new bootstrap.Modal(document.getElementById('notInterestedModal'));
                    modal.show();
                });
        }
        function callUpdateAction(){
            alert('Working...');
        }
        handleScheduleCallBtn();
        handlenotAnsweredCallBtn();
        handlenotInterestedBtn();
    </script>
    @endpush
</x-Dashboard.Layout.Layout>