@extends('admin.layout')
@section('title', 'Usuarios - Admin IMOZA')
@section('header', 'Usuarios')

@section('content')
<div class="flex items-center justify-between mb-6">
    <p class="text-sm text-gray-500">{{ $users->total() }} usuarios</p>
    <button onclick="document.getElementById('modal-create').classList.remove('hidden')" class="px-4 py-2 bg-imoza-blue-dark text-white rounded-xl text-sm font-semibold hover:bg-imoza-blue-bright transition-colors">+ Nuevo Usuario</button>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Nombre</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Usuario</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Email</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Rol</th>
                <th class="text-center px-6 py-3 font-semibold text-gray-600">Acciones</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($users as $user)
            <tr class="hover:bg-gray-50/50">
                <td class="px-6 py-4 font-semibold text-imoza-blue-dark">{{ $user->name }}</td>
                <td class="px-6 py-4 text-gray-500">{{ $user->username }}</td>
                <td class="px-6 py-4 text-gray-500">{{ $user->email }}</td>
                <td class="px-6 py-4">
                    @php $roleColors = ['admin' => 'bg-purple-100 text-purple-600', 'manager' => 'bg-blue-100 text-blue-600', 'sales' => 'bg-green-100 text-green-600']; @endphp
                    <span class="px-2 py-1 rounded-lg text-xs font-bold {{ $roleColors[$user->role] ?? 'bg-gray-100 text-gray-600' }}">{{ ucfirst($user->role) }}</span>
                </td>
                <td class="px-6 py-4 text-center">
                    <div class="flex items-center justify-center gap-2">
                        <button onclick="document.getElementById('modal-edit-{{ $user->id }}').classList.remove('hidden')" class="text-xs font-semibold text-imoza-blue-bright hover:text-imoza-blue-dark">Editar</button>
                        @if($user->id !== auth()->id())
                        <form method="POST" action="{{ route('admin.users.destroy', $user) }}" onsubmit="return confirm('¿Eliminar este usuario?')">
                            @csrf @method('DELETE')
                            <button class="text-xs font-semibold text-red-400 hover:text-red-600">Eliminar</button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>

            <div id="modal-edit-{{ $user->id }}" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
                <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
                    <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Editar Usuario</h3>
                    <form method="POST" action="{{ route('admin.users.update', $user) }}" class="space-y-4">
                        @csrf @method('PUT')
                        <input type="text" name="name" value="{{ $user->name }}" placeholder="Nombre" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                        <input type="text" name="username" value="{{ $user->username }}" placeholder="Usuario" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                        <input type="email" name="email" value="{{ $user->email }}" placeholder="Email" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                        <select name="role" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                            <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="manager" {{ $user->role === 'manager' ? 'selected' : '' }}>Manager</option>
                            <option value="sales" {{ $user->role === 'sales' ? 'selected' : '' }}>Sales</option>
                        </select>
                        <input type="password" name="password" placeholder="Nueva contraseña (dejar vacío para mantener)" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
                        <input type="password" name="password_confirmation" placeholder="Confirmar contraseña" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
                        <div class="flex gap-2">
                            <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold">Guardar</button>
                            <button type="button" onclick="document.getElementById('modal-edit-{{ $user->id }}').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
            @empty
            <tr><td colspan="5" class="px-6 py-8 text-center text-gray-400">No hay usuarios.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-6 py-4 border-t border-gray-100">{{ $users->links() }}</div>
</div>

<div id="modal-create" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
        <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Nuevo Usuario</h3>
        <form method="POST" action="{{ route('admin.users.store') }}" class="space-y-4">
            @csrf
            <input type="text" name="name" placeholder="Nombre *" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <input type="text" name="username" placeholder="Usuario *" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <input type="email" name="email" placeholder="Email *" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <select name="role" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                <option value="sales">Sales</option>
                <option value="manager">Manager</option>
                <option value="admin">Admin</option>
            </select>
            <input type="password" name="password" placeholder="Contraseña * (mínimo 8 caracteres)" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <input type="password" name="password_confirmation" placeholder="Confirmar contraseña *" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold">Crear</button>
                <button type="button" onclick="document.getElementById('modal-create').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold">Cancelar</button>
            </div>
        </form>
    </div>
</div>
@endsection