@extends('layouts.sidebar')
@section('title', 'leave')
@section('content')

    @if (in_array('Manage Employee', $privileges))
        @include('Admin.Employee.leave.modal')

        <div class="flex justify-between py-5">
            <h1 class="mb-4 text-2xl font-bold">Leave</h1>
            @if (in_array('Manage Employee', $privileges))
                <button type="button"
                    class="modal-button py-2.5 px-5 h-10 text-xs bg-[#1d1d1d] text-white rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700"
                    data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal"
                    data-modal-toggle="subscribe-form-modal">
                    File Leave
                </button>
            @endif
        </div>

        @if (session('success'))
            <div class="p-4 mb-4 text-white bg-green-500">
                {{ session('success') }}
            </div>
        @endif

        <table id="agencyTable" class="min-w-full bg-white border border-collapse border-gray-200 rounded shadow-md ">
            <thead>
                <tr class="text-sm leading-normal h-12 text-white uppercase bg-[#1d1d1d]">
                    <th>Employee Name</th>
                    <th>Leave Type</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Days</th>
                    <th>Status</th>
                    <th>Reason</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody class="text-sm font-light text-center text-gray-600">
                <!-- DataTables will populate this body -->
            </tbody>
        </table>

        <script>
            $(document).ready(function() {
                $('#agencyTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('leaves.index') }}", // Pointing to the index route
                    columns: [{
                            data: 'employee',
                            name: 'employee'
                        },

                        {
                            data: 'leave_type',
                            name: 'leave_type'
                        },
                        {
                            data: 'start_date',
                            name: 'start_date'
                        },
                        {
                            data: 'end_date',
                            name: 'end_date'
                        },
                        {
                            data: 'days',
                            name: 'days'
                        },
                        {
                            data: 'paid',
                            name: 'paid'
                        },
                        {
                            data: 'reason',
                            name: 'reason'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        } // No sorting/searching on action column
                    ]
                });
            });
        </script>
    @endif
@endsection