@extends('layouts.app')

@section('title', __('menu.saints'))
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush
@section('content')
<div class="row row-deck row-cards">
    <div class="col-12">
        <div class="card" id="saint-table-card">

            <div class="card-header">
                <h3 class="card-title">{{ __('menu.saints') }}</h3>

                <div class="card-actions">
                    <a href="javascript:void(0)"
                       id="addSaintBtn"
                       class="btn btn-primary btn-3">
                        <i class="fa fa-plus fa-lg"></i>
                        &nbsp;{{ __('actions.add_new') }}
                    </a>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-vcenter card-table" id="saintTable">
                        <thead>
                            <tr>
                                <th width="60">#</th>

                                <th>{{ __('common.name') }}</th>

                                <th>{{ __('devotee.mobile') }}</th>

                                <th>{{ __('devotee.gotra') }}</th>

                                <th>{{ __('devotee.rashi') }}</th>

                                <th>{{ __('nakshatra.title') }}</th>

                                <th>{{ __('devotee.dob') }}</th>

                                <th>{{ __('common.tags') }}</th>

                                <th>{{ __('common.updated_at') }}</th>

                                <th class="text-end">{{ __('common.actions') }}</th>
                            </tr>
                            <tr>
                                <th width="60"></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th class="update-datepicker"></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

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

{{-- Add / Edit Modal --}}
@include('admin.saints.ae-modal')
@include('admin.saints.search-modal')
@include('admin.saints.availability-modal')
@include('admin.saints.exception-modal')

@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="{{ asset('dist/js/fullcalendar.js') }}"></script>
<script>
    window.SLOT_CATEGORIES = @json($slotCategories);

    function initSaintSearchSelect() {

        const el = document.querySelector('#saintModalSearch');

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

        new TomSelect(el, {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 1,

            preload: false,           // 🚫 DO NOT LOAD BY DEFAULT
            create: function (input) {
                return {
                    id: '__new__',
                    text: input,
                    is_new: true
                };
            },
            // ➕ Allow "Add new"
            persist: false,

            render: {
                option(data, escape) {
                    if (data.is_new) {
                        return `
                            <div class="py-2 text-primary fw-semibold">
                                ➕ ${escape(data.text)}
                            </div>`;
                    }

                    return `
                        <div class="py-2 devotee-option">
                            ${escape(data.text)}
                        </div>`;
                }
            },

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

            onItemAdd(value, item) {
                const data = this.options[value];
                console.log(data);
                console.log(item);
                
                // 🆕 ADD NEW
                if (data.id === '__new__') {
                    this.clear();
                    this.close();

                    $('#saintSearchModalClose').click();

                    $('#saintSearchModal').one('hidden.bs.modal', function () {
                        resetSaintForm();
                        $('#saint_mobile').val(data.text);
                        $('#saintModalTitle').text(addSaintText);
                        $('#saintModalTrigger').click();

                        initNakshatraSelect();
                        initGotraSelect();
                        initRashiSelect();
                        initTagsSelect();
                        initSaintDatePickers();
                    });

                    return;
                }else{
                    // ✅ EXISTING DEVOTEE SELECTED
                    const id = value;

                    this.clear();
                    this.close();

                    $('#saintSearchModalClose').click();

                    $('#saintSearchModal').one('hidden.bs.modal', function () {
                        resetSaintForm();
                        fetchSaint(id);
                    });
                }
            }
        });
    }

    $('#saintSearchModal').on('shown.bs.modal', function () {
        initSaintSearchSelect();
    });

    let saintTable;

    var addSaintText  = "{{ __('menu.saints').' '.__('actions.add_new') }}";
    var editDevoteeText = "{{ __('menu.saints').' '.__('actions.edit') }}";

    window.i18n = {
        saint: {
            deleteTitle: "{{ __('common.delete_title') }}",
            deleteConfirm: "{{ __('common.delete_confirm') }}",
            deleteYes: "{{ __('common.delete_yes') }}",
            deleteCancel: "{{ __('actions.cancel') }}",
            deleteSuccess: "{{ __('common.deleted_successfully') }}"
        }
    };

    function initSaintDatePickers() {
        const dobInput = document.querySelector('input[name="dob"]');
        
        const commonOptions = {
            format: dateFormat,
            maxDate: new Date(), // ❌ no future dates
            allowRepick: true,
            autoClose: false,
            dropdowns: {
                minYear: 1900,
                maxYear: new Date().getFullYear(),
                months: true,
                years: true
            },
            lang: getLitepickerLocale(locale),
            appendTo: document.querySelector('#saintModal .modal-body'),
            buttonText: {
                previousMonth: `
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-1">
                        <path d="M15 6l-6 6l6 6" />
                    </svg>`,
                nextMonth: `
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-1">
                        <path d="M9 6l6 6l-6 6" />
                    </svg>`
            },
            setup: (picker) => {
                picker.on('show', () => {
                    setTimeout(() => {
                        const el = picker.ui;
                        if (el) {
                            el.addEventListener('mousedown', e => e.stopPropagation());
                            el.addEventListener('click', e => e.stopPropagation());
                        }
                    }, 0);
                });
            }
        };

        // 🔁 DOB picker
        if (dobInput) {
            if (dobInput._litepicker) dobInput._litepicker.destroy();

            dobInput._litepicker = new Litepicker({
                element: dobInput,
                ...commonOptions
            });
        }
    }

    function initGotraSelect(selectedId = null) {

        if ($('#gotra_id')[0].tomselect) {
            $('#gotra_id')[0].tomselect.destroy();
        }

        new TomSelect('#gotra_id', {
            valueField: 'id',
            labelField: 'name',
            searchField: 'name',
            maxItems: 1,
            create: true, // 👈 allow add new
            preload: true,

            load: function (query, callback) {
                fetch(`{{ route('gotras.list.ajax') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(json => callback(json.data))
                    .catch(() => callback());
            },

            onItemAdd(value, item) {
                // New gotra typed by user
                if (isNaN(value)) {
                    $('#gotra_new').val(value);
                    $('#gotra_id').val('');
                }
            },
            onInitialize() {
                if (!selectedId) return;

                fetch(`/gotra/${selectedId}`)
                    .then(res => res.json())
                    .then(res => {
                        if (!res.status) return;

                        const name =
                            res.data.names["{{ app()->getLocale() }}"]
                            ?? res.data.names.en;

                        this.addOption({
                            id: res.data.id,
                            name: name
                        });

                        this.setValue(res.data.id);
                    });
            }
        });
    }

    function initRashiSelect(selectedId = null) {

        if ($('#rashi_id')[0].tomselect) {
            $('#rashi_id')[0].tomselect.destroy();
        }

        new TomSelect('#rashi_id', {
            valueField: 'id',
            labelField: 'name',
            searchField: 'name',
            maxItems: 1,
            create: true, // 👈 allow add new
            preload: true,

            load: function (query, callback) {
                fetch(`{{ route('rashi.list.ajax') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(json => callback(json.data))
                    .catch(() => callback());
            },

            onItemAdd(value, item) {
                // New gotra typed by user
                if (isNaN(value)) {
                    $('#rashi_new').val(value);
                    $('#rashi_id').val('');
                }
            },
            onInitialize() {
                if (!selectedId) return;

                fetch(`/rashi/${selectedId}`)
                    .then(res => res.json())
                    .then(res => {
                        if (!res.status) return;

                        const name =
                            res.data.names["{{ app()->getLocale() }}"]
                            ?? res.data.names.en;

                        this.addOption({
                            id: res.data.id,
                            name: name
                        });

                        this.setValue(res.data.id);
                    });
            }
        });
    }

    function initNakshatraSelect(selectedId = null) {

        // Destroy if already exists
        if ($('#nakshatra_id')[0].tomselect) {
            $('#nakshatra_id')[0].tomselect.destroy();
        }

        new TomSelect('#nakshatra_id', {
            valueField: 'id',
            labelField: 'name',
            searchField: 'name',
            maxItems: 1,
            preload: true,

            load: function (query, callback) {
                fetch(`{{ route('nakshatras.options.ajax') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(json => callback(json.data))
                    .catch(() => callback());
            },

            onInitialize() {
                if (!selectedId) return;

                fetch(`/nakshatras/${selectedId}`)
                    .then(res => res.json())
                    .then(res => {
                        if (!res.status) return;

                        const name =
                            res.data.names["{{ app()->getLocale() }}"]
                            ?? res.data.names.en;

                        this.addOption({
                            id: res.data.id,
                            name: name
                        });

                        this.setValue(res.data.id);
                    });
            }
        });
    }

    function initTagsSelect(selectedTags = []) {

        const el = document.getElementById('saint_tags');
        if (!el) return;

        // 🔁 Destroy old instance (important for modal reuse)
        if (el.tomselect) {
            el.tomselect.destroy();
        }

        const tagSelect = new TomSelect(el, {
            persist: false,
            maxItems: null,
            valueField: 'value',
            labelField: 'text',
            searchField: 'text',

            preload: true,

            // ✅ allow typing new tags
            create: function (input) {
                return {
                    id: '__new__'+input,
                    text: input,
                    value: '__new__'+input,
                    is_new: true
                };
            },
            createOnBlur: true,
            load: function (query, callback) {
                fetch(`{{ route('tags.list.ajax') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(json => {
                        const options = (json.data || []).map(tag => ({
                            value: tag.id,   // existing tag id
                            text: tag.name
                        }));
                        callback(options);
                    })
                    .catch(() => callback());
            }
        });

        // 🧩 Preselect tags (EDIT case)
        if (Array.isArray(selectedTags) && selectedTags.length) {
            selectedTags.forEach(tag => {
                tagSelect.addOption({
                    value: tag.id,
                    text: tag.name
                });
                tagSelect.addItem(tag.id);
            });
        }
    }

    $(document).ready(function () {

        /* ===============================
         * YAJRA DATATABLE INIT
         * =============================== */
        saintsTable = $('#saintTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('saints.list.ajax') }}",
                type: "GET"
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    width: '60px'
                },
                { data: 'name', name: 'name' },
                { data: 'mobile', name: 'mobile' },
                { data: 'gotra', name: 'gotra', defaultContent: '—' },
                { data: 'rashi', name: 'rashi', defaultContent: '—' },
                { data: 'nakshatra', name: 'nakshatra', defaultContent: '—' },
                {
                    data: 'dob',
                    name: 'dob',
                    defaultContent: '—'
                },
                {
                    data: 'tags',
                    name: 'tags',
                    orderable: false,
                    defaultContent: '—'
                },
                { data: 'created_at', name: 'created_at',"searchable": false },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end'
                }
            ],
            order: [[1, 'asc']],

            // 🔑 Enable buttons
            dom: 'Bfrtip',
            initComplete: function () {
                const api = this.api();
                const $dateCell = $('.update-datepicker');
                $dateCell.empty(); // Clear cell to prevent duplicate inputs on redraw

                // 1. Create a wrapper for positioning the icon
                const $wrapper = $('<div class="position-relative d-flex align-items-center"></div>');
                
                // 2. Create the input
                const input = document.createElement('input');
                input.placeholder = 'Select date range';
                input.className = 'form-control form-control-sm pe-4'; // pe-4 adds padding for the icon
                input.readOnly = true;
                input.style.cursor = 'pointer';

                // 3. Create the Clear (X) Icon
                const $clearBtn = $(`
                    <span style="
                        position: absolute; 
                        right: 8px; 
                        cursor: pointer; 
                        font-weight: bold;
                        line-height: 1;
                        display: none; 
                        z-index: 10;">&times;</span>
                `);

                $wrapper.append(input).append($clearBtn);
                $dateCell.append($wrapper);

                // 4. 🛑 STOP EVENT BUBBLING
                $(input).on('click keyup input', function(e) {
                    e.stopPropagation();
                });

                // 5. Initialize Litepicker
                const picker = new Litepicker({
                    element: input,
                    lang: getLitepickerLocale(locale),
                    singleMode: false,
                    autoApply: false,
                    allowRepick: true,
                    dropdowns: {
                        months: true,
                        years: true,
                        minYear: new Date().getFullYear() - 20,
                        maxYear: new Date().getFullYear() + 20
                    },
                    format: dateFormat,
                    setup: (picker) => {
                        // Apply Filter
                        picker.on('selected', (start, end) => {
                            if (start && end) {
                                $clearBtn.show(); // Show X when dates are selected
                                api.column('created_at:name')
                                    .search(`${start.format('YYYY-MM-DD')}|${end.format('YYYY-MM-DD')}`, true, false)
                                    .draw();
                            }
                        });

                        // Handle Clear Event
                        picker.on('clear:selection', () => {
                            $clearBtn.hide();
                            input.value = ''; 
                            api.column('created_at:name').search('').draw();
                        });
                    }
                });

                // 6. Icon Click Logic
                $clearBtn.on('click', function(e) {
                    e.stopPropagation(); // Prevent sorting the table header
                    picker.clearSelection(); // This triggers the 'clear:selection' event above
                });
            },
            buttons: [
                {
                    text: 'Excel',
                    action: function () {
                        const headers = {
                            "Name": "name",
                            "Mobile": "mobile",
                            "Gotra": "gotra",
                            "Rashi": "rashi",
                            "Nakshatra": "nakshatra",
                            "DOB": "dob",
                            "Address": "address",
                            "Remark": "remarks",
                            "Tags": "tags",
                            "Created At": "created_at"
                        };

                        exportDataTable(
                            saintsTable,
                            "saints.xlsx",
                            headers,
                            100,
                            {},
                            "#saint-table-card"
                        );
                    }
                }
            ]
        });

        /* ===============================
         * OPEN ADD MODAL
         * =============================== */
        $('#addSaintBtn').on('click', function () {
            $('#saintSearchModalTrigger').trigger('click');
        });

        /* ===============================
         * FORM VALIDATION + SUBMIT
         * =============================== */
        $('#saintForm').validate({
            rules: {
                name: { required: true },
                mobile: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10
                }
            },
            errorClass: 'text-danger',

            submitHandler: function (form) {

                const $form = $(form);
                const $submitBtn = $form.find('button[type="submit"]');
                const formData = $form.serialize();

                $submitBtn.prop('disabled', true);

                ajaxRequest({
                    url: "{{ route('saints.store') }}",
                    method: "POST",
                    data: formData,
                    loaderTarget: "#saint-card"
                })
                .then(res => {
                    showAlert('success', res.message || 'Saved successfully');
                    $('#saintModalClose').click();
                    setTimeout(() => {
                        reloadSaintsTable();
                    }, 2000);
                })
                .catch(() => {})
                .finally(() => {
                    $submitBtn.prop('disabled', false);
                });
            }
        });

    });

    /* ===============================
     * RELOAD TABLE
     * =============================== */
    function reloadSaintsTable() {
        if (saintsTable) {
            saintsTable.ajax.reload(null, false);
        }
    }

    /* ===============================
     * FETCH FOR EDIT
     * =============================== */
    function fetchSaint(id) {
        ajaxRequest({
            url: `/saints/${id}`,
            method: "GET",
            loaderTarget: "#saint-table-card"
        })
        .then(res => {
            if (!res.status) {
                showAlert('error', res.message || 'Unable to fetch devotee');
                return;
            }

            fillSaintForm(res.data);
            initNakshatraSelect(res?.data?.nakshatra?.id ?? null);
            initGotraSelect(res?.data?.gotra?.id ?? null);
            initRashiSelect(res?.data?.rashi?.id ?? null);
            initSaintDatePickers();
            $('#saintModalTitle').text(editDevoteeText);
            $('#saintModalTrigger').click();
        });
    }

    /* ===============================
     * FILL FORM (EDIT)
     * =============================== */
    function fillSaintForm(data) {

        $('#saintForm')[0].reset();

        $('#saint_id').val(data.id);
        $('#saint_name').val(data.name);
        $('#country_code').val(data.country_code);
        $('#saint_mobile').val(data.mobile);
        $('#saint_email').val(data.email);
        $('#saint_dob').val(data.dob);
        $('#saint_anniversary_date').val(data.anniversary_date);
        $('#saint_address').val(data.address);
        $('#saint_remarks').val(data.remarks);
        initTagsSelect(data.tags);
    }

    /* ===============================
     * RESET FORM
     * =============================== */
    function resetSaintForm() {
        $('#saintForm')[0].reset();
        $('#saint_id').val('');
        $('#gotra_id').val(null).trigger('change');
        $('#nakshatra_id').val(null).trigger('change');
    }

    /* ===============================
     * EDIT CLICK
     * =============================== */
    $(document).on('click', '.editSaint', function () {
        fetchSaint($(this).data('id'));
    });

    /* ===============================
     * DELETE
     * =============================== */
    $(document).on('click', '.deleteSaint', function () {

        const btn = this;
        const id  = $(btn).data('id');

        $.confirm({
            title: window.i18n.saint.deleteTitle,
            content: window.i18n.saint.deleteConfirm,
            type: 'red',
            theme: 'bootstrap',
            icon: 'fa fa-question',
            animation: 'scale',
            buttons: {
                cancel: {
                    text: window.i18n.saint.deleteCancel
                },
                confirm: {
                    text: window.i18n.saint.deleteYes,
                    btnClass: 'btn-danger',
                    action: function () {

                        $(btn).prop('disabled', true);

                        ajaxRequest({
                            url: "{{ route('saints.delete', ':id') }}".replace(':id', id),
                            method: "DELETE",
                            data: { _token: "{{ csrf_token() }}" },
                            loaderTarget: "#saint-table-card"
                        })
                        .then(res => {
                            showAlert(
                                'success',
                                res.message || window.i18n.saint.deleteSuccess
                            );
                            reloadSaintsTable();
                        })
                        .catch(() => {
                            $(btn).prop('disabled', false);
                        });
                    }
                }
            }
        });
    });

//time availability functionality
let exceptionCalendar = null;
let selectedSaintId = 0;
let currentExceptionId = null;
const SLOT_CATEGORIES = window.SLOT_CATEGORIES || [];

function getCategoryById(id) {
    return SLOT_CATEGORIES.find(c => String(c.id) === String(id));
}

function applyCategoryRules($slotRow, category) {

    const $slotDuration    = $slotRow.find('.slot-duration-wrapper');
    const $maxAppointments = $slotRow.find('.max-appointments-wrapper');

    // 🔁 reset first
    $slotDuration.addClass('d-none');
    $maxAppointments.addClass('d-none');

    if (!category || !category.id) {
        // nothing selected → show nothing
        return;
    }

    // 🟢 GENERAL VISIT (example: id = 1)
    if (category.id === 1) {
        $maxAppointments.removeClass('d-none');
        $slotDuration.find('input').val('');
    }

    // 🔵 VIP VISIT (example: id = 2)
    if (category.id === 2) {
        $slotDuration.removeClass('d-none');
        $maxAppointments.find('input').val('');
    }
}

$(document).on('click', '.availSaint', function () {
    $('#saintAvailabilityModalTrigger').click();
    selectedSaintId = $(this).data('id');
    //initExceptionCalendar(selectedSaintId);
});

const WEEK_DAYS = Object.entries(window.WEEK_DAYS).map(
    ([id, name]) => ({
        id: Number(id),
        name
    })
);

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

function validateDaySlots($dayBlock) {

    const slots = [];

    $dayBlock.find('.slot-row').each(function () {

        const start = $(this).find('.start-time').val();
        const end   = $(this).find('.end-time').val();

        if (!start || !end) return;

        const startMin = timeToMinutes(start);
        const endMin   = timeToMinutes(end);

        if (startMin >= endMin) {
            throw new Error('Start time must be before end time');
        }

        slots.push({ startMin, endMin });
    });

    slots.sort((a, b) => a.startMin - b.startMin);

    for (let i = 0; i < slots.length - 1; i++) {
        if (slots[i].endMin > slots[i + 1].startMin) {
            throw new Error('Overlapping time slots detected');
        }
    }
}


function initTimePickers(container = document) {

    container.querySelectorAll('.timepicker').forEach(input => {

        // 🔁 Destroy existing instance
        if (input._flatpickr) {
            input._flatpickr.destroy();
        }

        flatpickr(input, {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true,
            minuteIncrement: 5,
            allowInput: true
        });
    });
}

function renderWeeklyAvailability(data) {

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

    WEEK_DAYS.forEach(day => {

        const dayTpl = document
            .getElementById('dayAvailabilityTemplate')
            .content.cloneNode(true);

        const dayEl = dayTpl.querySelector('.accordion-item');
        const dayName = dayTpl.querySelector('.day-name');
        const toggle = dayTpl.querySelector('.day-toggle');
        const collapse = dayTpl.querySelector('.accordion-collapse');
        const slotsContainer = dayTpl.querySelector('.time-slots');
        const addSlotBtn = dayTpl.querySelector('.add-slot');

        dayEl.dataset.day = day.id;
        dayName.textContent = day.name;

        const daySlots = data.filter(d => d.day_of_week === day.id);

        toggle.checked = daySlots.length > 0;
        collapse.classList.toggle('show', toggle.checked);

        toggle.addEventListener('change', () => {
            collapse.classList.toggle('show', toggle.checked);

            if (toggle.checked && slotsContainer.children.length === 0) {
                addSlot(slotsContainer);
            }
        });

        addSlotBtn.addEventListener('click', () => {
            addSlot(slotsContainer);
        });

        daySlots.forEach(slot => addSlot(slotsContainer, slot));

        container.appendChild(dayTpl);
    });
}

function addSlot(container, data = {}) {

    const slotTpl = document
        .getElementById('timeSlotTemplate')
        .content.cloneNode(true);

    const slotRow = slotTpl.querySelector('.slot-row');
    const removeBtn = slotTpl.querySelector('.remove-slot');

    const $slotRow = $(slotRow);
    const categorySelect = slotTpl.querySelector('.slot-category');

    // Populate category dropdown
    SLOT_CATEGORIES.forEach(cat => {
        const opt = document.createElement('option');
        opt.value = cat.id;
        opt.textContent = cat.name;
        categorySelect.appendChild(opt);
    });

    // Set category if editing
    if (data.category_id) {
        categorySelect.value = data.category_id;
    }

    // Fill values
    slotTpl.querySelector('.start-time').value = data.start_time || '';
    slotTpl.querySelector('.end-time').value = data.end_time || '';
    slotTpl.querySelector('.slot-duration').value = data.slot_duration || '';
    slotTpl.querySelector('.max-appointments').value = data.max_appointments || '';

    // Apply rules on load
    const initialCategory = getCategoryById(categorySelect.value);
    applyCategoryRules($slotRow, initialCategory);

    // Change handler
    categorySelect.addEventListener('change', function () {
        const category = getCategoryById(this.value);
        applyCategoryRules($slotRow, category);
    });

    // 🔑 keep availability id (important for update)
    if (data.id) {
        slotRow.dataset.id = data.id;
    }

    // 🔐 REMOVE LOGIC
    if (data.can_remove === false) {
        removeBtn.remove();
    } else {
        removeBtn.addEventListener('click', e => {
            e.target.closest('.slot-row').remove();
        });
    }

    container.appendChild(slotTpl);
    initTimePickers(container);
}

function fetchWeeklyAvailability() {
    return ajaxRequest({
        url: "{{ route('saint.availability.index') }}",
        method: "GET",
        data: {saint_id:selectedSaintId},
        loaderTarget: "#weeklyAvailability_card"
    }).then(res => res.data || []);
}

function initWeeklyAvailabilityTab() {
    fetchWeeklyAvailability()
        .then(data => renderWeeklyAvailability(data))
        .catch(() => renderWeeklyAvailability([]));
}

document.getElementById('saintAvailabilityModal')
.addEventListener('shown.bs.modal', () => {
    initWeeklyAvailabilityTab();
});

$('#saveWeeklyAvailability').on('click', function () {

    const payload = [];

    try {

        $('#weeklyAvailabilityContainer .accordion-item').each(function () {

            const day = parseInt($(this).data('day'), 10);
            const enabled = $(this).find('.day-toggle').is(':checked');

            if (!enabled) return;

            // 🔐 validate this day completely
            validateDaySlots($(this));

            $(this).find('.slot-row').each(function () {

                const $row = $(this);

                const start = $row.find('.start-time').val();
                const end   = $row.find('.end-time').val();
                const categoryId = Number($row.find('.slot-category').val());

                if (!start || !end) return;

                if (!categoryId) {
                    throw new Error('Please select slot category');
                }

                let slotDuration = null;
                let maxAppointments = null;

                // 🟢 GENERAL (example id = 1)
                if (categoryId === 1) {
                    maxAppointments = $row.find('.max-appointments').val();

                    if (!maxAppointments) {
                        throw new Error('Max appointments required for General visit');
                    }
                }

                // 🔵 VIP (example id = 2)
                if (categoryId === 2) {
                    slotDuration = $row.find('.slot-duration').val();

                    if (!slotDuration) {
                        throw new Error('Slot duration required for VIP visit');
                    }
                }

                payload.push({
                    id: $row.data('id') || null,
                    day_of_week: day,
                    category_id: categoryId,
                    start_time: start,
                    end_time: end,
                    slot_duration: slotDuration,
                    max_appointments: maxAppointments,
                });
            });
        });

    } catch (e) {
        showAlert('error', e.message);
        return;
    }

    ajaxRequest({
        url: "{{ route('saint.availability.store') }}",
        method: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            saint_id: selectedSaintId,
            availability: payload
        },
        loaderTarget: "#weeklyAvailability_card"
    })
    .then(res => {
        showAlert('success', res.message || 'Weekly availability saved successfully');
        $('#saintAvailabilityModalClose').trigger('click');
    });
});


//exception tab
function openExceptionModal(date, saintId) {

    currentExceptionId = null; // 👈 create mode

    $('#exceptionForm')[0].reset();
    $('#exception_date').val(date);
    $('#exception_saint_id').val(saintId);

    $('#exceptionTimeRange').addClass('d-none');
    $('#exceptionDeleteBtn').addClass('d-none');

    $('#exception_type').prop('disabled', false);

    $('#saintExceptionModalTrigger').trigger('click');
}

function openExceptionModalForEdit(event) {

    const props = event.extendedProps;
    currentExceptionId = event.id;

    const $form = $('#exceptionForm');

    // 🔄 Reset form & UI
    $form[0].reset();
    $('#exceptionDeleteBtn').removeClass('d-none');

    // Always hide first (single source of truth)
    $('#exceptionTimeRange').addClass('d-none');
    $('#exceptionReasonWrapper').addClass('d-none');

    // 📅 Basic fields
    $('#exception_date').val(event.startStr.split('T')[0]);
    $('#exception_saint_id').val(selectedSaintId);

    // 🔑 Set type first (this drives UI)
    $('#exception_type').val(props.type).trigger('change');

    // 🕒 Time handling (only if not full-day leave)
    if (props.type !== 'leave') {

        const startTime = event.startStr.split('T')[1]?.substring(0, 5);
        const endTime   = event.endStr?.split('T')[1]?.substring(0, 5);

        $('#exception_start_time').val(startTime || '');
        $('#exception_end_time').val(endTime || '');

        initTimePickers($('#exceptionModal')[0]);
    }

    // 📝 Reason (if exists)
    if (props.reason) {
        $('#exception_reason').val(props.reason);
    }

    $('#saintExceptionModalTrigger').trigger('click');
}


$('#exceptionDeleteBtn').on('click', function () {

    if (!currentExceptionId) return;

    $.confirm({
        title: window.i18n.saint.deleteTitle,
        content: window.i18n.saint.deleteConfirm,
        type: 'red',
        theme: 'bootstrap',
        icon: 'fa fa-question',
        animation: 'scale',
        buttons: {
            cancel: {
                text: window.i18n.saint.deleteCancel
            },
            confirm: {
                text: window.i18n.saint.deleteYes,
                btnClass: 'btn-danger',
                action: function () {

                    ajaxRequest({
                        url: "{{ route('saint.exceptions.destroy', ':id') }}"
                            .replace(':id', currentExceptionId),
                        method: "DELETE",
                        data: { _token: "{{ csrf_token() }}" },
                        loaderTarget: "#exceptionModalCard"
                    })
                    .then(res => {
                        showAlert('success', res.message || 'Exception deleted');
                        $('#exceptionModalClose').trigger('click');
                        $('#saintAvailabilityModalTrigger').trigger('click');
                    });
                }
            }
        }
    });
});

$('#exception_type').on('change', function () {

    const type = $(this).val();

    // reset first
    $('#exceptionTimeRange').addClass('d-none');
    $('#exceptionReasonWrapper').addClass('d-none');

    if (type === 'leave') {
        // Full day NOT available
        $('#exceptionReasonWrapper').removeClass('d-none');

    } else if (type === 'partial') {
        // Available only in given time range
        $('#exceptionTimeRange').removeClass('d-none');
        initTimePickers($('#exceptionModal')[0]);

    } else if (type === 'event') {
        // NOT available during event time (with reason)
        $('#exceptionTimeRange').removeClass('d-none');
        $('#exceptionReasonWrapper').removeClass('d-none');
        initTimePickers($('#exceptionModal')[0]);
    }
});


$('#exceptionForm').on('submit', function (e) {
    e.preventDefault();

    const type = $('#exception_type').val();

    const payload = {
        exception_date: $('#exception_date').val(),
        is_available: type === 'partial',
        reason: (type === 'leave' || type === 'event')? $('#exception_reason').val(): null,
        type: type,
        saint_id:selectedSaintId
    };

    if (currentExceptionId) {
        payload.id = currentExceptionId;
    }

    if (type !== 'leave') {

        const start = $('#exception_start_time').val();
        const end   = $('#exception_end_time').val();

        const startMin = timeToMinutes(start);
        const endMin   = timeToMinutes(end);

        // ❌ missing time
        if (!startMin || !endMin) {
            showAlert('danger', 'Start time and end time are required');
            return;
        }

        // ❌ invalid range
        if (startMin >= endMin) {
            showAlert('danger', 'Start time must be before end time');
            return;
        }

        payload.start_time = start;
        payload.end_time   = end;

    } else {
        payload.start_time = null;
        payload.end_time   = null;
    }

    ajaxRequest({
        url: "{{ route('saint.exceptions.store') }}",
        method: 'POST',
        data: payload,
        loaderTarget: '#exceptionModalCard'
    })
    .then(() => {
        $('#exceptionModalClose').trigger('click');
        $('#saintAvailabilityModalTrigger').trigger('click');
    })
    .catch(() => {});
});

function refreshExceptionCalendar() {
    if (!exceptionCalendar) return;

    exceptionCalendar.refetchEvents();
    exceptionCalendar.updateSize();
}

$('#saintAvailabilityModal').on('shown.bs.modal', function () {
    if ($('#dateExceptions').hasClass('active')) {
        refreshExceptionCalendar();
    }
});

function initExceptionCalendar(saintId) {

    const calendarEl = document.getElementById('exceptionCalendar');
    if (!calendarEl) return;

    // 🧹 Destroy old instance if exists
    if (exceptionCalendar) {
        exceptionCalendar.destroy();
        exceptionCalendar = null;
    }

    exceptionCalendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        height: 600,
        selectable: true,
        editable: false,

        events: {
            url: "{{ route('saint.exceptions.index') }}",
            method: 'GET',
            extraParams: {
                saint_id: saintId   // 👈 IMPORTANT
            },
            failure() {
                alert('Failed to load exceptions');
            }
        },

        // ➕ Add exception
        dateClick(info) {
            openExceptionModal(info.dateStr, saintId);
        },

        // ❌ Delete exception
        eventClick(info) {
            openExceptionModalForEdit(info.event);
        },

        // 🎨 Color mapping
        eventDidMount(info) {
            const type = info.event.extendedProps.type;
            if (type === 'leave') {
                info.el.style.backgroundColor = '#d63939';
            }
            else if (type === 'partial') {
                info.el.style.backgroundColor = '#f76707';
            }
            else if (type === 'event') {
                info.el.style.backgroundColor = '#4263eb';
            }
        }
    });

    exceptionCalendar.render();
}

$('[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
   
    const target = $(e.target).attr('data-bs-target');
    if (target === '#dateExceptions' && !exceptionCalendar) {
        initExceptionCalendar(selectedSaintId);
    }
});
</script>
@endpush