@extends('layouts.app')
@section('title', __('menu.nakshatras'))
@section('content')
    <div class="row row-deck row-cards">
        <div class="col-12">
            <div class="card" id="nakshatra-table-card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('nakshatra.title') }}</h3>
                    <div class="card-actions">
                        <a href="javascript:void(0)" id="addNakshatraBtn" 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">
                            <thead>
                                <tr>
                                    <th width="80">#</th>
                                    <th>
                                        {{ __('nakshatra.title') }}
                                        ({{ strtoupper(app()->getLocale()) }})
                                    </th>

                                    <th>{{ __('nakshatra.title') }} ({{ __('common.other_languages') }})</th>
                                    <th class="text-end">{{ __('common.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody id="nakshatraTableBody">
                                <!-- loaded via JS -->
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
@include('admin.nakshatra.ae-modal')
@endsection
@push('scripts')
    <script>
        var addNakshatraText = "{{ __('nakshatra.title').' '.__('actions.add_new') }}";
        var editNakshatraText = "{{ __('nakshatra.title').' '.__('actions.edit') }}";

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

        $(function () {

            // Open modal
            $('#addNakshatraBtn').on('click', function () {
                $('#nakshatraForm')[0].reset();
                $('#nakshatra_id').val('');
                $('#nakshatraModalTitle').text(addNakshatraText);
                $('#nakshatraModalTrigger').click();
            });

            // Validation
            $('#nakshatraForm').validate({
                rules: {
                    @foreach($activeLanguages as $lang)
                    "translations[{{ $lang['code'] }}]": { required: true },
                    @endforeach
                },
                errorClass: 'text-danger',

                submitHandler: function (form) {

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

                    // 🔒 Disable submit button
                    $submitBtn.prop('disabled', true);

                    ajaxRequest({
                        url: "{{ route('nakshatras.store') }}",
                        method: "POST",
                        data: formData,
                        loaderTarget: "#nakshatra-card"
                    })
                    .then(res => {

                        showAlert('success', res.message || 'Saved successfully');

                        // Close modal (Tabler-safe)
                        $('#nakshatraModalClose').click();

                        // ⏱ Delay list reload by 2 seconds
                        setTimeout(() => {
                            loadNakshatras();
                        }, 2000);

                    })
                    .catch(() => {
                        // error toast already handled inside ajaxRequest
                    })
                    .finally(() => {
                        // 🔓 Always re-enable submit button
                        $submitBtn.prop('disabled', false);
                    });
                }
            });


        });

        function loadNakshatras() {

            ajaxRequest({
                url: "{{ route('nakshatras.list.ajax') }}",
                method: "GET",
                loaderTarget: "#nakshatra-table-card"
            })
            .then(res => {

                const tbody = $('#nakshatraTableBody');
                tbody.empty();

                if (!res.data || res.data.length === 0) {
                    tbody.append(`
                        <tr>
                            <td colspan="4" class="text-center text-muted">
                                No records found
                            </td>
                        </tr>
                    `);
                    return;
                }

                res.data.forEach((row, index) => {

                    let badges = '';

                    if (row.others.length) {
                        row.others.forEach((lang, langIndex) => {
                            // Cycle through colors consistently
                            let color = colorCodes[langIndex % colorCodes.length];

                            // Optionally alternate outline/soft for variety
                            //let variant = langIndex % 2 === 0 ? 'badge-outline' : 'badge-soft';
                            let variant = 'badge-outline';

                            badges += `
                                <span class="badge ${variant} text-${color} me-1 mb-1" 
                                    title="${lang.name}">
                                    ${lang.code.toUpperCase()} | ${lang.name}
                                </span>
                            `;
                        });
                    } else {
                        badges = `<span class="text-muted">—</span>`;
                    }

                    tbody.append(`
                        <tr>
                            <td>${index + 1}</td>

                            <td class="fw-semibold">
                                ${row.default_name}
                            </td>

                            <td>
                                ${badges}
                            </td>

                            <td class="text-end">
                                <div class="d-inline-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary editNakshatra"
                                        data-id="${row.id}">
                                        <i class="fa fa-edit"></i>
                                    </button>

                                    <button class="btn btn-sm btn-outline-danger deleteNakshatra"
                                        data-id="${row.id}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>

                        </tr>
                    `);
                });
            });
        }

        $(document).ready(function () {
            loadNakshatras();
        });

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

                fillNakshatraForm(res.data);
                $('#nakshatraModalTrigger').click();
            });
        }

        function fillNakshatraForm(data) {
            $('#nakshatraForm')[0].reset();

            // hidden id for edit
            $('#nakshatra_id').val(data.id);

            // translations
            $('.nakshatra-translation').each(function () {
                const lang = $(this).data('lang');
                $(this).val(data.names[lang] ?? '');
            });

            // modal title
            $('#nakshatraModalTitle').text(editNakshatraText);
        }


        $(document).on('click', '.editNakshatra', function () {
            const id = $(this).data('id');
            fetchNakshatra(id);
        });

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

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

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

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

                            ajaxRequest({
                                url: "{{ route('nakshatras.delete', ':id') }}".replace(':id', id),
                                method: 'DELETE',
                                data: { _token: "{{ csrf_token() }}" },
                                loaderTarget: "#nakshatra-table-card"
                            })
                            .then(res => {
                                showAlert(
                                    'success',
                                    res.message || window.i18n.nakshatra.deleteSuccess
                                );

                                $(btn).closest('tr').fadeOut(300, function () {
                                    $(this).remove();
                                });

                                setTimeout(loadNakshatras, 2000);
                            })
                            .catch(() => {
                                $(btn).prop('disabled', false);
                            });
                        }
                    }
                }
            });
        });

    </script>
@endpush