@extends('layouts.admin')

@section('title', 'Inicio')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2 FW-bold">Resumen de la Academia</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Exportar</button>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-calendar3 me-1"></i> Hoy
        </button>
    </div>
</div>

<!-- TARJETAS DE MÉTRICAS (CARDS) -->
<div class="row g-3 mb-4">
    <!-- Alumnos -->
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm p-3">
            <div class="d-flex align-items-center">
                <div class="p-3 bg-primary-subtle text-primary rounded-3 me-3">
                    <i class="bi bi-people fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Total Alumnos</h6>
                    <h3 class="mb-0 fw-bold">{{ $metrics['total_alumnos'] }}</h3>
                </div>
            </div>
        </div>
    </div>
    <!-- Cursos -->
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm p-3">
            <div class="d-flex align-items-center">
                <div class="p-3 bg-success-subtle text-success rounded-3 me-3">
                    <i class="bi bi-journal-check fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Cursos Activos</h6>
                    <h3 class="mb-0 fw-bold">{{ $metrics['cursos_activos'] }}</h3>
                </div>
            </div>
        </div>
    </div>
    <!-- Ventas -->
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm p-3">
            <div class="d-flex align-items-center">
                <div class="p-3 bg-warning-subtle text-warning rounded-3 me-3">
                    <i class="bi bi-cash-stack fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Ingresos Mensuales</h6>
                    <h3 class="mb-0 fw-bold">{{ $metrics['ingresos_mes'] }}</h3>
                </div>
            </div>
        </div>
    </div>
    <!-- Validaciones Pendientes -->
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm p-3">
            <div class="d-flex align-items-center">
                <div class="p-3 bg-danger-subtle text-danger rounded-3 me-3">
                    <i class="bi bi-file-earmark-medical fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Docs por Validar</h6>
                    <h3 class="mb-0 fw-bold">{{ $metrics['pendientes_revision'] }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- SECCIÓN INFORMATIVA INFERIOR (EJEMPLO) -->
<div class="row">
    <div class="col-md-12">
        <div class="card border-0 shadow-sm p-4">
            <h5 class="fw-bold mb-3"><i class="bi bi-lightning-charge-fill text-warning"></i> Próximos pasos en tu LMS</h5>
            <p class="text-muted">Este es el centro operativo de tu plataforma estilo Adipa. Desde la barra lateral izquierda podrás gestionar el catálogo educativo, verificar los títulos de tus estudiantes para habilitarlos en diplomados clínicos y revisar las transacciones financieras automáticas.</p>
        </div>
    </div>
</div>
@endsection