@extends('layouts.sidebar')

@section('title', 'Employee')
@section('content')
    @include('Admin.Employee.modal')

    <div class="flex flex-col items-center justify-between py-5 md:flex-row">
        <div>
            <h2 class="mb-10 text-xl font-bold">Applicants</h2>
        </div>

        <div class="flex items-center justify-end gap-5 mb-5">
            <div class="">
                <label class="block mb-1 text-gray-600" for="office_id">Select Office</label>
                <select id="office_id" name="office_id" class="w-full md:w-[15rem] h-8  border-2 border-black rounded-md">
                    <option value="">Select an Office</option>
                    @foreach ($offices as $office)
                        <option value="{{ $office->id }}">{{ $office->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block mb-1 text-gray-600" for="store_id">Select Store</label>
                <select id="store_id" name="store_id" class="w-full md:w-[15rem] h-8   border-2 border-black rounded-md">
                    <option value="">Select a Store</option>
                    @foreach ($stores as $store)
                        <option value="{{ $store->id }}">{{ $store->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block mb-1 text-gray-600" for="pwd_filter">PWD Filter</label>
                <select id="pwd_filter" name="pwd_filter"
                    class="w-full md:w-[15rem] h-8   border-2 border-black rounded-md">
                    <option value="">Select PWD Status</option>
                    <option value="PWD">PWD</option>
                    <option value="Not PWD">Not PWD</option>
                </select>
            </div>
        </div>
    </div>


    <div class="overflow-auto">
        <table id="pre-employment-table" class="min-w-full bg-white border border-gray-200 rounded shadow-md ">
            <thead>
                <tr class="text-sm leading-normal  text-white  bg-[#1d1d1d]">
                    <th class="px-6 py-1">ID</th>
                    <th class="px-6 py-1">Profile</th>

                    <th class="px-6 py-1">Name</th>
                    <th class="px-6 py-1">Date of Birth</th>
                    <th class="px-6 py-1">Status</th>
                    <th class="px-6 py-1">Email</th>
                    <th class="px-6 py-1">Actions</th>
                </tr>
            </thead>
            <tbody class="text-sm font-light text-center text-gray-600">
                <!-- Data will be populated here by DataTables -->
            </tbody>
        </table>
    </div>







    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get the buttons
            const showEmployeeDetailsButton = document.getElementById('show-employee-details');
            const showTerminatedEmployeesButton = document.getElementById('show-terminated-employees');
            const showPreEmploymentButton = document.getElementById('show-pre-employment');

            // Get the content sections
            const employeeDetailsSection = document.getElementById('employee-details-section');
            const terminatedEmployeesSection = document.getElementById('terminated-employees-section');
            const preEmploymentSection = document.getElementById('pre-employment-section');

            // Show terminated employees section and hide others
            showTerminatedEmployeesButton.addEventListener('click', function() {
                terminatedEmployeesSection.classList.remove('hidden');
                employeeDetailsSection.classList.add('hidden');
                preEmploymentSection.classList.add('hidden');
            });

            // Show pre-employment section and hide others
            showPreEmploymentButton.addEventListener('click', function() {
                preEmploymentSection.classList.remove('hidden');
                employeeDetailsSection.classList.add('hidden');
                terminatedEmployeesSection.classList.add('hidden');
            });

            // Show employee details section and hide others
            showEmployeeDetailsButton.addEventListener('click', function() {
                employeeDetailsSection.classList.remove('hidden');
                terminatedEmployeesSection.classList.add('hidden');
                preEmploymentSection.classList.add('hidden');
            });

            // Dropdown toggle functionality
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            var preEmploymentTable = $('#pre-employment-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('forapproval.index') }}",
                    data: function(d) {
                        d.office_id = $('#office_id').val();
                        d.store_id = $('#store_id').val();
                        d.pwd_filter = $('#pwd_filter').val(); // Add the PWD filter value
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'profile',
                        name: 'profile'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'date_of_birth',
                        name: 'date_of_birth'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'user.email',
                        name: 'user.email'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ]
            });

            // Filter Data on Dropdown Change
            $('#office_id, #store_id, #pwd_filter').on('change', function() {
                preEmploymentTable.ajax.reload();
            });
        });
    </script>

    <div id="deleteModal" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-gray-800 bg-opacity-50">
        <div class="bg-white rounded-lg shadow-lg p-6 w-auto md:w-[30rem] mt-20">
            <h2 class="mb-4 text-lg font-bold">Delete Record</h2>
            <p>Are you sure you want to delete this record?</p>
            <form id="deleteForm">
                @csrf
                <input type="hidden" id="deleteRecordId" name="id">
                <div class="flex justify-end mt-6">
                    <button type="button" onclick="closeModal('deleteModal')"
                        class="px-4 py-2 mr-2 text-gray-700 bg-gray-200 rounded">Cancel</button>
                    <button type="submit" class="px-4 py-2 text-white bg-red-600 rounded">Delete</button>
                </div>
            </form>
        </div>
    </div>



    <div id="successModal" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-gray-800 bg-opacity-50">
        <div class="p-5 mt-20 bg-white rounded-lg shadow-lg w-96">
            <h2 class="text-lg font-bold text-center">Success</h2>
            <p class="mt-2 text-center text-gray-700">Attendance record added successfully!</p>
            <div class="mt-4 text-center">
                <button id="closeSuccessModal" class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-700">
                    OK
                </button>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function() {
            // Open Delete Modal
            window.openDeleteModal = function(recordId) {
                $('#deleteRecordId').val(recordId);
                $('#deleteModal').removeClass('hidden');
            };

            // Submit Delete Form
            $('#deleteForm').on('submit', function(e) {
                e.preventDefault();
                let recordId = $('#deleteRecordId').val();
                let deleteUrl = "{{ route('employees.destroy', ':id') }}".replace(':id', recordId);

                $.ajax({
                    url: deleteUrl,
                    type: "DELETE",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#successModal').removeClass('hidden'); // Show success modal
                            $('#deleteForm')[0].reset(); // Reset form
                            $('#deleteModal').addClass('hidden'); // Close modal
                            $('#pre-employment-table').DataTable().ajax.reload(null,
                                false); // Reload table without resetting pagination
                        }
                    },
                    error: function(xhr) {
                        alert('Error deleting record.');
                    }
                });
            });

            function closeModal(modalId, reopenButtonId) {
                $(modalId).addClass('hidden');
            }
            $('#closeSuccessModal').click(function() {
                closeModal('#successModal');
            });

        });
    </script>

@endsection