@foreach ($employees as $emp)
    <div id="updateModal{{ $emp->id }}"
        class="fixed inset-0 z-50 flex items-start hidden justify-center  bg-black bg-opacity-50 modal fade">
        <!-- Modal dialog -->
        <div class="w-auto mt-10 bg-white rounded-lg shadow-xl">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
                <h5 class="text-lg font-semibold text-gray-900">Change Status</h5>
                <button onclick="closeModal('updateModal{{ $emp->id }}')" class="text-gray-500 hover:text-gray-700">
                    &times;
                </button>
            </div>
            <div class="p-6">
                <h5 class="text-xl font-medium text-gray-900 mb-4">
                    Employee Name: {{ $emp->last_name }}, {{ $emp->first_name }} {{ $emp->middle_name }}
                </h5>

                <form action="{{ route('employee.statusupdate', $emp->id) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <span class="block text-md font-medium text-gray-700">Status</span>
                        <div class="mt-2">
                            <label class="inline-flex items-center mr-4">
                                <input type="radio" name="status" value="1"
                                    {{ $emp->status == '1' ? 'checked' : '' }} class="form-radio text-green-600">
                                <span class="ml-2">Employee</span>
                            </label>
                            <label class="inline-flex items-center mr-4">
                                <input type="radio" name="status" value="2"
                                    {{ $emp->status == '2' ? 'checked' : '' }} class="form-radio text-black">
                                <span class="ml-2">Terminated</span>
                            </label>
                            <label class="inline-flex items-center mr-4">
                                <input type="radio" name="status" value="3"
                                    {{ $emp->status == '3' ? 'checked' : '' }} class="form-radio text-blue-300">
                                <span class="ml-2">Pre-Employment</span>
                            </label>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button type="submit"
                            class="px-4 py-2 text-white bg-green-600 rounded-md hover:bg-green-700 transition duration-200">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach
<script>
    function openModal(modalId) {
        var modal = document.getElementById(modalId);
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    // Function to close a modal
    function closeModal(modalId) {
        var modal = document.getElementById(modalId);
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
</script>