{% extends 'base.html' %}
{% load static %}

{% block title %}Contabilidad | Gades Manager{% endblock title %}

{% block content %}
<div class="row mb-3 flex-shrink-0">
    <div class="col-12">
        <div class="bg-dark text-white p-3 rounded-3 shadow-sm" style="border-left: 5px solid #ffc107;">
            <h1 class="display-6 fw-bold mb-1">Contabilidad</h1>
            <p class="text-white-50 mb-0">
                {% if temporada_actual %}{{ temporada_actual.nombre }}{% else %}Sin temporada activa{% endif %}
            </p>
        </div>
    </div>
</div>

{% if messages %}
<div class="row mb-2 flex-shrink-0">
    <div class="col-12">
        {% for message in messages %}
            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %} py-2 small mb-1">{{ message }}</div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if not temporada_actual %}
<div class="row">
    <div class="col-12">
        <div class="alert alert-warning">No hay ninguna temporada activa. Activa una temporada desde <a href="{% url 'gestion_temporadas' %}">Gestión de Temporadas</a>.</div>
    </div>
</div>
{% else %}

{# ── Bloque 1: 4 tarjetas resumen ── #}
<div class="row g-3 mb-3 flex-shrink-0">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center h-100" style="border-top: 4px solid #0d6efd !important;">
            <div class="card-body py-3">
                <p class="text-secondary small mb-1">Presupuesto Inicial</p>
                <h4 class="fw-bold text-primary mb-0">{{ presupuesto_inicial|floatformat:2 }} €</h4>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center h-100" style="border-top: 4px solid #198754 !important;">
            <div class="card-body py-3">
                <p class="text-secondary small mb-1">Total Ingresos</p>
                <h4 class="fw-bold text-success mb-0">+{{ total_ingresos|floatformat:2 }} €</h4>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center h-100" style="border-top: 4px solid #dc3545 !important;">
            <div class="card-body py-3">
                <p class="text-secondary small mb-1">Total Gastos</p>
                <h4 class="fw-bold text-danger mb-0">-{{ total_gastos|floatformat:2 }} €</h4>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center h-100"
             style="border-top: 4px solid {% if presupuesto_actual >= 0 %}#198754{% else %}#dc3545{% endif %} !important;">
            <div class="card-body py-3">
                <p class="text-secondary small mb-1">Presupuesto Actual</p>
                <h4 class="fw-bold {% if presupuesto_actual >= 0 %}text-success{% else %}text-danger{% endif %} mb-0">
                    {{ presupuesto_actual|floatformat:2 }} €
                </h4>
            </div>
        </div>
    </div>
</div>

{# ── Bloque 2: Gastos | Ingresos ── #}
<div class="row g-3 mb-3" style="overflow-y: auto; max-height: 340px;">

    {# Columna Gastos #}
    <div class="col-12 col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0 text-danger">Gastos</h6>
                    <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#modalGasto">+ Añadir</button>
                </div>
                <div style="max-height: 220px; overflow-y: auto;">
                    {% if gastos %}
                        <ul class="list-group list-group-flush">
                            {% for gasto in gastos %}
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="fw-semibold small">{{ gasto.concepto }}</div>
                                    <div class="text-secondary" style="font-size:0.75rem;">{{ gasto.get_categoria_display }} · {{ gasto.fecha|date:"d/m/Y" }}</div>
                                </div>
                                <span class="badge bg-danger rounded-pill ms-2">-{{ gasto.importe|floatformat:2 }} €</span>
                            </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-secondary small text-center py-3 mb-0">Sin gastos registrados.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# Columna Ingresos #}
    <div class="col-12 col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0 text-success">Ingresos</h6>
                    <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalIngreso">+ Añadir</button>
                </div>
                <div style="max-height: 220px; overflow-y: auto;">
                    {% if ingresos %}
                        <ul class="list-group list-group-flush">
                            {% for ingreso in ingresos %}
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="fw-semibold small">{{ ingreso.concepto }}</div>
                                    <div class="text-secondary" style="font-size:0.75rem;">{{ ingreso.get_categoria_display }} · {{ ingreso.fecha|date:"d/m/Y" }}</div>
                                </div>
                                <span class="badge bg-success rounded-pill ms-2">+{{ ingreso.importe|floatformat:2 }} €</span>
                            </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-secondary small text-center py-3 mb-0">Sin ingresos registrados.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Bloque 3: Facturas pendientes ── #}
<div class="row flex-shrink-0">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-3">
                <h6 class="fw-bold mb-3">Facturas Pendientes</h6>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>Nombre</th>
                                <th>Empresa</th>
                                <th>Importe</th>
                                <th>Categoría</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for factura in facturas_pendientes %}
                            <tr>
                                <td>{{ factura.nombre }}</td>
                                <td>{{ factura.empresa }}</td>
                                <td class="fw-semibold">{{ factura.importe|floatformat:2 }} €</td>
                                <td>{{ factura.get_categoria_display }}</td>
                                <td class="d-flex gap-2">
                                    <form method="post" action="{% url 'aceptar_factura' factura.pk %}">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-sm btn-success fw-bold">Aceptar</button>
                                    </form>
                                    <form method="post" action="{% url 'rechazar_factura' factura.pk %}">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Rechazar</button>
                                    </form>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-secondary py-3">No hay facturas pendientes.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{% endif %}{# end if temporada_actual #}

{# ── Modal Añadir Gasto ── #}
<div class="modal fade" id="modalGasto" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Añadir Gasto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'anadir_gasto' %}">
                {% csrf_token %}
                <div class="modal-body">
                    {% for field in gasto_form %}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{{ field.label }}</label>
                        {{ field }}
                        {% for error in field.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger fw-bold">Guardar Gasto</button>
                </div>
            </form>
        </div>
    </div>
</div>

{# ── Modal Añadir Ingreso ── #}
<div class="modal fade" id="modalIngreso" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Añadir Ingreso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'anadir_ingreso' %}">
                {% csrf_token %}
                <div class="modal-body">
                    {% for field in ingreso_form %}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{{ field.label }}</label>
                        {{ field }}
                        {% for error in field.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success fw-bold">Guardar Ingreso</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock content %}