@extends('layout.template')
@section('title', 'Inicio | ICAT')
@section('content')
<div class="content-body">
    <div class="container-fluid">
        <div class="row mb-3 pb-1">
            <div class="col-12">
                <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2">
                    <div class="flex-grow-1">
                        <h4 class="fs-18 mb-1">Buen día, {{ Auth::user()->nombre }} {{ Auth::user()->apellido_paterno }}</h4>
                        <p class="text-muted mb-0">Este es el resumen de  actividades de capacitación de tu unidad.</p>
                    </div>
                    <div class="text-muted fs-13"><i class="ri-calendar-line me-1" aria-hidden="true"></i>{{ \Carbon\Carbon::now()->locale('es')->isoFormat('dddd D [de] MMMM [de] YYYY') }}</div>
                </div>
            </div>
        </div>
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar aviso"></button>
            </div>
        @endif
        <div class="row">
            @puede('Capacitandos', 'entrar_modulo_capacitandos')
                <div class="col-md-6 col-xl-4">
                    <div class="card card-animate">
                        <div class="card-body">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-4">Capacitandos</p>
                            <div class="d-flex align-items-end justify-content-between">
                                <div><h3 class="fs-22 fw-semibold mb-3">{{ number_format($capacitandosCount ?? 0) }}</h3><a href="{{ route('capacitandos') }}" class="text-decoration-underline">Ver capacitandos</a></div>
                                <div class="avatar-sm flex-shrink-0"><span class="avatar-title bg-primary-subtle text-primary rounded fs-3"><i class="ri-graduation-cap-line" aria-hidden="true"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endpuede
            @puede('Instructores', 'entrar_modulo_instructores')
                <div class="col-md-6 col-xl-4">
                    <div class="card card-animate">
                        <div class="card-body">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-4">Instructores</p>
                            <div class="d-flex align-items-end justify-content-between">
                                <div><h3 class="fs-22 fw-semibold mb-3">{{ number_format($instructoresCount ?? 0) }}</h3><a href="{{ route('instructores') }}" class="text-decoration-underline">Ver instructores</a></div>
                                <div class="avatar-sm flex-shrink-0"><span class="avatar-title bg-success-subtle text-success rounded fs-3"><i class="ri-user-star-line" aria-hidden="true"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endpuede
            @puede('Aulas', 'entrar_modulo_aulas')
                <div class="col-md-6 col-xl-4">
                    <div class="card card-animate">
                        <div class="card-body">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-4">Aulas del año</p>
                            <div class="d-flex align-items-end justify-content-between">
                                <div><h3 class="fs-22 fw-semibold mb-3">{{ number_format($aulasCount ?? 0) }}</h3><a href="{{ route('aulas') }}" class="text-decoration-underline">Ver aulas</a></div>
                                <div class="avatar-sm flex-shrink-0"><span class="avatar-title bg-info-subtle text-info rounded fs-3"><i class="ri-building-4-line" aria-hidden="true"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endpuede
        </div>
        <div class="row">
            @puede('Aulas', 'entrar_modulo_aulas')
                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                            <div><h2 class="card-title mb-1">Actividad de aulas</h2><p class="text-muted mb-0 fs-13">Aulas registradas por mes</p></div>
                            <form method="GET" action="{{ route('dashboard') }}" class="d-flex gap-2 align-items-center">
                                <label class="visually-hidden" for="dashboard-year">Año</label>
                                <select id="dashboard-year" name="year" class="form-select agenda-no-selectpicker w-auto">
                                    @foreach(($availableYears ?? [date('Y')]) as $year)
                                        <option value="{{ $year }}" @selected((string) ($selectedYear ?? date('Y')) === (string) $year)>{{ $year }}</option>
                                    @endforeach
                                </select>
                                <button class="btn btn-soft-primary" type="submit">Consultar</button>
                            </form>
                        </div>
                        <div class="card-body">
                            @php($months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'])
                            <div class="icat-month-chart" role="img" aria-label="Aulas por mes en {{ $selectedYear ?? date('Y') }}">
                                @foreach($months as $index => $month)
                                    @php($count = ($chartData ?? [])[$index + 1] ?? 0)
                                    <div class="icat-month" title="{{ $month }}: {{ $count }} aulas">
                                        <span class="icat-month-value">{{ $count }}</span>
                                        <div class="icat-month-track"><div class="icat-month-bar" style="height: {{ max(2, min(100, $count / max(1, $maxChartValue ?? 1) * 100)) }}%"></div></div>
                                        <span class="icat-month-label">{{ $month }}</span>
                                    </div>
                                @endforeach
                            </div>
                            <div class="d-flex flex-wrap gap-2 mt-4 pt-3 border-top">
                                @foreach(($selectedStatuses ?? []) as $status)
                                    <span class="badge bg-light text-body fw-normal p-2"><i class="{{ $status['icon'] }} me-1" aria-hidden="true"></i>{{ $status['label'] }} <strong class="ms-1">{{ $status['count'] }}</strong></span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endpuede
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-header"><h2 class="card-title mb-0">Acciones rápidas</h2></div>
                    <div class="card-body d-grid gap-3">
                        @puede('Capacitandos', 'entrar_modulo_capacitandos')
                            <a href="{{ route('capacitandos') }}" class="btn btn-soft-primary text-start"><i class="ri-graduation-cap-line me-2" aria-hidden="true"></i>Consultar capacitandos</a>
                        @endpuede
                        @puede('Aulas', 'alta_aula')
                            <a href="{{ route('indexCrearAula') }}" class="btn btn-soft-info text-start"><i class="ri-add-circle-line me-2" aria-hidden="true"></i>Nueva aula</a>
                        @endpuede
                        @puede('Instructores', 'alta_instructor')
                            <a href="{{ route('indexAddInstructor') }}" class="btn btn-soft-success text-start"><i class="ri-user-add-line me-2" aria-hidden="true"></i>Nuevo instructor</a>
                        @endpuede
                        @puede('Reportes', 'entrar_modulo_reportes')
                            <a href="{{ url('/reportes') }}" class="btn btn-soft-secondary text-start"><i class="ri-file-chart-line me-2" aria-hidden="true"></i>Consultar reportes</a>
                        @endpuede
                    </div>
                </div>
            </div>
        </div>
        @puede('Capacitandos', 'entrar_modulo_capacitandos')
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 class="card-title mb-0">Capacitandos en borrador</h2><span class="badge bg-warning-subtle text-warning">{{ $capacitandosDraftCount ?? 0 }} pendientes</span>
                </div>
                @if(count($capacitandosDraft ?? []) > 0)
                    <div class="table-responsive">
                        <table class="table align-middle table-nowrap mb-0">
                            <thead class="table-light"><tr><th>Nombre</th><th>CURP</th><th class="text-end">Acciones</th></tr></thead>
                            <tbody>
                                @foreach($capacitandosDraft as $cap)
                                    <tr>
                                        <td>{{ $cap->apellido_paterno }} {{ $cap->apellido_materno }} {{ $cap->nombre }}</td>
                                        <td>{{ $cap->curp }}</td>
                                        <td class="text-end"><form action="{{ route('editarCapacitando') }}" method="POST">@csrf<input type="hidden" name="id_capacitando" value="{{ $cap->id }}"><button type="submit" class="btn btn-sm btn-soft-primary"><i class="ri-pencil-line me-1" aria-hidden="true"></i>Continuar captura</button></form></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="card-body text-center py-4 text-muted"><i class="ri-checkbox-circle-line fs-36 text-success" aria-hidden="true"></i><p class="mb-0 mt-2">No hay borradores pendientes</p></div>
                @endif
            </div>
        @endpuede
    </div>
</div>
@endsection