@extends('layout.base')

@section('action')
    <!-- Button to trigger add modal -->
    <a href="#" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalAdd">
        <i class="fas fa-plus"></i> Add/Edit
    </a>
@endsection

@section('content')
    <style>
        #visaConfirmList th,
        #visaConfirmList td {
            text-align: center;
            vertical-align: middle;
        }

        #visaConfirmList th {
            font-weight: 600;
        }

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

    <div class="card card-flush">
        <div class="card-header">
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Visa Request Form</h3>
            </div>
        </div>
        <div class="card-body">
            <form id="formVisaUpload" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="visa_id" value="{{ isset($visa) ? $visa->id : '' }}">
                <input type="hidden" name="status" value="{{ isset($status) ? $status : 'pending' }}">
                <div class="table-responsive">
                    <table class="table table-row-bordered gs-7 gy-7" id="visaConfirmList">
                        <thead>
                            <tr>
                                <th>Last Name, First Name</th>
                                <th>Function</th>
                                <th>Gender M/F</th>
                                <th>Date of birth</th>
                                <th>Citizenship</th>
                                <th>Visa Category</th>
                                <th>Passport issue date</th>
                                <th>Passport expiry date</th>
                                <th>Passport Photo</th>
                                <th>Passport Cover</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Generated by JS -->
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-end mt-12">
                    <button type="submit" class="btn btn-primary">Submit Visa</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalUploadID" tabindex="-1" aria-labelledby="modalUploadIDLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUploadIDLabel">Uploaded Passport</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="modalUploadCover" tabindex="-1" aria-labelledby="modalUploadCoverLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUploadCoverLabel">Uploaded Passport Cover</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="uploadCover" src="" class="img-fluid" alt="Uploaded Cover">
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Upload -->
    <div class="modal fade" id="modalAdd" tabindex="-1">
        <div class="modal-dialog modal-xl" style="width: 80%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Visa Document Upload</h5>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered" id="accreditationTable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>id</th>
                                <th>Full name</th>
                                <th>Function</th>
                                <th>Visa Category</th>
                                <th>Gender M/F</th>
                                <th>Citizenship</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Generated by JS -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="addOkButton">Ok</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @if (isset($accreditations))
    <script>
        let selectedIds = {!! $accreditations !!};
        let tempIds = {!! $accreditations !!};
    </script>
    @else
    <script>
        let selectedIds = [];
        let tempIds = [];
    </script>
    @endif
    <script>
        $('#formVisaUpload').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            selectedIds.forEach(id => formData.append('accreditation_ids[]', id));

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

        let tableVisaConfirm = $('#visaConfirmList').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('visa.confirmationListTable') }}",
                data: function(d) {
                    d.ids = selectedIds;
                }
            },
            columns: [{
                    data: 'full_name',
                    name: 'full_name'
                },
                {
                    data: 'function',
                    name: 'function'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'date_of_birth',
                    name: 'date_of_birth'
                },
                {
                    data: 'nationality',
                    name: 'nationality'
                },
                {
                    data: 'visa_category',
                    name: 'visa_category',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'issue_date',
                    name: 'issue_date',
                    render: function(data) {
                        return moment(data).format('DD MMM YYYY');
                    }
                },
                {
                    data: 'expiration_date',
                    name: 'expiration_date',
                    render: function(data) {
                        return moment(data).format('DD MMM YYYY');
                    }
                },
                {
                    data: 'passport_photo',
                    name: 'passport_photo',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'passport_cover',
                    name: 'passport_cover',
                    orderable: false,
                    searchable: false
                }
            ]

        });

        $('#addOkButton').on('click', function() {
            selectedIds = tempIds;
            tableVisaConfirm.ajax.reload();
        });

        $(document).on('change', '.select-row', function() {
            const id = $(this).val();

            if ($(this).is(':checked')) {
                if (!tempIds.includes(id)) {
                    tempIds.push(parseInt(id));
                }
            } else {
                tempIds = tempIds.filter(item => item !== parseInt(id));
            }

            console.log('Selected IDs:', tempIds);
        });

        $(function() {
            $(document).ready(function() {
                let table = $('#accreditationTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('visa.accreditationDataInModal') }}",
                        data: function(d) {
                            d.ids = selectedIds;
                        }
                    },
                    columns: [{
                            data: 'checkbox',
                            name: 'checkbox'
                        },
                        {
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'full_name',
                            name: 'full_name',
                            searchable: false
                        },
                        {
                            data: 'function',
                            name: 'function'
                        },
                        {
                            data: 'visa_category',
                            name: 'visa_category',
                            render: function(data, type, row) {
                                let badgeClass = '';
                                let label = '';

                                if (data === 'C8A') {
                                    badgeClass = 'badge bg-success';
                                    label = 'Athlete / ' + data;
                                } else if (data === 'C8B') {
                                    badgeClass = 'badge bg-primary';
                                    label = 'Non-Athlete / ' + data;
                                } else {
                                    badgeClass = 'badge bg-dark';
                                    label = 'Unknown';
                                }

                                return `<span class="${badgeClass}" style="font-size: 0.85rem; padding: 6px 10px; border-radius: 12px;">${label}</span>`;
                            },
                            searchable: false
                        },

                        {
                            data: 'gender',
                            name: 'gender'
                        },
                        {
                            data: 'nationality',
                            name: 'nationality'
                        }
                    ],
                    dom: "<'row mb-2'<'col-sm-6'l><'col-sm-6'f>>" +
                        "<'table-responsive'tr>" +
                        "<'row'<'col-sm-5'i><'col-sm-7'p>>"
                });
            });
        });
        $(document).on('click', '.view-picture', 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'
                );
            }

            let modal = $('#modalUploadID');
            modal.removeAttr(
                'aria-hidden');
            modal.modal('show');
        });

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

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

            let modal = $('#modalUploadCover');
            modal.removeAttr(
                'aria-hidden');
            modal.modal('show');
        });
    </script>
@endsection