{% extends "base.html" %}

{% block content %}
<div class="container c-bg c-bg__gray-400 pt-5">
    <h2>Reporte de Préstamos</h2>
    
    <!-- Formulario para seleccionar fechas y vendedor -->
    <form id="reportForm" method="GET" action="/reports">
        <div class="row">
            <div class="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-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-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.id }}">{{ salesman.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <br>
        <button type="submit" class="btn btn-primary">Generar Reporte</button>
        <button type="button" id="downloadExcel" class="btn btn-success">Descargar Excel</button>
    </form>

    <br>
    
    <!-- Tabla de resultados -->
    {% if report_data %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Empleado</th>
                <th>Cliente</th>
                <th>Teléfono</th>
                <th>Dirección</th>
                <th>Fecha Préstamo</th>
                <th>Valor Préstamo</th>
                <th>Intereses</th>
                <th>Valor Cuota</th>
                <th>Número Cuota</th>
                <th>Fecha Cuota</th>
                <th>Fecha Pago Cuota</th>
                <th>Tipo Pago</th>
                <th>Valor Pago</th>
                <th>Valor Mora</th>
            </tr>
        </thead>
        <tbody>
            {% for item in report_data %}
            <tr>
                <td>{{ item.nombre_empleado }} {{ item.apellido_empleado }}</td>
                <td>{{ item.nombre_cliente }} {{ item.apellido_cliente }}</td>
                <td>{{ item.telefono }}</td>
                <td>{{ item.direccion }}</td>
                <td>{{ item.fecha_prestamo }}</td>
                <td>{{ item.valor_prestamo }}</td>
                <td>{{ item.intereses }}</td>
                <td>{{ item.valor_cuota }}</td>
                <td>{{ item.numero_cuota }}</td>
                <td>{{ item.fecha_cuota }}</td>
                <td>{{ item.fecha_pago_cuota }}</td>
                <td>{{ item.tipo_pago }}</td>
                <td>{{ item.valor_pago }}</td>
                <td>{{ item.valor_mora }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% 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;
        }
        
        let url = `/reports/download?start_date=${startDate}&end_date=${endDate}`;
        if (salesmanId) {
            url += `&salesman_id=${salesmanId}`;
        }
        
        window.location.href = url;
    });
</script>

{% endblock %}