{% extends 'base.html.twig' %}

{% block title %}Panel de control{% endblock %}

{% block stylesheets %}
    {{ parent() }}

{% endblock %}

{% block body %}
    <h1 class="fw-bold fs-2x text-dark mb-10">Panel de control</h1>

    <!-- ==========================
        BUSCADOR
    =========================== -->
    <div class="mb-10" style="max-width: 500px;">
        <h3 class="fw-bold mb-4">Buscar expediente o persona</h3>

        <div class="position-relative">
            <input type="text"
                id="buscador"
                class="form-control form-control-lg"
                placeholder="Buscar por nombre, apellidos o código…">

            <div id="resultadosBusqueda"
                class="list-group mt-2 shadow-sm"
                style="display:none; position:absolute; width:100%; z-index:50;">
            </div>
        </div>
    </div>

    <!-- ==========================
        TARJETAS DE ACCIÓN
    =========================== -->
    <div class="row g-6 mt-5 mb-10">

        <div class="col-md-6">
            <a href="{{ path('app_expediente_new') }}" target="_blank" class="text-decoration-none">
                <div class="dashboard-card p-6 text-center shadow-sm">
                    <i class="fa-solid fa-folder-plus fs-1 text-primary mb-3"></i>
                    <h4 class="fw-bold text-dark">Nuevo expediente</h4>
                </div>
            </a>
        </div>

        <div class="col-md-6">
            <a href="#" class="text-decoration-none">
                <div class="dashboard-card p-6 text-center shadow-sm">
                    <i class="fa-solid fa-syringe fs-1 text-orange mb-3"></i>
                    <h4 class="fw-bold text-dark">Registrar jeringuillas</h4>
                </div>
            </a>
        </div>

    </div>

    <!-- ==========================
        MÉTRICAS
    =========================== -->
    <div class="row g-6 mb-10">

        <div class="col-md-4">
            <div class="dashboard-metric shadow-sm p-6">
                <div class="d-flex align-items-center">
                    <i class="fa-solid fa-folder-open fs-1 text-primary me-3"></i>
                    <div>
                        <div class="fs-2 fw-bold">{{ metric_expedientes_activos }}</div>
                        <div class="text-muted">Expedientes activos</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="dashboard-metric shadow-sm p-6">
                <div class="d-flex align-items-center">
                    <i class="fa-solid fa-users fs-1 text-success me-3"></i>
                    <div>
                        <div class="fs-2 fw-bold">{{ metric_personas }}</div>
                        <div class="text-muted">Personas atendidas</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="dashboard-metric shadow-sm p-6">
                <div class="d-flex align-items-center">
                    <i class="fa-solid fa-clipboard-list fs-1 text-warning me-3"></i>
                    <div>
                        <div class="fs-2 fw-bold">{{ metric_valoraciones_pendientes }}</div>
                        <div class="text-muted">Valoraciones pendientes</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const input = document.getElementById("buscador");
            const resultadosDiv = document.getElementById("resultadosBusqueda");
            let timeout = null;

            input.addEventListener("keyup", function () {
                clearTimeout(timeout);

                const q = input.value.trim();
                if (q.length < 2) {
                    resultadosDiv.style.display = "none";
                    resultadosDiv.innerHTML = "";
                    return;
                }

                timeout = setTimeout(() => {
                    fetch('{{ path("app_dashboard_buscar") }}?q=' + encodeURIComponent(q))
                        .then(r => r.json())
                        .then(data => {
                            resultadosDiv.innerHTML = "";
                            if (data.length === 0) {
                                resultadosDiv.style.display = "none";
                                return;
                            }

                            data.forEach(item => {
                                const el = document.createElement("a");
                                el.classList.add("list-group-item", "list-group-item-action");
                                el.href = item.url;
                                el.innerHTML = `<strong>${item.codigo}</strong> — ${item.nombre}`;
                                resultadosDiv.appendChild(el);
                            });

                            resultadosDiv.style.display = "block";
                        });
                }, 300);
            });
        });
    </script>
{% endblock %}