@extends('layouts.app')

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

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

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

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

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

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

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

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

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

@include('admin.donation_items.ae-modal')
@include('admin.donation_items.trans-modal')
@endsection
@push('scripts')
<script>
    let donationItemTable;

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

    var addText  = "{{ __('menu.donation_items').' '.__('actions.add_new') }}";
    var editText = "{{ __('menu.donation_items').' '.__('actions.edit') }}";

    $(document).ready(function () {

        /* ===============================
         * YAJRA DATATABLE INIT
         * =============================== */
        donationItemTable = $('#donationItemTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('donation_items.list.ajax') }}",
                type: "GET"
            },
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false, width: '60px' },
                { data: 'title', name: 'title' },
                { data: 'unit', name: 'unit' },
                { data: 'stock', name: 'stock' },
                { data: 'status', name: 'status' },
                { data: 'created_at', name: 'created_at' },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end'
                }
            ]
        });

        /* ===============================
         * OPEN ADD MODAL
         * =============================== */
        $('#addDonationItemBtn').on('click', function () {
            resetDonationItemForm();
            $('#donationItemModalTrigger').click();
            $('#donationItemModalTitle').text(addText);
            initDonationUnitSelect();
        });

        /* ===============================
         * TOGGLE STATUS
         * =============================== */
        $(document).on('change', '.toggleDonationItemStatus', function () {

            const $checkbox = $(this);
            const id = $checkbox.data('id');
            const status = $checkbox.is(':checked') ? 1 : 0;

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

            ajaxRequest({
                url: "{{ route('donation_items.toggle.status') }}",
                method: "POST",
                data: { id, status, _token: "{{ csrf_token() }}" },
                loaderTarget: "#donation-item-table-card"
            })
            .then(res => {
                if (!res.status) {
                    $checkbox.prop('checked', !status);
                    showAlert('error', res.message);
                } else {
                    showAlert('success', res.message);
                }
            })
            .finally(() => {
                $checkbox.prop('disabled', false);
            });
        });

        /* ===============================
         * FORM SUBMIT
         * =============================== */
        $('#donationItemForm').validate({
            rules: {
                'translations[en][title]': { required: true }
            },
            errorClass: 'text-danger',

            submitHandler: function (form) {

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

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

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

    });

    function reloadDonationItemTable() {
        if (donationItemTable) {
            donationItemTable.ajax.reload(null, false);
        }
    }

    function fetchDonationItem(id) {
        ajaxRequest({
            url: `/donation-items/edit/${id}`,
            method: "GET",
            loaderTarget: "#donation-item-table-card"
        })
        .then(res => {
            if (!res.status) {
                showAlert('error', res.message);
                return;
            }

            fillDonationItemForm(res.data);
            $('#donationItemModalTrigger').click();
            $('#donationItemModalTitle').text(editText);
        });
    }

    function fillDonationItemForm(data) {

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

        $('#donation_item_id').val(data.id);
        $('#donation_item_title_en').val(data.translations?.en?.title ?? '');
        $('#donation_item_description_en').val(data.translations?.en?.description ?? '');
        //$('#donation_item_unit_id').val(data.unit_id);
        initDonationUnitSelect(data.unit_id);
    }

    function resetDonationItemForm() {
        $('#donationItemForm')[0].reset();
        $('#donation_item_id').val('');
    }

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

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

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

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

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

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

    /* ===============================
     * TRANSLATIONS (UNCHANGED PATTERN)
     * =============================== */
    $(document).on('click', '.langItem', function () {

        const itemId = $(this).data('donation-item-id');
        const lang   = $(this).data('lang');
        const exists = $(this).data('exists');

        $('#translationModalTrigger').click();
        $('#langCode').val(lang);
        $('#translationLangLabel').html(addText+'('+lang.toUpperCase()+')');
        $('#donationItemId').val(itemId);

        if (!exists) {
            $('#title').val('');
            $('#description').val('');
            return;
        }

        ajaxRequest({
            url: "{{ route('donation_items.translation.show', ['donationItem' => ':item', 'lang' => ':lang']) }}"
                    .replace(':item', itemId)
                    .replace(':lang', lang),
            method: "GET",
            loaderTarget: "#donation-item-table-card"
        })
        .then(res => {
            if (res?.data) {
                $('#title').val(res.data.title ?? '');
                $('#description').val(res.data.description ?? '');
            }
        });
    });

    $('#translationForm').validate({
        rules: {
            title: { required: true }
        },
        errorClass: 'text-danger',

        submitHandler: function (form) {

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

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

            const sevaId = $('#donationItemId').val();
            const lang   = $('#langCode').val();

            ajaxRequest({
                url: "{{ route('donation_items.translation.store', ['donationItem' => ':seva', 'lang' => ':lang']) }}"
                        .replace(':seva', sevaId)
                        .replace(':lang', lang),
                method: "POST",
                data: $('#translationForm').serialize(),
                loaderTarget: "#translation-card"
            })
            .then(res => {
                showAlert('success', res.message || 'Saved successfully');
                $('#transModalClose').click();
                // refresh list to update badge state / title
                reloadDonationItemTable();
            })
            .finally(() => {
                $submitBtn.prop('disabled', false);
            });
        }
    });

    function initDonationUnitSelect(selectedId = null) {

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

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

        const ts = new TomSelect('#donation_item_unit_id', {
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            maxItems: 1,
            preload: true,
            load(query, callback) {
                fetch(`{{ route('donation_items.list.unitOptions') }}?q=${encodeURIComponent(query)}`)
                    .then(res => res.json())
                    .then(res => callback(res)) // 👈 plain array
                    .catch(() => callback());
            },

            onInitialize() {
                 this.enable();
                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);

                        if (res.data.lock_unit === true) {
                            this.disable();
                        }

                    });
            }
        });

        return ts;
    }

</script>
@endpush