@foreach ($employees as $employee)
    <!-- Update Modal for each client -->
    <div id="updateModal{{ $employee->id }}"
        class="fixed inset-0 z-50 items-start justify-center hidden bg-black bg-opacity-50 modal fade">
        <!-- Modal dialog -->
        <div class="mx-auto mt-10 overflow-hidden bg-white rounded-lg shadow-xl w-96">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-2 ">
                <h5 class="text-sm font-medium text-gray-900">Add Bank Account</h5>
                <button onclick="closeModal('updateModal{{ $employee->id }}')" class="">&times;</button>
            </div>

            <div class="w-full p-8 mx-auto mb-10 bg-white border border-gray-200 rounded-lg shadow-md">
                <!-- Update Form -->
                <form action="{{ route('bank.add', $employee->id) }}" method="POST">
                    @csrf
                    @method('POST')

                    <div>
                        <p class="mb-4">{{ $employee->first_name }} {{ $employee->middle_name }}
                            {{ $employee->lase_name }}</p>
                        <div>
                            <label for="name{{ $employee->id }}" class="block text-sm font-medium text-gray-700">Bank
                                Number</label>
                            <input type="text"
                                class="block w-full h-10 mt-1 border-2 border-black rounded-md shadow-sm"
                                id="name{{ $employee->id }}" name="bank_number"
                                class="block w-full h-10 mt-1 border-2 border-black rounded-md shadow-sm"
                                value="">
                        </div>

                        <!-- Contact Person Field -->

                    </div>
                    <!-- Modal Footer -->
                    <div class="flex justify-center gap-2">
                        <button type="button" onclick="closeModal('updateModal{{ $employee->id }}')"
                            class="px-4 py-2 mt-4 text-white bg-green-600 rounded-md">Cancel</button>
                        <button type="submit"
                            class="w-24 px-4 py-2 mt-4 text-white bg-green-600 rounded-md">Add</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>