@extends('layouts.app')

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

@section('breadcrumb')
<li class="breadcrumb-item active">Usuarios</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .usuarios-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    @media (max-width: 1200px) {
        .usuarios-stats {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .usuarios-stats {
            grid-template-columns: 1fr;
        }
    }

    .stat-card {
        background: #fff;
        border-radius: 10px;
        padding: 1.25rem;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .stat-icon.total {
        background: rgba(26, 58, 92, 0.1);
        color: #1a3a5c;
    }

    .stat-icon.activos {
        background: rgba(5, 150, 105, 0.1);
        color: #059669;
    }

    .stat-icon.inactivos {
        background: rgba(220, 38, 38, 0.1);
        color: #dc2626;
    }

    .stat-icon.bloqueados {
        background: rgba(217, 119, 6, 0.1);
        color: #d97706;
    }

    .stat-content h3 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: #1a3a5c;
        line-height: 1;
    }

    .stat-content span {
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 0.25rem;
        display: block;
    }

    .perfiles-resumen {
        background: #fff;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
    }

    .perfiles-resumen-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-size: 0.85rem;
        color: #64748b;
    }

    .perfiles-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .perfil-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.75rem;
        background: #f1f5f9;
        border-radius: 20px;
        font-size: 0.8rem;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

    .perfil-tag .count {
        background: #1a3a5c;
        color: #fff;
        padding: 0.125rem 0.5rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.7rem;
    }

    .usuarios-table {
        width: 100%;
        border-collapse: collapse;
    }

    .usuarios-table thead {
        background: #f8fafc;
    }

    .usuarios-table th {
        padding: 1rem;
        text-align: left;
        font-size: 0.7rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
    }

    .usuarios-table td {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .usuarios-table tbody tr {
        transition: background 0.15s;
    }

    .usuarios-table tbody tr:hover {
        background: rgba(26, 58, 92, 0.02);
    }

    .usuario-cell {
        display: flex;
        align-items: center;
        gap: 0.875rem;
    }

    .usuario-avatar {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
        color: #fff;
        flex-shrink: 0;
    }

    .usuario-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .usuario-nombre {
        font-weight: 600;
        color: #1a3a5c;
        font-size: 0.9rem;
    }

    .usuario-email {
        font-size: 0.75rem;
        color: #64748b;
    }

    .usuario-username {
        font-family: 'SF Mono', 'Monaco', monospace;
        font-size: 0.8rem;
        color: #475569;
        background: #f1f5f9;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
    }

    .perfil-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.625rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .perfil-badge.admin {
        background: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
    }

    .perfil-badge.tecnico {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .perfil-badge.supervisor {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .perfil-badge.default {
        background: rgba(100, 116, 139, 0.1);
        color: #475569;
    }

    .acceso-icons {
        display: flex;
        gap: 0.5rem;
    }

    .acceso-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }

    .acceso-icon.activo {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .acceso-icon.inactivo {
        background: rgba(148, 163, 184, 0.1);
        color: #94a3b8;
    }

    .estado-usuario {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .estado-usuario.activo {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .estado-usuario.inactivo {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

    .estado-usuario.bloqueado {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .ultimo-login {
        font-size: 0.8rem;
        color: #64748b;
    }

    .ultimo-login.nunca {
        color: #94a3b8;
        font-style: italic;
    }

    .acciones-usuario {
        display: flex;
        gap: 0.375rem;
    }

    .btn-accion-usuario {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        transition: all 0.2s;
        cursor: pointer;
        text-decoration: none;
    }

    .btn-accion-usuario:hover {
        background: #f8fafc;
        color: #1a3a5c;
        border-color: #cbd5e1;
    }

    .btn-accion-usuario.ver:hover {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
        border-color: #3b82f6;
    }

    .btn-accion-usuario.editar:hover {
        background: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
        border-color: #8b5cf6;
    }

    .btn-accion-usuario.password:hover {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border-color: #f59e0b;
    }

    .btn-accion-usuario.desbloquear:hover {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        border-color: #10b981;
    }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    {{-- Estadísticas --}}
    <div class="usuarios-stats">
        <div class="stat-card">
            <div class="stat-icon total">
                <i class="fas fa-users"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $estadisticas['total'] }}</h3>
                <span>Total Usuarios</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon activos">
                <i class="fas fa-user-check"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $estadisticas['activos'] }}</h3>
                <span>Activos</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon inactivos">
                <i class="fas fa-user-times"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $estadisticas['inactivos'] }}</h3>
                <span>Inactivos</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bloqueados">
                <i class="fas fa-user-lock"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $estadisticas['bloqueados'] }}</h3>
                <span>Bloqueados</span>
            </div>
        </div>
    </div>

    {{-- Resumen por perfiles --}}
    <div class="perfiles-resumen">
        <div class="perfiles-resumen-header">
            <i class="fas fa-id-badge"></i>
            <span>Distribución por Perfil</span>
        </div>
        <div class="perfiles-tags">
            @foreach($estadisticas['por_perfil'] as $perfil)
            <span class="perfil-tag">
                <i class="fas fa-user-tag"></i>
                {{ $perfil->per_nombre }}
                <span class="count">{{ $perfil->usuarios_count }}</span>
            </span>
            @endforeach
        </div>
    </div>

    {{-- Filtros --}}
    <div class="filtros-card mb-3">
        <form action="{{ route('web.usuarios.index') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Buscar</label>
                <input type="text" name="buscar" class="form-control form-control-sm"
                       placeholder="Nombre, cédula, email..." value="{{ request('buscar') }}">
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Perfil</label>
                <select name="perfil" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($perfiles as $perfil)
                    <option value="{{ $perfil->per_id }}" {{ request('perfil') == $perfil->per_id ? 'selected' : '' }}>
                        {{ $perfil->per_nombre }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    <option value="1" {{ request('estado') === '1' ? 'selected' : '' }}>Activo</option>
                    <option value="0" {{ request('estado') === '0' ? 'selected' : '' }}>Inactivo</option>
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Acceso</label>
                <select name="acceso" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    <option value="web" {{ request('acceso') === 'web' ? 'selected' : '' }}>Solo Web</option>
                    <option value="app" {{ request('acceso') === 'app' ? 'selected' : '' }}>Solo App</option>
                </select>
            </div>

            <div class="filtro-acciones">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-search me-1"></i> Filtrar
                </button>
                <a href="{{ route('web.usuarios.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-times me-1"></i> Limpiar
                </a>
                <a href="{{ route('web.usuarios.create') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-user-plus me-1"></i> Nuevo Usuario
                </a>
            </div>
        </form>
    </div>

    {{-- Tabla de usuarios --}}
    <div class="tabla-card">
        <div class="tabla-responsive">
            <table class="usuarios-table">
                <thead>
                    <tr>
                        <th>Usuario</th>
                        <th>Username</th>
                        <th>Perfil</th>
                        <th>Acceso</th>
                        <th>Estado</th>
                        <th>Último Login</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($usuarios as $usuario)
                    @php
                        $iniciales = strtoupper(substr($usuario->usu_nombre, 0, 1) . substr($usuario->usu_apellido, 0, 1));
                        $colors = ['#667eea', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#3b82f6', '#ec4899'];
                        $colorIndex = $usuario->usu_id % count($colors);
                        $avatarColor = $colors[$colorIndex];
                        $perfilClass = 'default';
                        if ($usuario->perfil) {
                            $perfilNombre = strtolower($usuario->perfil->per_nombre);
                            if (str_contains($perfilNombre, 'admin') || str_contains($perfilNombre, 'sistema')) {
                                $perfilClass = 'admin';
                            } elseif (str_contains($perfilNombre, 'tecnico') || str_contains($perfilNombre, 'técnico')) {
                                $perfilClass = 'tecnico';
                            } elseif (str_contains($perfilNombre, 'supervisor')) {
                                $perfilClass = 'supervisor';
                            }
                        }
                    @endphp
                    <tr>
                        <td>
                            <div class="usuario-cell">
                                <div class="usuario-avatar" style="background: {{ $avatarColor }}">
                                    {{ $iniciales }}
                                </div>
                                <div class="usuario-info">
                                    <span class="usuario-nombre">{{ $usuario->nombre_completo }}</span>
                                    <span class="usuario-email">{{ $usuario->usu_email }}</span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="usuario-username">{{ $usuario->usu_usuario }}</span>
                        </td>
                        <td>
                            <span class="perfil-badge {{ $perfilClass }}">
                                <i class="fas fa-id-badge"></i>
                                {{ $usuario->perfil->per_nombre ?? 'Sin perfil' }}
                            </span>
                        </td>
                        <td>
                            <div class="acceso-icons">
                                <span class="acceso-icon {{ $usuario->tieneAccesoWeb() ? 'activo' : 'inactivo' }}"
                                      title="Acceso Web">
                                    <i class="fas fa-desktop"></i>
                                </span>
                                <span class="acceso-icon {{ $usuario->tieneAccesoApp() ? 'activo' : 'inactivo' }}"
                                      title="Acceso App">
                                    <i class="fas fa-mobile-alt"></i>
                                </span>
                            </div>
                        </td>
                        <td>
                            @if($usuario->estaBloqueado())
                            <span class="estado-usuario bloqueado">
                                <i class="fas fa-lock"></i> Bloqueado
                            </span>
                            @elseif($usuario->usu_estado == 1)
                            <span class="estado-usuario activo">
                                <i class="fas fa-check-circle"></i> Activo
                            </span>
                            @else
                            <span class="estado-usuario inactivo">
                                <i class="fas fa-times-circle"></i> Inactivo
                            </span>
                            @endif
                        </td>
                        <td>
                            @if($usuario->usu_ultimo_login)
                            <span class="ultimo-login">
                                {{ $usuario->usu_ultimo_login->format('d/m/Y H:i') }}
                            </span>
                            @else
                            <span class="ultimo-login nunca">Nunca</span>
                            @endif
                        </td>
                        <td>
                            <div class="acciones-usuario">
                                <a href="{{ route('web.usuarios.show', $usuario->usu_id) }}"
                                   class="btn-accion-usuario ver" title="Ver detalle">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('web.usuarios.edit', $usuario->usu_id) }}"
                                   class="btn-accion-usuario editar" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn-accion-usuario password"
                                        title="Cambiar contraseña"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalPassword{{ $usuario->usu_id }}">
                                    <i class="fas fa-key"></i>
                                </button>
                                @if($usuario->estaBloqueado())
                                <form action="{{ route('web.usuarios.desbloquear', $usuario->usu_id) }}"
                                      method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn-accion-usuario desbloquear"
                                            title="Desbloquear usuario">
                                        <i class="fas fa-unlock"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>

                    {{-- Modal cambiar contraseña --}}
                    <div class="modal fade" id="modalPassword{{ $usuario->usu_id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">
                                        <i class="fas fa-key me-2"></i>
                                        Cambiar Contraseña
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <form action="{{ route('web.usuarios.cambiar-password', $usuario->usu_id) }}" method="POST">
                                    @csrf
                                    <div class="modal-body">
                                        <p class="text-muted mb-3">
                                            Usuario: <strong>{{ $usuario->nombre_completo }}</strong>
                                        </p>
                                        <div class="mb-3">
                                            <label class="form-label">Nueva Contraseña</label>
                                            <input type="password" name="password" class="form-control" required minlength="8">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Confirmar Contraseña</label>
                                            <input type="password" name="password_confirmation" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-1"></i> Guardar
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                <i class="fas fa-users"></i>
                                <p>No se encontraron usuarios</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($usuarios->hasPages())
        <div class="tabla-footer">
            {{ $usuarios->links() }}
        </div>
        @endif
    </div>
</div>
@endsection