{% extends "base.html" %}

{% block content %}
<div class="c-form">
    <div class="container pt-5">
        <div class="row">
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.menu_salesman') }}">Menu</a>
            </div>
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="/">Salir</a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="c-morosos">
                    <p class="c-morosos__item">Número de morosos: <span id="totalMorosos">0</span></p>
                    <p class="c-morosos__item">Total mora: $<span id="totalMora">0</span></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 mt-4">
                <form method="GET" action="{{ url_for('routes.debtor') }}" style="display: flex; flex-direction: column;">
                    <div class="form-group">
                        <input type="text" class="form-control" id="search" name="search" placeholder="Nombre del empleado o cliente">
                    </div>
                    <button type="submit" class="btn btn-primary">Buscar</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 mt-4">
                <ul class="request-list" id="morosos-container">
                    {% for moroso in mora_debtors_details %}
                        <li class="request-item">
                            <p>Nombre del empleado: <span>{{ moroso.nombre_empleado }}</span></p>
                            <p>Nombre del cliente: <span>{{ moroso.nombre_cliente }}</span></p>
                            <p>Cuotas pagadas: <span>{{ moroso.cuotas_pagadas }}</span></p>
                            <p>Cuotas vencidas: <span>{{ moroso.cuotas_vencidas }}</span></p>
                            <p>Valor total: <span>${{ moroso.valor_total }}</span></p>
                            <p>Saldo pendiente: <span>${{ moroso.saldo_pendiente }}</span></p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}