{% extends 'base.html' %}
{% block title %}Reportes{% endblock %}
{% block page_title %}Reportes y Estadísticas{% endblock %}
{% block page_subtitle %}Generación de informes en PDF y Excel{% endblock %}

{% block content %}
<div class="row g-4">
    <!-- Clientes -->
    <div class="col-md-6 col-lg-3">
        <div class="panel-card text-center h-100">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white mx-auto mb-3"
                style="width:65px;height:65px;background:linear-gradient(135deg,#0bb8c8,#0380ad);font-size:26px;">
                <i class="fa-solid fa-users"></i>
            </div>
            <h6 class="fw-bold mb-1">Clientes y Mascotas</h6>
            <p class="text-muted small mb-3">Listado completo de clientes con sus mascotas registradas.</p>
            <a href="{% url 'reporte_clientes_pdf' %}" class="btn btn-outline-info rounded-pill w-100">
                <i class="fa-solid fa-file-pdf me-2"></i>Descargar PDF
            </a>
        </div>
    </div>

    <!-- Ventas -->
    <div class="col-md-6 col-lg-3">
        <div class="panel-card text-center h-100">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white mx-auto mb-3"
                style="width:65px;height:65px;background:linear-gradient(135deg,#10b981,#047857);font-size:26px;">
                <i class="fa-solid fa-file-invoice-dollar"></i>
            </div>
            <h6 class="fw-bold mb-1">Reporte de Ventas</h6>
            <p class="text-muted small mb-3">Historial de facturas emitidas con totales e IGV.</p>
            <a href="{% url 'reporte_ventas_excel' %}" class="btn btn-outline-success rounded-pill w-100">
                <i class="fa-solid fa-file-excel me-2"></i>Descargar Excel
            </a>
        </div>
    </div>

    <!-- Inventario -->
    <div class="col-md-6 col-lg-3">
        <div class="panel-card text-center h-100">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white mx-auto mb-3"
                style="width:65px;height:65px;background:linear-gradient(135deg,#f59e0b,#b45309);font-size:26px;">
                <i class="fa-solid fa-box"></i>
            </div>
            <h6 class="fw-bold mb-1">Inventario</h6>
            <p class="text-muted small mb-3">Estado actual del stock, precios y alertas de reposición.</p>
            <a href="{% url 'reporte_inventario_pdf' %}" class="btn btn-outline-warning rounded-pill w-100">
                <i class="fa-solid fa-file-pdf me-2"></i>Descargar PDF
            </a>
        </div>
    </div>

    <!-- Vacunas -->
    <div class="col-md-6 col-lg-3">
        <div class="panel-card text-center h-100">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white mx-auto mb-3"
                style="width:65px;height:65px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);font-size:26px;">
                <i class="fa-solid fa-syringe"></i>
            </div>
            <h6 class="fw-bold mb-1">Vacunaciones</h6>
            <p class="text-muted small mb-3">Registro completo de vacunas aplicadas y próximas dosis.</p>
            <a href="{% url 'reporte_vacunas_pdf' %}" class="btn btn-outline-primary rounded-pill w-100">
                <i class="fa-solid fa-file-pdf me-2"></i>Descargar PDF
            </a>
        </div>
    </div>
</div>
{% endblock %}