<x-app-layout>
    <x-slot name="header">Reportes</x-slot>

    <div class="card">
        <div class="card-title">Resumen de Reportes</div>

        <div class="stat-grid">
            <div class="stat-card">
                <div class="stat-line line-blue"></div>
                <div class="stat-label">Ingresos (mes)</div>
                <div class="stat-value">S/ 0.00</div>
            </div>
            <div class="stat-card">
                <div class="stat-line line-green"></div>
                <div class="stat-label">Pagos Aprobados</div>
                <div class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-line line-amber"></div>
                <div class="stat-label">Pagos Pendientes</div>
                <div class="stat-value">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-line line-purple"></div>
                <div class="stat-label">Usuarios Nuevos</div>
                <div class="stat-value">0</div>
            </div>
        </div>

        <div style="margin-top:20px;">
            <div class="card-title">Filtros</div>
            <form method="GET" action="">
                <div style="display:flex; gap:12px; margin-top:12px;">
                    <input type="month" name="mes" class="field-input" />
                    <select name="tipo" class="field-input">
                        <option value="todos">Todos</option>
                        <option value="pagos">Pagos</option>
                        <option value="usuarios">Usuarios</option>
                    </select>
                    <button class="table-btn">Filtrar</button>
                </div>
            </form>
        </div>

    </div>

</x-app-layout>
