@extends('layouts.app')

@section('title', __('menu.seva'))
@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="seva-booking-table-card">

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

                <div class="card-actions">
                    <a href="javascript:void(0)"
                       id="addSevaBookingBtn"
                       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="sevaBookingTable">
                        <thead>
                            <tr>
                                <th width="60">#</th>

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

                                <th>{{ __('menu.seva') }}</th>

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

                                <th>{{ __('seva.schedule_type') }}</th>

                                <th>{{ __('seva.date') }}</th>
                                
                                <th>{{ __('common.time') }}</th>
                                
                                <th>{{ __('seva.price') }}</th>

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

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

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

                                <th class="text-end">{{ __('common.actions') }}</th>
                            </tr>
                            <tr>
                                <th></th>
                                <th></th>
                                <th><select id="booking_seva_id_listing" class="form-select"></select></th>
                                <th></th>
                                <th></th>
                                <th  class="update-datepicker"></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('admin.devotee.ae-modal')
@include('admin.seva.ae-modal')
@include('admin.seva_booking.ae-modal')
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    let sevaBookingTable;

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

    var addDevoteeModalText  = "{{ __('menu.devotee').' '.__('actions.add_new') }}";
    var addDevoteeText  = "{{ __('menu.seva').' '.__('actions.add_new') }}";
    var addSevaBookingText  = "{{ __('menu.seva_booking').' '.__('actions.add_new') }}";
    var editSevaBookingText  = "{{ __('menu.seva_booking').' '.__('actions.edit') }}";
    var addSevaText  = "{{ __('menu.seva').' '.__('actions.add_new') }}";
    var editDevoteeText = "{{ __('menu.seva').' '.__('actions.edit') }}";

    function handleSevaScheduleType() {

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

        if (type === 'fixed_date') {
            $('#seva_fixed_date').prop('disabled', false).closest('.col-md-4').show();
        } else {
            $('#seva_fixed_date')
                .val('')
                .prop('disabled', true)
                .closest('.col-md-4').hide();
        }
    }

    $(document).on('change', '#seva_schedule_type', handleSevaScheduleType);

    $(document).ready(function () {

        /* ===============================
        * YAJRA DATATABLE INIT (SEVA)
        * =============================== */
        sevaBookingTable = $('#sevaBookingTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('seva_booking.list.ajax') }}",
                type: "GET",
                data: function (d) {
                    const ts = $('#booking_seva_id_listing')[0]?.tomselect;
                    const seva_id = ts && ts.getValue() ? ts.getValue() : null;

                    const $dateInput = $('.update-datepicker input');
                    let dateRange = null;
                    if ($dateInput.val()) {
                        const dates = $dateInput.val().split(' - ');
                        if (dates.length === 2) {
                            dateRange = { start: dates[0], end: dates[1] };
                        }
                    }
                    d.filters = {
                        seva_id: seva_id,
                        dateRange: dateRange,
                    };
                }
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    width: '60px'
                },
                {
                    data: 'devotee_name',
                    name: 'devotee.name'
                },
                {
                    data: 'seva_title',
                    name: 'seva.title'
                },{
                    data: 'invoice_number',
                    name: 'invoice_number'
                },
                {
                    data: 'seva_type',
                    name: 'seva_type'
                },
                {
                    data: 'seva_date',
                    name: 'seva_date',
                    defaultContent: '—'
                },{
                    data: 'seva_time',
                    name: 'seva_time',
                    defaultContent: '—'
                },
                {
                    data: 'price',
                    name: 'price'
                },
                {
                    data: 'payment_status',
                    name: 'payment_status'
                },
                {
                    data: 'payment_mode',
                    name: 'payment_mode'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end'
                }
            ],
            initComplete: function () {
                const api = this.api();

                const $select = $('#booking_seva_id_listing');
                $select.off('change.dt keyup.dt');
                $select.on('click keydown change', e => e.stopPropagation());
                initSevaSelectForListing();

                const $dateCell = $('.update-datepicker');
                $dateCell.empty();

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

                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);

                $(input).on('click keyup input', e => e.stopPropagation());

                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) => {
                        picker.on('selected', (start, end) => {
                            if (start && end) {
                                $clearBtn.show();
                                api.draw(); // redraw manually
                            }
                        });
                        picker.on('clear:selection', () => {
                            $clearBtn.hide();
                            input.value = '';
                            api.draw();
                        });
                    }
                });

                $clearBtn.on('click', e => { e.stopPropagation(); picker.clearSelection(); });
            }
        });


        $('#addSevaBookingBtn').on('click', function () {
            resetSevaBookingForm();
            initSevaBookingDatePicker();
            initDevoteeSelect();
            initSevaSelect();
            initSevaTimePicker();
            $('#sevaBookingModalTitle').text(addSevaBookingText);
            $('#sevaBookingModalTrigger').click();
        });

        /* ===============================
        * FORM VALIDATION + SUBMIT
        * =============================== */
        $('#sevaForm').validate({
            rules: {
                'translations[en][title]': { required: true },
                schedule_type: { required: true },
                price: { number: true, min: 0 }
            },
            errorClass: 'text-danger',

            submitHandler: function (form) {

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

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

                ajaxRequest({
                    url: "{{ route('seva.store') }}",
                    method: "POST",
                    data: $form.serialize(),
                    loaderTarget: "#seva-card"
                })
                .then(res => {
                    showAlert('success', res.message || 'Saved successfully');
                    $('#sevaModalClose').click();
                    $('#addSevaBookingBtn').trigger('click');
                })
                .finally(() => {
                    $submitBtn.prop('disabled', false);
                });
            }
        });

        $('#devoteeForm').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('devotees.store') }}",
                    method: "POST",
                    data: formData,
                    loaderTarget: "#devotee-card"
                })
                .then(res => {
                    showAlert('success', res.message || 'Saved successfully');
                    $('#devoteeModalClose').click();
                    $('#addSevaBookingBtn').trigger('click');
                })
                .catch(() => {})
                .finally(() => {
                    $submitBtn.prop('disabled', false);
                });
            }
        });

        $('#sevaBookingForm').validate({
            rules: {
                user_id: {
                    required: true
                },
                seva_id: {
                    required: true
                },
                seva_time: {
                    required: true
                },
                payment_status: {
                    required: true
                },
                payment_mode: {
                    required: true
                },
                seva_date: {
                    required: function () {
                        const sevaId = $('#booking_seva_id').val();
                        const seva = $('#booking_seva_id')[0]?.tomselect?.options?.[sevaId];
                        return seva?.schedule_type === 'daily';
                    }
                }
            },

            messages: {
                user_id: {
                    required: 'Please select devotee'
                },
                seva_id: {
                    required: 'Please select seva'
                },
                seva_time: {
                    required: 'Please select seva time'
                },
                payment_status: {
                    required: 'Please select payment status'
                }
            },

            errorClass: 'text-danger',
            errorElement: 'span',

            errorPlacement: function (error, element) {
                if (element.is('select')) {
                    error.insertAfter(element.next('.ts-wrapper').length
                        ? element.next('.ts-wrapper')
                        : element
                    );
                } else {
                    error.insertAfter(element);
                }
            },

            submitHandler: function (form) {

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

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

                ajaxRequest({
                    url: "{{ route('seva.booking.store') }}",
                    method: "POST",
                    data: $form.serialize(),
                    loaderTarget: "#seva-booking-card"
                })
                .then(res => {
                    showAlert('success', res.message || 'Seva booking saved successfully');
                    // close booking modal
                    $('#sevaBookingModalClose').click();
                    reloadSevaBookingTable();

                    if(res?.data?.invoice_id) {
                        INV_GEN_printInvoice(res.data.invoice_id);
                    }
                })
                .catch(err => {
                    if (err?.errors) {
                        // show first validation error (Laravel style)
                        const firstError = Object.values(err.errors)[0]?.[0];
                        if (firstError) {
                            showAlert('error', firstError);
                        }
                    }
                })
                .finally(() => {
                    $submitBtn.prop('disabled', false);
                });
            }
        });

    });

    function reloadSevaBookingTable() {
        if (sevaBookingTable) {
            sevaBookingTable.ajax.reload(null, false);
        }
    }

    function fillSevaForm(data) {

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

        $('#seva_id').val(data.id);

        $('#seva_title_en').val(data.translations?.en?.title ?? '');
        $('#seva_description_en').val(data.translations?.en?.description ?? '');

        $('#seva_schedule_type').val(data.schedule_type);
        $('#seva_fixed_date').val(data.fixed_date);
        $('#seva_is_repeatable').val(data.is_repeatable ? 1 : 0);
        $('#seva_price').val(data.price);
    }

    function initSevaSelect(selectedId = null) {

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

        new TomSelect('#booking_seva_id', {
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            maxItems: 1,
            create: true,
            preload: true,
            create: function (input) {
                return {
                    id: '__new__'+input,
                    text: input,
                    value: '__new__'+input,
                    is_new: true
                };
            },
            load(query, callback) {
                fetch(`{{ route('seva.list.options') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res.data))
                    .catch(() => callback());
            },

            onItemAdd(value, item) {
                const option = this.options[value];

                // ✅ Proper check instead of isNaN(value)
                if (option?.is_new === true) {
                    openSevaCreateModal(option.text);
                    return
                }
                $('#seva_type').text(option.seva_type ?? '—');
                $('#seva_booking_date').text(option.fixed_date ?? '—');
                $('#seva_price_text').html(`<span class="badge bg-red text-red-fg">${option.price ?? '—'}</span>`);

                if (option.seva_type === 'daily') {
                    $('#seva_date_wrapper').removeClass('d-none');
                    $('#booking_seva_date').prop('disabled', false);
                } else {
                    // FIXED DATE → hide picker
                    $('#seva_date_wrapper').addClass('d-none');
                    $('#booking_seva_date').val('').prop('disabled', true);
                }
            },
            onInitialize() {

                $('#seva_type').text('—');
                $('#seva_booking_date').text('—');
                $('#seva_price_text').html('—');

                if (!selectedId) return;

                fetch(`/seva/findById/${selectedId}`)
                    .then(res => res.json())
                    .then(res => {

                        if (!res.status || !res.data) return;

                        this.addOption(res.data);
                        this.setValue(res.data.id);
                                
                        $('#seva_type').text(res.data.seva_type ?? '—');
                        $('#seva_booking_date').text(res.data.fixed_date ?? '—');
                        $('#seva_price_text').html(
                            `<span class="badge bg-red text-red-fg">${res.data.price ?? '—'}</span>`
                        );


                    });

            }
        });
    }

    function initSevaSelectForListing(selectedId = null) {

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

        new TomSelect('#booking_seva_id_listing', {
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            maxItems: 1,
            preload: true,
            load(query, callback) {
                fetch(`{{ route('seva.list.options') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res.data))
                    .catch(() => callback());
            },
            onItemAdd(value) {
                const option = this.options[value];
                if (!option) return;
                reloadSevaBookingTable();
            },
            onItemRemove() {
                reloadSevaBookingTable();
            }
        });
    }
    
    function initSevaDatePickers() {
        const dobInput = document.querySelector('input[name="fixed_date"]');
        
        const currentYear = new Date().getFullYear();

        const commonOptions = {
            format: dateFormat,
            allowRepick: true,
            autoClose: false,

            dropdowns: {
                months: true,
                years: true,
                minYear: currentYear - 10,
                maxYear: currentYear + 10
            },

            lang: getLitepickerLocale(locale),
            appendTo: document.querySelector('#sevaModal .modal-body'),

            buttonText: {
                previousMonth: `...`,
                nextMonth: `...`
            },

            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 initDevoteeDatePickers() {
        const dobInput = document.querySelector('input[name="dob"]');
        const annivInput = document.querySelector('input[name="anniversary_date"]');

        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('#devoteeModal .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
            });
        }

        // 🔁 Anniversary picker
        if (annivInput) {
            if (annivInput._litepicker) annivInput._litepicker.destroy();

            annivInput._litepicker = new Litepicker({
                element: annivInput,
                ...commonOptions
            });
        }
    }
    
    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 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 initTagsSelect(selectedTags = []) {

        const el = document.getElementById('devotee_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);
            });
        }
    }

    function openSevaCreateModal(title = '') {

        $('#sevaBookingModalClose').trigger('click');

        resetSevaForm();
        handleSevaScheduleType();
        $('#sevaModalTrigger').click();
        initSevaDatePickers();
        $('#seva_title_en').val(title);
        $('#sevaModalTitle').text(addSevaText);
    }

    function resetDevoteeForm() {
        $('#devoteeForm')[0].reset();
        $('#devotee_id').val('');
        $('#gotra_id').val(null).trigger('change');
        $('#nakshatra_id').val(null).trigger('change');
    }

    function openDevoteeCreateModal(txt){
        $('#sevaBookingModalClose').trigger('click');

        resetDevoteeForm();
        $('#devoteeModalTitle').text(addDevoteeModalText);
        $('#devoteeModalTrigger').click();
        $('#devotee_mobile').val(txt);
        initNakshatraSelect();
        initGotraSelect();
        initRashiSelect();
        initTagsSelect();
        initDevoteeDatePickers();
    }

    function initDevoteeSelect(selectedId = null) {

        const el = document.getElementById('booking_devotee_id');

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

        const ts = new TomSelect('#booking_devotee_id', {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 1,
            preload: true,

            create: function (input) {
                return {
                    id: '__new__' + input,
                    value: '__new__' + input,
                    text: input,
                    is_new: true
                };
            },
            items: selectedId ? [selectedId] : [],
            load(query, callback) {
                fetch(`{{ route('devotees.search') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res)) // 👈 plain array
                    .catch(() => callback());
            },

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

                if (option?.is_new === true) {
                    // remove fake option immediately
                    this.removeItem(value, true);
                    this.removeOption(value);

                    openDevoteeCreateModal(option.text);
                    return
                }else{
                    $('#devotee_gotra').text(option.gotra ?? '—');
                    $('#devotee_rashi').text(option.rashi ?? '—');
                    $('#devotee_nakshatra').text(option.nakshatra ?? '—');
                }
            },

            onInitialize() {

                $('#devotee_gotra').text('—');
                $('#devotee_rashi').text('—');
                $('#devotee_nakshatra').text('—');

                if (!selectedId) return;

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

                        this.addOption(res.data);
                        this.setValue(res.data.id);
                        $('#devotee_gotra').text(res.data.gotra ?? '—');
                        $('#devotee_rashi').text(res.data.rashi ?? '—');
                        $('#devotee_nakshatra').text(res.data.nakshatra ?? '—');
                    });

            }
        });

        return ts;
    }

    function resetSevaBookingForm() {

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

        // 1️⃣ Native form reset
        if ($form.length) {
            $form[0].reset();
        }

        // 6️⃣ Reset default values
        $('#payment_status').val('pending');
        $('#payment_mode').val('offline');

        // 7️⃣ Clear validation errors
        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('.invalid-feedback').remove();

        // 8️⃣ Scroll modal to top (UX)
        $('#sevaBookingModal .modal-body').scrollTop(0);
    }

    function resetSevaForm() {
        $('#sevaForm')[0].reset();
        $('#seva_id').val('');
    }

    function fetchSevaBooking(id) {

        ajaxRequest({
            url: `/seva-bookings/${id}/edit`,
            method: "GET",
            loaderTarget: "#seva-booking-table-card"
        })
        .then(res => {

            if (!res.status) {
                showAlert('error', res.message || 'Unable to fetch seva booking');
                return;
            }

            const data = res.data;

            resetSevaBookingForm();

            // 🔹 Set hidden ID if you use it later
            $('#seva_booking_id').val(data.id);

            // 🔹 Init selects with selected values
            initDevoteeSelect(data.user_id);
            initSevaSelect(data.seva_id);

            // 🔹 Simple fields
            $('#booking_seva_time').val(data.seva_time);
            $('#payment_status').val(data.payment_status);
            $('#payment_mode').val(data.payment_mode);
            $('#booking_remarks').val(data.remarks);
            $('#booking_seva_date').val(data.seva_date);

            initSevaTimePicker();
            initSevaBookingDatePicker();

            $('#sevaBookingModalTitle').text(editSevaBookingText);
            $('#sevaBookingModalTrigger').click();
        });
    }


    $(document).on('click', '.editBooking', function () {
        fetchSevaBooking($(this).data('id'));
    });

    $(document).on('click', '.deleteBooking', function () {

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

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

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

                        ajaxRequest({
                            url: "{{ route('seva.booking.delete', ':id') }}".replace(':id', id),
                            method: "DELETE",
                            data: { _token: "{{ csrf_token() }}" },
                            loaderTarget: "#seva-booking-table-card"
                        })
                        .then(() => reloadSevaBookingTable())
                        .catch(() => $(btn).prop('disabled', false));
                    }
                }
            }
        });
    });

    function initSevaTimePicker() {
        const sevaTimeInput = document.querySelector('input[name="seva_time"]');

        if (!sevaTimeInput) return;

        // 🔁 Destroy existing instance if already initialized
        if (sevaTimeInput._flatpickr) {
            sevaTimeInput._flatpickr.destroy();
        }

        // ✅ Initialize Flatpickr
        flatpickr(sevaTimeInput, {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true
        });
    }

    function initSevaBookingDatePicker() {
        const dobInputx = document.querySelector('input[name="seva_date"]');
        
        const currentYear = new Date().getFullYear();

        const commonOptions = {
            format: dateFormat,
            allowRepick: true,
            autoClose: false,

            dropdowns: {
                months: true,
                years: true,
                minYear: currentYear - 10,
                maxYear: currentYear + 10
            },

            lang: getLitepickerLocale(locale),
            appendTo: dobInputx.closest('.col-md-4'),
            
            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 (dobInputx) {
            if (dobInputx._litepicker) dobInputx._litepicker.destroy();

            dobInputx._litepicker = new Litepicker({
                element: dobInputx,
                ...commonOptions
            });
        }
    }
</script>
@endpush