@extends('layouts.app')

@section('titulo', 'Dashboard')
@section('subtitulo', 'Resumen general de tu institución · '.now()->translatedFormat('l, d \d\e F Y'))

@section('contenido')
@php
    $color = $empresa?->color_primario ?: '#2f6bff';
    $tipo = $empresa?->tipoNegocio;
    $sim = $empresa?->simbolo ?? 'S/';
@endphp

{{-- Banner del tipo de negocio --}}
<div class="relative overflow-hidden rounded-2xl mb-5 border border-slate-100 shadow-sm shadow-slate-200/60"
     style="background: linear-gradient(110deg, {{ $color }}1f, #ffffff 55%);">
    <div class="absolute inset-y-0 left-0 w-1.5" style="background: {{ $color }};"></div>
    <div class="flex flex-col sm:flex-row sm:items-center gap-4 px-5 sm:px-6 py-5 pl-6 sm:pl-8">
        <div class="h-14 w-14 rounded-2xl flex items-center justify-center text-white shadow-lg shrink-0"
             style="background: linear-gradient(135deg, {{ $color }}, {{ $color }}cc);">
            <svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l6.16-3.42A12 12 0 0112 21.5 12 12 0 015.84 10.58L12 14z"/></svg>
        </div>
        <div class="min-w-0 flex-1">
            <p class="text-[11px] font-bold uppercase tracking-widest" style="color: {{ $color }};">Panel de gestión</p>
            <h2 class="text-xl font-extrabold text-slate-800 leading-tight">{{ $tipo?->nombre ?? 'Institución educativa' }}</h2>
            <p class="text-sm text-slate-500 mt-0.5">{{ $tipo?->descripcion ?? 'Gestiona tu institución desde un solo lugar.' }}</p>
        </div>
        <span class="self-start sm:self-center inline-flex items-center gap-2 text-sm font-semibold text-white px-4 py-2 rounded-xl shadow-md shrink-0"
              style="background: {{ $color }};">
            {{ $tipo?->nombre ?? 'Educación' }}
        </span>
    </div>
</div>

{{-- KPIs (tarjetas de color) --}}
@php
    $kpiCards = [
        ['label' => 'Estudiantes',     'valor' => number_format($kpis['estudiantes']),              'cap' => 'Registrados',       'icono' => 'users',    'grad' => 'linear-gradient(135deg,#3b6fe0,#4f8cff)'],
        ['label' => 'Docentes',        'valor' => number_format($kpis['docentes']),                 'cap' => 'Plana activa',      'icono' => 'teacher',  'grad' => 'linear-gradient(135deg,#0f9d76,#22c58b)'],
        ['label' => 'Programas',       'valor' => number_format($kpis['programas']),                'cap' => 'En catálogo',       'icono' => 'book',     'grad' => 'linear-gradient(135deg,#0ea5b7,#22c9de)'],
        ['label' => 'Ingresos del mes','valor' => $sim.' '.number_format($kpis['ingresos_mes'], 0), 'cap' => 'Cobrado este mes',  'icono' => 'wallet',   'grad' => 'linear-gradient(135deg,#7c3aed,#a855f7)'],
        ['label' => 'Aulas',           'valor' => number_format($kpis['aulas']),                    'cap' => 'Ambientes',         'icono' => 'grid',     'grad' => 'linear-gradient(135deg,#e08b1a,#f5a623)'],
        ['label' => 'Clases hoy',      'valor' => number_format($kpis['clases_hoy']),               'cap' => 'Programadas',       'icono' => 'calendar', 'grad' => 'linear-gradient(135deg,#e0483f,#f56a4f)'],
        ['label' => 'Por cobrar',      'valor' => $sim.' '.number_format($kpis['por_cobrar'], 0),   'cap' => 'Saldo pendiente',   'icono' => 'receipt',  'grad' => 'linear-gradient(135deg,#d63384,#ec4899)'],
        ['label' => 'Pagos pendientes','valor' => number_format($kpis['pagos_pend']),               'cap' => 'Cuotas por cobrar', 'icono' => 'clipboard','grad' => 'linear-gradient(135deg,#0d9488,#14b8a6)'],
    ];
@endphp
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
    @foreach ($kpiCards as $c)
        <div class="relative overflow-hidden rounded-2xl p-5 text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition" style="background: {{ $c['grad'] }};">
            <div class="absolute -right-3 -bottom-3 opacity-20">
                @include('partials.icon', ['name' => $c['icono'], 'class' => 'h-20 w-20'])
            </div>
            <div class="relative">
                <p class="text-[11px] font-bold uppercase tracking-wider text-white/85">{{ $c['label'] }}</p>
                <p class="mt-2 text-2xl sm:text-3xl font-extrabold leading-none truncate">{{ $c['valor'] }}</p>
                <p class="mt-2 text-xs text-white/80">{{ $c['cap'] }}</p>
            </div>
        </div>
    @endforeach
</div>

{{-- Facturación electrónica del mes --}}
@if (!empty($facturacion))
<div class="mt-5 rounded-2xl bg-white p-5 shadow-sm shadow-slate-200/60">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="h-10 w-10 rounded-xl bg-gradient-to-br from-brand-500 to-brand-400 text-white flex items-center justify-center shadow-lg">
                @include('partials.icon', ['name' => 'receipt', 'class' => 'h-5 w-5'])
            </div>
            <div>
                <h3 class="font-bold text-slate-800">Facturación electrónica</h3>
                <p class="text-sm text-slate-500">Comprobantes de {{ now()->translatedFormat('F') }} · {{ $sim }} {{ number_format($facturacion['facturado'], 2) }} facturado</p>
            </div>
        </div>
        <a href="{{ route('facturacion.index') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-brand-600 hover:gap-2 transition-all">
            Ver comprobantes
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>

    <div class="mt-4 grid grid-cols-2 lg:grid-cols-4 gap-3">
        @foreach ([
            ['Emitidos', $facturacion['emitidos'], 'text-slate-800', 'bg-slate-50'],
            ['Aceptados', $facturacion['aceptados'], 'text-emerald-700', 'bg-emerald-50'],
            ['Rechazados', $facturacion['rechazados'], 'text-red-600', 'bg-red-50'],
            ['Pendientes', $facturacion['pendientes'], 'text-amber-700', 'bg-amber-50'],
        ] as [$lab, $val, $txt, $bg])
            <div class="rounded-xl {{ $bg }} p-4">
                <p class="text-2xl font-extrabold {{ $txt }}">{{ number_format($val) }}</p>
                <p class="text-xs text-slate-500">{{ $lab }}</p>
            </div>
        @endforeach
    </div>
</div>
@endif

{{-- 4 Gráficos estadísticos (responsivos) --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 mt-5">
    {{-- 1. Matrículas por mes --}}
    <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm shadow-slate-200/60">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-bold text-slate-800">Matrículas por mes</h3>
                <p class="text-sm text-slate-500">Últimos 7 meses</p>
            </div>
            <span class="h-9 w-9 rounded-xl bg-brand-50 text-brand-500 flex items-center justify-center">@include('partials.icon', ['name' => 'chart', 'class' => 'h-5 w-5'])</span>
        </div>
        <div class="relative w-full" style="height: 16rem;"><canvas id="chartMatriculas"></canvas></div>
    </div>

    {{-- 2. Estudiantes por programa --}}
    <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm shadow-slate-200/60">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-bold text-slate-800">Estudiantes por programa</h3>
                <p class="text-sm text-slate-500">Distribución actual</p>
            </div>
            <span class="h-9 w-9 rounded-xl bg-violet-50 text-violet-500 flex items-center justify-center">@include('partials.icon', ['name' => 'book', 'class' => 'h-5 w-5'])</span>
        </div>
        <div class="relative w-full" style="height: 16rem;"><canvas id="chartProgramas"></canvas></div>
    </div>

    {{-- 3. Recaudación mensual --}}
    <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm shadow-slate-200/60">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-bold text-slate-800">Recaudación mensual</h3>
                <p class="text-sm text-slate-500">Pagos registrados ({{ $sim }})</p>
            </div>
            <span class="h-9 w-9 rounded-xl bg-emerald-50 text-emerald-500 flex items-center justify-center">@include('partials.icon', ['name' => 'wallet', 'class' => 'h-5 w-5'])</span>
        </div>
        <div class="relative w-full" style="height: 16rem;"><canvas id="chartRecaudacion"></canvas></div>
    </div>

    {{-- 4. Estudiantes por estado --}}
    <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm shadow-slate-200/60">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-bold text-slate-800">Estudiantes por estado</h3>
                <p class="text-sm text-slate-500">Situación académica</p>
            </div>
            <span class="h-9 w-9 rounded-xl bg-amber-50 text-amber-500 flex items-center justify-center">@include('partials.icon', ['name' => 'check', 'class' => 'h-5 w-5'])</span>
        </div>
        <div class="relative w-full" style="height: 16rem;"><canvas id="chartEstados"></canvas></div>
    </div>
</div>

{{-- Accesos + Actividad --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 mt-5">
    <div class="lg:col-span-2 bg-white rounded-2xl p-5 sm:p-6 shadow-sm shadow-slate-200/60">
        <h3 class="font-bold text-slate-800 mb-4">Accesos rápidos</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-3">
            @foreach (($menuModulos ?? collect())->whereNotIn('slug', ['dashboard'])->take(8) as $m)
                <a href="{{ $m->slug === 'estudiantes' ? route('estudiantes.index') : ($m->slug === 'programas' ? route('programas.index') : ($m->slug === 'docentes' ? route('docentes.index') : ($m->slug === 'pagos' ? route('pagos.index') : ($m->slug === 'aulas' ? route('aulas.index') : ($m->slug === 'horarios' ? route('horarios.index') : ($m->slug === 'configuracion' ? route('configuracion.index') : route('modulo.show', $m->slug))))))) }}"
                   class="group rounded-2xl border border-slate-100 hover:border-brand-200 hover:bg-brand-50/50 p-4 text-center transition">
                    <div class="mx-auto h-11 w-11 rounded-xl bg-brand-50 text-brand-500 flex items-center justify-center group-hover:bg-brand-500 group-hover:text-white transition">
                        @include('partials.icon', ['name' => $m->icono, 'class' => 'h-5 w-5'])
                    </div>
                    <p class="mt-2 text-xs font-medium text-slate-600 leading-tight">{{ $m->nombre }}</p>
                </a>
            @endforeach
        </div>
    </div>

    <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm shadow-slate-200/60">
        <h3 class="font-bold text-slate-800 mb-4">Actividad reciente</h3>
        <div class="space-y-4">
            @foreach ($actividad as $a)
                <div class="flex gap-3">
                    <div class="mt-1 h-2.5 w-2.5 rounded-full bg-brand-400 shrink-0"></div>
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-slate-700 truncate">{{ $a['titulo'] }}</p>
                        <p class="text-xs text-slate-400">{{ $a['detalle'] }} · {{ $a['hora'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const BRAND = @json($color);
    const PALETA = ['#2f6bff', '#38b6ff', '#7c3aed', '#10b981', '#f59e0b', '#ef4444'];
    const baseOpts = { responsive: true, maintainAspectRatio: false };
    const gridColor = '#f1f5f9', tickColor = '#94a3b8';

    // 1) Matrículas (línea con área)
    const mat = @json($matriculas);
    const cM = document.getElementById('chartMatriculas').getContext('2d');
    const grad = cM.createLinearGradient(0, 0, 0, 250);
    grad.addColorStop(0, BRAND + '55'); grad.addColorStop(1, BRAND + '00');
    new Chart(cM, {
        type: 'line',
        data: { labels: mat.map(x => x.mes), datasets: [{ data: mat.map(x => x.total), borderColor: BRAND, backgroundColor: grad, fill: true, tension: 0.4, borderWidth: 3, pointBackgroundColor: '#fff', pointBorderColor: BRAND, pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6 }] },
        options: { ...baseOpts, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor, precision: 0 } }, x: { grid: { display: false }, ticks: { color: tickColor } } } }
    });

    // 2) Estudiantes por programa (dona)
    const prog = @json($porPrograma);
    new Chart(document.getElementById('chartProgramas'), {
        type: 'doughnut',
        data: { labels: prog.map(x => x.label), datasets: [{ data: prog.map(x => x.total), backgroundColor: PALETA, borderWidth: 2, borderColor: '#fff' }] },
        options: { ...baseOpts, cutout: '62%', plugins: { legend: { position: 'right', labels: { color: '#64748b', boxWidth: 12, padding: 12, font: { size: 11 } } } } }
    });

    // 3) Recaudación mensual (barras)
    const rec = @json($recaudacion);
    new Chart(document.getElementById('chartRecaudacion'), {
        type: 'bar',
        data: { labels: rec.map(x => x.mes), datasets: [{ data: rec.map(x => x.total), backgroundColor: BRAND, hoverBackgroundColor: '#1a4ff0', borderRadius: 8, barPercentage: 0.6 }] },
        options: { ...baseOpts, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor } }, x: { grid: { display: false }, ticks: { color: tickColor } } } }
    });

    // 4) Estudiantes por estado (radar)
    const est = @json($porEstado);
    new Chart(document.getElementById('chartEstados'), {
        type: 'radar',
        data: { labels: est.map(x => x.label), datasets: [{ data: est.map(x => x.total), backgroundColor: BRAND + '33', borderColor: BRAND, borderWidth: 2, pointBackgroundColor: BRAND, pointRadius: 3 }] },
        options: { ...baseOpts, plugins: { legend: { display: false } }, scales: { r: { beginAtZero: true, angleLines: { color: gridColor }, grid: { color: gridColor }, pointLabels: { color: '#64748b', font: { size: 11 } }, ticks: { display: false, precision: 0 } } } }
    });
</script>
@endpush