{% extends "core/base.html" %}
{% block title %}Detalle Cliente{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="text-center text-primary">Detalle del Cliente</h1>
    <div class="card shadow-sm p-4">
        <h3 class="text-secondary">{{ cliente.nombre }}</h3>
        <p><strong>Teléfono:</strong> {{ cliente.telefono }}</p>
        <p><strong>Email:</strong> {{ cliente.correo }}</p>
        <p><strong>Saldo Actual:</strong> {{ cliente.saldo_actual }}</p>
    </div>

    <!-- Formulario para seleccionar mes y año -->
    <form method="get" class="my-4">
        <div class="row">
            <div class="col-md-4">
                <label for="mes">Mes</label>
                <select name="mes" id="mes" class="form-select">
                    {% for numero, nombre in meses_espanol.items %}
                        <option value="{{ numero }}" {% if numero == mes_seleccionado %}selected{% endif %}>
                            {{ nombre }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <label for="anho">Año</label>
                <input type="number" name="anho" id="anho" class="form-control" value="{{ anho_actual }}">
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">Filtrar</button>
            </div>
        </div>
    </form>

    <!-- Tabla de Transacciones -->
    <h3 class="mt-5">Transacciones de {{ nombre_mes }} {{ anho_actual }}</h3>
    <div class="table-responsive">
        <table class="table table-striped table-bordered text-center">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Fecha</th>
                    <th>Monto</th>
                    <th>Concepto</th>
                </tr>
            </thead>
            <tbody>
                {% for transaccion in transacciones %}
                    <tr>
                        <td>{{ transaccion.id_transaccion }}</td>
                        <td>{{ transaccion.fecha }}</td>
                        <td class="{% if transaccion.monto_recibido %}text-success{% else %}text-danger{% endif %}">
                            {% if transaccion.monto_recibido %}
                                +{{ transaccion.monto_recibido }}
                            {% else %}
                                -{{ transaccion.monto_debitado }}
                            {% endif %}
                        </td>
                        <td>{{ transaccion.concepto }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="4" class="text-center">No se registran transacciones en {{ nombre_mes }} de {{ anho_actual }}.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="mt-3 d-flex justify-content-end">
            <a href="{% url 'editar_transaccion' cliente.id_cliente %}" class="btn btn-warning me-2">
                <i class="bi bi-pencil-circle"></i> Editar Transacción
            </a>
            <a href="{% url 'crear_transaccion' cliente.id_cliente %}" class="btn btn-primary">
                <i class="bi bi-plus-square"></i> Agregar Transacción
            </a>
        </div>
    </div>

    <!-- Tabla de Cobros -->
    <h3 class="mt-5">Cobros de {{ nombre_mes }} {{ anho_actual }}</h3>
    <div class="table-responsive">
        <table class="table table-striped table-bordered text-center">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Fecha</th>
                    <th>Monto USD</th>
                    <th>Monto GS</th>
                    <th>Observaciones</th>
                </tr>
            </thead>
            <tbody>
                {% for cobro in cobros %}
                    <tr>
                        <td>{{ cobro.id_cobro }}</td>
                        <td>{{ cobro.fecha }}</td>
                        <td>{{ cobro.monto_usd }}</td>
                        <td>{{ cobro.monto_gs }}</td>
                        <td>{{ cobro.observaciones }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No se registran cobros en {{ nombre_mes }} de {{ anho_actual }}.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Tabla de Vehículos -->
    <h3 class="mt-5">Vehículos de {{ nombre_mes }} {{ anho_actual }}</h3>
    <div class="table-responsive">
        <table class="table table-striped table-bordered text-center">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Marca</th>
                    <th>Modelo</th>
                    <th>Año</th>
                </tr>
            </thead>
            <tbody>
                {% for vehiculo in vehiculos %}
                    <tr>
                        <td>{{ vehiculo.id_vehiculo }}</td>
                        <td>{{ vehiculo.marca }}</td>
                        <td>{{ vehiculo.modelo }}</td>
                        <td>{{ vehiculo.anho }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="4" class="text-center">No hay vehículos registrados en {{ nombre_mes }} de {{ anho_actual }}.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- Botones de Acción -->
    <div class="mt-3 d-flex justify-content-end">
        <a href="{% url 'editar_cliente' cliente.id_cliente %}" class="btn btn-warning me-2">
            <i class="bi bi-pencil-circle"></i> Editar Cliente
        </a>
        <form action="{% url 'eliminar_cliente' cliente.id_cliente %}" method="post" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger" onclick="return confirm('¿Estás seguro de eliminar este cliente?')">
                <i class="bi bi-trash"></i> Eliminar Cliente
            </button>
        </form>
    </div>
</div>
{% endblock %}