@extends('layouts.app')

@section('title', 'Mi Perfil')

@push('styles')
<style>
.avatar-xl {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700;
    background: #1a56db; color: #fff;
    flex-shrink: 0;
}
.stat-mini {
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}
.stat-mini .val { font-size: 22px; font-weight: 700; color: #1a56db; }
.stat-mini .lbl { font-size: 11px; color: #6b7280; margin-top: 2px; }

.act-row { font-size: 12px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; display:flex; gap:10px; align-items:flex-start; }
.act-row:last-child { border: none; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }

.badge-tipo-1 { background:#fee2e2; color:#991b1b; }
.badge-tipo-2 { background:#dbeafe; color:#1e40af; }
.badge-tipo-3 { background:#ccfbf1; color:#065f46; }
.badge-tipo-4 { background:#fef3c7; color:#92400e; }
.badge-tipo-5 { background:#f3f4f6; color:#374151; }
</style>
@endpush

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex align-items-center gap-3 py-2">
            <div class="avatar-xl">
                {{ strtoupper(substr($usuario->nombre, 0, 1)) }}
            </div>
            <div>
                <h1 class="h4 fw-bold mb-1">{{ $usuario->nombre }} {{ $usuario->apellidos }}</h1>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="badge badge-tipo-{{ $usuario->tipo }} px-2 py-1" style="font-size:12px">
                        {{ $usuario->tipo_texto }}
                    </span>
                    <span class="badge bg-{{ $usuario->estado == 0 ? 'success' : 'danger' }}" style="font-size:11px">
                        {{ $usuario->estado_texto }}
                    </span>
                    <span class="text-muted" style="font-size:12px">
                        <i class="fa fa-database me-1"></i>{{ $bdActiva }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content">

    @if(session('success'))
    <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
        <i class="fa fa-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="row g-3">

        {{-- ── Columna izquierda: datos del usuario ── --}}
        <div class="col-lg-4">

            {{-- Datos personales --}}
            <div class="block block-rounded mb-3">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        <i class="fa fa-user me-1 text-muted"></i> Datos de la Cuenta
                    </h3>
                </div>
                <div class="block-content p-0">
                    <table class="table table-sm table-vcenter fs-sm mb-0">
                        <tbody>
                            <tr>
                                <td class="fw-semibold bg-body-light" style="width:40%">Login</td>
                                <td class="font-monospace fw-bold">{{ $usuario->login }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Nombre</td>
                                <td>{{ $usuario->nombre }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Apellidos</td>
                                <td>{{ $usuario->apellidos }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Email</td>
                                <td>{{ $usuario->email ?: '—' }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Tipo</td>
                                <td>
                                    <span class="badge badge-tipo-{{ $usuario->tipo }}">
                                        {{ $usuario->tipo_texto }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Estado</td>
                                <td>
                                    <span class="badge bg-{{ $usuario->estado == 0 ? 'success' : 'danger' }}">
                                        {{ $usuario->estado_texto }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">ID Sistema</td>
                                <td class="text-muted">#{{ $usuario->id }}</td>
                            </tr>
                            @if($stats['ultimo_login'])
                            <tr>
                                <td class="fw-semibold bg-body-light">Último login</td>
                                <td class="text-muted" style="font-size:11px">
                                    {{ \App\Helpers\FechaHelper::bdToLocal($stats['ultimo_login']->fecha) }}
                                    {{ $stats['ultimo_login']->hora }}
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="block-content block-content-full block-content-sm bg-body-light">
                    <a href="{{ route('perfil.password') }}" class="btn btn-sm btn-alt-primary w-100">
                        <i class="fa fa-key me-1"></i> Cambiar Contraseña
                    </a>
                </div>
            </div>

            {{-- Stats rápidos --}}
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        <i class="fa fa-chart-bar me-1 text-muted"></i> Estadísticas del Sistema
                    </h3>
                </div>
                <div class="block-content">
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="stat-mini">
                                <div class="val">{{ number_format($stats['recibos']) }}</div>
                                <div class="lbl">Recibos totales</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-mini">
                                <div class="val">{{ number_format($stats['contratos']) }}</div>
                                <div class="lbl">Contratos vigentes</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="stat-mini">
                                <div class="val" style="color:#057a55">{{ $stats['acciones_hoy'] }}</div>
                                <div class="lbl">Mis acciones hoy</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ── Columna derecha: actividad reciente ── --}}
        <div class="col-lg-8">
            <div class="block block-rounded h-100">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        <i class="fa fa-history me-1 text-muted"></i> Mi Actividad Reciente
                    </h3>
                    <div class="block-options">
                        <span class="badge bg-secondary">Últimas 15 acciones</span>
                    </div>
                </div>
                <div class="block-content">
                    @forelse($actividad as $a)
                    @php
                        $dotColor = match($a->mov_texto) {
                            'Nuevo'      => '#22c55e',
                            'Modificar'  => '#3b82f6',
                            'Eliminar'   => '#ef4444',
                            'Login'      => '#8b5cf6',
                            default      => '#9ca3af',
                        };
                    @endphp
                    <div class="act-row">
                        <div class="act-dot" style="background:{{ $dotColor }}"></div>
                        <div class="flex-grow-1">
                            <span class="fw-semibold">{{ $a->mov_texto }}</span>
                            <span class="text-muted"> · {{ $a->modulo_texto }}</span>
                            @if($a->id)
                            <span class="text-muted"> #{{ $a->id }}</span>
                            @endif
                        </div>
                        <div class="text-muted text-end" style="min-width:90px; font-size:11px">
                            <div>{{ $a->fecha_local }}</div>
                            <div>{{ $a->hora }}</div>
                        </div>
                    </div>
                    @empty
                    <p class="text-muted text-center py-4 mb-0" style="font-size:13px">
                        <i class="fa fa-inbox fa-2x d-block mb-2 opacity-25"></i>
                        No hay actividad registrada aún.
                    </p>
                    @endforelse
                </div>
            </div>
        </div>

    </div>
</div>
@endsection