@extends('layout.base')

@section('action')
    <!-- Button to trigger modal -->
    {{-- <a href="#" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalPrint">
        <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>
    <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>Status</th>
                        <th>Invoice</th>
                        <th>Action</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>Visa Document Upload</h5>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Accreditation Name</th>
                                    <th>Passport Photo</th>
                                    <th>Passport Cover</th>
                                    <th>Inner Page</th>
                                    <th>Insurance</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>

    <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>


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

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('visa.datatable_approve') }}",
            _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: 'status',
                    },
                    {
                        data: 'id',
                        render: function(id) {
                            let url = `{{ route('visa.invoice', ':id') }}`.replace(':id', id);
                            return `
                                <a href="${url}" target="_blank" class="btn btn-sm btn-info">
                                    <i class="fa fa-file-invoice"></i> Invoice
                                </a>
                            `;
                        },
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                    },
                ]
            });

            function formatChild(data) {
                let html = `<table class="table table-sm table-bordered child-table">
                <thead class="table-light">
                    <tr>
                        <th>Full Name</th>
                        <th>Country</th>
                        <th>No Passport</th>
                        <th>Passport Photo</th>
                        <th>Passport Cover</th>
                        <th>Inner Page</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}` :
                        '-';
                        
                    html += `
                    <tr>
                        <td>${fullName}</td>
                        <td>${countries}</td>
                        <td>${noPassport}</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>

                        <td>${item.e_visa ? `<button class="btn btn-sm btn-primary view-document" data-img="{{ asset('storage/') }}/${item.e_visa}">View</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)}</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');

                console.log(imgSrc);

                $('#previewImage').attr('src', imgSrc);
                $('#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');
                }
            })
        });
    </script>
@endsection