{% extends 'base.html' %}

{% block title %}{{ titulo_pagina }}{% endblock %}

{% block extra_head %}
<style>
    /* Efecto hover para las tarjetas de resumen */
    .dashboard-card-link .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    /* Asegura que el cursor sea un puntero para las tarjetas clicables */
    a[data-bs-toggle="collapse"] {
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <h1 class="mb-4">{{ titulo_pagina }}</h1>

    <!-- INICIO: Grilla de Resumen General Interactiva -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <a data-bs-toggle="collapse" href="#expiring-warranties-details" class="text-decoration-none dashboard-card-link">
                <div class="card text-white bg-warning shadow-sm h-100">
                    <div class="card-body">
                        <h3 class="card-title">{{ expiring_warranties|length }}</h3>
                        <p class="card-text mb-0">Garantías por Vencer</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a data-bs-toggle="collapse" href="#expired-warranties-details" class="text-decoration-none dashboard-card-link">
                <div class="card text-white bg-danger shadow-sm h-100">
                    <div class="card-body">
                        <h3 class="card-title">{{ expired_warranties|length }}</h3>
                        <p class="card-text mb-0">Garantías Vencidas</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a data-bs-toggle="collapse" href="#upcoming-loans-details" class="text-decoration-none dashboard-card-link">
                <div class="card text-white bg-info shadow-sm h-100">
                    <div class="card-body">
                        <h3 class="card-title">{{ upcoming_loans|length }}</h3>
                        <p class="card-text mb-0">Préstamos por Vencer</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a data-bs-toggle="collapse" href="#overdue-loans-details" class="text-decoration-none dashboard-card-link">
                <div class="card text-white bg-primary shadow-sm h-100">
                    <div class="card-body">
                        <h3 class="card-title">{{ overdue_loans|length }}</h3>
                        <p class="card-text mb-0">Préstamos Vencidos</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <!-- FIN: Grilla de Resumen General -->

    <!-- INICIO: Contenedor de Listas Detalladas Colapsables -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Tarjeta de Garantías por Vencer -->
            <div class="collapse" id="expiring-warranties-details">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-warning"><h5 class="mb-0">Garantías por Vencer (Próximos 30 días)</h5></div>
                    <div class="list-group list-group-flush">
                        {% for equipo in expiring_warranties %}
                            <a href="{% url 'gestion_equipos:detalle_equipo' equipo.pk %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ equipo.nombre }}</strong> ({{ equipo.numero_serie }})
                                    <small class="d-block text-muted">Vence en {{ equipo.garantia_fin|timeuntil:today }}</small>
                                </div>
                                <span class="badge bg-warning text-dark">{{ equipo.garantia_fin|date:"d/m/Y" }}</span>
                            </a>
                        {% empty %}
                            <div class="list-group-item"><p class="text-muted mb-0">No hay garantías por vencer.</p></div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Tarjeta de Garantías Vencidas -->
            <div class="collapse" id="expired-warranties-details">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-danger text-white"><h5 class="mb-0">Garantías Vencidas</h5></div>
                    <div class="list-group list-group-flush">
                        {% for equipo in expired_warranties %}
                            <a href="{% url 'gestion_equipos:detalle_equipo' equipo.pk %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ equipo.nombre }}</strong> ({{ equipo.numero_serie }})
                                    <small class="d-block text-muted">Venció hace {{ equipo.garantia_fin|timesince:today }}</small>
                                </div>
                                <span class="badge bg-danger">{{ equipo.garantia_fin|date:"d/m/Y" }}</span>
                            </a>
                        {% empty %}
                            <div class="list-group-item"><p class="text-muted mb-0">No hay garantías vencidas.</p></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <!-- Tarjeta de Préstamos por Vencer (NUEVA) -->
            <div class="collapse" id="upcoming-loans-details">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-info text-white"><h5 class="mb-0">Préstamos por Vencer (Próximos 7 días)</h5></div>
                    <div class="list-group list-group-flush">
                        {% for asignacion in upcoming_loans %}
                            <a href="{% url 'gestion_equipos:detalle_equipo' asignacion.equipo.pk %}" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">{{ asignacion.equipo.nombre }}</h6>
                                    <strong class="text-info">Vence en {{ asignacion.fecha_entrega_prevista|timeuntil:today }}</strong>
                                </div>
                                <p class="mb-1">Asignado a: <strong>{{ asignacion.usuario.nombre }} {{ asignacion.usuario.apellido }}</strong></p>
                                <small class="text-muted">Debe entregarse el {{ asignacion.fecha_entrega_prevista|date:"d/m/Y" }}</small>
                            </a>
                        {% empty %}
                            <div class="list-group-item"><p class="text-muted mb-0">No hay préstamos por vencer.</p></div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Tarjeta de Préstamos Vencidos -->
            <div class="collapse" id="overdue-loans-details">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white"><h5 class="mb-0">Préstamos Vencidos</h5></div>
                    <div class="list-group list-group-flush">
                        {% for asignacion in overdue_loans %}
                            <a href="{% url 'gestion_equipos:detalle_equipo' asignacion.equipo.pk %}" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">{{ asignacion.equipo.nombre }}</h6>
                                    <strong class="text-danger">Venció hace {{ asignacion.fecha_entrega_prevista|timesince }}</strong>
                                </div>
                                <p class="mb-1">Asignado a: <strong>{{ asignacion.usuario.nombre }} {{ asignacion.usuario.apellido }}</strong></p>
                                <small class="text-muted">Debía entregarse el {{ asignacion.fecha_entrega_prevista|date:"d/m/Y" }}</small>
                            </a>
                        {% empty %}
                            <div class="list-group-item"><p class="text-muted mb-0">No hay préstamos vencidos.</p></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
