@extends('layouts.app')

@section('title', __('menu.book_appointment'))

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .ui-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(2px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
    }

</style>
@endpush

@section('content')
<div class="row row-deck row-cards" id="appointment_book_card_loader">
    <div class="col-12">
        <div class="card">

            <div class="card-header">
                <h3 class="card-title">{{ __('menu.book_appointment') }}</h3>
                <div class="card-actions">
                    <ol class="breadcrumb breadcrumb-arrows" id="bookingBreadcrumb">
                        <li class="breadcrumb-item" data-step="saint">
                        <a href="javascript:void(0)">{{ __('common.select') }} {{ __('common.saint') }}</a>
                        </li>
                        <li class="breadcrumb-item" data-step="devotee">
                        <a href="javascript:void(0)">{{ __('common.select') }} {{ __('menu.devotee') }}</a>
                        </li>
                        <li class="breadcrumb-item" data-step="date">
                        <a href="javascript:void(0)">{{ __('common.select') }} {{ __('common.date') }}</a>
                        </li>
                        <li class="breadcrumb-item" data-step="slot">
                        <a href="javascript:void(0)">{{ __('common.select') }} {{ __('common.slot') }}</a>
                        </li>
                    </ol>
                </div>
            </div>

            <div class="card-body">

                {{-- Selected Saint & Devotee --}}
                <div class="mb-4">
                    <div class="row">
                        <div class="col-md-6">
                            @if ($role == 3)
                                {{-- Saint logged in --}}
                                <input type="hidden"
                                    id="booking_saint_id"
                                    name="saint_id"
                                    value="{{ auth()->user()->id }}">
                            @else
                                <label class="form-label">
                                    {{ __('menu.saints') }} <span class="text-danger">*</span>
                                </label>
                                <select id="booking_saint_id" name="saint_id" class="form-select"></select>
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if ($role == 2)
                                {{-- Devotee logged in --}}
                                <input type="hidden" id="booking_devotee_id" name="devotee_id" value="{{ auth()->user()->devotee_id }}">
                            @else
                                <label class="form-label">
                                    {{ __('menu.devotee') }} <span class="text-danger">*</span>
                                </label>
                                <select id="booking_devotee_id"
                                        name="devotee_id"
                                        class="form-select"></select>

                                <div id="devotee_info" class="text-muted small mt-1">
                                    <span>
                                        {{ __('devotee.gotra') }}:
                                        <span id="devotee_gotra" class="text-info">—</span>
                                    </span>
                                    <span class="ms-2">
                                        {{ __('devotee.rashi') }}:
                                        <span id="devotee_rashi" class="text-info">—</span>
                                    </span>
                                    <span class="ms-2">
                                        {{ __('menu.nakshatras') }}:
                                        <span id="devotee_nakshatra" class="text-info">—</span>
                                    </span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Calendar + Slots --}}
                <div class="row">
                    {{-- Calendar --}}
                    <div class="col-md-6">
                        <div class="card card-body">
                            <h4 class="mb-2">{{ __('common.choose_date') }}</h4>
                            <div id="bookingCalendar"></div>
                        </div>
                    </div>

                    {{-- Slot List / Action Panel --}}
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="mb-2">{{ __('common.available_slots') }}</h4>
                                <div class="card-actions">
                                    <div id="booking_selected_date"></div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="slotContainer" class="overflow-auto" style="max-height: 600px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card" id="existingAppointmentsCard">
                            <div class="card-header">
                                <div class="">
                                    <h4 class="mb-2 text-primary">
                                        {{ __('common.my_appointments') }}
                                    </h4>
                                    <p class="card-subtitle">{{ __('common.irrespective_of_devotee') }}</p>
                                </div>
                            </div>
                            <div class=" card-body">
                                <div id="existingAppointmentsList" class="overflow-auto" style="max-height: 600px"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

{{-- Slot Template --}}
<template id="slotTemplate">
    <button type="button" class="btn btn-outline-primary w-100 mb-2 slot-btn">
        <span class="slot-time"></span>
    </button>
</template>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="{{ asset('dist/js/fullcalendar.js') }}"></script>
<script>
    
    window.bookingState = {
        saintId: null,
        devoteeId: null,
        date: null,
        mode: null,
         // VIP
        start: null,
        end: null,

        // General
        memberCount: null,

        // Other
        otherPurpose: null,
        allowedWindows : []
    };

    window.saintTimePickers = {
        from: null,
        to: null
    };

    let exceptions = [];
    let weeklyAvailability = [];

    window.i18n = {

        common: {
            yes: "{{ __('common.yes') }}",
            no: "{{ __('common.no') }}",
            ok: "{{ __('common.ok') }}",
            date: "{{ __('common.date') }}",
            time: "{{ __('common.time') }}",
            fromTime: "{{ __('common.from_time') }}",
            toTime: "{{ __('common.to_time') }}",
            cancel: "{{ __('actions.cancel') }}",
            no_data: "{{ __('common.no_availability') }}",
        },

        appointment: {

            selectSaint: "{{ __('common.select') }}"+' '+"{{ __('common.saint') }}",
            selectDevotee: "{{ __('common.select') }}"+' '+"{{ __('menu.devotee') }}",
            selectDate: "{{ __('common.select') }}"+' '+"{{ __('common.date') }}",
            bookConfirm: "{{ __('common.book_confirm') }}",
            
            // Slot / Hold
            memberCount: "{{ __('common.member_count') }}",
            purpose: "{{ __('common.purpose') }}",
            memberCountRequired: "{{ __('common.member_count_required') }}",
            purposeRequired: "{{ __('common.purpose_required') }}",

            // Cancel
            cancelTitle: "{{ __('common.cancel_title') }}",
            cancelConfirm: "{{ __('common.cancel_confirm') }}",
            saintOnLeave: "{{ __('common.saint_on_leave') }}",
            noAvailability: "{{ __('common.no_availability') }}",
            selectSlot: "{{ __('common.select_slot') }}",
            noSlotsAvailable: "{{ __('common.no_slots_available') }}",
            booked: "{{ __('common.booked') }}",
            bookNow: "{{ __('common.book_now') }}",
            full: "{{ __('common.full') }}",
            available: "{{ __('common.available') }}",
            invalidMemberCount: "{{ __('common.invalid_member_count') }}",
            timeRequired: "{{ __('common.time_required') }}",
            invalidTimeRange: "{{ __('common.invalid_time_range') }}",
            noPreBookingAllowed: "{{ __('common.no_pre_booking') }}",
        }

    };

    let bookingCalendar = null;

    window.SLOT_CATEGORIES = @json($slotCategories);

    function initSaintSelect(selectedId = null) {

        const el = document.getElementById('booking_saint_id');
        if (!el || el.type === 'hidden') return null;

        if (el.tomselect) {
            el.tomselect.destroy();
        }

        saintSelect = new TomSelect(el, {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 1,
            preload: true,
            create: false,

            items: selectedId ? [selectedId] : [],

            load(query, callback) {
                fetch(`{{ route('saints.search') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res))
                    .catch(() => callback());
            },

            onItemAdd(value) {
                const option = this.options[value];
                if (!option) return;
                onSaintSelected(value);
                updateBookingBreadcrumb('saint');
                //loadExistingAppointments();
            },
            onItemRemove(){
                disableBookingBreadcrumb('saint');
            }
        });

        return saintSelect;
    }

    function initDevoteeSelect(selectedId = null) {

        const el = document.getElementById('booking_devotee_id');
        if (!el || el.type === 'hidden') return null;

        if (el.tomselect) {
            el.tomselect.destroy();
        }

        devoteeSelect = new TomSelect(el, {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 1,
            preload: true,
            create: false,

            items: selectedId ? [selectedId] : [],

            load(query, callback) {
                fetch(`{{ route('devotees.search') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res))
                    .catch(() => callback());
            },

            onItemAdd(value) {
                const option = this.options[value];
                if (!option) return;

                $('#devotee_gotra').text(option.gotra ?? '—');
                $('#devotee_rashi').text(option.rashi ?? '—');
                $('#devotee_nakshatra').text(option.nakshatra ?? '—');
                //loadExistingAppointments();
                window.bookingState.devoteeId = value;
                updateBookingBreadcrumb('devotee');
            },
            onItemRemove(){
                disableBookingBreadcrumb('devotee');
                $('#devotee_gotra').text('—');
                $('#devotee_rashi').text('—');
                $('#devotee_nakshatra').text('—');
            }
        });

        return devoteeSelect;
    }

    function initBookingCalendar() {

        const today = new Date();
        today.setHours(0, 0, 0, 0);

        bookingCalendar = new FullCalendar.Calendar(
            document.getElementById('bookingCalendar'),
            {
                initialView: 'dayGridMonth',
                unselectAuto:false,
                selectable: true,
                validRange: {
                    start: today
                },

                /**
                 * Calendar fetches availability dynamically
                 * ONLY when saintId exists
                 */
                events: function (fetchInfo, successCallback, failureCallback) {

                    const saintId = window.bookingState?.saintId;

                    // 🛑 No saint selected → show empty calendar
                    if (!saintId) {
                        successCallback([]);
                        return;
                    }

                    ajaxRequest({
                        url: `/appointments/saint/${saintId}`,
                        method: "GET",
                        data: {
                            start: fetchInfo.startStr,
                            end: fetchInfo.endStr
                        }
                    })
                    .then(res => {

                        const events = [];

                        weeklyAvailability = res.data?.weeklyAvailability || [];
                        exceptions = res.data?.exceptions || [];

                        // 🔹 Extract unique weekday indexes
                        const availableDays = [
                            ...new Set(weeklyAvailability.map(w => w.day))
                        ];

                        window.availableDays = availableDays;

                        // 🔴 Disable weekdays with NO availability
                        for (let i = 0; i <= 6; i++) {
                            if (!availableDays.includes(i)) {
                                events.push({
                                    daysOfWeek: [i],
                                    display: 'background',
                                    backgroundColor: '#dee2e6',
                                    extendedProps: {
                                        isUnavailableWeekday: true,
                                        dayName: window.WEEK_DAYS[i]
                                    }
                                });
                            }
                        }

                        // 🔴 Exceptions override weekly rules
                        exceptions.forEach(ex => {

                            if (ex.type === 'leave') {
                                events.push({
                                    title: ucfirst(ex.type),
                                    start: ex.date,
                                    allDay: true,
                                    backgroundColor: '#d63939',
                                    extendedProps: { isLeave: true }
                                });
                            }

                            if (ex.type === 'partial') {
                                events.push({
                                    title: ucfirst(ex.type),
                                    start: `${ex.date}T${ex.start}`,
                                    end: `${ex.date}T${ex.end}`,
                                    color: '#f76707',           // 👈 NOT backgroundColor
                                    textColor: '#f76707',
                                    extendedProps: { isPartial: true }
                                });

                            }
                        });

                        successCallback(events);
                    })
                    .catch(() => {
                        successCallback([]); // fail-safe
                    });
                },
                selectAllow: function(selectInfo) {
                    const clickedDate = selectInfo.startStr;
                    const dayIndex = selectInfo.start.getDay();

                    // ❌ Block if not in available days
                    if (!window.availableDays.includes(dayIndex)) {
                        loadBookedAppointments();
                        disableBookingBreadcrumb('date');
                        window.bookingState.date = null;
                        window.bookingState.mode = null;
                        $('#slotContainer').empty();
                        return false;
                    }

                    // ❌ Block if it's a leave day
                    const hasLeave = bookingCalendar.getEvents().some(e =>
                        e.extendedProps?.isLeave && e.startStr === clickedDate
                    );

                    if(hasLeave){
                        loadBookedAppointments();
                        window.bookingState.date = null;
                        window.bookingState.mode = null;
                        disableBookingBreadcrumb('date');
                        $('#slotContainer').empty();
                        return false;
                    } // If hasLeave is true, returns false (blocks selection)
                    return true;
                },
                /**
                 * Date click allowed only when saint is selected
                 */
                dateClick(info) {
                    handleDateSelection(info);
                }
            }
        );

        bookingCalendar.render();
    }

    function onSaintSelected(saintId) {

        // Update global state
        window.bookingState.saintId = saintId;
        window.bookingState.date = null;
        window.bookingState.mode = null;

        // Reset dependent UI
        $('#slotContainer').empty();
        $('#appointmentModeWrapper').remove();
    
        if (bookingCalendar) {
            bookingCalendar.refetchEvents();
        }else{
            initBookingCalendar();
        }
    }

    function handleDateSelection(info) {

        $('#booking_selected_date').html(formatSelectedDate(info.date));

        // 🔒 Saint must be selected
        if (!window.bookingState.saintId) {
            showAlert('error',window.i18n.appointment.selectSaint);
            return;
        }

        // 🔒 Devotee must be selected
        /*if (!window.bookingState.devoteeId) {
            showAlert('error',window.i18n.appointment.selectDevotee);
            return;
        }*/

        const clickedDate = info.dateStr;        // YYYY-MM-DD
        const clickedTime = info.date;            // JS Date
        const dayIndex = clickedTime.getDay();    // 0–6

        // ❌ Weekly unavailable day
        if (!window.availableDays.includes(dayIndex)) {
            return;
        }

        // ❌ Leave day
        const hasLeave = bookingCalendar.getEvents().some(e =>
            e.extendedProps?.isLeave &&
            e.startStr === clickedDate
        );

        if (hasLeave) {
            return;
        }

        const isPartialBlocked = bookingCalendar.getEvents().some(e =>
            e.extendedProps?.isPartial &&
            clickedTime >= e.start &&
            clickedTime < e.end
        );

        if (isPartialBlocked) {
            return;
        }

        // ✅ Now safe to proceed
        window.bookingState.date = clickedDate;
        console.log(clickedDate);
        window.bookingState.mode = null;
        updateBookingBreadcrumb('date');

        // Reset UI
        $('#slotContainer').empty();

        // Remove previous mode selector
        $('#appointmentModeWrapper').remove();

        // Inject mode selector
        renderAppointmentModeSelector();

        // Load booked appointments (read-only)
        loadBookedAppointments(
            window.bookingState.saintId,
            window.bookingState.date
        );
    }

    function buildAllowedWindowsForDate(date) {
        const day = new Date(date).getDay();

        const dayAvailabilities = weeklyAvailability.filter(
            a => a.day === day && a.is_active !== false
        );

        if (!dayAvailabilities.length) {
            window.bookingState.allowedWindows = [];
            return;
        }

        let windows = dayAvailabilities.map(a => ({
            startMin: timeToMinutes(a.start),
            endMin: timeToMinutes(a.end),
            categoryId: Number(a.slotCategoryId),
            maxAppointments: Number(a.maxAppointments ?? 0)
        }));

        // 2️⃣ Apply exceptions (ALL categories)
        exceptions.forEach(ex => {
            if (ex.date !== date) return;

            if (ex.type === 'leave') {
                windows = [];
                return;
            }

            if (ex.type === 'partial') {
                const availStart = timeToMinutes(ex.start);
                const availEnd   = timeToMinutes(ex.end);

                windows = windows
                    .map(w => {
                        const start = Math.max(w.startMin, availStart);
                        const end   = Math.min(w.endMin, availEnd);

                        // no overlap → discard
                        if (start >= end) return null;

                        return {
                            ...w,
                            startMin: start,
                            endMin: end
                        };
                    })
                    .filter(Boolean);
            }
        });

        // 3️⃣ Remove booked appointments ONLY for time-exclusive categories
        bookedAppointments.forEach(b => {
            if (b.date !== date) return;

            const bStart = timeToMinutes(b.start);
            const bEnd   = timeToMinutes(b.end);

            windows = windows.flatMap(w => {

                // 🟢 GENERAL WINDOW (STATIC)
                if (w.categoryId === 1) {

                    // Ignore GENERAL bookings (capacity-based)
                    if (b.slot_category_id === 1) {
                        return [w];
                    }

                    // ❌ Any overlap with NON-GENERAL booking blocks ENTIRE window
                    const overlaps =
                        bStart < w.endMin && bEnd > w.startMin;

                    if (overlaps) {
                        return []; // 🔥 drop whole window
                    }

                    return [w];
                }

                // 🔵 NON-GENERAL WINDOWS (time-exclusive, can be split)
                if (bEnd <= w.startMin || bStart >= w.endMin) {
                    return [w];
                }

                const parts = [];
                if (bStart > w.startMin) {
                    parts.push({ ...w, endMin: bStart });
                }
                if (bEnd < w.endMin) {
                    parts.push({ ...w, startMin: bEnd });
                }
                return parts;
            });
        });
        window.bookingState.allowedWindows = windows;
    }

    function submitBooking() {
        updateBookingBreadcrumb('slot');
        const state = window.bookingState;

        if (!window.bookingState.devoteeId) {
            showAlert('error',window.i18n.appointment.selectDevotee);
            return;
        }

        // 🧾 Build confirmation HTML
        let confirmHtml = `
            <div class="mb-2">
                <strong>${window.i18n.common.date}:</strong>
                ${state.date}
            </div>

            <div class="mb-2">
                <strong>${window.i18n.common.time}:</strong>
                ${state.start} – ${state.end}
            </div>
        `;

        // 🟢 General → members
        if (Number(state.mode) === 1 && state.memberCount) {
            confirmHtml += `
                <div class="mb-2">
                    <strong>${window.i18n.appointment.memberCount}:</strong>
                    ${state.memberCount}
                </div>
            `;
        }

        // 🟣 Other → purpose
        if (state.otherPurpose) {
            confirmHtml += `
                <div class="mb-2">
                    <strong>${window.i18n.appointment.purpose}:</strong>
                    ${state.otherPurpose}
                </div>
            `;
        };

        $.confirm({
            title:window.i18n.appointment.bookConfirm,
            content: confirmHtml,
            type: 'blue',
            buttons: {
                no: {
                    text: window.i18n.common.no,
                    btnClass: 'btn-secondary'
                },
                yes: {
                    text: window.i18n.common.yes,
                    btnClass: 'btn-primary',
                    action: function () {

                        const $loaderTarget = $('#appointment_book_card_loader');
                        const payload = { ...state };

                        lockArea($loaderTarget);

                        ajaxRequest({
                            url: "{{ route('book.saint.bookings') }}",
                            method: "POST",
                            data: payload,
                            loaderTarget: "#appointment_book_card_loader"
                        })
                        .then(res => {
                            if (res.status) {
                                showAlert('success',res.message);
                                resetBookingUI();
                            } else {
                                showAlert('error',res.message);
                            }
                        })
                        .finally(() => {
                            unlockArea($loaderTarget);
                        });
                    }
                }
            }
        });
    }

    function lockArea($target) {

        if ($target.find('.ui-backdrop').length) return;

        $target.css('position', 'relative');

        const backdrop = `
            <div class="ui-backdrop">
                <div class="spinner-border text-primary"></div>
            </div>
        `;

        $target.append(backdrop);
    }

    function unlockArea($target) {
        $target.find('.ui-backdrop').remove();
    }

    function groupGeneralBySlots(appointments) {
        const grouped = {};

        appointments.forEach(app => {

            // Only GENERAL case
            if (resolveAppointmentType(app) !== 'general') {
                return;
            }

            const slotKey = `${app.start}-${app.end}`; // 07:00-11:00

            if (!grouped[slotKey]) {
                grouped[slotKey] = {
                    start: app.start,
                    end: app.end,
                    max: app.max_allowed ?? 50, // fallback
                    items: []
                };
            }

            grouped[slotKey].items.push(app);
        });

        return grouped;
    }

    function loadBookedAppointments(saintId, date) {

        const container = document.getElementById('existingAppointmentsList');
        container.innerHTML = `<div class="text-muted small">${window.i18n.common.loading ?? 'Loading...'}</div>`;

        if (!saintId || !date) {
            container.innerHTML = `<div class="text-muted small">${window.i18n.common.no_data}</div>`;
            return;
        }

        ajaxRequest({
            url: `/appointments/booked`, // 🔧 route later
            method: "GET",
            data: {
                saint_id: saintId,
                date: date,
                devotee_id: window.bookingState.devoteeId,
            },
            loaderTarget:'#existingAppointmentsCard',
        })
        .then(res => {

            const appointments = res.data || [];

            window.bookedAppointments = appointments;

            buildAllowedWindowsForDate(window.bookingState.date);

            if (!appointments.length) {
                container.innerHTML = `<div class="text-muted small">${window.i18n.common.no_data}</div>`;
                return;
            }

            // 🔹 Group by type
            const grouped = {};

            appointments.forEach(app => {
                const key = resolveAppointmentType(app);
                if (!grouped[key]) grouped[key] = [];
                grouped[key].push(app);
            });

            //const generalApps = appointments.filter(app => app.slot_category_id === 1);

            // 🔹 NEW: slot grouping only for GENERAL
            //if (generalApps.length) {
                //console.log("fffffffffff");
                //grouped.general_slots = groupGeneralBySlots(generalApps);
            //}
            console.log(grouped);
            container.innerHTML = buildBookedAccordion(grouped);
        })
        .catch(() => {
            container.innerHTML = '';
        });
    }

    function resolveAppointmentType(app) {
        if (app.slot_category_id === null) {
            return 'other';
        }
        return String(app.slot_category_id);
    }

    function buildBookedAccordion(grouped) {

        let html = `<div class="accordion" id="bookedAccordion">`;
        let index = 0;

        Object.keys(grouped).forEach(key => {
                console.log(key);
            const apps = grouped[key];
            const first = apps[0];

            const title =
                key === 'other'
                    ? 'Other'
                    : first.slot_category_name;

            const collapseId = `bookedCollapse${index}`;
            const headingId = `bookedHeading${index}`;

            html += `
                <div class="accordion-item">
                    <div class="accordion-header" id="${headingId}">
                        <button
                            class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#${collapseId}"
                        >
                            ${title}
                            <span class="badge bg-primary text-primary-fg ms-2">
                                ${apps.length}
                            </span>
                        </button>
                    </div>

                    <div
                        id="${collapseId}"
                        class="accordion-collapse collapse"
                        data-bs-parent="#bookedAccordion"
                    >
                        <div class="accordion-body">
                            ${apps.map(buildBookedCard).join('')}
                        </div>
                    </div>
                </div>
            `;

            index++;
        });

        html += `</div>`;
        return html;
    }

    function buildBookedCard(app) {

        let bodyInfo = '';

        // Devotee
        if (app.devotee_name) {
            bodyInfo += `
                <div class="text-muted small mb-1">
                    <i class="fa fa-user me-1"></i>
                    ${app.devotee_name}
                </div>
            `;
        }

        // General → members
        if (app.member_count) {
            bodyInfo += `
                <div class="text-muted small mb-1">
                    <i class="fa fa-users me-1"></i>
                    ${window.i18n.appointment.memberCount}:
                    <strong>${app.member_count}</strong>
                </div>
            `;
        }

        // Other → purpose
        if (app.other_purpose) {
            bodyInfo += `
                <div class="text-muted small">
                    <i class="fa fa-sticky-note me-1"></i>
                    ${app.other_purpose}
                </div>
            `;
        }

        // 🔴 Header action (cancel)
        const headerAction = app.can_cancel ? `
            <button
                type="button"
                class="btn btn-sm btn-outline-danger"
                title="${window.i18n.common.cancel}"
                onclick="confirmCancelAppointment(${app.id})"
                style="cursor:pointer"
            >
                <i class="fa fa-times"></i>
            </button>
        ` : '';

        return `
            <div class="card card-sm mb-2 shadow-sm">

                <!-- HEADER -->
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fa fa-clock-o me-1 text-muted"></i>
                        ${app.start} – ${app.end}
                    </h3>

                    <div class="card-actions">
                        ${headerAction}
                    </div>
                </div>

                <!-- BODY -->
                <div class="card-body py-2">
                    <div class="text-muted small mb-2">
                        <i class="fa fa-calendar me-1"></i>
                        ${app.date}
                    </div>

                    ${bodyInfo}
                </div>

                <!-- FOOTER -->
                <div class="card-footer p-2">
                    <button
                        type="button"
                        class="btn btn-sm btn-teal w-100"
                    >
                        <i class="fa fa-ticket me-1"></i>
                        ${app.token_number}
                    </button>
                </div>

            </div>
        `;
    }

    function confirmCancelAppointment(appointmentId) {

        const $loaderTarget = $('#appointment_book_card_loader');
        const cancelUrl = "{{ url('appointments') }}/" + appointmentId + "/cancel";
        $.confirm({
            title: window.i18n.appointment.cancelTitle,
            content: window.i18n.appointment.cancelConfirm,
            type: 'red',
            buttons: {
                confirm: {
                    text: window.i18n.common.yesCancel,
                    btnClass: 'btn-danger',
                    action: function () {

                        // 🔒 Lock UI
                        lockArea($loaderTarget);

                        ajaxRequest({
                            url: cancelUrl,
                            method: "POST",
                            loaderTarget: "#appointment_book_card_loader"
                        })
                        .then(res => {
                            if (res.status) {
                                showAlert('success', res.message);
                                loadBookedAppointments(
                                    window.bookingState.saintId,
                                    window.bookingState.date
                                ); // refresh list
                            } else {
                                showAlert('error', res.message);
                            }
                        })
                        .finally(() => {
                            // 🔓 Unlock UI
                            unlockArea($loaderTarget);
                        });
                    }
                },
                cancel: {
                    text: window.i18n.common.no,
                    btnClass: 'btn-secondary'
                }
            }
        });
    }

    function renderGeneralWindowsForDate(date) {
        const container = document.getElementById('slotContainer');
        container.innerHTML = '';

        // -----------------------------
        // 1️⃣ Date must be today
        // -----------------------------
        const today = new Date().toISOString().split('T')[0];

        if (date !== today) {
            container.innerHTML = `
                <div class="alert alert-danger">
                    ${window.i18n.appointment.noPreBookingAllowed}
                </div>`;
            return;
        }

        // -----------------------------
        // 2️⃣ Current time in minutes
        // -----------------------------
        const now = new Date();
        const nowMinutes = now.getHours() * 60 + now.getMinutes();

        const BUFFER_MINUTES = 1; // 👈 safety gap (can be 2 if needed)

        // -----------------------------
        // 3️⃣ Filter eligible windows
        // -----------------------------
        const windows = window.bookingState.allowedWindows.filter(w => {
            if (Number(w.categoryId) !== 1) return false;

            const windowStart = w.startMin;
            const windowEnd   = w.endMin - BUFFER_MINUTES;

            // ❌ window completely expired
            if (nowMinutes >= windowEnd) {
                return false;
            }

            // ✅ current time inside window OR before window
            return nowMinutes < windowEnd;
        });

        // -----------------------------
        // 4️⃣ No window available today
        // -----------------------------
        if (!windows.length) {
            container.innerHTML = `
                <div class="alert alert-warning">
                    ${window.i18n.appointment.noAvailability}
                </div>`;
            return;
        }

        // -----------------------------
        // 5️⃣ Render windows
        // -----------------------------
        windows.forEach(win => {

            const start = minutesToTime(win.startMin);
            const end   = minutesToTime(win.endMin);

            const bookedCount = bookedAppointments.filter(b => {
                const bStart = timeToMinutes(b.start);
                const bEnd   = timeToMinutes(b.end);

                return (
                    b.slot_category_id === 1 &&
                    bStart >= win.startMin &&
                    bEnd   <= win.endMin
                );
            }).length;

            const max = Number(win.maxAppointments ?? 0);
            const isFull = max > 0 && bookedCount >= max;

            const div = document.createElement('div');
            div.className = `
                general-window
                border rounded p-3 mb-3
                ${isFull ? 'bg-light text-muted' : 'bg-white'}
            `;

            div.innerHTML = `
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div>
                        <strong>${start} – ${end}</strong><br>
                        <small class="text-muted">
                            ${bookedCount} / ${max}
                            ${window.i18n.appointment.booked}
                        </small>
                    </div>

                    ${
                        isFull
                            ? `<span class="badge bg-danger text-danger-fg">
                                ${window.i18n.appointment.full}
                            </span>`
                            : `<span class="badge bg-green text-green-fg">
                                ${window.i18n.appointment.available}
                            </span>`
                    }
                </div>

                ${!isFull ? renderMemberCountField() : ''}
            `;

            if (!isFull) {
                const bookBtn = div.querySelector('.book-slot-btn');
                const memberInput = div.querySelector('.member-count-input');

                bookBtn.addEventListener('click', () => {
                    const members = Number(memberInput.value);

                    if (!members || members <= 0) {
                        showAlert('error', window.i18n.appointment.invalidMemberCount);
                        memberInput.focus();
                        return;
                    }

                    window.bookingState.start = start;
                    window.bookingState.end = end;
                    window.bookingState.memberCount = members;
                    window.bookingState.otherPurpose = null;

                    submitBooking();
                });
            }

            container.appendChild(div);
        });
    }


    function renderAppointmentModeSelector() {

        $('#appointmentModeWrapper').remove(); // safety

        let html = `
            <div id="appointmentModeWrapper" class="mb-3">
                <label class="form-label">
                    ${window.i18n.common.select ?? 'Select Type'}
                </label>

                <div class="d-flex flex-wrap gap-3">
        `;

        SLOT_CATEGORIES.forEach(cat => {
            if (!cat.id) return;

            html += `
                <div class="form-check form-check-inline m-0">
                    <input
                        class="form-check-input"
                        type="radio"
                        name="appointment_mode"
                        value="${cat.id}"
                        id="appointment_mode_${cat.id}"
                    >
                    <label class="form-check-label small" for="appointment_mode_${cat.id}">
                        ${cat.name}
                    </label>
                </div>
            `;
        });

        html += `
                </div>
            </div>
        `;

        $('#slotContainer').before(html);
    }

    function resetSlotUI() {
        $('#slotContainer').empty();
        window.bookingState.start = null;
        window.bookingState.end   = null;
    }

    const timeToMinutes = time => {
        const [h, m] = time.split(':').map(Number);
        return h * 60 + m;
    };

    // Helper: Format minutes → HH:MM
    const minutesToTime = mins => {
        const h = String(Math.floor(mins / 60)).padStart(2, '0');
        const m = String(mins % 60).padStart(2, '0');
        return `${h}:${m}`;
    }; 

    function renderSlotsForDate(date) {

        const container = document.getElementById('slotContainer');
        container.innerHTML = '';

        // -----------------------------
        // 1️⃣ Full-day leave
        // -----------------------------
        if (exceptions.some(e => e.date === date && e.type === 'leave')) {
            return;
        }

        const [y, m, d] = date.split('-');
        const day = new Date(y, m - 1, d).getDay();

        const modeCategoryId = window.bookingState.mode;
        const avail = weeklyAvailability.find(
            a =>
                Number(a.day) === Number(day) &&
                Number(a.slotCategoryId) === Number(modeCategoryId)
        );

        if (!avail) return;

        const slotDuration = Number(avail.slotDuration);
        if (!slotDuration || slotDuration <= 0) {
            console.error('Invalid slotDuration:', avail.slotDuration);
            return;
        }

        let startMin = timeToMinutes(avail.start);
        let endMin   = timeToMinutes(avail.end);

        // -----------------------------
        // 2️⃣ Partial availability
        // -----------------------------
        const partial = exceptions.find(
            e => e.date === date && e.type === 'partial'
        );

        if (partial) {
            startMin = Math.max(startMin, timeToMinutes(partial.start));
            endMin   = Math.min(endMin, timeToMinutes(partial.end));
        }

        if (startMin >= endMin) return;

        // -----------------------------
        // 3️⃣ Today-time logic
        // -----------------------------
        const today = new Date().toISOString().split('T')[0];
        const isToday = date === today;

        const now = new Date();
        const nowMinutes = now.getHours() * 60 + now.getMinutes();

        const BUFFER_MINUTES = 1; // 👈 safety gap

        const template = document.getElementById('slotTemplate');

        let slotFound = false;
        let iterations = 0;
        const MAX_ITERATIONS = 500;

        // -----------------------------
        // 4️⃣ Generate slots
        // -----------------------------
        for (let m = startMin; m + slotDuration <= endMin; m += slotDuration) {

            if (++iterations > MAX_ITERATIONS) {
                console.error('Slot generation aborted (bad config)');
                break;
            }

            const slotStartMin = m;
            const slotEndMin   = m + slotDuration;

            // 🚫 Skip past slots ONLY for today
            if (isToday && nowMinutes >= (slotEndMin - BUFFER_MINUTES)) {
                continue;
            }

            const slotStart = minutesToTime(slotStartMin);
            const slotEnd   = minutesToTime(slotEndMin);

            const isBooked = bookedAppointments.some(b =>
                b.date === date &&
                timeToMinutes(b.start) < slotEndMin &&
                timeToMinutes(b.end)   > slotStartMin
            );

            slotFound = true;

            const clone = template.content.cloneNode(true);
            const btn = clone.querySelector('.slot-btn');

            btn.querySelector('.slot-time').textContent =
                `${slotStart} - ${slotEnd}`;

            if (isBooked) {
                btn.classList.add('slot-booked');
                btn.disabled = true;
            } else {
                btn.onclick = () => onSlotClicked(slotStart, slotEnd);
            }

            container.appendChild(clone);
        }

        if (!slotFound) {
            // optional: show "no slots available"
        }
    }



    function onSlotClicked(slotStart,slotEnd){
        window.bookingState.start = slotStart;
        window.bookingState.end = slotEnd;
        window.bookingState.memberCount = null;
        window.bookingState.otherPurpose = null;
        submitBooking();
    }
    
    $(document).on('change', 'input[name="appointment_mode"]', function () {

        window.bookingState.mode = this.value;

        resetSlotUI();

        switch (this.value) {

            case '2':
                renderSlotsForDate(window.bookingState.date);
                break;

            case '1':
                renderGeneralWindowsForDate(window.bookingState.date);
                break;

            case 'other':
                renderTimeRangeForm({ withPurpose: true });
                break;
        }
    });

    
    function renderTimeRangeForm({ withMembers = false, withPurpose = false }) {

        const container = document.getElementById('slotContainer');

        container.innerHTML = `
            <div class="row g-3">

                <div class="col-md-6">
                    <label class="form-label">${window.i18n.common.fromTime}</label>
                    <input type="text" class="form-control" id="rangeStart">
                </div>

                <div class="col-md-6">
                    <label class="form-label">${window.i18n.common.toTime}</label>
                    <input type="text" class="form-control" id="rangeEnd">
                </div>

                ${withPurpose ? renderPurposeField() : ''}

                <div class="col-12 d-flex justify-content-end mt-3">
                    <button
                        type="button"
                        id="confirmBookingBtn"
                        class="btn btn-primary w-100"
                    >
                        ${window.i18n.appointment.bookNow}
                    </button>
                </div>
            </div>
        `;

        initSaintTimePickers();
    }

    $(document).on('click', '#confirmBookingBtn', function () {

        const btn = this;
        const start = document.getElementById('rangeStart')?.value;
        const end   = document.getElementById('rangeEnd')?.value;
        const otherPurpose   = document.getElementById('otherPurpose')?.value;

        // --- BASIC VALIDATION ---
        if (!start || !end) {
            showAlert('error',window.i18n.appointment.timeRequired);
            return;
        }

        if (timeToMinutes(start) >= timeToMinutes(end)) {
            showAlert('error',window.i18n.appointment.invalidTimeRange);
            return;
        }
        
        if(!otherPurpose){
            showAlert('error',window.i18n.appointment.purposeRequired);
            return;
        }

        window.bookingState.start = start;
        window.bookingState.end   = end;
        window.bookingState.otherPurpose = otherPurpose;
        window.bookingState.memberCount = null;
        submitBooking();
    });

    function getMinTimeForToday(bufferMinutes = 5) {
        const now = new Date();
        now.setMinutes(now.getMinutes() + bufferMinutes);

        const hh = String(now.getHours()).padStart(2, '0');
        const mm = String(now.getMinutes()).padStart(2, '0');

        return `${hh}:${mm}`;
    }


    function initSaintTimePickers() {

        const fromInput = document.querySelector('#rangeStart');
        const toInput   = document.querySelector('#rangeEnd');

        if (!fromInput || !toInput) return;

        // 🔁 Destroy if already initialized
        fromInput._flatpickr?.destroy();
        toInput._flatpickr?.destroy();

        const selectedDate = window.bookingState.date;
        const today = new Date().toISOString().split('T')[0];
        const isToday = selectedDate === today;

        const minTime = isToday ? getMinTimeForToday(5) : null;

        const options = {
            enableTime: true,
            noCalendar: true,
            dateFormat: 'H:i',
            time_24hr: true,
            allowInput: true,
            minTime: minTime // 🔥 key line
        };

        flatpickr(fromInput, {
            ...options,
            onChange: (_, time) => {
                window.bookingState.start = time;

                // 🔁 ensure end time can't be before start
                if (toInput._flatpickr) {
                    toInput._flatpickr.set('minTime', time);
                }
            }
        });

        flatpickr(toInput, {
            ...options,
            onChange: (_, time) => {
                window.bookingState.end = time;
            }
        });
    }

    
    function renderMemberCountField() {
        return `
            <div class="mt-3">
                <label class="form-label mb-1">
                    ${window.i18n.appointment.memberCount}
                </label>

                <div class="input-group">
                    <input
                        type="number"
                        min="1"
                        class="form-control member-count-input"
                    >

                    <button
                        class="btn btn-primary book-slot-btn"
                        type="button"
                    >
                        ${window.i18n.appointment.bookNow}
                    </button>
                </div>
            </div>
        `;
    }

    function renderPurposeField() {
        return `
            <div class="col-12">
                <label class="form-label">
                    ${window.i18n.appointment.purpose}
                </label>
                <textarea class="form-control"
                        id="otherPurpose"
                        rows="2"></textarea>
            </div>
        `;
    }

    function resetBookingUI() {

        // 🔄 Reset booking state completely
        window.bookingState = {
            saintId: null, // keep selected saint
            devoteeId: null, // keep logged-in devotee
            date: null,
            mode: null,

            // VIP
            start: null,
            end: null,

            // General
            memberCount: null,

            // Other
            otherPurpose: null,

            allowedWindows: []
        };

        exceptions = [];
        weeklyAvailability = [];

        // 🧹 Clear UI
        $('#slotContainer').empty();
        $('#existingAppointmentsList').empty();

        initSaintSelect();
        initDevoteeSelect();

        bookingCalendar.refetchEvents();

        initBookingBreadcrumb();
    }

    function initBookingBreadcrumb() {

        $('#bookingBreadcrumb .breadcrumb-item').each(function () {
            $(this).removeClass('active disabled text-green');
            $(this).addClass('disabled');
        });
    }

    function isStepCompleted(step) {
        switch (step) {
            case 'saint':
                return !!window.bookingState.saintId;

            case 'devotee':
                return !!window.bookingState.devoteeId;

            case 'date':
                return !!window.bookingState.date;

            case 'slot':
                return !!(window.bookingState.start && window.bookingState.end);

            default:
                return false;
        }
    }

    function updateBookingBreadcrumb(activeStep) {
        $('#bookingBreadcrumb .breadcrumb-item[data-step="' + activeStep + '"]').removeClass('disabled');
    }
    
    function disableBookingBreadcrumb(activeStep) {
        $('#bookingBreadcrumb .breadcrumb-item[data-step="' + activeStep + '"]').addClass('disabled');
    }

    $(document).ready(function () {

        initSaintSelect();     // if role != saint
        initDevoteeSelect();   // if role != devotee
        initBookingBreadcrumb();

        console.log(new Date().toISOString().split('T')[0]);
    });
</script>
@endpush