<?php $__env->startSection('title', 'Gestión de Usuarios'); ?>
<?php $__env->startSection('page-title', 'Gestión de Usuarios'); ?>

<?php $__env->startSection('breadcrumb'); ?>
<li class="breadcrumb-item active">Usuarios</li>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<link href="<?php echo e(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>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div class="mantenimientos-container">
    
    <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><?php echo e($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><?php echo e($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><?php echo e($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><?php echo e($estadisticas['bloqueados']); ?></h3>
                <span>Bloqueados</span>
            </div>
        </div>
    </div>

    
    <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">
            <?php $__currentLoopData = $estadisticas['por_perfil']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $perfil): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <span class="perfil-tag">
                <i class="fas fa-user-tag"></i>
                <?php echo e($perfil->per_nombre); ?>

                <span class="count"><?php echo e($perfil->usuarios_count); ?></span>
            </span>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>

    
    <div class="filtros-card mb-3">
        <form action="<?php echo e(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="<?php echo e(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>
                    <?php $__currentLoopData = $perfiles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $perfil): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($perfil->per_id); ?>" <?php echo e(request('perfil') == $perfil->per_id ? 'selected' : ''); ?>>
                        <?php echo e($perfil->per_nombre); ?>

                    </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </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" <?php echo e(request('estado') === '1' ? 'selected' : ''); ?>>Activo</option>
                    <option value="0" <?php echo e(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" <?php echo e(request('acceso') === 'web' ? 'selected' : ''); ?>>Solo Web</option>
                    <option value="app" <?php echo e(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="<?php echo e(route('web.usuarios.index')); ?>" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-times me-1"></i> Limpiar
                </a>
                <a href="<?php echo e(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>

    
    <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>
                    <?php $__empty_1 = true; $__currentLoopData = $usuarios; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $usuario): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?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';
                            }
                        }
                    ?>
                    <tr>
                        <td>
                            <div class="usuario-cell">
                                <div class="usuario-avatar" style="background: <?php echo e($avatarColor); ?>">
                                    <?php echo e($iniciales); ?>

                                </div>
                                <div class="usuario-info">
                                    <span class="usuario-nombre"><?php echo e($usuario->nombre_completo); ?></span>
                                    <span class="usuario-email"><?php echo e($usuario->usu_email); ?></span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="usuario-username"><?php echo e($usuario->usu_usuario); ?></span>
                        </td>
                        <td>
                            <span class="perfil-badge <?php echo e($perfilClass); ?>">
                                <i class="fas fa-id-badge"></i>
                                <?php echo e($usuario->perfil->per_nombre ?? 'Sin perfil'); ?>

                            </span>
                        </td>
                        <td>
                            <div class="acceso-icons">
                                <span class="acceso-icon <?php echo e($usuario->tieneAccesoWeb() ? 'activo' : 'inactivo'); ?>"
                                      title="Acceso Web">
                                    <i class="fas fa-desktop"></i>
                                </span>
                                <span class="acceso-icon <?php echo e($usuario->tieneAccesoApp() ? 'activo' : 'inactivo'); ?>"
                                      title="Acceso App">
                                    <i class="fas fa-mobile-alt"></i>
                                </span>
                            </div>
                        </td>
                        <td>
                            <?php if($usuario->estaBloqueado()): ?>
                            <span class="estado-usuario bloqueado">
                                <i class="fas fa-lock"></i> Bloqueado
                            </span>
                            <?php elseif($usuario->usu_estado == 1): ?>
                            <span class="estado-usuario activo">
                                <i class="fas fa-check-circle"></i> Activo
                            </span>
                            <?php else: ?>
                            <span class="estado-usuario inactivo">
                                <i class="fas fa-times-circle"></i> Inactivo
                            </span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <?php if($usuario->usu_ultimo_login): ?>
                            <span class="ultimo-login">
                                <?php echo e($usuario->usu_ultimo_login->format('d/m/Y H:i')); ?>

                            </span>
                            <?php else: ?>
                            <span class="ultimo-login nunca">Nunca</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <div class="acciones-usuario">
                                <a href="<?php echo e(route('web.usuarios.show', $usuario->usu_id)); ?>"
                                   class="btn-accion-usuario ver" title="Ver detalle">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="<?php echo e(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<?php echo e($usuario->usu_id); ?>">
                                    <i class="fas fa-key"></i>
                                </button>
                                <?php if($usuario->estaBloqueado()): ?>
                                <form action="<?php echo e(route('web.usuarios.desbloquear', $usuario->usu_id)); ?>"
                                      method="POST" class="d-inline">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="btn-accion-usuario desbloquear"
                                            title="Desbloquear usuario">
                                        <i class="fas fa-unlock"></i>
                                    </button>
                                </form>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>

                    
                    <div class="modal fade" id="modalPassword<?php echo e($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="<?php echo e(route('web.usuarios.cambiar-password', $usuario->usu_id)); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <div class="modal-body">
                                        <p class="text-muted mb-3">
                                            Usuario: <strong><?php echo e($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>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                <i class="fas fa-users"></i>
                                <p>No se encontraron usuarios</p>
                            </div>
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <?php if($usuarios->hasPages()): ?>
        <div class="tabla-footer">
            <?php echo e($usuarios->links()); ?>

        </div>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/tecnicos/sistema_mantenimiento/resources/views/modules/usuarios/index.blade.php ENDPATH**/ ?>