@extends('layouts.sidebar')
@section('title', 'Users')
@section('content')
    @include('Admin.User.modal')
    <div class="flex justify-between py-5">
        <h1 class="mb-4 text-2xl font-bold">Users</h1>

        <button type="button"
            class="modal-button py-2.5 px-5 text-xs bg-[#1d1d1d] text-white rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700"
            data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal"
            data-modal-toggle="subscribe-form-modal">
            Add User
        </button>
    </div>
    @if (session('success'))
        <div class="p-4 mb-4 text-white bg-green-500">
            {{ session('success') }}
        </div>
    @endif
    <div class="overflow-auto ">
        <table id="usersTable" 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>Name</th>

                    <th>Role</th>
                    <th>Email</th>

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




    <div id="assignModal" class="fixed inset-0 z-50 items-center justify-center hidden bg-gray-800 bg-opacity-75">
        <div class="w-1/3 bg-white rounded-lg shadow-lg">
            <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>
                    <button type="button" class="float-right text-gray-400 hover:text-gray-600"
                        onclick="closeModal('assignModal')">&times;</button>
                </div>
                <div class="p-4">
                    <input type="hidden" name="user_id" id="assignUserId">

                    <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-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="button" class="px-4 py-2 mr-2 text-white bg-gray-500 rounded"
                        onclick="closeModal('assignModal')">Close</button>
                    <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded">Assign</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('users.index') }}", // Pointing to the index route
                columns: [{
                        data: 'name',
                        name: 'name'
                    },

                    {
                        data: 'role',
                        name: 'role'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    } // No sorting/searching on action column
                ]
            });
        });

        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