@extends('layout.base')

@section('action')
    <!-- Button to trigger modal -->
    <a href="{{ route('visa.confirm') }}" class="btn btn-light-primary btn-sm rounded">
        <i class="fas fa-plus"></i> Add
    </a>

    {{-- <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 type="button" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalMatrix">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <i class="fas fa-eye"></i> Matrix                                                                                                                </button>   -->
@endsection


@section('content')
    <style>
        .modal-backdrop.show {
            opacity: 0.5 !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .modal-content {
            background-color: #fff !important;
            z-index: 1055;
            /* pastikan di atas backdrop */
        }
    </style>
    <!-- Modal Import -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="modal fade" id="modalImport" tabindex="-1" aria-labelledby="modalImportLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalImportLabel">Import Visa Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formImportVisa" action="{{ route('visa.import') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <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 class="mb-3">
                            <a href="{{ route('visa.template') }}" class="btn btn-light-primary btn-sm rounded">
                                <i class="fas fa-download"></i> Download Template
                            </a>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--begin::Alert-->
    <div class="alert alert-dismissible bg-light-primary d-flex flex-column flex-sm-row p-5 mb-10 shadow-sm">
        <!--begin::Wrapper-->
        <div class="d-flex flex-column pe-0 pe-sm-10">
            <!--begin::Title-->
            <h4 class="fw-semibold">IMPORTANT INFORMATION</h4>
            <!--end::Title-->
            <ol>
                <li>Athletes participating in these WCH must obtain the mandatory C8A Visa Index.</li>
                <li>Others (coaches and additional coaches, judges, team managers, medical doctors, mental health professionals, paramedical staff and additional paramedical staff, as well as photographers, media and press, and any FIG Family member on duty on or around the FOP) participating in these WCH must obtain the mandatory C8B Visa Index.</li>
                <li>All C8A or C8B Visa Index requests must be submitted through LOC Online System from 22 July 2025 until 26 September 2025.</li>
                <li>The LOC will start the visa processing only after receipt the payment of USD 135 per applicant. And this NON-REFUNDABLE payment </li>
                <li>Upload a scan of the applicant's passport in accordance with the travel passport used.</li>
                <li>LOC is not responsible for any changes or alterations to passports after the visa has been processed.</li>
            </ol>
        </div>
        <!--end::Wrapper-->

        <!--begin::Close-->
        <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
            <i class="ki-duotone ki-cross fs-1 text-primary"><span class="path1"></span><span class="path2"></span></i>
        </button>
        <!--end::Close-->
    </div>
    <!--end::Alert-->

    <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">Visa List</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableVisa">
                <thead>
                    <tr>
                        <th></th> <!-- Kolom expand -->
                        <th>Visa Number</th>
                        <th>User ID</th>
                        <th>Country</th>
                        <th>Total Person</th>
                        <th>Invoice</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>


    <!-- Modal Konfirmasi Upload -->
    <div class="modal fade" id="modalVisaUpload" tabindex="-1">
        <div class="modal-dialog modal-xl" style="width: 80%">
            <form id="formVisaUpload" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>E-Visa Upload</h5>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Accreditation Name</th>
                                    <th>E-Visa</th>
                                </tr>
                            </thead>
                            <tbody id="visaUploadList">
                                <!-- Generated by JS -->
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit Visa</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalPreviewDocument" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img id="previewImage" src="" class="img-fluid" alt="Document Preview">
                </div>
            </div>
        </div>
    </div>




    @include('arrival&departure.elements.detail')
    @include('arrival&departure.elements.preview')
    {{-- @include('visa.elements.matrix') --}}
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('visa.datatable') }}",
            _edit: "{{ route('visa.update', ':id') }}",
            _destroy: "{{ route('visa.destroy', ':id') }}",
        }


        window.APP_URL = "{{ env('APP_URL') }}";
    </script>
    <script>
        $(function() {
            let table = $('#datatableVisa').DataTable({
                scrollY: true,
                scrollX: true,
                scrollCollapse: true,
                serverSide: true,
                processing: true,
                ajax: CompactUrls._datatable,
                columns: [{
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: '',
                    },
                    {
                        data: 'visa_number',
                        defaultContent: '-'
                    },
                    {
                        data: 'user_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'country',
                        defaultContent: '-'
                    },
                    {
                        data: 'person',
                    },
                    {
                        data: 'invoice',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            function formatChild(data, visaId, visaNumber) {
                let html = `<table class="table table-sm table-bordered child-table">
    <thead>
        <tr>
            <th>Full Name</th>
            <th>Country</th>
            <th>No Passport</th>
            <th>Visa Category</th>
            <th>Passport Photo</th>
            <th>Passport Cover</th>
            <th>e Visa</th>
        </tr>
    </thead>
    <tbody>`;

                data.forEach(item => {
                    const fullName = item ? `${item.first_name} ${item.last_name}` : '-';
                    const noPassport = item ? `${item.number_of_id}` : '-';
                    const countries = item ? `${item.countries_name}` : '-';

                    // Visa Category badge
                    let visaLabel = 'Unknown';
                    let badgeClass = 'bg-dark';
                    if (item.visa_category === 'C8A') {
                        visaLabel = 'Athlete / C8A';
                        badgeClass = 'bg-success';
                    } else if (item.visa_category === 'C8B') {
                        visaLabel = 'Non-Athlete / C8B';
                        badgeClass = 'bg-primary';
                    }
                    const visaBadge =
                        `<span class="badge ${badgeClass}" style="font-size: 0.85rem; padding: 6px 10px; border-radius: 12px;">${visaLabel}</span>`;

                    // Build row
                    html += `
        <tr>
            <td>${fullName}</td>
            <td>${countries}</td>
            <td>${noPassport}</td>
            <td>${visaBadge}</td>
            <td>${item.picture ? `<button class="btn btn-sm btn-primary view-document" data-img="/storage/${item.picture}">View</button>` : '-'}</td>
            <td>
                ${item.upload_id 
                    ? (() => {
                        let fileUrl = `{{ asset('storage/') }}/${item.upload_id}`;
                        let ext = item.upload_id.split('.').pop().toLowerCase();

                        if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
                            return `<button class="btn btn-sm btn-primary view-document" 
                                        data-img="${fileUrl}">View</button>`;
                        } else if (ext === 'pdf') {
                            return `<a href="${fileUrl}" target="_blank" class="btn btn-sm btn-danger">
                                        View PDF
                                    </a>`;
                        } else {
                            return `<a href="${fileUrl}" target="_blank" class="btn btn-sm btn-secondary">
                                        Download
                                    </a>`;
                        }
                    })()
                    : '-'}
            </td>

            <td>${item.e_visa ? `<button class="btn btn-sm btn-primary view-document" data-img="/storage/${item.e_visa}">View</button>` :
                `<button class="btn btn-sm btn-primary upload-e-visa" onclick="showVisaUploadModal('${item.id}', '${visaId}', '${visaNumber}')">Upload</button>`}</td>
        </tr>`;
                });

                html += `</tbody></table>`;
                return html;
            }

            $('#datatableVisa tbody').on('click', 'td.dt-control', function() {
                let tr = $(this).closest('tr');
                let row = table.row(tr);
                let icon = $(this).find('i');

                if (row.child.isShown()) {
                    row.child.hide();
                    icon.removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
                } else {
                    let visaId = row.data().id;
                    $.get("{{ route('visa.accreditation.child', ':id') }}".replace(':id', visaId), function(
                        res) {
                        row.child(
                                `<div class="child-container-wrapper">${formatChild(res, visaId, row.data().visa_number)}</div>`
                            )
                            .show();
                        icon.removeClass('fa-plus-circle text-primary').addClass(
                            'fa-minus-circle text-danger');
                    });
                }
            });


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

                $('#previewImage').attr('src', imgSrc);
                $('#modalPreviewDocument').modal('show');
            });


            $(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).ready(function() {
                let table = $('#accreditationTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('visa.datatableInModal') }}",
                    columns: [{
                            data: 'checkbox',
                            name: 'checkbox',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'full_name',
                            name: 'full_name'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },


                    ],
                    "dom": "<'row mb-2'" +
                        "<'col-sm-6 d-flex align-items-center justify-content-start dt-toolbar'l>" +
                        "<'col-sm-6 d-flex align-items-center justify-content-end dt-toolbar'f>" +
                        ">" +
                        "<'table-responsive'tr>" +
                        "<'row'" +
                        "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
                        "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
                        ">",
                });
            });

            $(document).on('click', '.view-accreditation', function() {
                let accreditationId = $(this).data('id');
                $.ajax({
                    url: "{{ route('visa.show', ':id') }}".replace(':id', accreditationId),
                    type: 'GET',
                    success: function(response) {
                        $('#accreditation_id').val(response.id);
                        $('#title').val(response.title);
                        $('#gender').val(response.gender);
                        $('#first_name').val(response.first_name);
                        $('#last_name').val(response.last_name);
                        $('#date_of_birth').val(response.date_of_birth);
                        $('#email').val(response.email);
                        $('#mobile_number').val(response.mobile_number);
                        $('#office_number').val(response.office_number);
                        $('#organisation').val(response.organisation);
                        $('#category').val(response.category);
                        $('#function').val(response.function);
                        $('#job_title').val(response.job_title);
                        $('#nationality').val(response.nationality);
                        $('#document_type').val(response.document_type);
                        $('#number_of_id').val(response.number_of_id);
                        $('#issue_date').val(response.issue_date);
                        $('#expiration_date').val(response.expiration_date);

                        if (response.picture) {
                            $('#picture').attr('src', response.picture);
                        }
                        if (response.upload_id) {
                            $('#upload_id').attr('src', response.upload_id);
                        }

                    },
                    error: function(xhr) {
                        alert('Failed to fetch data!');
                        console.error(xhr.responseText);
                    }
                });
            });
        });

        function showVisaUploadModal(selectionId, visaId, visaNumber) {
            if (!selectionId) {
                Swal.fire('Warning', 'Please select an accreditation.', 'warning');
                return;
            }

            $('#modalPrint').modal('hide');
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');

            let container = $('#visaUploadList');
            container.html('');

            const fullName = $(`.select-row[value="${selectionId}"]`).closest('tr').find('td:eq(1)').text().trim();

            container.append(`
                <tr>
                    <td>${fullName}</td>
                    <input type="hidden" id="visa_id" name="visa_id" value="${visaId}">
                    <input type="hidden" id="visa_number" name="visa_number" value="${visaNumber}">
                    <input type="hidden" id="accreditation_id" name="accreditation_id" value="${selectionId}">
                    <td><input type="file" accept="image/*" class="form-control input-file-sm" name="e_visa" required></td>
                </tr>
            `);

            $('#modalVisaUpload').modal('show');
        }

        $('#formVisaUpload').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('visa.updateVisaAccreditation') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    Swal.fire('Success', res.message, 'success');
                    $('#modalVisaUpload').modal('hide');
                    $('#datatableVisa').DataTable().ajax.reload();
                },
                error: function(xhr) {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Submission failed.', 'error');
                }
            });
        });

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

            console.log(imgUrl);

            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');
        });




        // Print button
        // $(document).on('click', '.print-card', function() {
        //     let id = $(this).data('id');
        //     let url = CompactUrls._edit.replace(":id", id);
        //     let col = $(this).closest('tr');
        //     let data = table.row(col).data(); // Get row data

        //     // Populate modal with data
        //     $("#modalPrint").find("form").attr("action", url);
        //     $("#modalPrint").find("input[name='title']").val(data.title);
        //     $("#modalPrint").find("input[name='first_name']").val(data.first_name);
        //     $("#modalPrint").find("input[name='last_name']").val(data.last_name);
        //     // You can populate other modal fields here similarly

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

        // 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);
                    // Assuming you have a form to submit for deletion
                    $("#formDeleteVisa").attr('action', deleteUrl);
                    $("#formDeleteVisa").submit();
                }
            });
        });
    </script>
@endsection