{% extends "base.html" %}

{% block content %}
<div class="c-form">
    <div class="container pt-5">
        <!-- Botones de navegación -->
        <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>

        <!-- Barra de búsqueda -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="c-form__container">
                    <div class="c-form__group">
                        <label class="c-form__label">Buscar Vendedor</label>
                        <input type="text" name="search" id="searcher" class="c-form__input"
                               placeholder="Ingrese el nombre del vendedor">
                    </div>
                </div>
            </div>
        </div>

        <!-- Caja del Coordinador - Accordion -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="accordion" id="coordinatorAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="coordinatorHeader">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#coordinatorCollapse" aria-expanded="true" 
                                    aria-controls="coordinatorCollapse">
                                <div class="d-flex align-items-center w-100">
                                    <i class="bi bi-person-badge me-2 fs-5 text-primary"></i>
                                    <div class="flex-grow-1">
                                        <h5 class="mb-0">Caja del Coordinador</h5>
                                        <small class="text-muted">{{ coordinator_name }}</small>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <a type="button" class="c-btn c-btn-primary c-btn-sm" data-toggle="modal" data-target="#exampleModal">
                                            <i class="bi bi-gear me-1"></i>Gestión
                                        </a>
                                        <a type="button" class="c-btn c-btn-secondary c-btn-sm" href="/box">
                                            <i class="bi bi-arrow-clockwise"></i>
                                        </a>
                                    </div>
                                </div>
                            </button>
                        </h2>
                        <div id="coordinatorCollapse" class="accordion-collapse collapse show" 
                             aria-labelledby="coordinatorHeader" data-bs-parent="#coordinatorAccordion">
                            <div class="accordion-body">
                                <!-- Métricas del coordinador en diseño compacto -->
                                <div class="row g-2">
                                    <div class="col-lg-3 col-md-6 col-sm-6">
                                        <div class="metric-item">
                                            <div class="metric-label">Valor Caja</div>
                                            <div class="metric-value">
                                                <i class="bi bi-wallet2 me-1"></i>
                                                $ {{ '{:,.0f}'.format(coordinator_box['maximum_cash']) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-sm-6">
                                        <div class="metric-item">
                                            <div class="metric-label">Valor Caja Final</div>
                                            <div class="metric-value">
                                                <i class="bi bi-calculator me-1"></i>
                                                $ {{ '{:,.0f}'.format(coordinator_box['final_box_value']) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-4 col-sm-6">
                                        <div class="metric-item">
                                            <div class="metric-label">Total Gastos</div>
                                            <div class="metric-value text-danger">
                                                <i class="bi bi-arrow-down-circle me-1"></i>
                                                $ {{ '{:,.0f}'.format(total_expenses) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-4 col-sm-6">
                                        <div class="metric-item">
                                            <div class="metric-label">Total Ingresos</div>
                                            <div class="metric-value text-success">
                                                <i class="bi bi-arrow-up-circle me-1"></i>
                                                $ {{ '{:,.0f}'.format(coordinator_box['total_inbound_amount']) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-4 col-sm-6">
                                        <div class="metric-item">
                                            <div class="metric-label">Total Retiros</div>
                                            <div class="metric-value text-warning">
                                                <i class="bi bi-arrow-down-circle me-1"></i>
                                                $ {{ '{:,.0f}'.format(coordinator_box['total_outbound_amount']) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botón para abrir todas las cajas -->
        {% if all_boxes_closed %}
        <div class="row mb-4">
            <div class="col-12">
                <div class="c-form__container">
                    <form action="/all-open-boxes" method="POST">
                        <button class="c-btn c-btn-success" type="submit">
                            <i class="bi bi-unlock me-2"></i>Abrir todas las cajas
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Lista de vendedores - Tarjetas con funcionalidad de expandir/contraer -->
        <div class="row">
            <div class="col-12">
                {% for salesman in salesmen_stats %}
                <div class="salesman-card mb-3 search-salesman-card" data-status="{{ salesman['status_box'] }}">
                    <!-- Header de la tarjeta con botón de expandir/contraer -->
                    <div class="salesman-card-header">
                        <div class="d-flex align-items-center w-100">
                            <a href="{{ '/box-detail-admin/' + salesman['employee_id']|string if salesman['role_employee'] != 'VENDEDOR' else '/box' }}" 
                               class="text-decoration-none me-2">
                                <i class="bi {{ '' if salesman['role_employee'] == 'VENDEDOR' else 'bi-person-badge-fill' }} fs-5 text-primary" style="color: #0A1C47;"></i>
                            </a>
                            <div class="flex-grow-1">
                                <h5 class="mb-0">{{ salesman['salesman_name'] }}</h5>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="js-box-status badge fs-6">{{ salesman['status_box'] }}</span>
                                    <small class="text-muted">
                                        <i class="bi bi-wallet2 me-1"></i>
                                        $ {{ '{:,.0f}'.format(salesman['box_value']) }}
                                    </small>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <button class="c-btn c-btn-outline-primary c-btn-sm" 
                                        type="button" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#salesmanCollapse{{ loop.index }}" 
                                        aria-expanded="false" 
                                        aria-controls="salesmanCollapse{{ loop.index }}">
                                    <i class="bi bi-chevron-down"></i>
                                </button>
                                <a href="./box-detail?employee_id={{ salesman['employee_id'] }}"
                                   class="c-btn c-btn-primary c-btn-sm">
                                    <i class="bi bi-inboxes me-1"></i>Detalle
                                </a>
                                <form action="/add-employee-record/{{ salesman['employee_id'] }}" method="POST" 
                                      class="js-cerrar-caja d-inline" data-employee-id="{{ salesman['employee_id'] }}" 
                                      data-status-box="{{ salesman['status_box'] }}">
                                    <button type="submit" class="js-eye-button c-btn c-btn-secondary c-btn-sm">
                                        <i class="js-eye-icon bi {{ 'bi-eye' if salesman['employee_status'] == True else 'bi-eye-slash' }}"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Contenido expandible de la tarjeta -->
                    <div class="collapse" id="salesmanCollapse{{ loop.index }}">
                        <div class="salesman-card-body">
                            <!-- Información financiera compacta en dos columnas -->
                            <div class="row g-2">
                                <!-- Columna izquierda -->
                                <div class="col-md-6">
                                    <div class="row g-1">
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Valor Inicial</div>
                                                <div class="metric-value">
                                                    <i class="bi bi-currency-dollar me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['initial_box_value']) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Valor Final</div>
                                                <div class="metric-value">
                                                    <i class="bi bi-calculator me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['box_value']) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Debido Cobrar</div>
                                                <div class="metric-value text-warning">
                                                    <i class="bi bi-clock-history me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['total_pending_installments_amount']+salesman['total_pending_installments_loan_close_amount']) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Recaudo</div>
                                                <div class="metric-value text-success">
                                                    <i class="bi bi-cash-coin me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['total_collections_today']) }} ({{ salesman['total_clients_collected'] }})
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Columna derecha -->
                                <div class="col-md-6">
                                    <div class="row g-1">
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Ventas</div>
                                                <div class="metric-value text-primary">
                                                    <i class="bi bi-bag-plus me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['total_new_clients_loan_amount']) }}
                                                </div>
                                                <div class="metric-sub">{{ '{:,.0f}'.format(salesman['new_clients']) }} clientes</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Renovaciones</div>
                                                <div class="metric-value text-info">
                                                    <i class="bi bi-arrow-repeat me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['total_renewal_loans_amount']) }}
                                                </div>
                                                <div class="metric-sub">{{ salesman['total_renewal_loans'] }} renovaciones</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Gastos</div>
                                                <div class="metric-value text-danger">
                                                    <i class="bi bi-arrow-down-circle me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['daily_expenses_amount']) }}
                                                </div>
                                                <div class="metric-sub">{{ salesman['daily_expenses'] }} gastos</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Retiros</div>
                                                <div class="metric-value text-warning">
                                                    <i class="bi bi-arrow-down-circle me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['daily_withdrawals']) }}
                                                </div>
                                                <div class="metric-sub">{{ salesman['daily_withdrawals_count'] }} retiros</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Ingresos</div>
                                                <div class="metric-value text-success">
                                                    <i class="bi bi-arrow-up-circle me-1"></i>
                                                    $ {{ '{:,.0f}'.format(salesman['daily_collections_made']) }}
                                                </div>
                                                <div class="metric-sub">{{ '{:,.0f}'.format(salesman['daily_collection_count']) }} ingresos</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-item">
                                                <div class="metric-label">Clientes Activos</div>
                                                <div class="metric-value text-primary">
                                                    <i class="bi bi-people me-1"></i>
                                                    {{ salesman['total_number_of_customers'] }}
                                                </div>
                                                <div class="metric-sub">NO PAGO: {{ salesman['customers_in_arrears_for_the_day'] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Modal de Gestión -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalLabel">Gestión de Caja</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="mb-4">Gastos Coordinador:</h5>
                <div class="table-responsive">
                    <table class="c-table">
                        <thead>
                            <tr>
                                <th class="c-table__box text-center">Descripción</th>
                                <th class="c-table__box text-center">Valor</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for expense in expense_details %}
                            <tr>
                                <td class="c-table__box">{{ expense['description'] }}</td>
                                <td class="c-table__box">$ {{ '{:,.0f}'.format(expense['amount']) }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <h5 class="mb-4 mt-4">Ingresos:</h5>
                <div class="table-responsive">
                    <table class="c-table">
                        <thead>
                            <tr>
                                <th class="c-table__box text-center">Vendedor</th>
                                <th class="c-table__box text-center">Descripción</th>
                                <th class="c-table__box text-center">Valor</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for salesman in salesmen_stats %}
                            <tr>
                                {% for withdrawal in salesman['withdrawal_details'] %}
                                <td class="c-table__box">{{ withdrawal['username'] }}</td>
                                <td class="c-table__box">{{ withdrawal['description'] }}</td>
                                <td class="c-table__box">$ {{ '{:,.0f}'.format(withdrawal['amount']) }}</td>
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <h5 class="mb-4 mt-4">Retiros:</h5>
                <div class="table-responsive">
                    <table class="c-table">
                        <thead>
                            <tr>
                                <th class="c-table__box text-center">Vendedor</th>
                                <th class="c-table__box text-center">Descripción</th>
                                <th class="c-table__box text-center">Valor</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for salesman in salesmen_stats %}
                            <tr>
                                {% for income in salesman['income_details'] %}
                                <td class="c-table__box">{{ income['username'] }}</td>
                                <td class="c-table__box">{{ income['description'] }}</td>
                                <td class="c-table__box">$ {{ '{:,.0f}'.format(income['amount']) }}</td>
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Overlay -->
<div class="modal-overlay"></div>

<style>
    .modal-overlay {
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: none;
    }
    
    .transaction-field {
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    .amount-value {
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .c-btn-group {
        display: flex;
        gap: 0.5rem;
    }
    
     /* Estilos para métricas compactas */
     .metric-item {
         background: #f8f9fa;
         border: 1px solid #e9ecef;
         border-radius: 6px;
         padding: 8px;
         text-align: center;
         height: 100%;
         transition: all 0.2s ease;
     }
     
     .metric-item:hover {
         background: #e9ecef;
         transform: translateY(-1px);
     }
     
     .metric-label {
         font-size: 0.65rem;
         font-weight: 600;
         color: #6c757d;
         text-transform: uppercase;
         letter-spacing: 0.3px;
         margin-bottom: 2px;
         line-height: 1.2;
     }
     
     .metric-value {
         font-size: 0.8rem;
         font-weight: 700;
         color: #212529;
         margin-bottom: 1px;
         display: flex;
         align-items: center;
         justify-content: center;
         line-height: 1.1;
     }
     
     .metric-sub {
         font-size: 0.6rem;
         color: #6c757d;
         font-weight: 500;
         line-height: 1.1;
     }
     
     /* Responsive adjustments */
     @media (max-width: 768px) {
         .metric-item {
             padding: 6px;
         }
         
         .metric-label {
             font-size: 0.6rem;
         }
         
         .metric-value {
             font-size: 0.75rem;
         }
         
         .metric-sub {
             font-size: 0.55rem;
         }
     }
    
    /* Asegurar que los botones no se rompan */
    .c-btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    
    .gap-2 {
        gap: 0.5rem !important;
    }
    
    .request-item {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .request-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
    
    /* Estilos para tarjetas de vendedores personalizados */
    .salesman-card {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        overflow: hidden;
        transition: all 0.3s ease;
        background-color: #ffffff;
    }
    
    .salesman-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .salesman-card-header {
        background-color: #f8f9fa;
        border: none;
        padding: 1rem;
        font-weight: 500;
        transition: all 0.3s ease;
        border-bottom: 1px solid #e9ecef;
    }
    
    .salesman-card-body {
        padding: 1rem;
        background-color: #ffffff;
    }
    
    /* Estilos para el header del vendedor */
    .salesman-card-header .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Estilos para el botón de toggle */
    .c-btn[data-bs-toggle="collapse"] {
        transition: all 0.3s ease;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .c-btn[data-bs-toggle="collapse"]:hover {
        transform: scale(1.1);
    }
    
    .c-btn[data-bs-toggle="collapse"] i {
        transition: transform 0.3s ease;
        font-size: 0.9rem;
    }
    
    .c-btn[data-bs-toggle="collapse"][aria-expanded="true"] i {
        transform: rotate(180deg);
    }
    
    /* Animación suave para el contenido expandible */
    .collapse {
        transition: all 0.3s ease;
    }
    
    .salesman-card-body {
        border-top: 1px solid #e9ecef;
        background-color: #f8f9fa;
    }
    
    /* Responsive para tarjetas de vendedores */
    @media (max-width: 768px) {
        .salesman-card-header {
            padding: 0.75rem;
        }
        
        .salesman-card-header .d-flex {
            flex-direction: column;
            align-items: flex-start !important;
        }
        
        .salesman-card-header .d-flex .gap-2 {
            margin-top: 0.5rem;
            width: 100%;
            justify-content: flex-end;
        }
        
        .c-btn[data-bs-toggle="collapse"] {
            width: 28px;
            height: 28px;
        }
    }
</style>

<script>
// Función para inicializar las tarjetas de vendedores de la página box
function initializeBoxCards() {
    // Aplicar estilos a los estados de caja
    const salesmen = document.querySelectorAll('.js-box-status');
    salesmen.forEach(salesman => {
        const statusBox = salesman.textContent.trim();
        if (statusBox === 'Activa') {
            salesman.classList.add('bg-success');
        } else if (statusBox === 'Cerrada') {
            salesman.classList.add('bg-secondary');
        } else {
            salesman.classList.add('bg-warning', 'text-dark');
        }
    });

    // Aplicar estilos a los botones de operar caja
    const forms = document.querySelectorAll('.js-cerrar-caja');
    forms.forEach(form => {
        const statusBox = form.getAttribute('data-status-box');
        const button = form.querySelector('.js-eye-button');
        if (statusBox === 'Activa') {
            button.classList.add('c-btn--primary');
        } else if (statusBox === 'Cerrada') {
            button.classList.add('c-btn--completed', 'text-dark');
        } else {
            button.classList.add('c-btn--closed');
        }
    });

    // Funcionalidad de búsqueda para tarjetas de vendedores
    const searchInput = document.getElementById('searcher');
    const salesmanCards = document.querySelectorAll('.search-salesman-card');
    
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            
            salesmanCards.forEach(card => {
                const salesmanName = card.querySelector('h5').textContent.toLowerCase();
                
                if (salesmanName.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    }

    // Aplicar estilos especiales a las cajas activas
    const activeCards = document.querySelectorAll('.search-salesman-card[data-status="Activa"]');
    activeCards.forEach(card => {
        card.classList.add('border-success');
        // Mantener el fondo blanco y texto negro para el encabezado
    });

    // Bootstrap maneja automáticamente la funcionalidad de expandir/contraer
    // No se necesita JavaScript personalizado
}

// Solo ejecutar si estamos en la página box
if (window.location.pathname.includes('/box') || window.location.pathname === '/') {
    document.addEventListener('DOMContentLoaded', initializeBoxCards);
}
</script>

{% endblock %}