{% extends "base.html" %}
{% block breadcrumb %}Panel de Control{% endblock %}

{% block content %}
<div class="page page-dashboard">
    <h2 class="page-title">Panel de Control Multitenant</h2>
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon folders-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div class="stat-info">
                <span class="stat-value" id="statTotal">-</span>
                <span class="stat-label">Total Clientes</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon docs-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            </div>
            <div class="stat-info">
                <span class="stat-value" id="statActive">-</span>
                <span class="stat-label">Clientes Activos</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon events-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            </div>
            <div class="stat-info">
                <span class="stat-value" id="statInactive">-</span>
                <span class="stat-label">Clientes Inactivos</span>
            </div>
        </div>
    </div>

    <div class="quick-actions">
        <a href="/main/customers" class="btn btn-primary">Gestionar Clientes</a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('/main/api/customers')
        .then(function(r) { return r.json(); })
        .then(function(customers) {
            if (!Array.isArray(customers)) return;
            var total = customers.length;
            var active = customers.filter(function(c) { return c.active; }).length;
            var inactive = total - active;
            document.getElementById('statTotal').textContent = total;
            document.getElementById('statActive').textContent = active;
            document.getElementById('statInactive').textContent = inactive;
        })
        .catch(function(e) { console.error(e); });
});
</script>
{% endblock %}