@extends('layouts.app')

@section('title', 'المواعيد')

@push('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    /* Polish Select2 to match Bootstrap form-controls. */
    .select2-container .select2-selection--single { height: 38px; padding: 4px 10px; border-color: #e2e8f0; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
    .select2-dropdown { border-color: #e2e8f0; }

    /* Calendar event titles — make them respect mixed-script names by
       letting each <bdi> child determine its own direction. The
       `unicode-bidi: plaintext` is a defense-in-depth fallback for
       browsers/views where eventContent doesn't fully replace the
       default rendering. */
    .fc-event-title, .fc-list-event-title, .fc-event-main { unicode-bidi: plaintext; }
    .appt-event-line { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; line-height: 1.3; }
    .appt-event-line .sep { opacity: .7; }
    .appt-event-line .fc-doctor-tag { opacity: .9; }
    /* Calendar polish — make FullCalendar feel native to our theme. */
    #calendar { min-height: 720px; font-family: Cairo, sans-serif; }
    #calendar .fc-toolbar-title { font-weight: 700; font-size: 1.1rem; }
    #calendar .fc-button-primary {
        background: #fff; color: #475569; border: 1px solid #e2e8f0;
        font-size: .82rem; padding: .35rem .7rem;
    }
    #calendar .fc-button-primary:not(:disabled):hover {
        background: #f1f5f9; color: #0f172a; border-color: #cbd5e1;
    }
    #calendar .fc-button-primary:not(:disabled).fc-button-active,
    #calendar .fc-button-primary:not(:disabled):active {
        background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: none;
    }
    #calendar .fc-event { border-radius: .35rem; padding: 2px 4px; cursor: pointer; }
    .fc-direction-rtl .fc-toolbar { flex-direction: row-reverse; }

    /* Color key card */
    .color-key { font-size: .85rem; }
    .color-key .key-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: .35rem 0; border-bottom: 1px dashed #f1f5f9;
    }
    .color-key .key-row:last-child { border-bottom: 0; }
    .color-key .key-dot { width: 12px; height: 12px; border-radius: 50%; }
</style>
@endpush

@section('content')
<x-clinic-hero
    title="المواعيد"
    subtitle="جدول مواعيد العيادة الكامل بنظرة واحدة"
    icon="ti-calendar-event"
    tone="appointments"
    :stats="[
        ['icon' => 'ti-calendar-due', 'value' => $stats['today'], 'label' => 'اليوم'],
        ['icon' => 'ti-calendar', 'value' => $stats['tomorrow'], 'label' => 'بكرة'],
        ['icon' => 'ti-calendar-week', 'value' => $stats['this_week'], 'label' => 'هذا الأسبوع'],
        ['icon' => 'ti-user-x', 'value' => $stats['no_show_yesterday'], 'label' => 'لم يحضروا أمس'],
    ]"
>
    <x-slot:actions>
        <button class="btn btn-light" onclick="window.AppointmentModal.openNew()">
            <i class="ti ti-plus me-1"></i> موعد جديد
        </button>
    </x-slot:actions>
</x-clinic-hero>

<div class="row row-cards g-3">
    <div class="col-lg-3">
        <div class="card clinic-section">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-filter me-1"></i> تصفية</h3></div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">الطبيب</label>
                    <select id="filterDoctor" class="form-select">
                        <option value="">جميع الأطباء</option>
                        @foreach($doctors as $d)
                            <option value="{{ $d->id }}"
                                    data-name="{{ $d->name }}"
                                    data-specialization="{{ $d->specialization }}">
                                د. {{ $d->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">الحالة</label>
                    <select id="filterStatus" class="form-select">
                        <option value="">جميع الحالات</option>
                        <option value="scheduled">مجدول</option>
                        <option value="confirmed">مؤكد</option>
                        <option value="checked_in">وصل</option>
                        <option value="in_progress">قيد المعاينة</option>
                        <option value="completed">مكتمل</option>
                        <option value="cancelled">ملغي</option>
                        <option value="no_show">لم يحضر</option>
                    </select>
                </div>
                <button class="btn btn-outline-primary w-100" id="reloadCalendar">
                    <i class="ti ti-refresh me-1"></i> إعادة تحميل
                </button>
            </div>
        </div>

        <div class="card clinic-section mt-3 color-key">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-palette me-1"></i> دليل الألوان</h3></div>
            <div class="card-body py-2">
                @foreach([
                    ['#3b82f6', 'مجدول'],
                    ['#06b6d4', 'مؤكد / وصل'],
                    ['#eab308', 'قيد المعاينة'],
                    ['#22c55e', 'مكتمل'],
                    ['#ef4444', 'ملغي'],
                    ['#f97316', 'لم يحضر'],
                ] as [$c, $label])
                    <div class="key-row">
                        <span>{{ $label }}</span>
                        <span class="key-dot" style="background: {{ $c }}"></span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-lg-9">
        <div class="card clinic-section">
            <div class="card-body">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>

@include('appointments._form-modal', ['doctors' => $doctors])
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/ar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/locales/ar.global.min.js"></script>
<script>
let calendar;

// HTML escaper for the eventContent renderer below.
function fcEsc(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
    }[c]));
}

function buildCalendar() {
    const el = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(el, {
        locale: 'ar',
        direction: 'rtl',
        initialView: 'timeGridWeek',
        headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' },
        // Working-hours window from clinic settings (settings page →
        // "بداية ساعات العمل" / "نهاية ساعات العمل"). Lets each clinic
        // collapse the day to the slots they actually book in.
        slotMinTime: @json($workStart),
        slotMaxTime: @json($workEnd),
        // Highlight the working-hours band so empty/closed cells are
        // visually muted. Keeps the same range so the calendar UX
        // "matches" what the receptionist is filtering on.
        businessHours: {
            daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
            startTime: @json($workStart),
            endTime: @json($workEnd),
        },
        nowIndicator: true,
        editable: true,
        selectable: true,
        // Custom rendering: wrap each name segment in <bdi> so mixed
        // Arabic-Latin doctor/patient names ("احمد حمادة Ahmed Hamada")
        // don't get visually shuffled by the bidi algorithm. Plain-text
        // event titles already carry FSI/PDI marks from the server, but
        // the HTML version is more reliable across all FC views.
        eventContent: function (info) {
            const ext = info.event.extendedProps;
            const patient = ext.patient_name || '';
            const doctor = ext.doctor_name || '';
            const time = info.timeText || '';
            // List view shows times separately, so don't double them up.
            const showTime = info.view.type !== 'listWeek' && info.view.type !== 'listDay' && info.view.type !== 'listMonth';

            return {
                html: `
                    <div class="appt-event-line">
                        ${showTime && time ? `<span class="text-mono-en small opacity-75">${fcEsc(time)}</span>` : ''}
                        <bdi><strong>${fcEsc(patient)}</strong></bdi>
                        ${doctor ? `<span class="sep">·</span><bdi class="fc-doctor-tag">د. ${fcEsc(doctor)}</bdi>` : ''}
                    </div>
                `,
            };
        },
        events: (info, success, fail) => {
            $.getJSON(@json(route('appointments.index')), {
                start: info.startStr, end: info.endStr,
                doctor_id: $('#filterDoctor').val(),
                status: $('#filterStatus').val(),
            }).done(success).fail(fail);
        },
        select: info => {
            window.AppointmentModal.openNew({
                date: info.startStr.slice(0, 10),
                start: info.startStr.slice(11, 16),
                end: info.endStr.slice(11, 16),
            });
        },
        eventClick: info => {
            window.AppointmentModal.viewExisting(info.event.id);
        },
        eventDrop: info => {
            const e = info.event;
            $.ajax({
                url: `${APP_BASE_URL}/appointments/${e.id}`,
                method: 'PUT',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    appointment_date: e.startStr.slice(0, 10),
                    start_time: e.startStr.slice(11, 16),
                    end_time: e.endStr.slice(11, 16),
                },
            }).done(() => Notify.success('تم تحديث الموعد.'))
              .fail(xhr => { info.revert(); Notify.error(xhr.responseJSON?.message || 'تعذر التحديث.'); });
        },
    });
    calendar.render();
}

$(function () {
    buildCalendar();

    // Convert the sidebar doctor filter to Select2 too — the same
    // bidi rules that bite the appointment-modal dropdown bite this
    // one when the doctor name mixes Arabic and Latin scripts.
    NamePickers.doctor($('#filterDoctor'));

    $('#filterDoctor, #filterStatus, #reloadCalendar').on('change click', () => calendar.refetchEvents());
});
</script>
@endpush