@extends('layouts.sidebar')

@section('title', 'Employee banks')
@section('content')
    @if (in_array('Manage Banks', $privileges))
        @include('Admin.Employee.bank.modal')<!-- Include your modal -->

        <div class="w-full overflow-x-auto" id="employee-details-section">
            <div class="flex justify-between">
                <h2 class="mb-6 text-2xl font-bold">Bank Accounts Management</h2>
            </div>

            @if (session('success'))
                <div class="text-center text-red-900 alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            <table id="employedbank-table" class="min-w-full bg-white border border-gray-200 rounded shadow-md">
                <thead>
                    <tr class="text-sm leading-normal  text-white  bg-[#1d1d1d]">
                        <th class="px-6 py-1">ID</th>
                        <th class="px-6 py-1">Profile</th>
                        <th class="px-6 py-1">Name</th>
                        <th class="px-6 py-1">Date of Birth</th>
                        <th class="px-6 py-1">Status</th>
                        <th class="px-6 py-1">Email</th>
                        <th class="px-6 py-1">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm font-light text-center text-gray-600">
                    <!-- Data will be populated here by DataTables -->
                </tbody>
            </table>
        </div>
        <div id="successModal" class="fixed inset-0 z-50 hidden flex items-start justify-center bg-black bg-opacity-50">
            <div class="bg-white p-6 rounded-lg shadow-lg mt-20">
                <h2 class="text-lg font-bold">Success</h2>
                <p id="successMessage">Employee information updated successfully!</p>
                <button onclick="closeSuccessModal()" class="mt-4 px-4 py-2 bg-green-500 text-white rounded">OK</button>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                var preEmploymentTable = $('#employedbank-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('bank.index') }}",
                    },
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'profile',
                            name: 'profile'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'date_of_birth',
                            name: 'date_of_birth'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'user.email',
                            name: 'user.email'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [4, 'asc']
                    ],
                });

                window.openStatusModal = function(employeeId, employeeFullName) {
                    $('#employeeId').val(employeeId);
                    $('#employeeName').text("Employee: " + employeeFullName);
                    $('#statusModal').removeClass('hidden');
                };

                window.closeModal = function() {
                    $('#statusModal').addClass('hidden');
                };

                window.closeSuccessModal = function() {
                    $('#successModal').addClass('hidden');
                };

                // Handle the form submission
                $('#updateForm').submit(function(e) {
                    e.preventDefault();

                    // Create a FormData object from the form
                    var formData = new FormData(this); // 'this' refers to the form element itself

                    // If no file is selected but required, show an alert
                    if ($('#file')[0].files.length === 0) {
                        alert("Please upload a file.");
                        return; // Stop the form from submitting if no file is selected
                    }

                    $.ajax({
                        url: '{{ route('bank.add', ':employeeId') }}'.replace(':employeeId', $(
                            '#employeeId').val()),
                        method: 'POST',
                        data: formData,
                        contentType: false, // Do not set contentType because it's handled by FormData
                        processData: false, // Prevent jQuery from processing the data
                        success: function(response) {
                            $('#successModal').removeClass('hidden');
                            closeModal();
                            preEmploymentTable.ajax.reload(); // Reload the table data
                        },
                        error: function(xhr, status, error) {
                            alert('An error occurred: ' + error);
                        }
                    });
                });
            });
        </script>
    @else
        <div class="flex items-center justify-center w-full h-full my-2">
            <div>
                <i class="mr-2 text-3xl bx bx-lock"></i>
                <span class="text-gray-500">You don't have privilege to access this page</span>
            </div>

        </div>
    @endif

@endsection