@extends('layouts.app')

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

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

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

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

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

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

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

                                <th>{{ __('seva.price') }}</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.seva.ae-modal')
@include('admin.seva.trans-modal')
@endsection
@push('scripts')
<script>
    let sevaTable;

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

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

    function handleSevaScheduleType() {

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

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

    $(document).ready(function () {

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

        /* ===============================
        * OPEN ADD MODAL
        * =============================== */
        $('#addSevaBtn').on('click', function () {
            resetSevaForm();
            handleSevaScheduleType();
            $('#sevaModalTrigger').click();
            initDevoteeDatePickers();
            $('#sevaModalTitle').text(addDevoteeText);
        });

        $(document).on('change', '.toggleSevaStatus', function () {

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

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

            ajaxRequest({
                url: "{{ route('seva.toggle.status') }}",
                method: "POST",
                data: { id, status,_token: "{{ csrf_token() }}" },
                loaderTarget: "#seva-table-card"
            })
            .then(res => {

                if (!res.status) {
                    // rollback
                    $checkbox.prop('checked', !status);
                    showAlert('error', res.message);
                } else {
                    showAlert('success', res.message);
                }
            })
            .catch(() => {
                $checkbox.prop('checked', !status);
                showAlert('error', 'Something went wrong');
            })
            .finally(() => {
                $checkbox.prop('disabled', false);
            });
        });



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

            submitHandler: function (form) {

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

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

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

    });

    function reloadSevaTable() {
        if (sevaTable) {
            sevaTable.ajax.reload(null, false);
        }
    }

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

            fillSevaForm(res.data);
            handleSevaScheduleType();
            $('#sevaModalTrigger').click();
            initDevoteeDatePickers();
            $('#sevaModalTitle').text(editDevoteeText);
        });
    }

    function fillSevaForm(data) {

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

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

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

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

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

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

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

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

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

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

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

    function initDevoteeDatePickers() {
        const dobInput = document.querySelector('input[name="fixed_date"]');
        
        const currentYear = new Date().getFullYear();

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

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

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

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

            setup: (picker) => {
                picker.on('show', () => {
                    setTimeout(() => {
                        const el = picker.ui;
                        if (el) {
                            el.addEventListener('mousedown', e => e.stopPropagation());
                            el.addEventListener('click', e => e.stopPropagation());
                        }
                    }, 0);
                });
            }
        };

        // 🔁 DOB picker
        if (dobInput) {
            if (dobInput._litepicker) dobInput._litepicker.destroy();

            dobInput._litepicker = new Litepicker({
                element: dobInput,
                ...commonOptions
            });
        }
    }

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

        const sevaId = $(this).data('seva-id');
        const lang   = $(this).data('lang');
        const exists = $(this).data('exists');

        $('#translationModalTrigger').click();
        $('#translationLangLabel').html(addDevoteeText);
        $('#langCode').val(lang);
        $('#sevaId').val(sevaId);

        // 🟢 Create mode – no API call
        if (!exists) {
            $('#title').val('');
            $('#description').val('');
            return;
        }
        $('#translationLangLabel').html(editDevoteeText);
        // 🔵 Edit mode – fetch only when data exists
        ajaxRequest({
            url: "{{ route('seva.translation.show', ['seva' => ':seva', 'lang' => ':lang']) }}"
                    .replace(':seva', sevaId)
                    .replace(':lang', lang),
            method: "GET",
            loaderTarget: "#seva-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 = $('#sevaId').val();
            const lang   = $('#langCode').val();

            ajaxRequest({
                url: "{{ route('seva.translation.store', ['seva' => ':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
                reloadSevaTable();
            })
            .finally(() => {
                $submitBtn.prop('disabled', false);
            });
        }
    });

</script>
@endpush