@extends('layout.base')

@section('action')
@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>
    <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 Approval 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 row">
            <div class="col-md-12">
                <ul class="nav nav-tabs nav-tabs-line">
                    <li class="nav-item">
                        <a class="nav-link type-table active" data-bs-toggle="tab" href="#kt_tab_pane_1" data-type="delegation">Delegation</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link type-table" data-bs-toggle="tab" href="#kt_tab_pane_2" data-type="media">Media</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12">
                <table class="table table-striped" id="datatableVisa">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th></th> <!-- Kolom expand -->
                            <th>Request Date</th>
                            <th>Country</th>
                            <th>User ID</th>
                            <th>Status</th>
                            <th>Invoice</th>
                            {{-- <th>E-Visa</th> --}}
                        </tr>
                    </thead>
                </table>
            </div>

        </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="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">
                    <iframe id="previewPDF" src="" class="img-fluid w-475px h-500px" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalApprove" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Approve Visa Payment</h5>
                </div>
                <div class="modal-body text-center">
                    <p class="mb-2 fw-bold">Payment Proof:</p>
                    <img id="approvePreview" src="" class="img-fluid border rounded"
                        style="max-width: 500px;" />
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" id="confirmApproveBtn">Approve</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Upload -->
    <div class="modal fade" id="modalVisaUpload" tabindex="-1">
        <div class="modal-dialog modal-lg" 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>


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

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

        window.APP_URL = "{{ env('APP_URL') }}";

        $(function() {
            let selectedCountry = $('#countryFilter').val();

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

            $(".type-table").click(function() {
                table.ajax.reload()
            })


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

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

            function formatChild(data, visaId, visaNumber) {
                isMedia = $(".type-table.active").data('type') == "media"
                title_invitation = ""
                title_bank_statement = ""
                title_stample = ""
                invitation = ""
                bank_statement = ""
                stample = ""

                if (isMedia) {
                    title_invitation = `<th class="p-4">Invitation Letter</th>`
                    title_bank_statement = `<th class="p-4">Bank Statement</th>`
                    title_stample = `<th class="p-4">Stample</th>`
                }


                let html = `<table class="table table-sm table-bordered child-table">
                                <thead class="table-light">
                                    <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">Category</th>
                                        <th class="p-4">Passport Photo</th>
                                        <th class="p-4">Passport Cover</th>
                                        ${title_invitation}
                                        ${title_bank_statement}
                                        ${title_stample}
                                        <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}` :
                        '-';

                    let category = '-';
                    if (item && item.category == 1) {
                        category = `<span class="badge bg-success" style="font-size: 0.85rem; padding: 6px 10px; border-radius: 12px;">Athlete / C8A</span>`;
                    } else if (item && item.category == 2) {
                        category = `<span class="badge bg-primary" style="font-size: 0.85rem; padding: 6px 10px; border-radius: 12px;">Non-Athlete / C8B</span>`;
                    }

                    if (isMedia) {
                        invitation = `<td>${item.invitation ? `<button class="btn btn-sm btn-primary view-document" data-img="/storage/${item.invitation}">View</button>` : '-'}</td>`
                        bank_statement = `<td>${item.bank_statement ? `<button class="btn btn-sm btn-primary view-document" data-img="/storage/${item.bank_statement}">View</button>` : '-'}</td>`
                        stample = `<td>${item.stample ? `<button class="btn btn-sm btn-primary view-document" data-img="/storage/${item.stample}">View</button>` : '-'}</td>`
                    }

                    html += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${fullName}</td>
                        <td>${countries}</td>
                        <td>${noPassport}</td>
                        <td>${category}</td>
                        <td>${item.picture ? `<button class="btn btn-sm btn-primary view-document" data-img="{{ asset('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>
                        ${invitation}
                        ${bank_statement}
                        ${stample}
                        <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>`;
                                    }
                                })()
                                : `<button class="btn btn-sm btn-info upload-e-visa" onclick="showVisaUploadModal('${item.accreditation_id}', '${visaId}', '${visaNumber}', '${fullName}')">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 rowData = row.data()
                    let visaId = rowData.id;
                    let visaNumber = rowData.visa_number;
                    $.get("{{ route('visa.accreditation.child', ':id') }}".replace(':id', visaId), function(
                        res) {
                        row.child(`<div class="child-container-wrapper">${formatChild(res, visaId, visaNumber)}</div>`)
                            .show();
                        icon.removeClass('fa-plus-circle text-primary').addClass(
                            'fa-minus-circle text-danger');
                    });
                }
            });

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

                if (srcFile.includes(".pdf")) {
                    $('#previewImage').hide();
                    $("#previewPDF").attr('src', srcFile);
                    $("#previewPDF").show();
                } else {
                    $("#previewPDF").hide();
                    $('#previewImage').attr('src', srcFile);
                    $('#previewImage').show();
                }

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

            $(document).on('click', '.view-upload', function() {
                let appUrl = window.APP_URL || '';
                var imgUrl = appUrl + $(this).data('img');

                console.log(imgUrl);

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

        $('#submitVisa').on('click', function() {
            let selectedIds = [];
            $('.select-row:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length === 0) {
                Swal.fire('Warning', 'Please select at least one accreditation.', 'warning');
                return;
            }

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

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

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

                container.append(`
                    <tr>
                        <td>${fullName}</td>
                        <td><input type="file" accept="image/*" class="form-control input-file-sm" name="passport_photo[${id}]" required></td>
                        <td><input type="file" accept="image/*" class="form-control input-file-sm" name="passport_cover[${id}]" required></td>
                        <td><input type="file" accept="image/*" class="form-control input-file-sm" name="e_visa[${id}]" required></td>
                     </tr>
                `);

            });

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

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

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

        $(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).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();
                }
            });
        });

        let approveVisaId = null;

        $(document).on('click', '.btn-approve', function() {
            approveVisaId = $(this).data('id');
            let img = $(this).data('proof');
            $('#approvePreview').attr('src', img);
        });

        $('#confirmApproveBtn').on('click', function() {
            $.ajax({
                url: "{{ route('visa.approve', ':id') }}".replace(':id', approveVisaId),
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    Swal.fire('Approved', res.message, 'success');
                    $('#modalApprove').modal('hide');
                    $('#datatableVisa').DataTable().ajax.reload();
                },
                error: function(err) {
                    Swal.fire('Error', err.responseJSON?.message || 'Failed to approve', 'error');
                }
            });
        });

        $(document).on('click', '.btn-cancel', function() {
            $.ajax({
                url: "{{ route('visa.cancel', ':id') }}".replace(':id', $(this).data('id')),
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    Swal.fire('Cancelled', res.message, 'success');
                    $('#datatableVisa').DataTable().ajax.reload();
                },
                error: function(err) {
                    Swal.fire('Error', err.responseJSON?.message || 'Failed to cancel', 'error');
                }
            })
        });

        function showVisaUploadModal(selectionId, visaId, visaNumber, fullName) {
            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('');

            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_ids[]" value="${selectionId}">
                    <td><input type="file" accept="image/*, .pdf" class="form-control input-file-sm" name="e_visa" required></td>
                </tr>
            `);

            $('#modalVisaUpload').modal('show');
        }
    </script>
@endsection