@extends('layouts.sidebar')
@section('title', 'PTSR')
@section('content')
    @if (in_array('Manage Payroll', $privileges))
        {{-- @include('Admin.Payroll.modal') --}}
        <div class="flex justify-between py-5">

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


        <form action="{{ route('ptsr.import') }}" method="POST" enctype="multipart/form-data" class="p-6 ">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">

                <!-- File Upload -->
                <div class="flex flex-col">
                    <label for="file" class="text-sm font-medium text-gray-700 mb-1">Upload File</label>
                    <input type="file" name="file" id="file" required
                        class="w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2">
                    @error('file')
                        <span class="text-sm text-red-600">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Start Date -->
                <div class="flex flex-col">
                    <label for="start_date" class="text-sm font-medium text-gray-700 mb-1">Start Date</label>
                    <input type="date" name="start_date" id="start_date" required
                        class="w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2">
                    @error('start_date')
                        <span class="text-sm text-red-600">{{ $message }}</span>
                    @enderror
                </div>

                <!-- End Date -->
                <div class="flex flex-col">
                    <label for="end_date" class="text-sm font-medium text-gray-700 mb-1">End Date</label>
                    <input type="date" name="end_date" id="end_date" required
                        class="w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2">
                    @error('end_date')
                        <span class="text-sm text-red-600">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="flex items-end">
                    <button type="submit" class="w-full h-10 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700">
                        Import
                    </button>
                </div>
            </div>
        </form>



        <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>Name</th>
                    <th>Pay Period Start</th>
                    <th>Pay Period End</th>
                    <th>Under Time</th>
                    <th>Total Absent</th>
                    <th>ADJ</th>
                    <th>OT</th>
                    <th>Night Prem.</th>
                    <th>SHP</th>
                    <th>LHP</th>
                    <th>Duty Restday P</th>
                    <th>No of Dys</th>


                </tr>
            </thead>
            <tbody class="text-sm font-light text-center text-gray-600">

            </tbody>
        </table>

        <script>
            $(document).ready(function() {
                $('#agencyTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('ptsr.index') }}",
                    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: 's_date',
                            name: 's_date'
                        },
                        {
                            data: 'e_date',
                            name: 'e_date'
                        },

                        {
                            data: 'under_time',
                            name: 'under_time'
                        },
                        {
                            data: 'total',
                            name: 'total'
                        },

                        {
                            data: 'adj',
                            name: 'adj'
                        },
                        {
                            data: 'ot',
                            name: 'ot'
                        },
                        {
                            data: 'night',
                            name: 'night'
                        },
                        {
                            data: 'special_premium',
                            name: 'special_premium'
                        },
                        {
                            data: 'legal_holiday',
                            name: 'legal_holiday'
                        },
                        {
                            data: 'duty',
                            name: 'duty'
                        },
                        {
                            data: 'number_of_days',
                            name: 'number_of_days'
                        },


                    ]
                });
            });
        </script>
    @endif
@endsection