@extends('layouts.sidebar')

@section('title', 'Employee')
@section('content')
    <div class="flex items-end justify-end pb-2 md:flex-row">


        <button id="toggleButton" onclick="toggleDivs()"
            class="px-6 py-3 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
            Pending Schedule
        </button>

        <!-- Divs (Initially Hidden) -->


        <script>
            let currentDiv = 1; // Start with Div 1 visible

            function toggleDivs() {
                let div1 = document.getElementById("div1");
                let div2 = document.getElementById("div2");
                let button = document.getElementById("toggleButton");

                if (currentDiv === 1) {
                    div1.classList.add("hidden"); // Hide Div 1
                    div2.classList.remove("hidden"); // Show Div 2
                    button.textContent = "Completed Schedule"; // Update button text
                    currentDiv = 2;
                } else {
                    div1.classList.remove("hidden"); // Show Div 1
                    div2.classList.add("hidden"); // Hide Div 2
                    button.textContent = "Pending Schedule"; // Update button text
                    currentDiv = 1;
                }
            }
        </script>
    </div>






    <div id="div1" class="">
        <div>
            <h2 class="mb-10 font-bold">Work Periods
            </h2>
        </div>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
            <div>
                <form id="shiftForm" class="max-w-md p-6 mx-auto border-2 border-black rounded-lg">
                    <h2 class="mb-4 text-xl font-semibold">Create Shift</h2>
                    <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>
                    <!-- Shift Name -->
                    <label class="block mb-2 text-gray-700">Shift Name</label>
                    <input type="text" name="shift_name" required
                        class="w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-300" />

                    <!-- Shift Start -->
                    <label class="block mt-4 mb-2 text-gray-700">Shift Start</label>
                    <input type="time" name="shift_start" required
                        class="w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-300" />

                    <!-- Shift End -->
                    <label class="block mt-4 mb-2 text-gray-700">Shift End</label>
                    <input type="time" name="shift_end" required
                        class="w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-300" />


                    <label class="block mt-4 mb-2 text-gray-700">Break Out</label>
                    <input type="time" name="break_out" required
                        class="w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-300" />

                    <label class="block mt-4 mb-2 text-gray-700">Break In</label>
                    <input type="time" name="break_in" required
                        class="w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-300" />

                    <!-- Status -->
                    <label class="block mt-4 mb-2 text-gray-700">Status</label>
                    <select name="status" required
                        class="w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-300">
                        <option value="day">Day Shift</option>
                        <option value="night">Night Shift</option>
                    </select>


                    <!-- Submit Button -->
                    <button type="submit"
                        class="w-full py-2 mt-6 text-white transition bg-blue-500 rounded-lg hover:bg-blue-600">
                        Submit
                    </button>

                    <!-- Message Display -->
                    <p id="message" class="mt-4 text-sm text-center"></p>

                    <!-- Loading Overlay -->


                    <!-- Error Container -->
                    <div id="error-container" class="mt-4 text-sm text-red-500"></div>
                </form>

            </div>
            <div class="w-full col-span-3 p-6 mx-auto border-2 border-black rounded-lg">
                <div class="overflow-x-auto">
                    <table id="shiftTable" class="min-w-full border border-collapse border-gray-200 table-auto">
                        <thead class="bg-[#1d1d1d] text-white">
                            <tr>
                                <th class="px-4 py-2 border">ID</th>
                                <th class="px-4 py-2 border">Shift Name</th>
                                <th class="px-4 py-2 border">Shift Start</th>
                                <th class="px-4 py-2 border">Shift End</th>
                                <th class="px-4 py-2 border">Break Out</th>
                                <th class="px-4 py-2 border">Break In</th>
                                <th class="px-4 py-2 border">Status</th>
                                <th class="px-4 py-2 border">Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-center"></tbody>
                    </table>
                </div>



            </div>

        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#shiftTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('shifts.index') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'shift_name',
                        name: 'shift_name'
                    },
                    {
                        data: 'shift_start',
                        name: 'shift_start'
                    },
                    {
                        data: 'shift_end',
                        name: 'shift_end'
                    },
                    {
                        data: 'break_out',
                        name: 'break_out'
                    },
                    {
                        data: 'break_in',
                        name: 'break_in'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        width: '10%'
                    }
                ]
            });
        });
    </script>

    <div id="div2" class="hidden">
        @include('Admin.Employee.shedule.pendingschedule')
    </div>



    @include('Admin.Employee.shedule.modal')









@endsection