<x-app-layout>
    <!-- Loading Spinner -->
    <div id="loading-spinner" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
        <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-indigo-500"></div>
    </div>

    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            👥 {{ __('Users Information') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">

                <!-- Create New User Button for Admins -->
                @if (auth()->user()->usertype === 'admin')
                    <div class="mb-4 flex justify-end">
                        <a href="{{ route('admin.create_user') }}"
                            class="bg-indigo-600 text-white px-4 py-2 rounded-md shadow-md hover:bg-indigo-500">
                            ➕ Create New User
                        </a>
                    </div>
                @endif

                <!-- User Table -->
                <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3"><i class="fas fa-id-card"></i> ID</th>
                                <th scope="col" class="px-6 py-3"><i class="fas fa-user"></i> User Name</th>
                                <th scope="col" class="px-6 py-3"><i class="fas fa-users-cog"></i> User Type</th>
                                <th scope="col" class="px-6 py-3"><i class="fas fa-cogs"></i> Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                <tr
                                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">
                                        {{ $user->id }}
                                    </td>
                                    <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">
                                        {{ $user->name }}
                                    </td>
                                    <td class="px-6 py-4">
                                        {{ $user->usertype === 'admin' ? 'Admin' : 'User' }}
                                    </td>
                                    <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">
                                        <a href="{{ route('admin.edit_user', $user) }}"
                                            class="text-blue-600 hover:text-blue-900">
                                            ✏️ Edit
                                        </a>
                                        <form action="{{ route('users.destroy', $user) }}" method="POST"
                                            style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-900"
                                                onclick="return confirm('Are you sure?')">
                                                🗑️ Delete
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
<script>
    // Show the loading spinner when the page starts loading
    window.addEventListener('load', function() {
        document.getElementById('loading-spinner').style.display = 'none';
    });

    // Show the loading spinner when submitting the form
    document.querySelector('form').addEventListener('submit', function() {
        document.getElementById('loading-spinner').style.display = 'flex';
    });
</script>
