@extends('layouts.app')

@section('title', 'Detalle de Usuario')
@section('page-title', 'Detalle de Usuario')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.usuarios.index') }}">Usuarios</a></li>
<li class="breadcrumb-item active">{{ $usuario->nombre_completo }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .usuario-detail-container {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 1.5rem;
    }

    @media (max-width: 1200px) {
        .usuario-detail-container {
            grid-template-columns: 1fr;
        }
    }

    .usuario-profile-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }

    .profile-header {
        background: #1a3a5c;
        padding: 2rem;
        text-align: center;
        color: #fff;
    }

    .profile-avatar {
        width: 90px;
        height: 90px;
        background: rgba(255,255,255,0.2);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 700;
        margin: 0 auto 1rem;
        border: 3px solid rgba(255,255,255,0.3);
    }

    .profile-name {
        font-size: 1.35rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .profile-role {
        opacity: 0.9;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .profile-badges {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .profile-badge {
        background: rgba(255,255,255,0.2);
        padding: 0.375rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .profile-body {
        padding: 1.5rem;
    }

    .info-section {
        margin-bottom: 1.5rem;
    }

    .info-section:last-child {
        margin-bottom: 0;
    }

    .info-section-title {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        margin-bottom: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .info-section-title::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8f0;
    }

    .info-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .info-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .info-item-icon {
        width: 36px;
        height: 36px;
        background: #f1f5f9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .info-item-content {
        flex: 1;
        min-width: 0;
    }

    .info-item-label {
        font-size: 0.7rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .info-item-value {
        font-size: 0.9rem;
        color: #1a3a5c;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .detail-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .detail-card-header {
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .detail-card-header h5 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a3a5c;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .detail-card-body {
        padding: 1.25rem;
    }

    .status-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .status-item {
        background: #f8fafc;
        border-radius: 10px;
        padding: 1rem;
        text-align: center;
    }

    .status-item-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.75rem;
        font-size: 1.1rem;
    }

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

    .status-item-icon.bloqueado {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .status-item-icon.web {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .status-item-icon.app {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .status-item-icon.inactivo {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

    .status-item h4 {
        margin: 0;
        font-size: 0.85rem;
        color: #1a3a5c;
        font-weight: 600;
    }

    .status-item span {
        font-size: 0.75rem;
        color: #64748b;
    }

    .sidebar-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .activity-list {
        display: flex;
        flex-direction: column;
    }

    .activity-item {
        display: flex;
        gap: 1rem;
        padding: 0.875rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .activity-item:last-child {
        border-bottom: none;
    }

    .activity-dot {
        width: 10px;
        height: 10px;
        background: #1a3a5c;
        border-radius: 50%;
        margin-top: 0.375rem;
        flex-shrink: 0;
    }

    .activity-content {
        flex: 1;
    }

    .activity-action {
        font-size: 0.85rem;
        color: #1a3a5c;
        margin-bottom: 0.25rem;
    }

    .activity-time {
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .mant-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .mant-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.875rem;
        background: #f8fafc;
        border-radius: 8px;
        transition: background 0.15s;
    }

    .mant-item:hover {
        background: #f1f5f9;
    }

    .mant-id {
        font-weight: 700;
        color: #1a3a5c;
        font-size: 0.85rem;
    }

    .mant-info {
        flex: 1;
    }

    .mant-peaje {
        font-size: 0.85rem;
        color: #1a3a5c;
        font-weight: 500;
    }

    .mant-fecha {
        font-size: 0.75rem;
        color: #64748b;
    }

    .mant-estado {
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .empty-state-mini {
        text-align: center;
        padding: 2rem 1rem;
        color: #94a3b8;
    }

    .empty-state-mini i {
        font-size: 2rem;
        margin-bottom: 0.75rem;
        display: block;
        opacity: 0.5;
    }

    .empty-state-mini p {
        margin: 0;
        font-size: 0.85rem;
    }
</style>
@endpush

@section('content')
<div class="usuario-detail-container">
    {{-- Columna principal --}}
    <div class="main-content">
        {{-- Perfil del usuario --}}
        <div class="usuario-profile-card">
            @php
                $iniciales = strtoupper(substr($usuario->usu_nombre, 0, 1) . substr($usuario->usu_apellido, 0, 1));
            @endphp
            <div class="profile-header">
                <div class="profile-avatar">{{ $iniciales }}</div>
                <div class="profile-name">{{ $usuario->nombre_completo }}</div>
                <div class="profile-role">{{ $usuario->perfil->per_nombre ?? 'Sin perfil' }}</div>
                <div class="profile-badges">
                    @if($usuario->usu_estado == 1)
                    <span class="profile-badge"><i class="fas fa-check-circle"></i> Activo</span>
                    @else
                    <span class="profile-badge"><i class="fas fa-times-circle"></i> Inactivo</span>
                    @endif
                    @if($usuario->tieneAccesoWeb())
                    <span class="profile-badge"><i class="fas fa-desktop"></i> Web</span>
                    @endif
                    @if($usuario->tieneAccesoApp())
                    <span class="profile-badge"><i class="fas fa-mobile-alt"></i> App</span>
                    @endif
                </div>
            </div>
            <div class="profile-body">
                <div class="info-section">
                    <div class="info-section-title">Información Personal</div>
                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-item-icon"><i class="fas fa-id-card"></i></div>
                            <div class="info-item-content">
                                <div class="info-item-label">Cédula</div>
                                <div class="info-item-value">{{ $usuario->usu_cedula }}</div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-icon"><i class="fas fa-envelope"></i></div>
                            <div class="info-item-content">
                                <div class="info-item-label">Correo Electrónico</div>
                                <div class="info-item-value">{{ $usuario->usu_email }}</div>
                            </div>
                        </div>
                        @if($usuario->usu_fecha_nac)
                        <div class="info-item">
                            <div class="info-item-icon"><i class="fas fa-birthday-cake"></i></div>
                            <div class="info-item-content">
                                <div class="info-item-label">Fecha de Nacimiento</div>
                                <div class="info-item-value">{{ $usuario->usu_fecha_nac->format('d/m/Y') }}</div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="info-section">
                    <div class="info-section-title">Credenciales</div>
                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-item-icon"><i class="fas fa-at"></i></div>
                            <div class="info-item-content">
                                <div class="info-item-label">Nombre de Usuario</div>
                                <div class="info-item-value">{{ $usuario->usu_usuario }}</div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-icon"><i class="fas fa-clock"></i></div>
                            <div class="info-item-content">
                                <div class="info-item-label">Último Inicio de Sesión</div>
                                <div class="info-item-value">
                                    {{ $usuario->usu_ultimo_login ? $usuario->usu_ultimo_login->format('d/m/Y H:i') : 'Nunca' }}
                                </div>
                            </div>
                        </div>
                        @if($usuario->fecha_ingreso)
                        <div class="info-item">
                            <div class="info-item-icon"><i class="fas fa-calendar-plus"></i></div>
                            <div class="info-item-content">
                                <div class="info-item-label">Fecha de Ingreso</div>
                                <div class="info-item-value">{{ $usuario->fecha_ingreso->format('d/m/Y') }}</div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Mantenimientos Asignados --}}
        @if($mantenimientosAsignados->count() > 0)
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-tools"></i> Mantenimientos Recientes</h5>
            </div>
            <div class="detail-card-body">
                <div class="mant-list">
                    @foreach($mantenimientosAsignados as $mant)
                    <a href="{{ route('web.mantenimientos.show', $mant->prog_id) }}" class="mant-item text-decoration-none">
                        <span class="mant-id">#{{ $mant->prog_id }}</span>
                        <div class="mant-info">
                            <div class="mant-peaje">{{ $mant->nombre_centro ?? 'Sin peaje' }}</div>
                            <div class="mant-fecha">{{ \Carbon\Carbon::parse($mant->fecha_programada)->format('d/m/Y') }}</div>
                        </div>
                        <span class="mant-estado" style="background: {{ $mant->color_hex ?? '#666' }}20; color: {{ $mant->color_hex ?? '#666' }}">
                            {{ $mant->estado_nombre }}
                        </span>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>

    {{-- Sidebar --}}
    <div class="sidebar">
        {{-- Acciones --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-cogs"></i> Acciones</h5>
            </div>
            <div class="detail-card-body">
                <div class="sidebar-actions">
                    <a href="{{ route('web.usuarios.edit', $usuario->usu_id) }}" class="btn btn-primary w-100">
                        <i class="fas fa-edit me-1"></i> Editar Usuario
                    </a>

                    <button type="button" class="btn btn-outline-warning w-100"
                            data-bs-toggle="modal" data-bs-target="#modalPassword">
                        <i class="fas fa-key me-1"></i> Cambiar Contraseña
                    </button>

                    @if($usuario->estaBloqueado())
                    <form action="{{ route('web.usuarios.desbloquear', $usuario->usu_id) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-success w-100">
                            <i class="fas fa-unlock me-1"></i> Desbloquear Usuario
                        </button>
                    </form>
                    @endif

                    <form action="{{ route('web.usuarios.toggle-estado', $usuario->usu_id) }}" method="POST">
                        @csrf
                        @if($usuario->usu_estado == 1)
                        <button type="submit" class="btn btn-outline-danger w-100">
                            <i class="fas fa-user-times me-1"></i> Desactivar Usuario
                        </button>
                        @else
                        <button type="submit" class="btn btn-outline-success w-100">
                            <i class="fas fa-user-check me-1"></i> Activar Usuario
                        </button>
                        @endif
                    </form>

                    <hr class="my-2">

                    <a href="{{ route('web.usuarios.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="fas fa-arrow-left me-1"></i> Volver al Listado
                    </a>
                </div>
            </div>
        </div>

        {{-- Estado de Cuenta --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-shield-alt"></i> Estado de Cuenta</h5>
            </div>
            <div class="detail-card-body">
                <div class="status-grid">
                    <div class="status-item">
                        <div class="status-item-icon {{ $usuario->usu_estado == 1 ? 'activo' : 'inactivo' }}">
                            <i class="fas {{ $usuario->usu_estado == 1 ? 'fa-check' : 'fa-times' }}"></i>
                        </div>
                        <h4>{{ $usuario->usu_estado == 1 ? 'Activo' : 'Inactivo' }}</h4>
                        <span>Estado</span>
                    </div>

                    <div class="status-item">
                        <div class="status-item-icon {{ $usuario->estaBloqueado() ? 'bloqueado' : 'activo' }}">
                            <i class="fas {{ $usuario->estaBloqueado() ? 'fa-lock' : 'fa-unlock' }}"></i>
                        </div>
                        <h4>{{ $usuario->estaBloqueado() ? 'Bloqueado' : 'Libre' }}</h4>
                        <span>Acceso</span>
                    </div>

                    <div class="status-item">
                        <div class="status-item-icon {{ $usuario->tieneAccesoWeb() ? 'web' : 'inactivo' }}">
                            <i class="fas fa-desktop"></i>
                        </div>
                        <h4>{{ $usuario->tieneAccesoWeb() ? 'Habilitado' : 'Sin acceso' }}</h4>
                        <span>Web</span>
                    </div>

                    <div class="status-item">
                        <div class="status-item-icon {{ $usuario->tieneAccesoApp() ? 'app' : 'inactivo' }}">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h4>{{ $usuario->tieneAccesoApp() ? 'Habilitado' : 'Sin acceso' }}</h4>
                        <span>App Móvil</span>
                    </div>
                </div>

                @if($usuario->usu_intentos_fallidos > 0)
                <div class="alert alert-warning mt-3 mb-0">
                    <small>
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        {{ $usuario->usu_intentos_fallidos }} intentos fallidos de inicio de sesión
                    </small>
                </div>
                @endif
            </div>
        </div>

        {{-- Historial de Actividad --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-history"></i> Actividad Reciente</h5>
            </div>
            <div class="detail-card-body p-0">
                @if($historialActividad->count() > 0)
                <div class="activity-list px-3">
                    @foreach($historialActividad->take(5) as $actividad)
                    <div class="activity-item">
                        <div class="activity-dot"></div>
                        <div class="activity-content">
                            <div class="activity-action">{{ $actividad->action ?? 'Acción' }}</div>
                            <div class="activity-time">
                                {{ \Carbon\Carbon::parse($actividad->created_at)->diffForHumans() }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="empty-state-mini">
                    <i class="fas fa-history"></i>
                    <p>Sin actividad registrada</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Modal cambiar contraseña --}}
<div class="modal fade" id="modalPassword" 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">
                    <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-warning">
                        <i class="fas fa-key me-1"></i> Cambiar Contraseña
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection