@extends('layouts.app')

@section('content')
    <!-- x-data sets up our Alpine state for the "Add User" modal -->
    <div class="max-w-7xl mx-auto space-y-6" x-data="{ showAddModal: false }">
        
        <!-- Header & Actions -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-gray-100">User Management</h2>
                <p class="text-sm text-gray-500 mt-1">Manage identities, roles, and system access.</p>
            </div>
            
            <div class="flex items-center gap-3">
                <!-- Search Box -->
                <div class="relative">
                    <input type="text" placeholder="Search users..." 
                        class="bg-gray-950 border border-gray-800 text-sm text-gray-200 rounded-lg pl-10 pr-4 py-2.5 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none w-64 transition-all">
                    <svg class="w-4 h-4 text-gray-500 absolute left-3 top-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                </div>

                <!-- Add User Button -->
                <button @click="showAddModal = true" class="flex items-center gap-2 bg-green-600 hover:bg-green-500 text-white px-4 py-2.5 rounded-lg text-sm font-bold shadow-lg shadow-green-900/20 transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    Add User
                </button>
            </div>
        </div>

        <!-- System Alerts -->
        <div class="space-y-4 mb-6">
            <!-- Success Message -->
            @if(session('success'))
                <div class="p-4 bg-green-500/10 border border-green-500/50 rounded-xl text-green-400 text-sm font-bold flex items-center gap-3 shadow-lg shadow-green-900/10 animate-fade-in-down">
                    <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    {{ session('success') }}
                </div>
            @endif

            <!-- Error Messages -->
            @if($errors->any())
                <div class="p-4 bg-red-500/10 border border-red-500/50 rounded-xl text-red-400 text-sm font-medium shadow-lg shadow-red-900/10 animate-fade-in-down">
                    <div class="flex items-center gap-3 mb-2 font-bold">
                        <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        System Exception
                    </div>
                    <ul class="list-disc list-inside space-y-1 ml-8">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <!-- The Datatable -->
        <div class="bg-gray-900/50 border border-gray-800 rounded-xl overflow-hidden shadow-sm">
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm whitespace-nowrap">
                    <thead class="bg-gray-950/50 text-gray-400 uppercase text-xs tracking-wider font-semibold border-b border-gray-800">
                        <tr>
                            <th class="px-6 py-4">Identity</th>
                            <th class="px-6 py-4">Role / Group</th>
                            <th class="px-6 py-4">Status</th>
                            <th class="px-6 py-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800 text-gray-300">
                        @foreach($users as $user)
                            <tr class="hover:bg-gray-800/30 transition-colors">
                                <!-- Identity Column -->
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center font-bold text-green-500 shrink-0">
                                            {{ substr($user->name, 0, 1) }}
                                        </div>
                                        <div>
                                            <div class="font-bold text-gray-100">{{ $user->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                </td>

                                <!-- Role Column -->
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-800 text-gray-300 border border-gray-700">
                                        {{ $user->role->name }}
                                    </span>
                                </td>

                                <!-- Status Column -->
                                <td class="px-6 py-4">
                                    @if($user->status === 'active')
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
                                            <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Active
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-red-500/10 text-red-400 border border-red-500/20">
                                            <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Suspended
                                        </span>
                                    @endif
                                </td>

                                <!-- Actions Dropdown (Alpine.js) -->
                                <td class="px-6 py-4 text-right">
                                    <div x-data="{ open: false }" class="relative inline-block text-left">
                                        <button @click="open = !open" @click.away="open = false" class="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
                                        </button>
                                        
                                        <!-- Dropdown Menu -->
                                        <div x-show="open" x-transition.opacity.duration.200ms style="display: none;" 
                                             class="absolute right-0 mt-2 w-48 rounded-xl shadow-lg bg-gray-900 border border-gray-700 ring-1 ring-black ring-opacity-5 z-50 overflow-hidden">
                                            <div class="py-1">
                                                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Edit Profile</a>
                                                <a href="#" class="block px-4 py-2 text-sm text-yellow-500 hover:bg-gray-800">Toggle Suspension</a>
                                                <div class="border-t border-gray-800 my-1"></div>
                                                <a href="#" class="block px-4 py-2 text-sm text-red-500 hover:bg-gray-800">Delete User</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Add User Slide-over/Modal Placeholder -->
        <div x-show="showAddModal" style="display: none;" class="fixed inset-0 z-50 flex items-center justify-center">
            <!-- Add User Slide-over/Modal -->
        <div x-show="showAddModal" style="display: none;" class="fixed inset-0 z-50 flex items-center justify-center">
            <!-- Modal Backdrop -->
            <div x-transition.opacity class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="showAddModal = false"></div>
            
            <!-- Modal Content -->
            <div x-transition class="relative bg-gray-900 border border-gray-800 rounded-2xl w-full max-w-lg p-6 shadow-2xl">
                <h3 class="text-xl font-bold text-white mb-2">Create New Identity</h3>
                <p class="text-sm text-gray-400 mb-6">A temporary password will be generated and sent via notification.</p>
                
                <form action="{{ route('users.store') }}" method="POST" class="space-y-4">
                    @csrf
                    
                    <!-- Full Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-400 mb-1">Full Name</label>
                        <input type="text" name="name" required
                            class="w-full px-4 py-2.5 bg-gray-950 border border-gray-800 rounded-lg focus:ring-1 focus:ring-green-500 focus:border-green-500 outline-none text-gray-200 placeholder-gray-700">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <!-- Email Address -->
                        <div>
                            <label class="block text-sm font-medium text-gray-400 mb-1">Office Email</label>
                            <input type="email" name="email" required
                                class="w-full px-4 py-2.5 bg-gray-950 border border-gray-800 rounded-lg focus:ring-1 focus:ring-green-500 focus:border-green-500 outline-none text-gray-200 placeholder-gray-700">
                        </div>

                        <!-- Phone Number (For WhatsApp) -->
                        <div>
                            <label class="block text-sm font-medium text-gray-400 mb-1">Phone (WhatsApp)</label>
                            <input type="text" name="phone_number" placeholder="+255..."
                                class="w-full px-4 py-2.5 bg-gray-950 border border-gray-800 rounded-lg focus:ring-1 focus:ring-green-500 focus:border-green-500 outline-none text-gray-200 placeholder-gray-700">
                        </div>
                    </div>

                    <!-- Role Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-400 mb-1">System Role</label>
                        <select name="role_id" required
                            class="w-full px-4 py-2.5 bg-gray-950 border border-gray-800 rounded-lg focus:ring-1 focus:ring-green-500 focus:border-green-500 outline-none text-gray-200">
                            <option value="">Select a role...</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Actions -->
                    <div class="flex justify-end gap-3 mt-8 pt-4 border-t border-gray-800">
                        <button type="button" @click="showAddModal = false" class="px-4 py-2.5 text-sm font-medium text-gray-400 hover:text-white transition-colors">Cancel</button>
                        <button type="submit" class="px-4 py-2.5 bg-green-600 hover:bg-green-500 text-white text-sm font-bold rounded-lg shadow-lg shadow-green-900/20 transition-all active:scale-[0.98]">
                            Provision User
                        </button>
                    </div>
                </form>
            </div>
        </div>
        </div>

    </div>
@endsection