{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><i class="bi bi-speedometer2"></i> Dashboard</h2>
    <button class="btn btn-outline-secondary btn-sm" id="btnRefrescar">
        <i class="bi bi-arrow-clockwise"></i> Refrescar
    </button>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="card border-primary border-start-4 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted small">Empresas registradas</div>
                        <div class="fs-3 fw-bold" id="kpiEmpresas">--</div>
                    </div>
                    <i class="bi bi-building text-primary fs-1 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-success border-start-4 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted small">Con mensualidad</div>
                        <div class="fs-3 fw-bold" id="kpiMensualidad">--</div>
                    </div>
                    <i class="bi bi-calendar-check text-success fs-1 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-info border-start-4 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted small">Licencias activas</div>
                        <div class="fs-3 fw-bold" id="kpiLicenciasActivas">--</div>
                    </div>
                    <i class="bi bi-check-circle text-info fs-1 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-danger border-start-4 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted small">Licencias bloqueadas</div>
                        <div class="fs-3 fw-bold" id="kpiLicenciasBloqueadas">--</div>
                    </div>
                    <i class="bi bi-x-circle text-danger fs-1 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-md-6">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-white"><strong><i class="bi bi-clock-history"></i> Ultimos llamados SOAP</strong></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Fecha</th><th>Metodo</th><th>NIT</th><th>Resultado</th>
                            </tr>
                        </thead>
                        <tbody id="tblUltimosLogs">
                            <tr><td colspan="4" class="text-center text-muted">Cargando...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-white"><strong><i class="bi bi-pie-chart"></i> Llamados por metodo</strong></div>
            <div class="card-body">
                <table class="table table-sm">
                    <tbody id="tblPorMetodo">
                        <tr><td colspan="2" class="text-center text-muted">Cargando...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}