@extends('layouts.sidebar')

@section('title', 'Departments')
@section('content')
    @if (in_array('Manage Payroll', $privileges))
        <div class="mx-auto ">
            <div class="overflow-x-auto">
                <div class="max-w-4xl mx-auto mt-8 p-6 relative overflow-hidden">
                    <div class="absolute inset-0 bg-blue-50 opacity-30"></div> <!-- Background pattern layer -->
                    <div class="relative z-10 text-center">
                        <h2 class="text-3xl font-extrabold text-gray-800 mb-3">Employee List of
                            {{ $department->department_name }} Department</h2>
                        <p class="text-lg text-gray-600">Agency: <span
                                class="font-semibold">{{ $department->client->company->agency->name }}</span></p>
                        <p class="text-lg text-gray-600">Company: <span
                                class="font-semibold">{{ $department->client->company->name }}</span></p>
                        <p class="text-lg text-gray-600">Client: <span
                                class="font-semibold">{{ $department->client->business_name }}</span></p>
                    </div>
                </div>


                <table id="department-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-3">Employee Name</th>
                            <th class="px-6 py-3">Date Hired </th>
                            <th class="px-6 py-3">Position</th>
                            <th class="px-6 py-3">Salary</th>
                            <th class="px-6 py-3">Start Date</th>
                            <th class="px-6 py-3">End Date</th>
                            <th class="px-6 py-3">Status</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm font-light text-center text-gray-600">
                    </tbody>
                </table>
            </div>

        </div>
    @else
        <div class="my-2 flex h-full w-full justify-center items-center">
            <div>
                <i class="text-3xl bx bx-lock mr-2"></i> <!-- Large lock icon indicating no access -->
                <span class="text-gray-500">You don't have privilege to access this page</span>
            </div>

        </div>
    @endif



    <script>
        $(document).ready(function() {
            var department_id = {{ $department->id }};

            var departmentTable = $('#department-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('departments.employees.show', ['id' => ':id']) }}".replace(':id',
                        department_id),
                    data: function(d) {
                        d.department_id = department_id;
                    }
                },
                columns: [

                    {
                        data: function(row) {
                            return row.employee.first_name + ' ' + row.employee.middle_name + ' ' +
                                row.employee.last_name;
                        },
                        name: 'employee.first_name', // You can use any field name for sorting or searching
                        render: function(data, type, row) {
                            // Concatenate first, middle, and last name for display
                            return row.employee.first_name + ' ' + row.employee.middle_name + ' ' +
                                row.employee.last_name;
                        }
                    }, {
                        data: 'date_hired',
                        name: 'date_hired'
                    },
                    {
                        data: 'position',
                        name: 'position'
                    },
                    {
                        data: 'salary',
                        name: 'salary'
                    },
                    {
                        data: 'employment_start_date',
                        name: 'employment_start_date'
                    },
                    {
                        data: 'employment_end_date',
                        name: 'employment_end_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },

                ],
                order: [
                    [0, 'desc']
                ]
            });

            // Edit Button: Open Edit Modal

        });
    </script>
@endsection