@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto mt-10">
        <div class="flex justify-between p-5 ">
            <div>
                <h1 class="mb-4 text-2xl font-bold">Attendance Records</h1>
            </div>
            <div> <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="toggleModal('addattendanceModal')">Add Attendance</button>
                {{-- <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="toggleModal('addholidayModal')">Add Holiday</button> --}}
            </div>

        </div>
        @if (session('success'))
            <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                {{ session('error') }}
            </div>
        @endif
        @if (!empty($messages))
            <div class="px-4 py-2 mb-4 text-yellow-800 bg-yellow-200 border border-yellow-600 rounded">
                <strong>Attention:</strong>
                <ul>
                    @foreach ($messages as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="mt-4">
            <div class="flex items-center justify-between ">
                <div class="hidden">
                    <input class="px-5 py-1 border-2 " type="date" id="start_date" name="start_date">
                    <input class="px-5 py-1 border-2 " type="date" id="end_date" name="end_date">
                    <button class="px-5 py-1 text-white bg-blue-500 border-2 rounded-sm " id="filterButton">Filter</button>
                    <a href="{{ route('export.attendance') }}"
                        class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                        Export Property
                    </a>
                </div>

                <div class="">
                    <form action="{{ route('attendance.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="file" name="file" required>
                        <button class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                            type="submit">Import Attendance</button>
                    </form>
                </div>

            </div>


            <table id="attendancetable" class="min-w-full text-center divide-y divide-gray-200">
                <thead class="">
                    <tr>


                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Name
                        </th>

                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Date
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Time
                            In</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Time
                            Out</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Hours Worked
                        </th>

                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Notes
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">
                            Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-600">

                </tbody>
            </table>
        </div>
        <!-- Add Attendance Modal -->
        <div id="addattendanceModal" class="fixed inset-0 z-10 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>

                <!-- Modal Content -->
                <div
                    class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                        <h2 class="mb-4 text-xl font-bold">Add Attendance</h2>
                        <div class="mt-5">

                            <form method="POST" action="{{ route('attendance.store') }}">
                                @csrf
                                <div class="mb-4">
                                    <label for="employee_id" class="block text-gray-700">Employee</label>
                                    <select id="employee_id" name="employee_id"
                                        class="w-full p-2 border border-gray-300 rounded">
                                        @foreach ($employees as $employee)
                                            <option value="{{ $employee->id }}">{{ $employee->complete_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <label for="date" class="block text-gray-700">Date</label>
                                    <input id="date" name="date" type="date"
                                        class="w-full p-2 border border-gray-300 rounded" required>
                                </div>
                                <div class="mb-4">
                                    <label for="clock_in" class="block text-gray-700">Clock In</label>
                                    <input id="clock_in" name="clock_in" type="time"
                                        class="w-full p-2 border border-gray-300 rounded" required>
                                </div>
                                <div class="mb-4">
                                    <label for="clock_out" class="block text-gray-700">Clock Out</label>
                                    <input id="clock_out" name="clock_out" type="time"
                                        class="w-full p-2 border border-gray-300 rounded">
                                </div>
                                <div class="mb-4">
                                    <label for="notes" class="block text-gray-700">Notes</label>
                                    <textarea id="notes" name="notes" class="w-full p-2 border border-gray-300 rounded"></textarea>
                                </div>
                                <div class="text-right">
                                    <button type="submit"
                                        class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                                        Save
                                    </button>
                                    <button type="button" onclick="toggleModal('addattendanceModal')""
                                        class="px-4 py-2 font-bold text-white bg-gray-500 rounded hover:bg-gray-700">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <div id="addholidayModal" class="fixed inset-0 z-10 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <!-- Modal Content -->
            <div
                class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                    <h2 class="mb-4 text-xl font-bold">Holiday</h2>
                    <div class="mt-5">

                        <form method="POST" action="{{ route('updateHolidayStatus') }}">
                            @csrf

                            <div class="mb-4">
                                <label for="date" class="block text-gray-700">Date</label>
                                <input id="date" name="date" type="date"
                                    class="w-full p-2 border border-gray-300 rounded" required>
                            </div>
                            <div class="mb-4">
                                <label for="status" class="block text-gray-700">Status</label>
                                <select id="status" name="status" class="w-full p-2 border border-gray-300 rounded"
                                    required>
                                    <option value="" disabled selected>Select Holiday Type</option>
                                    <option value="regular_holiday">Regular Holiday</option>
                                    <option value="special_holiday">Special Holiday</option>
                                </select>
                            </div>



                            <div class="text-right">
                                <button type="submit"
                                    class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                                    Save
                                </button>
                                <button type="button" onclick="toggleModal('addholidayModal')""
                                    class="px-4 py-2 font-bold text-white bg-gray-500 rounded hover:bg-gray-700">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>







    @foreach ($attendances as $attendance)
        <div id="editAttendanceModal{{ $attendance->id }}"
            class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-900 bg-opacity-50 modal">
            <div class="w-1/3 bg-white rounded shadow-lg modal-content">
                <h2 class="p-2 mb-4 text-xl font-bold text-white bg-blue-600">Edit Attendance</h2>
                <form method="POST" action="{{ route('attendance.update', $attendance->id) }}" class="p-10 ">
                    @csrf
                    @method('PUT')

                    <!-- Hidden input for employee_id -->
                    <input type="hidden" name="employee_id" value="{{ $attendance->employee_id }}">

                    <div class="mb-4">
                        <label for="edit_date{{ $attendance->id }}" class="block text-gray-700">Date</label>
                        <input id="edit_date{{ $attendance->id }}" name="date" type="date"
                            class="w-full p-2 border border-gray-300 rounded" value="{{ $attendance->date }}" required>
                    </div>

                    <div class="mb-4">
                        <label for="edit_clock_in{{ $attendance->id }}" class="block text-gray-700">Clock In</label>
                        <input id="edit_clock_in{{ $attendance->id }}" name="clock_in" type="time"
                            class="w-full p-2 border border-gray-300 rounded" value="{{ $attendance->clock_in }}"
                            required>
                    </div>

                    <div class="mb-4">
                        <label for="edit_clock_out{{ $attendance->id }}" class="block text-gray-700">Clock Out</label>
                        <input id="edit_clock_out{{ $attendance->id }}" name="clock_out" type="time"
                            class="w-full p-2 border border-gray-300 rounded" value="{{ $attendance->clock_out }}">
                    </div>
                    <div class="mb-4">
                        <label for="edit_hours_worked{{ $attendance->id }}" class="block text-gray-700">Hours
                            Worked</label>
                        <input id="edit_hours_worked{{ $attendance->id }}" name="hours_worked" type="text"
                            class="w-full p-2 border border-gray-300 rounded" value="{{ $attendance->hours_worked }}">
                    </div>

                    <div class="mb-4">
                        <label for="edit_notes{{ $attendance->id }}" class="block text-gray-700">Notes</label>
                        <textarea id="edit_notes{{ $attendance->id }}" name="notes" class="w-full p-2 border border-gray-300 rounded">{{ $attendance->notes }}</textarea>
                    </div>

                    <div class="text-right">
                        <button type="submit"
                            class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                            Update
                        </button>
                        <button type="button"
                            class="px-4 py-2 font-bold text-white bg-gray-500 rounded hover:bg-gray-700"
                            onclick="toggleModal('editAttendanceModal{{ $attendance->id }}')">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div id="deleteAttendanceModal{{ $attendance->id }}" class="fixed inset-0 z-10 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>

                <!-- Modal Content -->
                <div
                    class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">Delete Payroll</h3>
                        <div class="mt-5">
                            <!-- Delete Payroll Form -->
                            <form action="{{ route('attendance.destroy', $attendance->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <p class="text-sm text-gray-500">Are you sure you want to delete </p>
                                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                    <button type="submit"
                                        class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                                        Delete
                                    </button>
                                    <button type="button"
                                        class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                        onclick="toggleModal('deleteAttendanceModal{{ $attendance->id }}')">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    <script>
        $(document).ready(function() {
            var attendanceTable = $('#attendancetable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('attendance') }}", // Adjust this to your route name
                    data: function(d) {
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                    },
                    error: function(xhr, error, code) {
                        console.error('AJAX Error:', error);
                        console.log('Response:', xhr.responseText);
                    }
                },
                columns: [{
                        data: 'complete_name',
                        name: 'complete_name'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'clock_in',
                        name: 'clock_in',
                    },
                    {
                        data: 'clock_out',
                        name: 'clock_out',
                    },
                    {
                        data: 'hours_worked',
                        name: 'hours_worked'
                    },
                    {
                        data: 'notes',
                        name: 'notes'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [1, 'desc']
                ]
            });

            $('#filterButton').on('click', function() {
                attendanceTable.ajax.reload(); // Reload the DataTable with new filter values
            });
        });

        // Function to open modal by ID
        function toggleModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.toggle('hidden');
        }
    </script>

@endsection