{% extends "base.html" %}

{% block title %}Reporte Estadístico - EMI{% endblock %}

{% block content %}
<div class="max-w-md mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-white">Reporte Estadístico</h2>
            <p class="text-slate-400 text-sm">Generación de informes y vista previa</p>
        </div>
        <!-- No hay un enlace de "Gestión" directo para reportes, es la misma pantalla -->
    </div>

    <!-- Mensajes de Feedback -->
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const msg = urlParams.get('msg');
        const type = urlParams.get('type');
        if (msg) {
            document.write(`
                <div class="mb-6 p-4 rounded-xl border ${type === 'success' ? 'bg-emerald-500/10 border-emerald-500/50 text-emerald-400' : 'bg-red-500/10 border-red-500/50 text-red-400'} flex items-center gap-3">
                    <i class="la ${type === 'success' ? 'la-check-circle' : 'la-exclamation-circle'} text-xl"></i>
                    <p class="text-sm font-medium">${msg}</p>
                </div>
            `);
        }
    </script>

    <div class="glass p-6 rounded-2xl border border-white/10 shadow-2xl space-y-6">
        <form action="{{ prefix }}/reportes" method="get" class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Fecha de Corte</label>
                <input type="date" name="fecha" id="reporte_fecha" required value="{{ fecha_filtro or '' }}"
                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500">
            </div>
            <button type="submit"
                class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-xl transition-all active:scale-95 shadow-lg shadow-indigo-600/30 uppercase text-sm">
                Generar Vista Previa
            </button>
        </form>

        <div class="border-t border-white/10 pt-6 mt-6">
            <h3 class="text-indigo-400 font-bold text-xs uppercase tracking-widest mb-4">Vista Previa del Informe</h3>
            <div
                class="bg-slate-800 p-4 rounded-xl border border-slate-700 max-h-96 overflow-y-auto text-sm whitespace-pre-wrap font-mono">
                {{ resumen_texto }}
            </div>
        </div>

        <form action="{{ prefix }}/reportes/generar-pdf" method="post" class="pt-4">
            <input type="hidden" name="fecha" value="{{ fecha_filtro or '' }}">
            <button type="submit"
                class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-4 rounded-xl transition-all active:scale-95 shadow-lg shadow-emerald-600/30 uppercase text-sm">
                Descargar PDF
            </button>
        </form>
    </div>
</div>

<script>
    document.getElementById('reporte_fecha').valueAsDate = new Date();
</script>
{% endblock %}