@extends('layouts.sidebar')
@section('title', 'Summary')
@section('content')
    @if (in_array('Manage Attendance', $privileges))
        {{-- @include('Admin.Payroll.modal') --}}
        <div class="flex items-center justify-end gap-5 mb-5 mr-10 text-sm">
            <button id="reopenFailedRowsModal" class="hidden px-4 py-2 text-white bg-red-500 rounded-md ">
                Reopen Failed Rows
            </button>
            <button id="openModalButton" onclick="openModal('adjustmentModal')"
                class="px-4 py-2 text-white bg-gray-800 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">
                Add Summary
            </button>
        </div>

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


        <div id="adjustmentModal" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-gray-800 bg-opacity-50">
            <div class="bg-white rounded-lg p-6 mt-20 w-[50rem] overflow-auto">
                <div id="loading-overlay" class="flex items-center justify-center hidden mt-4 mb-4">
                    <div
                        class="inline-block w-12 h-12 border-4 border-blue-600 rounded-full spinner-border animate-spin border-t-transparent">
                    </div>
                    <p class="ml-3 text-gray-700">Processing...</p>
                </div>
                <form id="ptsrImportForm" action="{{ route('ptsr.import') }}" method="POST" enctype="multipart/form-data"
                    class="p-6 mx-auto">
                    @csrf
                    <h2 class="mb-6 text-2xl font-semibold text-center">Import Summary Data</h2>

                    <div class="grid grid-cols-1 gap-6 text-xs sm:grid-cols-2 md:grid-cols-3">
                        <!-- File Upload -->
                        <div class="flex flex-col">
                            <label for="file" class="text-sm font-medium text-gray-700">Upload File</label>
                            <input type="file" name="file" id="file" required
                                class="p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                            <span id="fileError" class="text-sm text-red-600"></span>
                        </div>

                        <!-- Start Date -->
                        <div class="flex flex-col">
                            <label for="start_date" class="text-sm font-medium text-gray-700">Start Date</label>
                            <input type="date" name="start_date" id="start_date" required
                                class="p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                            <span id="startDateError" class="text-sm text-red-600"></span>
                        </div>

                        <!-- End Date -->
                        <div class="flex flex-col">
                            <label for="end_date" class="text-sm font-medium text-gray-700">End Date</label>
                            <input type="date" name="end_date" id="end_date" required
                                class="p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                            <span id="endDateError" class="text-sm text-red-600"></span>
                        </div>
                    </div>
                    <!-- Submit Button -->
                    <div class="flex justify-end gap-4 py-5 text-sm ">
                        <button type="submit"
                            class="w-full px-6 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 sm:w-auto">
                            Import
                        </button>
                        <button type="button" onclick="closeModal('adjustmentModal')"
                            class="w-full px-4 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 sm:w-auto">
                            Close
                        </button>
                    </div>

                </form>

            </div>
        </div>

        <script>
            function openModal(id) {
                document.getElementById(id).classList.remove('hidden');
            }

            // Function to close the modal dynamically based on ID
            function closeModal(id) {
                document.getElementById(id).classList.add('hidden');
            }
        </script>
        <!-- Failed Rows Modal -->
        <div id="failedRowsModal"
            class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-800 bg-opacity-50">
            <div class="bg-white p-5 rounded-lg shadow-lg w-3/4 overflow-auto h-[40rem]">

                <div class="flex justify-between gap-5 pb-2 mt-3">
                    <div>
                        <h2 class="mb-3 text-xl font-semibold">Import Failed Rows</h2>
                    </div>
                    <div> <button id="printFailedRowsModal" onclick="printTable('#failedRowsModal')"
                            class="px-4 py-2 text-white bg-blue-500 rounded">Print</button>
                        <button id="closeFailedRowsModal" onclick="closeModal('#failedRowsModal')"
                            class="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-700">
                            Close
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm bg-white border text-nowrap">
                        <thead>
                            <tr class="bg-gray-200">

                                <th class="px-3 border-2 border-black">Message</th>
                            </tr>
                        </thead>
                        <tbody id="failedRowsBody"></tbody>
                    </table>
                </div>

                <!-- Buttons -->

            </div>
        </div>



        <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>Under Time</th>
                    <th>Total Absent</th>

                    <th>No of Days</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody class="text-sm font-light text-center text-gray-600"></tbody>
        </table>
        @include('Admin.PTSR.summary_modal')
    @endif
@endsection