@extends('layouts.admin')

@section('title', 'Gestión de Usuarios')

@section('content')
<div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
    <div class="px-8 py-6 bg-blue-900 border-b border-blue-800 flex justify-between items-center">
        <div>
            <h2 class="text-xl font-bold text-white tracking-wide">Base de Datos de Usuarios</h2>
            <p class="text-blue-100 text-sm opacity-80 mt-1">Total de {{ $users->total() }} usuarios registrados en el sistema</p>
        </div>
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.users.export-excel') }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-xl shadow flex items-center gap-2">
                <i class="fas fa-file-excel"></i> Descargar Excel
            </a>
            <div class="relative max-w-xs w-full sm:w-auto">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                    <i class="fas fa-search text-blue-300"></i>
                </span>
                <input type="text" placeholder="Buscar usuario..." class="w-full bg-blue-800/40 text-white placeholder-blue-300 border-0 focus:ring-2 focus:ring-blue-500 rounded-xl py-2 pl-10 text-sm">
            </div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left table-auto">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr class="text-gray-400 uppercase text-xs font-black tracking-widest">
                    <th class="py-5 px-6">Información General</th>
                    <th class="py-5 px-6">Estado Diagnóstico</th>
                    <th class="py-5 px-6">Fecha Registro</th>
                    <th class="py-5 px-6 text-center">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($users as $user)
                <tr class="hover:bg-blue-50/40 transition duration-150 group">
                    <td class="py-6 px-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center font-bold text-xl uppercase shadow-sm group-hover:bg-blue-600 group-hover:text-white transition duration-300">
                                {{ substr($user->name, 0, 1) }}
                            </div>
                            <div>
                                <p class="text-sm font-bold text-gray-900 uppercase leading-none mb-1">{{ $user->name }}</p>
                                <p class="text-xs font-semibold text-gray-500 lowercase flex items-center gap-1.5 mt-2 transition duration-200">
                                    <i class="fas fa-envelope text-blue-400"></i> {{ $user->email }}
                                </p>
                                <p class="text-xs font-semibold {{ $user->phone ? 'text-gray-600' : 'text-gray-400 italic' }} flex items-center gap-1.5 mt-1.5 transition duration-200">
                                    <i class="fas fa-phone {{ $user->phone ? 'text-green-400' : 'text-gray-300' }}"></i> 
                                    {{ $user->phone ?? 'No proporcionado' }}
                                </p>
                            </div>
                        </div>
                    </td>
                    <td class="py-6 px-6">
                        <div class="flex flex-col gap-3">
                            <!-- Estado de la Orden si existe -->
                            @if($user->orden)
                                <div class="flex items-center gap-2">
                                    <span class="text-[10px] font-bold uppercase text-gray-600">Estado de Orden:</span>
                                    @if($user->orden->estado === 'pendiente')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase bg-yellow-100 text-yellow-800 border border-yellow-300">
                                            <span class="w-1.5 h-1.5 bg-yellow-600 rounded-full mr-1.5"></span>
                                            Pendiente
                                        </span>
                                    @elseif($user->orden->estado === 'en_proceso')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase bg-purple-100 text-purple-800 border border-purple-300">
                                            <span class="w-1.5 h-1.5 bg-purple-600 rounded-full mr-1.5"></span>
                                            En Proceso
                                        </span>
                                    @elseif($user->orden->estado === 'atendido')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase bg-green-100 text-green-800 border border-green-300">
                                            <i class="fas fa-check mr-1"></i>
                                            Atendido
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase bg-red-100 text-red-800 border border-red-300">
                                            <span class="w-1.5 h-1.5 bg-red-600 rounded-full mr-1.5"></span>
                                            Cancelado
                                        </span>
                                    @endif
                                </div>
                            @else
                                <div class="flex items-center gap-2">
                                    <span class="text-[10px] font-bold uppercase text-gray-600">Sin Diagnóstico:</span>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase bg-gray-100 text-gray-700 border border-gray-300">
                                        —
                                    </span>
                                </div>
                            @endif
                        </div>
                    </td>
                    <td class="py-6 px-6">
                        <div class="text-sm">
                            <p class="font-bold text-gray-800 uppercase">{{ $user->created_at->locale('es')->isoFormat('D MMMM, YYYY') }}</p>
                            <p class="text-xs text-gray-400 mt-1 font-semibold uppercase flex items-center gap-1.5">
                                <i class="fas fa-clock text-gray-300"></i> {{ $user->created_at->diffForHumans() }}
                            </p>
                        </div>
                    </td>
                    <td class="py-6 px-6 text-center">
                        <div class="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <a title="Ver Reportes" href="{{ route('admin.users.reports', $user->id) }}" class="w-10 h-10 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center hover:bg-indigo-600 hover:text-white transition-all transform hover:scale-110 shadow-sm border border-indigo-200">
                                <i class="fas fa-file-contract"></i>
                            </a>
                            <a title="Configuración" href="#" class="w-10 h-10 bg-gray-100 text-gray-600 rounded-xl flex items-center justify-center hover:bg-gray-600 hover:text-white transition-all transform hover:scale-110 shadow-sm border border-gray-200">
                                <i class="fas fa-cog"></i>
                            </a>
                        </div>
                        <!-- State Tag (visible when not hover) -->
                        <div class="group-hover:hidden transition-all">
                            <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full text-[10px] font-black uppercase tracking-wider border border-green-200">ACTIVO</span>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="py-20 text-center text-gray-400">
                        <div class="flex flex-col items-center">
                            <i class="fas fa-user-slash text-6xl mb-4 opacity-10"></i>
                            <p class="text-xl font-bold">No se encontraron usuarios</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div class="bg-gray-50 px-8 py-5 border-t border-gray-100 flex items-center justify-between">
        <div class="text-sm font-semibold text-gray-500 uppercase tracking-tight">
            Página {{ $users->currentPage() }} de {{ $users->lastPage() }}
        </div>
        <div class="flex gap-2">
            {{ $users->links() }}
        </div>
    </div>
</div>
@endsection