@extends('layouts.sidebar')

@section('title', 'Employee banks')
@section('content')
    @include('Admin.Employee.bank.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">No Associated Bank Account</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 h-12 text-white uppercase bg-[#1d1d1d]">
                    <th class="px-6 py-1">ID</th>
                    <th class="px-6 py-1">Agency</th>
                    <th class="px-6 py-1">company</th>
                    <th class="px-6 py-1">Client</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>






    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize DataTable for Pre-Employment Employees
            var preEmploymentTable = $('#employedbank-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('bank.index') }}",
                    data: function(d) {

                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'agency',
                        name: 'agency'
                    },
                    {
                        data: 'company',
                        name: 'company'
                    },
                    {
                        data: 'client',
                        name: 'client'
                    },
                    {
                        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: [
                    [0, 'desc']
                ]
            });



        });
    </script>

@endsection