@extends('layouts.app')

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

            <div class="card-header">
                <h3 class="card-title">{{ __('menu.appointments') }}</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="apptTable">
                        <thead>
                            <tr>
                                <th width="60">#</th>

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

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

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

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

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

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

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

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

                                <th class="text-end">{{ __('common.actions') }}</th>
                            </tr>
                            <tr>
                                <th width="60"></th>
                                <th><input type="text" class="form-control" id="token_filter"/></th>
                                <th class="update-saint"><select id="filter_saint_id" name="saint_id" class="form-select"></select></th>
                                <th class="update-devotee"><select id="filter_devotee_id" name="devotee_id" class="form-select"></select></th>
                                <th>
                                    <div class="row g-2">
                                        <div class="col-auto">
                                            <label class="form-colorinput">
                                                <input name="color" type="checkbox" value="other" class="form-colorinput-input">
                                                <span class="form-colorinput-color bg-cyan"></span>
                                            </label>
                                        </div>
                                        <div class="col-auto">
                                            <label class="form-colorinput">
                                                <input name="color" type="checkbox" value="vip" class="form-colorinput-input">
                                                <span class="form-colorinput-color bg-purple"></span>
                                            </label>
                                        </div>
                                        <div class="col-auto">
                                            <label class="form-colorinput">
                                                <input name="color" type="checkbox" value="general" class="form-colorinput-input">
                                                <span class="form-colorinput-color bg-orange"></span>
                                            </label>
                                        </div>
                                    </div>
                                </th>
                                <th  class="update-datepicker"></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>

    let apptTable;
    let tokenSearchTimer = null;

    $('#token_filter').on('focus click keydown input', function (e) {
        e.stopPropagation();
    });


    $('#token_filter').on('keyup', function () {
        clearTimeout(tokenSearchTimer);

        tokenSearchTimer = setTimeout(() => {
            apptTable.draw();
        }, 400); // debounce
    });

    function getTodayFormatted() {
        const d = new Date();
        const yyyy = d.getFullYear();
        const mm = String(d.getMonth() + 1).padStart(2, '0');
        const dd = String(d.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`; // must match `dateFormat`
    }


    $(document).ready(function () {

        /* ===============================
         * YAJRA DATATABLE INIT
         * =============================== */
        apptTable = $('#apptTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('appt.list.ajax') }}",
                type: "GET",
                data: function (d) {
                    // 1️⃣ Saint filter
                    const token = $('#token_filter').val()?.trim() || null;
                    const saintTS = $('#filter_saint_id')[0]?.tomselect;
                    const saintId = saintTS && saintTS.getValue() ? saintTS.getValue() : null;

                    const devoteeTS = $('#filter_devotee_id')[0]?.tomselect;
                    const devoteeId = devoteeTS && devoteeTS.getValue() ? devoteeTS.getValue() : null;


                    // 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] };
                        }
                    }

                    // 3️⃣ Color checkboxes
                    const colors = $('input.form-colorinput-input[name="color"]:checked')
                        .map((i, el) => $(el).val())
                        .get();
                    const selectedColors = colors.length ? colors : null;

                    // Merge custom filter data
                    d.filters = {
                        saintId: saintId,
                        devoteeId: devoteeId,
                        dateRange: dateRange,
                        colors: selectedColors,
                        token: token
                    };
                }
            },
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false, width: '60px' },
                { data: 'token_number', name: 'token_number' },
                { data: 'saint', name: 'saint' },
                { data: 'devotee', name: 'devotee' },
                { data: 'category', name: 'category' },
                { data: 'date', name: 'date', defaultContent: '—' },
                { data: 'slot', name: 'slot', defaultContent: '—' },
                { data: 'member_count', name: 'member_count', defaultContent: 0 },
                { data: 'other_purpose', name: 'other_purpose', defaultContent: '—' },
                { data: 'created_at', name: 'created_at', searchable: false },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end'
                }
            ],
            order: [[1, 'asc']],

            // 🔑 Disable default search box
            dom: 'Brtip', // removed 'f' which is the search box

            initComplete: function () {
                const api = this.api();

                // Initialize Saint Select
                const $select = $('#filter_saint_id');
                $select.off('change.dt keyup.dt');
                $select.on('click keydown change', e => e.stopPropagation());
                initSaintSelect();
                
                // Initialize Devotee Select
                const $selectD = $('#filter_devotee_id');
                $selectD.off('change.dt keyup.dt');
                $selectD.on('click keydown change', e => e.stopPropagation());
                initDevoteeSelect();

                // Initialize Color Checkboxes
                initColorCheckboxes();

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

                const today = getTodayFormatted();

                // set initial date range = today
                picker.setDateRange(today, today);

                // reflect in input manually (important)
                input.value = `${today} - ${today}`;

                // show clear button
                $clearBtn.show();

                // 🔑 initial load filtered by today
                api.draw();

            },
            buttons: [
                {
                    text: 'Excel',
                    action: function () {
                        const headers = {
                            "token": "token_number",
                            "saint": "saint",
                            "devotee": "devotee",
                            "category": "category",
                            "date": "date",
                            "slot": "slot",
                        };

                        exportDataTable(
                            apptTable,
                            "appointments.xlsx",
                            headers,
                            100,
                            {},
                            "#appointments-table-card"
                        );
                    }
                }
            ]
        });


    });

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

    function initDevoteeSelect(selectedId = null) {

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

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

        devoteeSelect = new TomSelect(el, {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 1,
            create: false,
            load(query, callback) {
                fetch(`{{ route('devotees.search') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res))
                    .catch(() => callback());
            },

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

        return devoteeSelect;
    }

    function initSaintSelect(selectedId = null) {

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

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

        saintSelect = new TomSelect(el, {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 1,
            preload: true,
            create: false,
            allowEmptyOption: true,
            load(query, callback) {
                fetch(`{{ route('saints.search') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res))
                    .catch(() => callback());
            },

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

        return saintSelect;
    }

    function initColorCheckboxes() {
        // Select all your color checkboxes
        const $checkboxes = $('input.form-colorinput-input[name="color"]');

        // 🛑 Stop DataTables auto-searching or header interference
        $checkboxes.off('change.dt keyup.dt');

        $checkboxes.on('click keydown change', function (e) {
            e.stopPropagation(); // Prevent DataTables header events like sorting
        });

        // ✅ Custom event when checkbox changes
        $checkboxes.on('change', function () {
            const selectedValues = $checkboxes
                .filter(':checked')
                .map((i, el) => $(el).val())
                .get(); // Array of selected values

            // Fire your custom event or callback
            console.log('Selected colors:', selectedValues);

            // Example: You can trigger a DataTable search/filter
            // api.column('slot_category:name').search(selectedValues.join('|'), true, false).draw();
        });
    }

    $(document).on('click','.cancelBooking',function(v){
        var appointmentId = $(this).data('id');
        confirmCancelAppointment(appointmentId);
    });

    window.i18n = {

        common: {
            yes: "{{ __('common.yes') }}",
            no: "{{ __('common.no') }}",
            cancel: "{{ __('actions.cancel') }}",
        },

        appointment: {
            cancelTitle: "{{ __('common.cancel_title') }}",
            cancelConfirm: "{{ __('common.cancel_confirm') }}",
        }

    };

    function confirmCancelAppointment(appointmentId) {

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

                        // 🔒 Lock UI
                       $('.cancelBooking').prop('disabled', true);

                        ajaxRequest({
                            url: cancelUrl,
                            method: "POST",
                            loaderTarget: "#appointment_book_card_loader"
                        })
                        .then(res => {
                            if (res.status) {
                                showAlert('success', res.message);
                                reloadDevoteeTable();
                            } else {
                                showAlert('error', res.message);
                            }
                        })
                        .finally(() => {
                            $('.cancelBooking').prop('disabled', false);
                        });
                    }
                },
                cancel: {
                    text: window.i18n.common.no,
                    btnClass: 'btn-secondary'
                }
            }
        });
    }
</script>
@endpush