{% extends "base.html" %}

{% block content %}
<div class="container c-bg c-bg__gray-400 pt-3">
    <div class="row">
        <div class="col">
          <a class="c-btn c-btn-primary c-btn-block mb-3"
            href="{{ url_for('routes.menu_manager', user_id=user_id) }}">Volver</a>
        </div>
        <div class="col">
          <a
            class="c-btn c-btn-primary c-btn-block mb-3"
            href="{{ url_for('routes.logout') }}">Salir</a>
        </div>
    </div>
    <h2 class="text-center">Reporte de Préstamos</h2>

    <!-- Formulario para seleccionar fechas y vendedor -->
    <form id="reportForm" method="GET" action="/reports">
        <div class="row g-2">
            <div class="col-12 col-md-4">
                <label for="start_date">Fecha de inicio:</label>
                <input type="date" id="start_date" name="start_date" class="form-control" required>
            </div>
            <div class="col-12 col-md-4">
                <label for="end_date">Fecha final:</label>
                <input type="date" id="end_date" name="end_date" class="form-control" required>
            </div>
            <div class="col-12 col-md-4">
                <label for="salesman_id">Vendedor:</label>
                <select id="salesman_id" name="salesman_id" class="form-control">
                    <option value="">Todos</option>
                    {% for salesman in salesmen %}
                        <option value="{{ salesman[0] }}">{{ salesman[1] }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="d-flex flex-column flex-md-row gap-2 mt-3">
            <button type="submit" class="btn btn-primary w-100">Generar Reporte</button>
            <button type="button" id="downloadExcel" class="btn btn-success w-100">Descargar Excel</button>
        </div>
    </form>

    <br>

    {% if report_data %}
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Ruta</th>
                    <th>Fecha</th>
                    <th>Gasto</th>
                    <th>Ingreso</th>
                    <th>Retiro</th>
                    <th>Ventas</th>
                    <th>Renovaciones</th>
                    <th># No pago</th>
                    <th>Recaudo</th>
                    <th>Debido Cobrar</th>
                    <th>Caja Inicial</th>
                    <th>Caja Final</th>
                </tr>
            </thead>
            <tbody>
                {% for item in report_data %}
                <tr>
                    <td>{{ item.ruta }}</td>
                    <td>{{ item.fecha }}</td>
                    <td>{{ item.gasto }}</td>
                    <td>{{ item.ingreso }}</td>
                    <td>{{ item.retiro }}</td>
                    <td>{{ item.ventas }}</td>
                    <td>{{ item.renovaciones }}</td>
                    <td>{{ item.no_pago }}</td>
                    <td>{{ item.recaudo }}</td>
                    <td>{{ item.debido_cobrar }}</td>
                    <td>{{ item.caja_inicial }}</td>
                    <td>{{ item.caja_final }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

<script>
document.getElementById("downloadExcel").addEventListener("click", function() {
    const startDate = document.getElementById("start_date").value;
    const endDate = document.getElementById("end_date").value;
    const salesmanId = document.getElementById("salesman_id").value;

    if (!startDate || !endDate) {
        alert("Por favor seleccione un rango de fechas.");
        return;
    }

    const params = new URLSearchParams({ start_date: startDate, end_date: endDate });
    if (salesmanId) params.append("salesman_id", salesmanId);

    window.location.href = `/reports/download?${params.toString()}`;
});
</script>

{% endblock %}