@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>
@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 */
        }

        .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;
        }
    </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>
                <li>Photos must follow the guidelines that can be <a href="{{ asset('media/pdf/WCH_C8B_Photo and Passport Guidelines.pdf') }}" target="_blank" download>downloaded here.</a></li>
                <div class="d-flex flex-row gap-5 flex-wrap m-1" style="gap: 2.5rem;">
                    <div class="d-flex align-items-start" style="max-width: 300px;">
                        <img src="{{ asset('media/photos-format-guide.png') }}" style="max-width: 120px; height: auto;" alt="Photos format guide" />
                        <div class="ms-2">
                            <span class="fw-bold">Photos format:</span>
                            <ol class="mb-0" style="font-size: 0.95em;">
                                <li>File format using *.JPEG/ .JPG/ .PNG in color.</li>
                                <li>Min. 400×600px.</li>
                                <li>Max. size 2Mb</li>
                                <li>Proper composition.</li>
                            </ol>
                        </div>
                    </div>
                    <div class="d-flex align-items-start" style="max-width: 300px;">
                        <img src="{{ asset('media/photos-composition-guide.png') }}" style="max-width: 120px; height: auto;" alt="Photos composition guide" />
                        <div class="ms-2" style="font-size: 0.95em;">
                            <span class="fw-bold d-block mb-1">Photo composition:</span>
                            <span style="display: block; word-break: break-word;">
                                The top of the head, including the hair, to the bottom of the chin must be between 50% and 60% of the image's total height. The eye height (measured from the bottom of the image to the level of the eyes) should be between 50% and 60% of the image's height.
                            </span>
                        </div>
                    </div>
                    <div class="d-flex align-items-start" style="max-width: 300px;">
                        <img src="{{ asset('media/photos-unrecommended-guide.png') }}" style="max-width: 120px; height: auto;" alt="Unrecommended photo guide" />
                        <div class="ms-2">
                            <span class="fw-bold">Unrecommended Photo</span>
                            <ol class="mb-0" style="font-size: 0.95em;">
                                <li>Blurry Photo.</li>
                                <li>Others than face photo.</li>
                                <li>Expression face photo.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </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 class="card-toolbar ms-auto">
                <form id="countryFilterForm" class="d-flex align-items-center">
                    <select id="countryFilter" name="country" class="form-control select2-filter" style="min-width: 180px;">
                        <option value="">All Countries</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                        @endforeach
                    </select>
                </form>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableVisa">
                <thead>
                    <tr>
                        <th>No</th>
                        <th></th> <!-- Kolom expand -->
                        <th>Action</th>
                        <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 selectedCountry = $('#countryFilter').val();

            let table = $('#datatableVisa').DataTable({
                scrollY: true,
                scrollX: true,
                scrollCollapse: true,
                serverSide: true,
                searching: false,
                processing: true,
                ajax: {
                    url: CompactUrls._datatable,
                    data: function(d) {
                        d.id = $('#countryFilter').val();
                    }
                },
                columns: [
                    {
                        data: 'DT_RowIndex',
                        className: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: '',
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'visa_number',
                        defaultContent: '-'
                    },
                    {
                        data: 'user_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'country',
                        defaultContent: '-'
                    },
                    {
                        data: 'person',
                    },
                    {
                        data: 'invoice',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

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

            $(document).ready(function() {
                $('.select2-filter').select2({
                    placeholder: 'Select a country',
                    allowClear: false,
                    width: '100%'
                });
            });

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

                data.forEach((item, index) => {
                    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>${index+1}</td>
                            <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
                                ? (() => {
                                    let fileUrl = `{{ asset('storage/') }}/${item.e_visa}`;
                                    let ext = item.e_visa.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>
                        </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