@extends('layouts.sidebar')

@section('title', 'Departments')
@section('content')
    @if (in_array('Manage Payroll' || 'Client Interface', $privileges))
        <div class="mx-auto ">
            <div class=" grid grid-cols-1 xl:grid-cols-6 gap-10">

                <div class="w-full mb-3 bg-white border border-gray-200 rounded shadow-md h-[22rem]">
                    <p class="h-10 p-2 text-md font-bold text-white bg-[#1d1d1d]">Client Profile</p>
                    <div class="p-4 text-xs overflow-auto">
                        <table class="w-full border border-collapse border-gray-200 table-auto">
                            <tbody>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-2 font-semibold">Agency Logo</td>
                                    <td class="px-4 py-2 text-red-600"><img
                                            src="{{ asset($department->client->agency->contact_person) }}" width="50"
                                            height="50"></td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-2 font-semibold">Agency:</td>
                                    <td class="px-4 py-2 text-red-600">{{ $department->client->agency->name }}</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-2 font-semibold">Company:</td>
                                    <td class="px-4 py-2 text-red-600">{{ $department->client->business_name }}</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-2 font-semibold">Client:</td>
                                    <td class="px-4 py-2 text-red-600">{{ $department->department_name }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="overflow-x-auto lg:col-span-5">
                    <table id="department-table" class="min-w-full bg-white border border-gray-200 rounded shadow-md ">
                        <thead>
                            <tr class="text-sm leading-normal  text-white text-nowrap 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">Start Date</th>
                                <th class="px-6 py-3">End Date</th>
                                <th class="px-6 py-3">Shift Start</th>
                                <th class="px-6 py-3">Shift End</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>

        </div>
    @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> <!-- 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.charAt(
                                0) + '. ' + row.employee.last_name;
                        },
                        name: 'employee.first_name',
                        render: function(data, type, row) {
                            return row.employee.first_name + ' ' + row.employee.middle_name.charAt(
                                0) + '. ' + row.employee.last_name;
                        },
                        width: '10%' // Set the width as needed
                    },

                    {
                        data: 'date_hired',
                        name: 'date_hired',
                        width: '5%' // Set the width as needed
                    },
                    {
                        data: 'position',
                        name: 'position',
                        width: '10%' // Set the width as needed
                    },

                    {
                        data: 'employment_start_date',
                        name: 'employment_start_date',
                        width: '10%' // Set the width as needed
                    },
                    {
                        data: 'employment_end_date',
                        name: 'employment_end_date',
                        width: '10%' // Set the width as needed
                    },
                    {
                        data: 'entry_time',
                        name: 'entry_time',
                        width: '5%' // Set the width as needed
                    },
                    {
                        data: 'exit_time',
                        name: 'exit_time',
                        width: '5%' // Set the width as needed
                    },
                    {
                        data: 'status',
                        name: 'status',
                        width: '5%' // Set the width as needed
                    }
                ],
                columnDefs: [{
                    targets: '_all', // Apply to all columns
                    className: 'text-center', // Optional: align content to the center
                }],
                order: [
                    [0, 'desc']
                ]
            });

            // Edit Button: Open Edit Modal
        });
    </script>

@endsection