{% extends "base.html" %}

{% block content %}
<div class="c-form">
    <div class="container pt-4 pb-2">
        <div class="row mb-2">
            <div class="col-6 pr-1">
                <a class="c-btn c-btn-primary c-btn-block mb-2" href="{{ url_for('routes.menu_manager', user_id=user_id) }}">Volver</a>
            </div>
            <div class="col-6 pl-1">
                <a class="c-btn c-btn-primary c-btn-block mb-2" href="/">Salir</a>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-12">
                <h2 class="c-cajas__item__title c-headings c-headings__h2 text-center mb-2">Cartera {{ wallet_data['main_admin']['name'] }}</h2>
                <div class="c-card c-card--summary mb-3 p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><b>Créditos</b></span>
                        <span><b>#</b> {{ wallet_data['Total Sellers with Active Loans'] }}</span>
                        <span><b>$</b> {{ wallet_data['Total Cash Value']|moneda_cl }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cajas del administrador principal 
        <div class="row mb-2">
            <div class="col-12">
                <h4 class="c-headings c-headings__h4 mb-2">Cajas del Administrador Principal</h4>
                {% if wallet_data['main_admin']['boxes'] %}
                    {% for box in wallet_data['main_admin']['boxes'] %}
                    <div class="c-card mb-3 p-3" style="padding: 1rem;">
                        <div class="card-header mb-2 p-0"><b>Vendedor:</b> {{ box['First Name'] }} {{ box['Last Name'] }}</div>
                        <div class="c-card__box-mannager pt-2 d-flex flex-column flex-md-row justify-content-between" style="gap: 1rem;">
                            <div class="c-card__internal flex-fill">
                                <h5>Debido Cobrar</h5>
                                <p>Cantidad: {{ box['Number of Active Loans'] }}</p>
                                <p>Valor: ${{ box['Total Amount of Pending Installments'] }}</p>
                                <p>Porcentaje: 0 %</p>
                            </div>
                            <div class="c-card__internal flex-fill">
                                <h5>Cartera</h5>
                                <p>Vencido: ${{ box['Total Amount of Overdue Loans'] }}</p>
                                <p>Valor: ${{ box['Total Amount of Pending Installments'] }}</p>
                                <p>Saldo: ${{ box['Total Amount of Pending Installments'] }}</p>
                            </div>
                            <div class="d-flex align-items-center flex-fill justify-content-end">
                                <a href="/wallet-detail/{{ box['Employee ID'] }}" class="c-btn c-btn-primary btn-pagar w-100">Ir al Detalle</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="alert alert-info">No hay cajas para el administrador principal.</div>
                {% endif %}
            </div>
        </div> -->

        <!-- Accordion para el Administrador Principal -->
        <div class="row mb-2">
            <div class="col-12">
                <h4 class="c-headings c-headings__h4 mb-2">Cajas</h4>
                <div id="accordionMainAdmin">
                    <div class="card c-accordion mb-2">
                        <div class="card-header" id="headingMainAdmin">
                            <h5 class="mb-0 d-flex align-items-center">
                                <button class="btn btn-link w-100 text-left" type="button" data-toggle="collapse" data-target="#collapseMainAdmin" aria-expanded="true" aria-controls="collapseMainAdmin">
                                    <span><b>Administrador:</b> {{ wallet_data['main_admin']['name'] }}</span>
                                    <span class="float-right ml-2"><i class="fa fa-medal c-icon-medal"></i></span>
                                </button>
                            </h5>
                        </div>
                        <div id="collapseMainAdmin" class="collapse show" aria-labelledby="headingMainAdmin" data-parent="#accordionMainAdmin">
                            <div class="card-body">
                                {% if wallet_data['main_admin']['boxes'] %}
                                    {% for box in wallet_data['main_admin']['boxes'] %}
                                    <div class="c-card c-card--content mb-3 p-3">
                                        <div class="card-header mb-2 p-0"><b>Vendedor:</b> {{ box['First Name'] }} {{ box['Last Name'] }}</div>
                                        <div class="row">
                                            <div class="c-card__internal col-12 col-md-6 mb-2 mb-md-0">
                                                <h5>Debido Cobrar</h5>
                                                <p>Cantidad: {{ box['Number of Active Loans'] }}</p>
                                                <p>Valor: {{ box['Total Amount of Pending Installments']|moneda_cl }}</p>
                                                <p>Porcentaje: 0 %</p>
                                            </div>
                                            <div class="c-card__internal col-12 col-md-6">
                                                <h5>Cartera</h5>
                                                <p>Vencido: {{ box['Total Amount of Overdue Loans']|moneda_cl }}</p>
                                                <p>Valor: {{ box['Total Amount of Pending Installments']|moneda_cl }}</p>
                                                <p>Saldo: {{ box['Total Amount of Pending Installments']|moneda_cl }}</p>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-12">
                                                <a href="/wallet-detail/{{ box['Employee ID'] }}" class="c-btn c-btn-primary btn-pagar w-100">Ir al Detalle</a>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% else %}
                                    <div class="alert alert-info">No hay cajas para el administrador principal.</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Subadministradores y sus cajas en accordions -->
        <div class="row mb-2">
            <div class="col-12">
                <h4 class="c-headings c-headings__h4 mb-2">Cajas por Administrador</h4>
                <div id="accordionSubadmins">
                    {% for subadmin in wallet_data['subadmins'] %}
                    <div class="card c-accordion mb-2">
                        <div class="card-header" id="heading{{ loop.index }}">
                            <h5 class="mb-0 d-flex align-items-center">
                                <button class="btn btn-link w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
                                    <span><b>Administrador:</b> {{ subadmin['name'] }}</span>
                                    <span class="float-right ml-2"><i class="fa fa-medal c-icon-medal"></i></span>
                                </button>
                            </h5>
                        </div>
                        <div id="collapse{{ loop.index }}" class="collapse" aria-labelledby="heading{{ loop.index }}" data-parent="#accordionSubadmins">
                            <div class="card-body">
                                {% if subadmin['boxes'] %}
                                    {% for box in subadmin['boxes'] %}
                                    <div class="c-card c-card--content mb-3 p-3">
                                        <div class="card-header mb-2 p-0"><b>Vendedor:</b> {{ box['First Name'] }} {{ box['Last Name'] }}</div>
                                        <div class="row">
                                            <div class="c-card__internal col-12 col-md-6 mb-2 mb-md-0">
                                                <h5>Debido Cobrar</h5>
                                                <p>Cantidad: {{ box['Number of Active Loans'] }}</p>
                                                <p>Valor: {{ box['Total Amount of Pending Installments']|moneda_cl }}</p>
                                                <p>Porcentaje: 0 %</p>
                                            </div>
                                            <div class="c-card__internal col-12 col-md-6">
                                                <h5>Cartera</h5>
                                                <p>Vencido: {{ box['Total Amount of Overdue Loans']|moneda_cl }}</p>
                                                <p>Valor: {{ box['Total Amount of Pending Installments']|moneda_cl }}</p>
                                                <p>Saldo: {{ box['Total Amount of Pending Installments']|moneda_cl }}</p>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-12">
                                                <a href="/wallet-detail/{{ box['Employee ID'] }}" class="c-btn c-btn-primary btn-pagar w-100">Ir al Detalle</a>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% else %}
                                    <div class="alert alert-info">No hay cajas para este subadministrador.</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Asegura que solo un accordion esté abierto a la vez en mobile
$(document).ready(function(){
    // Para el accordion de subadministradores
    $('#accordionSubadmins .collapse').on('show.bs.collapse', function () {
        $('#accordionSubadmins .collapse').not(this).collapse('hide');
    });
    
    // Para el accordion del administrador principal
    $('#accordionMainAdmin .collapse').on('show.bs.collapse', function () {
        $('#accordionMainAdmin .collapse').not(this).collapse('hide');
    });
});
</script>
{% endblock %}