@extends('layout.base')

@section('action')
    <a href="{{ route('personal-profile.add') }}" class="btn btn-light-primary btn-sm rounded">
        <i class="fas fa-plus"></i> Add
    </a>
@endsection


@section('content')
    <style>
        .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;
        }

        .img-fixed {
            width: 120px;
            /* bisa kamu sesuaikan, biasanya 100–140px */
            height: 160px;
            /* rasio 3:4 seperti foto ID */
            object-fit: cover;
            /* zoom tanpa melar */
            /* fallback warna */
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Modal Import -->
    <div class="modal fade" id="modalImport" tabindex="-1" aria-labelledby="modalImportLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="formImportAccreditation" action="{{ route('accreditation.import') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalImportLabel">Import Accreditation Data</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <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>
                    <div class="modal-footer">
                        <a href="{{ route('accreditation.template') }}" class="btn btn-light-primary rounded">
                            <i class="fas fa-download"></i> Download Template
                        </a>
                        <button type="button" id="submitImport" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </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">Personal Profile List</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-stripped" id="datatableAccreditation">
                <thead>
                    <tr>
                        <th>No</th>
                        <th class="text-center" style="width: 40px; padding-left: 10px;">
                            <input type="checkbox" id="checkAll" style="transform: scale(1.7); cursor: pointer;">
                        </th>
                        <th>Action</th>
                        <th>Status</th>
                        <th>Title</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Date of Birth</th>
                        <th>Gender</th>
                        <th>Email</th>
                        <th>Category</th>
                        <th>Function</th>
                        <th>Job Title</th>
                        <th>Nationality</th>
                        <th>Print Count</th>
                        <th>Document Type</th>
                        <th>Number of ID</th>
                        <th>Issue Date</th>
                        <th>Expiration Date</th>
                        <th>Upload ID</th>
                        <th>Picture</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>

    @include('accreditation.elements.print_card')
    @include('accreditation.elements.register_phone')
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('personal-profile.datatable') }}",
            _edit: "{{ route('personal-profile.update', ':id') }}",
            _destroy: "{{ route('personal-profile.destroy', ['id' => ':id']) }}",
            _approve: "{{ route('personal-profile.approve', ['id' => ':id']) }}",
        }

        window.APP_URL = "{{ env('APP_URL') }}";
        var role = "{{ auth()->user()->role }}";
        var phone_number = "{{ auth()->user()->phone_number }}";
    </script>


    <script>
        $(function() {
            if (role == 'admin_nf' && !phone_number) {
                var filterModal = new bootstrap.Modal(document.getElementById('modalRegisterPhone'));
                filterModal.show();
            }

            let table = $("#datatableAccreditation").DataTable({
                "scrollY": true,
                "scrollX": true,
                "scrollCollapse": true,
                serverSide: true,
                processing: true,
                ajax: {
                    url: CompactUrls._datatable,
                    data: function(d) {
                        d.nationality = $('#filterNationality').val(); // 👈 kirim ke server
                    },
                },
                columns: [
                    {
                        data: 'DT_RowIndex',
                        className: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                                <div class="text-center">
                                    <input type="checkbox" class="form-check-input select-accreditation" value="${data}" style="transform: scale(1);">
                                </div>
                            `;
                        }
                    },
                    {
                        data: "action",
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: "status",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return row.status;
                        }
                    }, {
                        data: 'title',
                        defaultContent: '-'
                    },
                    {
                        data: 'first_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'last_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'date_of_birth',
                        defaultContent: '-'
                    },
                    {
                        data: 'gender',
                        defaultContent: '-'
                    },
                    {
                        data: 'email',
                        defaultContent: '-'
                    },
                    {
                        data: 'category',
                        defaultContent: '-'
                    },
                    {
                        data: 'function',
                        defaultContent: '-'
                    },
                    {
                        data: 'job_title',
                        defaultContent: '-'
                    },
                    {
                        data: 'nationality',
                        defaultContent: '-'
                    },
                    {
                        data: 'print_count', // Menambahkan kolom print_count
                        defaultContent: '0'
                    }, {
                        data: 'document_type',
                        defaultContent: '-'
                    },
                    {
                        data: 'number_of_id',
                        defaultContent: '-'
                    },
                    {
                        data: 'issue_date',
                        defaultContent: '-'
                    },
                    {
                        data: 'expiration_date',
                        defaultContent: '-'
                    },
                    {
                        data: 'upload_id'
                    },
                    {
                        data: 'picture'
                    },
                    {
                        data: "picture_path",
                        visible: false
                    },
                    {
                        data: "code_gymnastic",
                        visible: false
                    },
                    {
                        data: "flag_path",
                        visible: false
                    },


                ]
            });


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

            $(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).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).ready(function() {
                $('.select2-filter').select2({
                    placeholder: 'Select a country',
                    allowClear: true,
                    width: '100%'
                });
            });

            $(document).on('click', '.btn-edit', function () {
                let id = $(this).data('id');
                let url = CompactUrls._edit.replace(':id', id);
            })

            $(document).on('click', '.btn-approve', function() {
                let id = $(this).data('id');
                let url = CompactUrls._approve.replace(':id', id);

                $.ajax({
                        url: url,
                        type: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            status: 'approved',
                        },
                    })
                    .then((res) => {
                        Swal.fire('Approved', res.message, 'success');
                        $('#datatableAccreditation').DataTable().ajax.reload();
                    })
                    .catch((err) => {
                        Swal.fire('Error', err.responseJSON?.message || 'Failed to approve', 'error');
                    })
            });

            $(document).on('click', '.btn-cancel', function() {
                let id = $(this).data('id');
                let url = CompactUrls._approve.replace(':id', id);

                Swal.fire({
                        title: 'Reject Approval?',
                        icon: 'warning',
                        showCancelButton: true,
                        text: "Reason for rejection:",
                        input: 'text',
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'No',
                    }).then((result) => {
                        if(result.isConfirmed) {
                            $.ajax({
                                url: url,
                                type: 'POST',
                                data: {
                                    _token: $('meta[name="csrf-token"]').attr('content'),
                                    comment: result.value,
                                    status: 'disapproved',
                                },
                            })
                            .then((res) => {
                                Swal.fire('Cancelled', res.message, 'success');
                                $('#datatableAccreditation').DataTable().ajax.reload();
                            })
                            .catch((err) => {
                                Swal.fire('Error', err.responseJSON?.message || 'Failed to cancel', 'error');
                            })
                        }
                    })
            })

            // 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);

                        $.ajax({
                            url: deleteUrl,
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                            },
                            success: function(response) {
                                Swal.fire({
                                    title: 'Deleted!',
                                    text: 'Data has been deleted.',
                                    icon: 'success',
                                    timer: 1500,
                                    showConfirmButton: false
                                });

                                // Optional: reload datatable atau halaman
                                $('#datatableAccreditation').DataTable().ajax.reload();
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Error',
                                    'Something went wrong.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });

        });
    </script> 
@endsection