@extends('layouts.sidebar')
@section('title', 'Summary')
@section('content')
    @if (in_array('Manage Attendance', $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('summary.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  text-white  bg-[#1d1d1d]">
                    <th>Name</th>
                    <th>Pay Period Start</th>
                    <th>Pay Period End</th>
                    <th>No of Dys</th>
                    <th>Under Time</th>

                    <th>OT</th>

                    <th>SHP</th>

                    <th>Action</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('payroll.summary') }}",
                    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: 'number_of_days',
                            name: 'number_of_days'
                        },

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

                        {
                            data: 'ot',
                            name: 'ot'
                        },

                        {
                            data: 'special_premium',
                            name: 'special_premium'
                        },
                        {
                            data: 'action',
                            name: 'action'
                        },




                    ]
                });
            });
        </script>
        <div id="deleteModal"class="fixed inset-0 z-50 flex items-start justify-center bg-gray-800 bg-opacity-60 hidden">
            <div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden mt-20">


                <div class="flex justify-between items-center bg-gray-700 p-4 rounded-t-lg">
                    <h5 class="font-semibold text-lg text-white">Confirm Deletion</h5>
                    <button onclick="closeModal()" class="text-white text-xl font-semibold">&times;</button>
                </div>
                <div class="px-6 py-4">
                    <p class="text-sm text-gray-700">Are you sure you want to delete this record?</p>
                </div>

                <form id="deleteForm" action="" method="POST">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" id="deleteRecordId" name="record_id" value="">
                    <div class="flex justify-end space-x-4 px-6 py-4 bg-gray-50 rounded-b-lg">
                        <button type="button" class="px-4 py-2 mr-2 bg-gray-300 rounded"
                            onclick="closeModal()">Cancel</button>
                        <button type="submit" class="px-4 py-2 text-white bg-red-600 rounded">Delete</button>
                    </div>
                </form>
            </div>
        </div>



        <script>
            function openDeleteModal(recordId, route) {
                document.getElementById('deleteRecordId').value = recordId; // Set the ID in the hidden input
                document.getElementById('deleteForm').action = route; // Update the form action with the correct route
                document.getElementById('deleteModal').classList.remove('hidden'); // Show the modal
            }

            function closeModal() {
                document.getElementById('deleteModal').classList.add('hidden'); // Hide the modal
            }
        </script>
    @endif
@endsection