@extends('reportes.layouts.pdf-base')

@section('estilos-adicionales')
    <style>
        /* Rankings */
        .ranking-container {
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden;
        }

        .ranking-box {
            float: left;
            width: 32%;
            margin-right: 2%;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
        }

        .ranking-box:last-child {
            margin-right: 0;
        }

        .ranking-box.mejor {
            border-left: 4px solid #27ae60;
        }

        .ranking-box.mayor {
            border-left: 4px solid #3498db;
        }

        .ranking-box.atencion {
            border-left: 4px solid #e74c3c;
        }

        .ranking-titulo {
            font-size: 10px;
            font-weight: bold;
            margin-bottom: 8px;
            text-transform: uppercase;
            color: #2c3e50;
        }

        .ranking-item {
            padding: 5px 0;
            border-bottom: 1px solid #ecf0f1;
            font-size: 8px;
        }

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

        .medalla {
            display: inline-block;
            width: 18px;
            text-align: center;
            font-weight: bold;
        }

        /* Evolución */
        .evolucion-cards {
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden;
        }

        .evolucion-card {
            float: left;
            width: 23%;
            margin-right: 2.6%;
            padding: 10px;
            text-align: center;
            background: #f8f9fa;
            border-left: 4px solid #3498db;
            border-radius: 4px;
        }

        .evolucion-card:last-child {
            margin-right: 0;
        }

        .evolucion-gestion {
            font-size: 13px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 4px;
        }

        .evolucion-valor {
            font-size: 9px;
            color: #7f8c8d;
        }
    </style>
@endsection

@section('contenido')
    {{-- EVOLUCIÓN POR GESTIÓN (si hay múltiples gestiones) --}}
    @if (isset($evolucion) && $evolucion->count() > 1)
        <h4
            style="font-size: 11px; font-weight: bold; margin-bottom: 10px; border-bottom: 2px solid #d32f2f; padding-bottom: 5px;">
            📈 Evolución Histórica
        </h4>

        <div class="evolucion-cards">
            @foreach ($evolucion as $item)
                <div class="evolucion-card">
                    <div class="evolucion-gestion">{{ $item['gestion'] }}</div>
                    <div class="evolucion-valor">
                        {{ $item['total_poas'] }} POAs<br>
                        Bs. {{ number_format($item['presupuesto'] / 1000000, 1) }}M<br>
                        <strong>{{ $item['porcentaje'] }}% ejec.</strong>
                    </div>
                </div>
            @endforeach
        </div>
        <div style="clear: both;"></div>
    @endif

    {{-- RANKINGS TOP 5 --}}
    <h4
        style="font-size: 11px; font-weight: bold; margin-bottom: 10px; border-bottom: 2px solid #d32f2f; padding-bottom: 5px;">
        🏆 Rankings - Top 5
    </h4>

    <div class="ranking-container">
        {{-- Mejor Ejecución --}}
        <div class="ranking-box mejor">
            <div class="ranking-titulo">✅ Mejor Ejecución</div>
            @foreach ($rankings['mejor_ejecucion'] as $index => $poa)
                @php
                    $porcentaje =
                        $poa->presupuesto_inicial > 0
                            ? round(($poa->ejecutado / $poa->presupuesto_inicial) * 100, 2)
                            : 0;
                @endphp
                <div class="ranking-item">
                    <span class="medalla"
                        style="color: {{ $index === 0 ? '#f39c12' : ($index === 1 ? '#95a5a6' : '#cd7f32') }}">{{ $index + 1 }}.</span>
                    {{ Str::limit($poa->unidadEducativa->nombre ?? 'N/A', 28) }}<br>
                    <strong style="color: #27ae60;">{{ $porcentaje }}%</strong>
                </div>
            @endforeach
        </div>

        {{-- Mayor Presupuesto --}}
        <div class="ranking-box mayor">
            <div class="ranking-titulo">💰 Mayor Presupuesto</div>
            @foreach ($rankings['mayor_presupuesto'] as $index => $poa)
                <div class="ranking-item">
                    <span class="medalla"
                        style="color: {{ $index === 0 ? '#f39c12' : ($index === 1 ? '#95a5a6' : '#cd7f32') }}">{{ $index + 1 }}.</span>
                    {{ Str::limit($poa->unidadEducativa->nombre ?? 'N/A', 28) }}<br>
                    <strong style="color: #3498db;">Bs. {{ number_format($poa->presupuesto_inicial / 1000, 0) }}K</strong>
                </div>
            @endforeach
        </div>

        {{-- Requieren Atención --}}
        <div class="ranking-box atencion">
            <div class="ranking-titulo">⚠️ Requieren Atención</div>
            @foreach ($rankings['menor_ejecucion'] as $index => $poa)
                @php
                    $porcentaje =
                        $poa->presupuesto_inicial > 0
                            ? round(($poa->ejecutado / $poa->presupuesto_inicial) * 100, 2)
                            : 0;
                @endphp
                <div class="ranking-item">
                    <span style="color: #e74c3c;">⚠</span>
                    {{ Str::limit($poa->unidadEducativa->nombre ?? 'N/A', 28) }}<br>
                    <strong style="color: #e74c3c;">{{ $porcentaje }}%</strong>
                </div>
            @endforeach
        </div>
    </div>
    <div style="clear: both;"></div>

    {{-- TABLA COMPLETA --}}
    <h4
        style="font-size: 11px; font-weight: bold; margin-top: 15px; margin-bottom: 10px; border-bottom: 2px solid #d32f2f; padding-bottom: 5px;">
        📋 Listado Completo por Unidad Educativa
    </h4>

    <table class="tabla-datos">
        <thead>
            <tr>
                <th style="width: 4%;">N°</th>
                <th style="width: 32%;">Unidad Educativa</th>
                <th style="width: 9%;">Gestión</th>
                <th style="width: 7%;">Cant.</th>
                <th style="width: 16%;">Presupuesto</th>
                <th style="width: 16%;">Ejecutado</th>
                <th style="width: 8%;">% Ejec.</th>
                <th style="width: 8%;">Estado</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($poas->sortByDesc(function ($p) {
            return $p->presupuesto_inicial > 0 ? ($p->ejecutado / $p->presupuesto_inicial) * 100 : 0;
        }) as $index => $poa)
                @php
                    $porcentaje =
                        $poa->presupuesto_inicial > 0
                            ? round(($poa->ejecutado / $poa->presupuesto_inicial) * 100, 2)
                            : 0;

                    $clase = match (true) {
                        $porcentaje >= 80 => 'background: #e8f5e9;',
                        $porcentaje >= 50 => 'background: #fff9c4;',
                        default => 'background: #ffebee;',
                    };

                    $estadoLabel = match (true) {
                        $porcentaje >= 80 => 'Óptimo',
                        $porcentaje >= 50 => 'Aceptable',
                        default => 'Bajo',
                    };
                @endphp
                <tr style="{{ $clase }}">
                    <td class="text-center">{{ $index + 1 }}</td>
                    <td>{{ $poa->unidadEducativa->nombre ?? 'N/A' }}</td>
                    <td class="text-center">{{ $poa->gestion }}</td>
                    <td class="text-center">{{ $poa->cantidad ?? 0 }}</td>
                    <td class="text-right">Bs. {{ number_format($poa->presupuesto_inicial, 2) }}</td>
                    <td class="text-right">Bs. {{ number_format($poa->ejecutado, 2) }}</td>
                    <td class="text-center"><strong>{{ $porcentaje }}%</strong></td>
                    <td class="text-center" style="font-size: 7px;">{{ $estadoLabel }}</td>
                </tr>
            @endforeach
        </tbody>
        <tfoot>
            <tr style="font-weight: bold; background: #f8f9fa;">
                <td colspan="4" class="text-right">TOTALES:</td>
                <td class="text-right">Bs. {{ number_format($estadisticas['presupuesto_total'], 2) }}</td>
                <td class="text-right">Bs. {{ number_format($estadisticas['ejecutado_total'], 2) }}</td>
                <td class="text-center">{{ $estadisticas['porcentaje_ejecucion'] }}%</td>
                <td></td>
            </tr>
        </tfoot>
    </table>

    {{-- RESUMEN --}}
    <div class="resumen-box" style="margin-top: 10px;">
        <strong>RESUMEN:</strong>
        Total UEs: <strong>{{ $poas->count() }}</strong> |
        Gestión: <strong>{{ $gestion }}</strong> |
        Promedio Ejecución: <strong>{{ $estadisticas['porcentaje_ejecucion'] }}%</strong>
    </div>
@endsection

@section('footer-extra')
    Reporte por Gestión {{ $gestion ?? '' }}
@endsection