@extends('layouts.sidebar')
@section('title', 'Users')
@section('content')
    <a href="{{ route('users.index') }}" class="px-3 py-2 text-xs text-white bg-blue-600 rounded-lg">
        < Back</a>
            <div class="flex justify-between py-5">

                <h1 class="mb-4 text-xl font-bold">User Access for {{ $user->name }}</h1>

            </div>
            @if (session('success'))
                <div class="p-4 mb-4 text-white bg-green-500">
                    {{ session('success') }}
                </div>
            @endif
            @if ($errors->any())
                <div class=" alert alert-dange">
                    <ul class="p-4 mb-4 text-red-600">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="grid grid-cols-1 gap-10 md:grid-cols-4">
                <div class="border-2 shadow-2xl">
                    <form id="assignForm" action="{{ route('assign.store') }}" method="POST">
                        @csrf
                        <div class="p-4 border-b">
                            <h5 class="text-lg font-semibold" id="assignLabel">Assign User to Agency</h5>
                        </div>
                        <div class="p-4">
                            <input type="hidden" name="user_id" id="" value="{{ $user->id }}"
                                class="border-2 border-black">

                            <div class="mb-4">
                                <label for="agency_id" class="block text-sm font-medium text-gray-700">Agency</label>
                                <select name="agency_id" id="agency_id"
                                    class="block w-full px-4 py-2 mt-1 border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="" disabled selected>Select Agency</option>
                                    @foreach ($agencies as $agency)
                                        <option value="{{ $agency->id }}">{{ $agency->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="p-4 border-t">

                            <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded-lg">Assign</button>
                        </div>
                    </form>
                </div>

                <div class="col-span-3 overflow-auto">
                    <table id="assign-table"
                        class="min-w-full bg-white border border-collapse border-gray-200 rounded shadow-md ">
                        <thead>
                            <tr class="text-sm leading-normal  text-white uppercase bg-[#1d1d1d]">


                                <th>Agency Name</th>
                                <th>Delete</th>

                            </tr>
                        </thead>
                        <tbody class="text-sm font-light text-center text-gray-600">
                            <!-- DataTables will populate this body -->
                        </tbody>
                    </table>
                </div>

            </div>

            <div id="deleteModal" c
                class="fixed inset-0 z-50 flex items-start justify-center hidden bg-gray-800 bg-opacity-75">
                <div class="w-1/3 mt-20 bg-white rounded-lg shadow-lg">
                    <div class="px-6 py-4">
                        <h2 class="text-sm font-bold text-gray-800">Delete Requisition</h2>
                        <p class="mt-2 text-sm text-gray-600">Are you sure you want to delete this item?</p>
                    </div>
                    <div class="flex justify-end px-6 py-4 border-t border-gray-200">
                        <button id="cancelDelete"
                            class="px-4 py-2 mr-2 text-gray-600 bg-gray-200 rounded-md hover:bg-gray-300">Cancel</button>
                        <form id="deleteForm" method="POST" action="" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                class="px-4 py-2 text-white bg-red-600 rounded-md hover:bg-red-700">Delete</button>
                        </form>
                    </div>
                </div>
            </div>

            <script>
                function openDeleteModal(id, actionUrl) {
                    const modal = document.getElementById('deleteModal');
                    const deleteForm = document.getElementById('deleteForm');
                    deleteForm.action = actionUrl;

                    // Display the modal
                    modal.classList.remove('hidden');

                    // Close modal when cancel button is clicked
                    document.getElementById('cancelDelete').addEventListener('click', function() {
                        modal.classList.add('hidden');
                    });
                }
            </script>




            <script>
                $(document).ready(function() {
                    var userId = {{ $user->id }}; // Assuming you have a $client variable available

                    var employedTable = $('#assign-table').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ route('assigns.get', ['id' => ':id']) }}".replace(':id',
                                userId),
                            data: function(d) {

                                d.user_id = userId;
                            }
                        },
                        columns: [{
                                data: 'agency.name',
                                name: 'agency.name'
                            },
                            {
                                data: 'action',
                                name: 'action',
                                orderable: false,
                                searchable: false
                            }
                        ],
                        order: [
                            [0, 'desc']
                        ]
                    });
                });

                function openModal(modalId, userId = null) {
                    const modal = document.getElementById(modalId);

                    // Assign the user ID if the modal is for assigning
                    if (modalId === 'assignModal' && userId) {
                        document.getElementById('assignUserId').value = userId;
                    }

                    // Remove the `hidden` class to make the modal visible
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                }

                function closeModal(modalId) {
                    const modal = document.getElementById(modalId);

                    // Add the `hidden` class to hide the modal
                    modal.classList.add('hidden');
                    modal.classList.remove('flex');
                }
            </script>
        @endsection