@extends('layout.base')

@section('action')
    @if (Auth::user()->role == 'superadmin' || Auth::user()->role == 'admin_loc_accre')
        <a href="{{ route('accreditation.add') }}" class="btn btn-light-primary btn-sm rounded">
            <i class="fas fa-plus"></i> Add
        </a>
    @endif

    @if (Auth::user()->role == 'admin_loc_accre' || Auth::user()->role == 'superadmin')
        <button type="button" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal"
            data-bs-target="#modalImport">
            <i class="fas fa-upload"></i> Import
        </button>

        <a href="{{ route('accreditation.export') }}" class="btn btn-light-primary btn-sm rounded">
            <i class="fas fa-download"></i> Export
        </a>

        <button id="bulkPrintBtn" class="btn btn-success btn-sm">
            Download PDF
        </button>
    @endif
@endsection


@section('content')
    <style>
        .select2-container--default .select2-selection--single {
            background-color: #ffffff !important;
            border: 1px solid #ced4da !important;
            color: #212529 !important;
            height: 38px !important;
            border-radius: 4px !important;
        }

        /* Style teks yang ditampilkan */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #212529 !important;
            background-color: transparent !important;
            line-height: 36px !important;
        }

        /* Panah dropdown */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

        /* Style dropdown saat terbuka */
        .select2-container--open .select2-dropdown {
            background-color: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #ced4da !important;
            z-index: 9999 !important;
        }

        .img-fixed {
            width: 120px;
            /* bisa kamu sesuaikan, biasanya 100–140px */
            height: 160px;
            /* rasio 3:4 seperti foto ID */
            object-fit: cover;
            /* zoom tanpa melar */
            /* fallback warna */
        }

        #modalEditMatrix {
            z-index: 1060;
        }

        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.8);
            display: none;
            /* default hidden */
            justify-content: center;
            align-items: center;
            z-index: 2000;
            /* pastikan lebih tinggi dari modal lain */
            pointer-events: all;
            /* blokir klik ke bawah */
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Modal Import -->
    <div class="modal fade" id="modalImport" tabindex="-1" aria-labelledby="modalImportLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="formImportAccreditation" action="{{ route('accreditation.import') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalImportLabel">Import Accreditation Data</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="importFile" class="form-label">Upload File</label>
                            <input type="file" class="form-control" id="importFile" name="importFile" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="{{ route('accreditation.template') }}" class="btn btn-light-primary rounded">
                            <i class="fas fa-download"></i> Download Template
                        </a>
                        <button type="button" id="submitImport" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Accreditation List</h3>
            </div>
            <div class="card-toolbar d-flex gap-3 flex-wrap">
                @if (Auth::user()->role == 'superadmin' || Auth::user()->role == 'admin_loc')
                    <select id="filterNationality" class="form-control select2-filter" style="width: 300px">
                        <option value="">-- All Nationalities --</option>
                        @foreach ($countries as $country)
                            <option value="{{ $country->name }}">{{ $country->name }}</option>
                        @endforeach
                    </select>
                @endif

                <select id="filterCategory" class="form-control select2-filter" style="width: 300px">
                    <option value="">-- All Categories --</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-stripped" id="datatableAccreditation">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 40px; padding-left: 10px;">
                            <input type="checkbox" id="checkAll" style="transform: scale(1.5); cursor: pointer;">
                        </th>

                        <th>Action</th>
                        <th>Status</th>
                        <th>Title</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Date of Birth</th>
                        <th>Gender</th>
                        <th>Email</th>
                        <th>Category</th>
                        <th>Function</th>
                        <th>Job Title</th>
                        <th>Nationality</th>
                        <th>Print Count</th>
                        <th>Document Type</th>
                        <th>Number of ID</th>
                        <th>Issue Date</th>
                        <th>Expiration Date</th>
                        <th>Upload ID</th>
                        <th>Picture</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modalUploadID" tabindex="-1" aria-labelledby="modalUploadIDLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUploadIDLabel">Uploaded ID</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="uploadedImage" src="" class="img-fluid" alt="Uploaded ID">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalUploadPicture" tabindex="-1" aria-labelledby="modalUploadIDLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUploadIDLabel">Uploaded Picture</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="uploadPicture" src="" class="img-fluid" alt="Uploaded ID">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalEditMatrix" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Accreditation Matrix</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Insurance</label>
                        <select name="insurance" id="editInsurance" class="form-select">
                            <option value="">None</option>
                            <option value="1">i</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Transport</label>
                        <input type="text" id="editTransport" class="form-control">
                    </div>
                    <div>
                        <label><strong>Zones</strong></label>
                        <div class="d-flex flex-wrap">
                            @for ($i = 1; $i <= 15; $i++)
                                <div class="form-check me-3">
                                    <input class="form-check-input zone-checkbox" type="checkbox"
                                        id="zone{{ $i }}" value="{{ $i }}">
                                    <label class="form-check-label"
                                        for="zone{{ $i }}">{{ $i }}</label>
                                </div>
                            @endfor
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary mt-3 w-100" id="btnSaveMatrix">Save Matrix</button>
                </div>
            </div>
        </div>
    </div>

    <div id="loadingOverlay"
        style="
        display:none;
        position:fixed;
        inset:0;
        background:rgba(255,255,255,0.8);
        z-index:9999;
        align-items:center;
        justify-content:center;
        flex-direction:column;
    ">
        <div class="spinner-border text-primary" style="width:3rem;height:3rem;"></div>
        <p class="mt-3" id="loadingText">Processing the data, please wait...</p>
    </div>

    @include('accreditation.elements.print_card_front')
    @include('accreditation.elements.register_phone')
    @include('accreditation.elements.matrix')
@endsection

@section('scripts')
    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

    <script>
        function showLoading(msg = "Processing...") {
            $("#loadingText").text(msg);
            $("#loadingOverlay").css("display", "flex");
        }

        function hideLoading() {
            $("#loadingOverlay").hide();
        }

        $('#checkAll').on('change', function() {
            $('.select-accreditation').prop('checked', $(this).prop('checked'));
        });

        function openModalAndCapture(id) {
            return new Promise((resolve) => {
                // trigger modal supaya render data
                $(`.print-card[data-id="${id}"]`).trigger("click");

                // tunggu sampai modal selesai muncul
                $('#modalPrint').one('shown.bs.modal', function() {
                    console.log("Modal siap render untuk ID:", id);

                    setTimeout(async () => {
                        let pdfBytes = await captureCard_A6(id, true);
                        pdfBuffers.push(pdfBytes);

                        // tutup modal → tapi jangan resolve dulu
                        $('#modalPrint').modal('hide');
                    }, 800);
                });

                // baru resolve kalau modal benar2 tertutup
                $('#modalPrint').one('hidden.bs.modal', function() {
                    resolve();
                });
            });
        }


        const {
            PDFDocument
        } = PDFLib;
        let pdfBuffers = [];

        async function mergeAll() {
            const mergedPdf = await PDFDocument.create();

            for (let pdfBytes of pdfBuffers) {
                const pdf = await PDFDocument.load(pdfBytes);
                const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                copiedPages.forEach(page => mergedPdf.addPage(page));
            }

            const mergedBytes = await mergedPdf.save();
            const blob = new Blob([mergedBytes], {
                type: "application/pdf"
            });

            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "bulk_merged.pdf";
            a.click();
            URL.revokeObjectURL(url);
        }

        $('#bulkPrintBtn').on('click', async function() {
            let ids = [];
            $('.select-accreditation:checked').each(function() {
                ids.push($(this).val());
            });

            if (ids.length === 0) {
                alert("Pilih minimal 1 data dulu.");
                return;
            }

            showLoading(`Processing 1 from ${ids.length}...`);
            pdfBuffers = [];

            for (let i = 0; i < ids.length; i++) {
                const id = ids[i];
                $("#loadingText").text(`Processing ${i+1} from ${ids.length}...`);
                await openModalAndCapture(id);
            }

            await mergeAll();

            hideLoading();
        });
    </script>
    <script>
        const CompactUrls = {
            _datatable: "{{ route('accreditation.datatable') }}",
            _edit: "{{ route('accreditation.update', ':id') }}",
            _destroy: "{{ route('accreditation.destroy', ['id' => ':id']) }}",
            _approve: "{{ route('accreditation.approve') }}",
        }

        window.APP_URL = "{{ env('APP_URL') }}";
        var role = "{{ auth()->user()->role }}";
        var phone_number = "{{ auth()->user()->phone_number }}";
    </script>


    <script>
        $(function() {
            if (role == 'admin_nf' && !phone_number) {
                var filterModal = new bootstrap.Modal(document.getElementById('modalRegisterPhone'));
                filterModal.show();
            }

            let table = $("#datatableAccreditation").DataTable({
                "scrollY": true,
                "scrollX": true,
                "scrollCollapse": true,
                lengthMenu: [
                    [10, 25, 50, -1],
                    [10, 25, 50, 'All']
                ],
                serverSide: true,
                processing: true,
                ajax: {
                    url: CompactUrls._datatable,
                    data: function(d) {
                        d.nationality = $('#filterNationality').val(); // 👈 kirim ke server
                        d.category = $('#filterCategory').val();
                    },
                },
                columns: [{
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                            <div class="text-center">
                                <input type="checkbox" class="form-check-input select-accreditation"
                                    value="${data}" style="transform: scale(1);">
                            </div>
                        `;
                        }
                    },
                    {
                        data: "action",
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: "status",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return row.status;
                        }
                    }, {
                        data: 'title',
                        defaultContent: '-'
                    },
                    {
                        data: 'first_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'last_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'date_of_birth',
                        defaultContent: '-'
                    },
                    {
                        data: 'gender',
                        defaultContent: '-'
                    },
                    {
                        data: 'email',
                        defaultContent: '-'
                    },
                    {
                        data: 'category',
                        defaultContent: '-'
                    },
                    {
                        data: 'function',
                        defaultContent: '-'
                    },
                    {
                        data: 'job_title',
                        defaultContent: '-'
                    },
                    {
                        data: 'nationality',
                        defaultContent: '-'
                    },
                    {
                        data: 'print_count', // Menambahkan kolom print_count
                        defaultContent: '0'
                    }, {
                        data: 'document_type',
                        defaultContent: '-'
                    },
                    {
                        data: 'number_of_id',
                        defaultContent: '-'
                    },
                    {
                        data: 'issue_date',
                        defaultContent: '-'
                    },
                    {
                        data: 'expiration_date',
                        defaultContent: '-'
                    },
                    {
                        data: 'upload_id'
                    },
                    {
                        data: 'picture'
                    },
                    {
                        data: "picture_path",
                        visible: false
                    },
                    {
                        data: "code_gymnastic",
                        visible: false
                    },
                    {
                        data: "flag_path",
                        visible: false
                    },


                ]
            });

            $('#filterNationality, #filterCategory').on('change', function() {
                table.ajax.reload();
            });

            $(document).on('click', '.view-upload', function() {
                var imgUrl = $(this).data('img');

                if (imgUrl && imgUrl !== '-' && imgUrl !== 'null') {
                    $('#uploadedImage').attr('src', imgUrl);
                } else {
                    $('#uploadedImage').attr('src',
                        'https://via.placeholder.com/200?text=No+Image'
                    ); // Placeholder jika gambar tidak ada
                }

                let modal = $('#modalUploadID');
                modal.removeAttr(
                    'aria-hidden'); // Hapus atribut aria-hidden agar modal tidak dianggap tersembunyi
                modal.modal('show');
            });

            $(document).on('click', '.view-picture', function() {
                var imgUrl = $(this).data('img');

                if (imgUrl && imgUrl !== '-' && imgUrl !== 'null') {
                    $('#uploadPicture').attr('src', imgUrl);
                } else {
                    $('#uploadPicture').attr('src',
                        'https://via.placeholder.com/200?text=No+Image'
                    ); // Placeholder jika gambar tidak ada
                }

                let modal = $('#modalUploadPicture');
                modal.removeAttr(
                    'aria-hidden'); // Hapus atribut aria-hidden agar modal tidak dianggap tersembunyi
                modal.modal('show');
            });

            $(document).ready(function() {
                $('#filterNationality').select2({
                    placeholder: 'Select a country',
                    allowClear: true,
                    width: '100%'
                });

                $('#filterCategory').select2({
                    placeholder: 'Select a category',
                    allowClear: true,
                    width: '100%'
                });
            });

            function setCategoryColor(category, functionName, targetContainer = "#modalPrint") {
                const categoryColors = {
                    "Delegation": "#00bf63",
                    "FIG": "#387cb7",
                    "LOC": "#ff3131",
                    "Television": "#e7af55",
                    "Media Press / Broadcaster": "#f8f657",
                    "NF Media": "linear-gradient(90deg, #f8f657 50%, #00bf63 50%)",
                    "Security": "#202020",
                    "Observer": "#b4b4b4"
                };

                const $box = $(`${targetContainer} .category-box`);
                const color = categoryColors[category] || '#999';
                const decodedText = functionName ? decodeHtml(functionName) : '-';

                function decodeHtml(html) {
                    const txt = document.createElement("textarea");
                    txt.innerHTML = html;
                    return txt.value;
                }

                // Reset semua style sebelumnya (termasuk font-size)
                $box.css({
                    background: "",
                    backgroundColor: "",
                    fontSize: ""
                });

                // Apply warna baru
                if (color.startsWith("linear-gradient")) {
                    $box.css("background", color);
                } else {
                    $box.css("background-color", color);
                }

                // Set teks dan font-size sesuai panjang
                if (decodedText.length > 32) {
                    $box.css("font-size", "12pt");
                }

                $box.text(decodedText).attr("data-category", category);
            }



            // Jika semua dicentang manual, otomatis centang "Check All"
            $('.select-accreditation').on('change', function() {
                let totalCheckboxes = $('.select-accreditation').length;
                let totalChecked = $('.select-accreditation:checked').length;

                $('#checkAll').prop('checked', totalCheckboxes === totalChecked);
            });


            $('#downloadSelected').on('click', function() {
                let selectedIDs = [];
                let alreadyPrinted = [];

                $('.select-accreditation:checked').each(function() {
                    let id = $(this).val();
                    selectedIDs.push(id);

                    let rowData = table.rows().data().toArray().find(r => r.id == id);
                    if (rowData && rowData.print_count > 0) {
                        alreadyPrinted.push({
                            id: id,
                            count: rowData.print_count,
                            first_name: rowData.first_name,
                            last_name: rowData.last_name
                        });
                    }
                });

                if (selectedIDs.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No data selected',
                        text: 'Please select at least one accreditation.',
                    });
                    return;
                }

                const proceedPrint = () => {
                    Swal.fire({
                        title: 'Please wait...',
                        html: 'Generating your PDF file. The more data selected, the longer it may take.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ route('accreditation.bulk-pdf') }}",
                        type: 'POST',
                        data: {
                            ids: selectedIDs.join(','),
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'PDF ready!',
                                    text: 'Click below to download.',
                                    showCancelButton: true,
                                    confirmButtonText: 'Download',
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.href = response.url;
                                    }
                                });
                                table.ajax.reload();
                            } else {
                                Swal.fire('Error', 'Failed to generate PDF', 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error', 'Something went wrong during generation.',
                                'error');
                        }
                    });
                };

                if (alreadyPrinted.length > 0) {
                    let message = alreadyPrinted.map(p => {
                        let fullName = `${p.first_name || '-'} ${p.last_name || '-'}`;
                        return `${fullName} has been printed ${p.count} time${p.count > 1 ? 's' : ''}`;
                    }).join('<br>');

                    Swal.fire({
                        title: 'Some accreditations were already printed!',
                        html: `${message}<br><br>Are you sure you want to print them again?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Print Anyway',
                        cancelButtonText: 'Cancel'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            proceedPrint();
                        }
                    });
                } else {
                    proceedPrint();
                }
            });

            $(document).on('click', '.print-card', function() {
                let id = $(this).data('id');
                let url = CompactUrls._edit.replace(":id", id);
                let row = table.row($(this).closest('tr')).data();
                let encodedId = encodeURIComponent(row.function_id);


                $('#printCardId').val(id);
                $("#modalPrint").find("form").attr("action", url);

                $(".print-first-category").text(row.category);
                if (row.first_name) {
                    let formattedFirst = row.first_name
                        .toLowerCase()
                        .replace(/\b\w/g, char => char.toUpperCase());

                    const nameParts = formattedFirst.split(" ");

                    if (formattedFirst.length > 17 && nameParts.length > 2) {
                        const half = Math.ceil(nameParts.length / 2.5);
                        formattedFirst =
                            nameParts.slice(0, half).join(" ") + "<br>" +
                            nameParts.slice(half).join(" ");
                        $(".print-first-name")
                            .html(formattedFirst)
                            .css("font-size", "12pt")
                            .css("white-space", "normal");

                            $(".number-id").css("top", "72mm");
                    } else {
                        $(".print-first-name")
                            .text(formattedFirst)
                            .css("font-size", "")
                            .css("white-space", "nowrap");

                            $(".number-id").css("top", "69mm");
                    }
                } else {
                    $(".print-first-name").text("");
                }

                // Last Name
                if (row.last_name) {
                    const formattedLast = row.last_name.toUpperCase();
                    $(".print-last-name")
                        .text(formattedLast)
                        .css("font-size", formattedLast.length > 17 ? "12pt" : "");
                } else {
                    $(".print-last-name").text("");
                }


                $(".print-number-id").text(row.accre_number);

                setCategoryColor(row.category, row.function, "#modalPrint");


                let appUrl = window.APP_URL || '';

                let picturePath = row.picture_path || '';
                let pictureUrl = picturePath && picturePath !== '-' && picturePath !== 'null' ?
                    `${appUrl}/storage/${picturePath}` :
                    `${appUrl}/media/img-default-picture.png`;

                let flagPath = row.flag_path || '';
                let flagUrl = flagPath && flagPath !== '-' && flagPath !== 'null' ?
                    `${appUrl}/${flagPath}` :
                    `${appUrl}/media/img-default-picture.png`;
                $(".country-code-box").text(row.code_gymnastic || '-');
                $(".country-flag").attr("src", flagUrl);

                $("#modalPicture").attr("src", pictureUrl);
                // let id = $(this).data('id');
                $.ajax({
                    url: "{{ route('accreditation.get-zones', ':id') }}".replace(':id', id),
                    type: 'GET',
                    success: function(matrixData) {
                        if (row.category == "LOC") {
                            $(".transportation").html();
                            $(".info").html('');
                            $(".hotel").html('');
                        } else {
                            $(".transportation").text(matrixData
                                .transport);

                            $(".info").text(matrixData.insurance ? "i" : '');
                        }
                        for (let i = 1; i <= 16; i++) {
                            $(`.zona-box-${i}`).text('');
                        }

                        for (let i = 1; i <= 16; i++) {
                            if (matrixData[`zona_${i}`] == "1") {
                                $(".zona-box-" + i)
                                    .text(i)
                                    .css("color", "black");
                            } else {
                                $(".zona-box-" + i)
                                    .text(" ");
                            }
                        }
                    },
                    error: function() {
                        console.log("Error fetching zones data.");
                    }
                });

                $("#modalPrint").modal('show');
            });


            $(document).on('click', '#btnEditAccreditationMatrix', function() {
                let accreditationId = $('#printCardId').val();

                $.ajax({
                    url: "{{ route('accreditation.get-matrix', ':id') }}".replace(':id',
                        accreditationId),
                    type: 'GET',
                    success: function(res) {
                        if (res.success) {
                            $("#editTransport").val(res.data.transport);
                            $("#editInsurance").val(res.data.insurance);
                            $(".zone-checkbox").prop('checked', false);
                            for (let i = 1; i <= 16; i++) {
                                if (res.data[`zona_${i}`] == "1") {
                                    $(`#zone${i}`).prop('checked', true);
                                }
                            }

                            $("#modalEditMatrix").modal('show');
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function() {
                        alert('Failed to fetch matrix data.');
                    }
                });
            });

            $("#btnSaveMatrix").on('click', function() {
                let accreditationId = $('#printCardId').val();
                let transport = $("#editTransport").val();
                let zones = [];
                let insurance = $("#editInsurance").val();

                $(".zone-checkbox:checked").each(function() {
                    zones.push(parseInt($(this).val()));
                });

                $.ajax({
                    url: "{{ route('accreditation.update-matrix', ':id') }}".replace(':id',
                        accreditationId),
                    type: 'POST',
                    data: {
                        transport: transport,
                        insurance: insurance,
                        zones: zones,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        if (res.success) {
                            $("#modalEditMatrix").modal('hide');
                            $(".info").text(insurance ? "i" : '');
                            $(".transportation").text("T" + transport);
                            for (let i = 1; i <= 16; i++) {
                                if (zones.includes(i)) {
                                    $(".zona-box-" + i)
                                        .text(i)
                                        .css("color", "black");
                                } else {
                                    $(".zona-box-" + i)
                                        .text("");
                                }
                            }

                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'success',
                                title: res.message,
                                showConfirmButton: false,
                                timer: 2000
                            });
                        } else {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'error',
                                title: res.message,
                                showConfirmButton: false,
                                timer: 2000
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: 'Failed to update matrix.',
                            showConfirmButton: false,
                            timer: 2000
                        });
                    }
                });
            });

            $(document).on('click', '#modalPrint button[type="submit"]', function(e) {
                e.preventDefault();

                let id = $('#printCardId').val();
                if (!id) return;

                let rowData = table.rows().data().toArray().find(r => r.id == id);
                let count = rowData?.print_count || 0;

                if (count > 0) {
                    Swal.fire({
                        title: `This accreditation has already been printed ${count} time${count > 1 ? 's' : ''}.`,
                        text: 'Are you sure you want to print it again?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Print Again',
                        cancelButtonText: 'Cancel'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            capture1Card();
                        }
                    });
                } else {
                    capture1Card();
                }
            });

            //Batas yang ke Hapus

            $(document).ready(function() {
                $('#submitImport').on('click', function(e) {
                    e.preventDefault();

                    let form = $('#formImportAccreditation')[0];
                    let formData = new FormData(form);

                    $.ajax({
                        url: form.action,
                        method: "POST",
                        data: formData,
                        contentType: false,
                        processData: false,
                        beforeSend: function() {
                            Swal.fire({
                                title: 'Processing...',
                                text: 'Please wait while we import the data.',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                        },
                        success: function(response) {
                            Swal.close();

                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: response.message,
                                });

                                $('#modalImport').modal('hide');
                                $('#formImportAccreditation')[0].reset();
                                $('#datatableAccreditation').DataTable().ajax.reload();
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message,
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.close();

                            let errorMsg = 'Something went wrong.';

                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                errorMsg = Object.values(xhr.responseJSON.errors).join(
                                    ' ');
                            }

                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: errorMsg,
                            });
                        }
                    });
                });
            });

            $(document).on('click', '.btn-approve', function() {
                let id = $(this).data('id');

                let checkedIds = $('.select-accreditation:checked').map(function() {
                    return $(this).val();
                }).get();

                let ids = [];

                if (checkedIds.length > 0) {
                    ids = checkedIds;
                } else {
                    ids = [id];
                }

                if ($(this).data('approved') == true) {
                    Swal.fire({
                        title: 'Restore Approval?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'Cancel',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                    url: CompactUrls._approve,
                                    type: 'POST',
                                    data: {
                                        _token: $('meta[name="csrf-token"]').attr('content'),
                                        status: '',
                                        ids: ids
                                    },
                                })
                                .then((res) => {
                                    Swal.fire('Restored', res.message, 'success');
                                    $('#datatableAccreditation').DataTable().ajax.reload();
                                })
                                .catch((err) => {
                                    Swal.fire('Error', err.responseJSON?.message ||
                                        'Failed to restore', 'error');
                                })
                        }
                    })
                }
            });

            // Delete button
            $(document).on('click', '.delete-data', function() {
                let id = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure you want to delete this data?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Delete',
                    cancelButtonText: 'Cancel',
                }).then((result) => {
                    if (result.isConfirmed) {
                        let deleteUrl = CompactUrls._destroy.replace(':id', id);

                        $.ajax({
                            url: deleteUrl,
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                            },
                            success: function(response) {
                                Swal.fire({
                                    title: 'Deleted!',
                                    text: 'Data has been deleted.',
                                    icon: 'success',
                                    timer: 1500,
                                    showConfirmButton: false
                                });

                                // Optional: reload datatable atau halaman
                                $('#datatableAccreditation').DataTable().ajax.reload();
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Error',
                                    'Something went wrong.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });

        });
    </script>
@endsection