@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')}}">
        <style>
            .call-edit-page {
                padding: 24px 0;
            }

            .call-edit-summary,
            .call-edit-panel,
            .call-edit-form-card {
                border: 1px solid #e9ecef !important;
                border-radius: 18px !important;
                box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
                overflow: hidden;
            }

            .call-edit-summary {
                background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
                padding: 24px;
                margin-bottom: 24px;
            }

            .call-edit-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: #1f2937;
                margin-bottom: 8px;
            }

            .call-edit-subtitle {
                color: #6b7280;
                margin-bottom: 0;
            }

            .call-edit-badges {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 16px;
            }

            .call-edit-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 14px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.8);
                color: #334155;
                font-size: 13px;
                font-weight: 600;
            }

            .call-edit-panel {
                background: #fff;
                padding: 24px;
                margin-bottom: 24px;
            }

            .call-edit-panel-header {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                margin-bottom: 20px;
            }

            .call-edit-panel-title {
                font-size: 1.1rem;
                font-weight: 700;
                color: #111827;
                margin-bottom: 4px;
            }

            .call-edit-panel-note {
                color: #6b7280;
                font-size: 0.92rem;
                margin-bottom: 0;
            }

            .call-edit-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
            }

            .call-edit-action-btn {
                min-height: 44px;
                border-radius: 12px;
                padding: 10px 16px;
                font-weight: 600;
                transition: all 0.2s ease;
            }

            .call-edit-action-btn:hover {
                transform: translateY(-1px);
            }

            .call-edit-form-card .card-header {
                background: #fff;
                border-bottom: 1px solid #eef2f7;
                padding: 18px 22px;
            }

            .call-edit-form-card .card-body {
                padding: 22px;
            }

            .call-edit-modal .modal-content {
                border: 0;
                border-radius: 18px;
                overflow: hidden;
                box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
            }

            .call-edit-modal .modal-header {
                padding: 18px 20px;
                border-bottom: 1px solid #eef2f7;
                background: #f8fafc;
            }

            .call-edit-modal .modal-body {
                padding: 20px;
            }

            .call-edit-modal .modal-footer {
                padding: 16px 20px 20px;
                border-top: 1px solid #eef2f7;
            }

            @media (max-width: 768px) {
                .call-edit-summary,
                .call-edit-panel,
                .call-edit-form-card .card-body {
                    padding: 18px;
                }

                .call-edit-actions {
                    width: 100%;
                }

                .call-edit-action-btn {
                    width: 100%;
                    justify-content: center;
                }
            }
        </style>
    @endpush
    <div class="container call-edit-page">
        <div class="row justify-content-center">
            <div class="col-12 col-md-12">
                <div class="call-edit-summary">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                        <div>
                            <div class="call-edit-title">Edit Call</div>
                            <p class="call-edit-subtitle">
                                Update call details and manage the latest outcome from one place.
                            </p>
                        </div>
                        <a href="{{ route('calls.index') }}" class="btn btn-outline-secondary call-edit-action-btn">
                            Back to Calls
                        </a>
                    </div>

                    <div class="call-edit-badges">
                        <span class="call-edit-badge">
                            Subject: {{ $call->subject ?? '—' }}
                        </span>
                        <span class="call-edit-badge">
                            Status: {{ str($call->callStatus?->name ?? 'unknown')->replace('_', ' ')->title() }}
                        </span>
                        <span class="call-edit-badge">
                            Related To: {{ $call->relatedTo?->name ?? '—' }}
                        </span>
                    </div>
                </div>

                <div class="call-edit-panel">
                    <div class="call-edit-panel-header">
                        <div>
                            <div class="call-edit-panel-title">Change Status</div>
                            <p class="call-edit-panel-note">Choose the proper outcome for this call.</p>
                        </div>

                    </div>
                    <div class="call-edit-actions">
                        <button type="button" id="notAnsweredCallBtn"
                            class="btn btn-outline-primary d-flex align-items-center gap-2 call-edit-action-btn">
                            Not answered
                        </button>
                        <form 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-success d-flex align-items-center gap-2 call-edit-action-btn">
                                Interested
                            </button>
                        </form>
                        <button type="button" id="notInterestedBtn"
                            class="btn btn-outline-danger d-flex align-items-center gap-2 call-edit-action-btn">
                            Not Interested
                        </button>
                        <button type="button" id="scheduleCallBtn"
                            class="btn btn-outline-primary d-flex align-items-center gap-2 call-edit-action-btn">
                            Reschedule
                        </button>

                    </div>
                </div>

                <!-- Schedule a call Modal -->
                <div class="modal fade call-edit-modal" id="scheduleModal" tabindex="-1" aria-labelledby="scheduleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form action="{{ route('calls.update.action', $call->id) }}"
                                method="POST">
                                @csrf
                                @method('PUT')
                                <div class="modal-header">
                                    <div class="modal-title" id="scheduleModalLabel">Schedule a Call</div>
                                    <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 call-edit-modal" id="notAnsweredModal" tabindex="-1" aria-labelledby="notAnsweredModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form action="{{ route('calls.update.action', $call->id) }}"
                                method="POST">
                                @csrf
                                @method('PUT')
                                <div class="modal-header">
                                    <div class="modal-title" id="scheduleModalLabel">Time For Call</div>
                                    <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 call-edit-modal" 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">
                                    <div class="modal-title" id="notInterestedModal">Reason for Call</div>
                                    <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 call-edit-form-card">
                    <div class="card-header">
                        <div class="text-lg font-weight-semibold mb-0">Call Details</div>
                    </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="{{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 parseJsonResponse(res, 'lead');
                    },
                    'App\\Models\\Contact': async () => {
                        const res = await fetch(apiRoutes.contact);
                        return await parseJsonResponse(res, 'contact');
                    },
                    'App\\Models\\Product': async () => {
                        const res = await fetch(apiRoutes.deal);
                        return await parseJsonResponse(res, 'product');
                    }
                };

                return map[relatedTo];
            }

            async function parseJsonResponse(response, type) {
                const contentType = response.headers.get('content-type') || '';

                if (!response.ok || !contentType.includes('application/json')) {
                    const bodyPreview = (await response.text()).slice(0, 150);
                    console.error(`Invalid ${type} response`, {
                        status: response.status,
                        bodyPreview,
                    });
                    return {};
                }

                return await response.json();
            }

            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>