@extends('layouts.app')

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

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

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

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

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

                                <th class="text-end">{{ __('common.invoice') }}</th>

                                <th class="text-end">{{ __('menu.donation_items') }}</th>

                                <th class="text-end">{{ __('common.total_price') }}</th>

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

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

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

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

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

{{-- Modals --}}
@include('admin.devotee.ae-modal')
@include('admin.donation_booking.ae-modal')
@endsection
@push('scripts')
<script>
    let donationBookingTable;
    let donationItemIndex = 0;

    window.i18n = {
        donation: {
            deleteTitle: "{{ __('common.delete_title') }}",
            deleteConfirm: "{{ __('common.delete_confirm') }}",
            deleteYes: "{{ __('common.delete_yes') }}",
            deleteCancel: "{{ __('actions.cancel') }}",
            deleteSuccess: "{{ __('common.deleted_successfully') }}"
        },
         common: {
            donation_item: "{{ __('common.donation_item') }}",
            quantity: "{{ __('common.quantity') }}",
            unit: "{{ __('common.unit') }}",
            price: "{{ __('common.price') }}",
            remove: "{{ __('actions.remove') }}"
        }
    };

    var addDonationBookingText  = "{{ __('menu.donations').' '.__('actions.add_new') }}";
    var editDonationBookingText = "{{ __('menu.donations').' '.__('actions.edit') }}";
    var addDonationItemText     = "{{ __('menu.donation_item').' '.__('actions.add_new') }}";
    var addDevoteeModalText     = "{{ __('menu.devotee').' '.__('actions.add_new') }}";

    function attachRowValidation($row) {

        $row.find('[name$="[donation_item_id]"]').rules('add', {
            required: true
        });

        $row.find('[name$="[quantity]"]').rules('add', {
            required: true,
            number: true,
            min: 0.0001
        });

        $row.find('[name$="[unit_id]"]').rules('add', {
            required: true
        });

        $row.find('[name$="[price]"]').rules('add', {
            required: true,
            number: true,
            min: 0
        });
    }

    
    $(document).ready(function () {

        donationBookingTable = $('#donationBookingTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('donations.list.ajax') }}",
                type: "GET",
                data: function (d) {
                    // 2️⃣ Date range filter
                    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] };
                        }
                    }
                    // Merge custom filter data
                    d.filters = {
                        dateRange: dateRange,
                    };
                }
            },
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false, width: '60px' },

                { data: 'devotee_name', name: 'devotee.name' },

                { data: 'invoice_number', name: 'invoice_number', className: 'text-end' },
                { data: 'items_count', name: 'items_count', className: 'text-end' },

                { data: 'total_price', name: 'total_price', className: 'text-end' },

                { data: 'donation_date', name: 'donation_date' },

                { data: 'remarks', name: 'remarks' },

                { data: 'created_at', name: 'created_at' },

                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end'
                }
            ],
            initComplete: function () {
                const api = this.api();

                // Initialize Litepicker for date range
                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(); });

            }
        });

        $('#addDonationBookingBtn').on('click', function () {
            resetDonationBookingForm();
            $('input[name="donation_date"]').val(new Date());
            initDevoteeSelect();
            initDonationDatePicker();

            $('#donation-items-wrapper').empty();
            donationItemIndex = 0;

            // 🔥 Always start with one item
            const $row = addDonationItemRow();
            //attachRowValidation($row);


            $('#donationBookingModalTitle').text(addDonationBookingText);
            $('#donationBookingModalTrigger').click();
        });

        $('#donationBookingForm').validate({
            ignore: [], // important for TomSelect & hidden fields

            rules: {
                devotee_id: {
                    required: true
                },
                donation_date: {
                    required: true
                }
            },

            messages: {
                devotee_id: 'Please select devotee',
                donation_date: 'Please select donation date'
            },

            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('donations.booking.store') }}",
                    method: "POST",
                    data: $form.serialize(),
                    loaderTarget: "#donation-booking-card"
                })
                .then(res => {
                    showAlert('success', res.message || 'Donation booked successfully');
                    $('#donationBookingModalClose').click();
                    reloadDonationBookingTable();

                    if(res?.data?.invoice_id) {
                        INV_GEN_printInvoice(res.data.invoice_id);
                    }
                })
                .catch(err => {
                    const firstError = Object.values(err?.errors || {})[0]?.[0];
                    if (firstError) showAlert('error', firstError);
                })
                .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);
                });
            }
        });

    });

    function getDonationItemRow(index) {
        return `
        <div class="row g-3 donation-item-row mb-2" data-index="${index}">
            
            <!-- Donation Item -->
            <div class="col-md-3">
                <label class="form-label">
                    ${window.i18n.common.donation_item}
                    <span class="text-danger">*</span>
                </label>
                <select class="form-select donation-item-select"
                        name="items[${index}][donation_item_id]"></select>
            </div>

            <!-- Quantity -->
            <div class="col-md-2">
                <label class="form-label">
                    ${window.i18n.common.quantity}
                    <span class="text-danger">*</span>
                </label>
                <input type="number"
                    class="form-control quantity"
                    name="items[${index}][quantity]"
                    step="0.0001"
                    min="0">
            </div>

            <!-- Unit -->
            <div class="col-md-2">
                <label class="form-label">
                    ${window.i18n.common.unit}
                    <span class="text-danger">*</span>
                </label>
                <select class="form-select unit-select"
                        name="items[${index}][unit_id]"></select>
            </div>

            <!-- Unit Price -->
            <div class="col-md-2">
                <label class="form-label">
                    ${window.i18n.common.price}
                    <span class="text-danger">*</span>
                </label>
                <input type="number"
                    class="form-control price"
                    name="items[${index}][price]"
                    step="0.01"
                    min="0">
            </div>

            <!-- Remove -->
            <div class="col-md-1 d-flex align-items-end">
                <button type="button"
                        class="btn btn-danger btn-sm remove-donation-item">
                        ${window.i18n.common.remove}
                </button>
            </div>

        </div>`;
    }

    function initDonationItemRow($row, selectedItemId = null, selectedUnitId = null) {

        const itemSelect = $row.find('.donation-item-select')[0];
        const unitSelect = $row.find('.unit-select')[0];

        // Donation item select
        new TomSelect(itemSelect, {
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            maxItems: 1,
            preload: true,

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

            onChange(value) {
                if (!value) {
                    if (unitSelect.tomselect) {
                        unitSelect.tomselect.clearOptions();
                    }
                    return;
                }

                initDonationUnitSelectForRow(unitSelect, selectedUnitId, value);
            },

            onInitialize() {
                if (!selectedItemId) return;

                fetch(`/donation-items/find-by-id/${selectedItemId}`)
                    .then(res => res.json())
                    .then(res => {
                        if (!res.status) return;
                        this.addOption(res.data);
                        this.setValue(res.data.id);

                        initDonationUnitSelectForRow(unitSelect, selectedUnitId, res.data.id);
                    });
            }
        });
    }

    function initDonationUnitSelectForRow(selectEl, selectedId = null, donationItemId = null) {

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

        new TomSelect(selectEl, {
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            maxItems: 1,
            preload: true,

            load(query, callback) {
                if (!donationItemId) {
                    callback([]);
                    return;
                }

                fetch(`{{ route('donation_items.list.unitOptions.specific') }}?q=${encodeURIComponent(query)}&donation_item_id=${donationItemId}`)
                    .then(res => res.json())
                    .then(res => callback(res.data || []))
                    .catch(() => callback([]));
            },

            onInitialize() {
                if (!selectedId) return;

                fetch(`/donation-items/find-unit-by-id/${selectedId}`)
                    .then(res => res.json())
                    .then(res => {
                        if (!res.status || !res.data) return;
                        this.addOption(res.data);
                        this.setValue(res.data.id);
                    });
            }
        });
    }

    function addDonationItemRow(item = null) {
        const index = donationItemIndex++;
        const html = getDonationItemRow(index);

        const $row = $(html);
        $('#donation-items-wrapper').append($row);

        initDonationItemRow(
            $row,
            item?.donation_item_id ?? null,
            item?.unit_id ?? null
        );
        attachRowValidation($row);
        toggleRemoveButtons();

        return $row;
    }

    function recalculateDonationTotal() {
        let total = 0;

        $('#donation-items-wrapper .donation-item-row').each(function () {
            const price = parseFloat($(this).find('.price').val()) || 0;

            const rowTotal = price;
            total += rowTotal;

            $(this).find('.item-total').val(rowTotal.toFixed(2));
        });

        $('#total_price').val(total.toFixed(2));
    }

    $(document).on('click', '.remove-donation-item', function () {
        if ($('.donation-item-row').length <= 1) return;

        $(this).closest('.donation-item-row').remove();
        toggleRemoveButtons();

        recalculateDonationTotal();
    });

    $(document).on('input', '.price', recalculateDonationTotal);

    $(document).on('click', '#addDonationItemBtn', function () {
        addDonationItemRow();
    });

    function toggleRemoveButtons() {
        const rows = $('.donation-item-row');
        rows.find('.remove-donation-item').toggle(rows.length > 1);
    }

    function initDonationDatePicker() {
        const dobInput = document.querySelector('input[name="donation_date"]');
        
        const currentYear = new Date().getFullYear();
        const today = new Date();
        const commonOptions = {
            format: dateFormat,
            allowRepick: true,
            autoClose: false,
            maxDate: today,
            dropdowns: {
                months: true,
                years: true,
                minYear: currentYear - 10,
                maxYear: currentYear + 10
            },

            lang: getLitepickerLocale(locale),
            appendTo: document.querySelector('#donationBookingModal .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,
                //value: new Date(),
                ...commonOptions
            });
        }
    }

    function resetDonationBookingForm() {

        const $form = $('#donationBookingForm');
        if ($form.length) $form[0].reset();

        $('#donation_booking_id').val('');

        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('.invalid-feedback').remove();

        $('#donationBookingModal .modal-body').scrollTop(0);
    }

    function reloadDonationBookingTable() {
        if (donationBookingTable) {
            donationBookingTable.ajax.reload(null, false);
        }
    }

    function fetchDonationBooking(id) {
        ajaxRequest({
            url: `/donation-bookings/${id}/edit`,
            method: "GET",
            loaderTarget: "#donation-booking-table-card"
        })
        .then(res => {
            if (!res.status) {
                showAlert('error', res.message || 'Unable to fetch donation booking');
                return;
            }

            const data = res.data;

            // 🔹 Reset form and wrapper
            resetDonationBookingForm();
            $('#donation-items-wrapper').empty();
            donationItemIndex = 0;

            // 🔹 Set hidden ID if used for update
            $('#donation_booking_id').val(data.id);
            $('#donation_date').val(data.donation_date);
            $('textarea[name="remarks"]').val(data.remarks);
            $('input[name="approx_price"]').val(data.approx_price);

            // 🔹 Init selects
            initDevoteeSelect(data.devotee_id);
            initDonationDatePicker();

            // 🔹 Add each item dynamically
            if (data.items && data.items.length > 0) {
                data.items.forEach(item => {
                    const $row = addDonationItemRow(item);

                    // Set values for quantity and price
                    $row.find('input.quantity').val(item.quantity ?? '');
                    $row.find('input.price').val(item.price ?? '');

                    // Attach validation
                    attachRowValidation($row);
                });
            } else {
                // Always have at least one row
                addDonationItemRow();
            }

            // 🔹 Recalculate total
            recalculateDonationTotal();

            // 🔹 Update modal title and show
            $('#donationBookingModalTitle').text(editDonationBookingText);
            $('#donationBookingModalTrigger').click();
        });
    }

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

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

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

        $.confirm({
            title: window.i18n.donation.deleteTitle,
            content: window.i18n.donation.deleteConfirm,
            type: 'red',
            buttons: {
                cancel: { text: window.i18n.donation.deleteCancel },
                confirm: {
                    text: window.i18n.donation.deleteYes,
                    btnClass: 'btn-danger',
                    action: function () {
                        ajaxRequest({
                            url: "{{ route('donations.booking.delete', ':id') }}".replace(':id', id),
                            method: "DELETE",
                            data: { _token: "{{ csrf_token() }}" }
                        }).then(() => reloadDonationBookingTable());
                    }
                }
            }
        });
    });

    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 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;
    }
</script>
@endpush