@extends('layouts.app')

@section('title', __('menu.devotee'))
@section('content')
<div class="row row-deck row-cards">
    <div class="col-12">
        <div class="card" id="devotee-table-card">

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

                <div class="card-actions">
                    <a href="javascript:void(0)"
                       id="addDevoteeBtn"
                       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="devoteeTable">
                        <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>{{ __('devotee.anniversary_date') }}</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></th>
                                <th class="update-datepicker"></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

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

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

@endsection
@push('scripts')
<script>
    function initDevoteeSearchSelect() {

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

        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('devotees.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();

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

                    $('#devoteeSearchModal').one('hidden.bs.modal', function () {
                        resetDevoteeForm();
                        $('#devotee_mobile').val(data.text);
                        $('#devoteeModalTitle').text(addDevoteeText);
                        $('#devoteeModalTrigger').click();

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

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

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

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

                    $('#devoteeSearchModal').one('hidden.bs.modal', function () {
                        resetDevoteeForm();
                        fetchDevotee(id);
                    });
                }
            }
        });
    }

    $('#devoteeSearchModal').on('shown.bs.modal', function () {
        initDevoteeSearchSelect();
    });


    let devoteeTable;

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

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

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

    $(document).ready(function () {

        /* ===============================
         * YAJRA DATATABLE INIT
         * =============================== */
        devoteeTable = $('#devoteeTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('devotees.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: 'anniversary_date',
                    name: 'anniversary_date',
                    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",
                            "Anniversary Date": "anniversary_date",
                            "Address": "address",
                            "Remark": "remarks",
                            "Tags": "tags",
                            "Created At": "created_at"
                        };

                        exportDataTable(
                            devoteeTable,
                            "devotees.xlsx",
                            headers,
                            100,
                            {},
                            "#devotee-table-card"
                        );
                    }
                }
            ]
        });

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

        /* ===============================
         * FORM VALIDATION + SUBMIT
         * =============================== */
        $('#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();
                    setTimeout(() => {
                        reloadDevoteeTable();
                    }, 2000);
                })
                .catch(() => {})
                .finally(() => {
                    $submitBtn.prop('disabled', false);
                });
            }
        });

    });

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

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

            fillDevoteeForm(res.data);
            initNakshatraSelect(res?.data?.nakshatra?.id ?? null);
            initGotraSelect(res?.data?.gotra?.id ?? null);
            initRashiSelect(res?.data?.rashi?.id ?? null);
            initDevoteeDatePickers();
            $('#devoteeModalTitle').text(editDevoteeText);
            $('#devoteeModalTrigger').click();
        });
    }

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

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

        $('#devotee_id').val(data.id);
        $('#devotee_name').val(data.name);
        $('#country_code').val(data.country_code);
        $('#devotee_mobile').val(data.mobile);
        $('#devotee_email').val(data.email);
        $('#devotee_dob').val(data.dob);
        $('#devotee_anniversary_date').val(data.anniversary_date);
        $('#devotee_address').val(data.address);
        $('#devotee_remarks').val(data.remarks);
        initTagsSelect(data.tags);
    }

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

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

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

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

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

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

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

</script>
@endpush