{% extends "base.html" %} {% block content %}
<div class="c-narrow">
  <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_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>
    <div class="row">
      <div class="col-12 mt-4 mb-2">
        <input type="text" name="search" id="searcher" class="form-control"
          style="border-radius: 6px 0 0 6px ;" placeholder="Buscar Vendedor">
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="c-cajas__item">
          <div class="c-cajas__item__header mb-4">
            <h2 class="c-cajas__item__title c-headings c-headings__h4">
              Caja del Coordinador
            </h2>
            <h4 class="c-cajas__item__title c-headings c-headings__h2">
              {{ coordinator_name }}
            </h4>
          </div>
          <ul class="c-card__box-mannager">
            <li class="c-card__internal">
              Valor Caja: $ {{ '{:,.0f}'.format(coordinator_box['maximum_cash'])
              }}
            </li>
            <li class="c-card__internal">
              Valor Caja Final: $ {{ '{:,.0f}'.format(coordinator_box['final_box_value']) }}
            </li>
            <li class="c-card__internal">
              Total Gastos: $ {{ '{:,.0f}'.format(total_expenses) }}
            </li>
            <li class="c-card__internal">
              Total de Ingresos: $ {{
              '{:,.0f}'.format(coordinator_box['total_inbound_amount']) }}
            </li>
            <li class="c-card__internal">
              Total de Retiros: $ {{
              '{:,.0f}'.format(coordinator_box['total_outbound_amount']) }}
            </li>
          </ul>
          <div class="c-btn-flex">
            <a type="button" class="c-btn c-btn-primary" data-toggle="modal"
              data-target="#exampleModal">
              Gestión Caja
            </a>
            <a type="button" class="c-btn c-btn-primary" href="/box" style="width: 20%; margin-left: 5px;">
              <i class="bi bi-arrow-clockwise"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Logica para calculo de ocultar, abrir rutas -->

    <div class="row">
      <div class="col">
        {% if all_boxes_closed %}
        <form action="/all-open-boxes" method="POST">
          <button class="c-btn c-btn-primary mb-3" type="submit">Abrir todas las
            cajas</button>
        </form>
        {% endif %}
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <ul class="c-cajas">
          {% for salesman in salesmen_stats %}
          <li class="c-cajas__item search-salesman-card">
            <div
              style="display: flex; justify-content: center; flex-wrap: wrap;"
              class="mb-4">
              <h4 class="c-cajas__item__title c-headings__h4 mb-4">
                <a href="{{ '/box-detail-admin/' + salesman['employee_id']|string if salesman['role_employee'] != 'VENDEDOR' else '/box' }}" style="text-decoration: none;">
                  <i
                    class="bi {{ '' if salesman['role_employee'] == 'VENDEDOR' else 'bi-person-badge-fill' }}"
                    style="margin-right: 10px; font-size: 26px;"></i>
                </a>
               
                {{ salesman['salesman_name'] }}
              </h4>
              <div class style="display: flex; flex-wrap: wrap">
                <a
                  href="./box-detail?employee_id={{ salesman['employee_id'] }}"
                  class="c-btn c-btn-summit js-btn-ocultar"
                  style="width: 45%;"
                  type="submit">
                  <i class="bi bi-inboxes " title="Ver detalle"></i>
                </a>
                <form style="width: 45%; margin-left: 15px"
                  action="/add-employee-record/{{ salesman['employee_id'] }}"
                  method="POST" class="js-cerrar-caja"
                  data-employee-id="{{ salesman['employee_id'] }}"
                  data-status-box="{{ salesman['status_box'] }}">
                  <button type="submit"
                    class="js-eye-button c-btn c-btn-primary">
                    <i
                      class="js-eye-icon  bi {{ 'bi-eye' if salesman['employee_status'] == True else 'bi-eye-slash' }}"
                      title="operar caja"></i>
                  </button>
                </form>
              </div>
            </div>
            <ul class="c-card__box-mannager">
              <li class="c-card__internal">
                Valor Inicial: $ {{
                '{:,.0f}'.format(salesman['initial_box_value'])
                }}
              </li>
              <li class="c-card__internal">
                Valor Final: $ {{
                '{:,.0f}'.format(salesman['box_value']) }}
              </li>
              <li class="c-card__internal">
                Debido Cobrar: $ {{
                '{:,.0f}'.format(salesman['total_pending_installments_amount']+salesman['total_pending_installments_loan_close_amount'])
                }}
              </li>
              <li class="c-card__internal">
                Recaudo: $ {{
                '{:,.0f}'.format(salesman['total_collections_today']) }} ({{
                salesman['total_clients_collected'] }})
              </li>
              <li class="c-card__internal">
                Ventas: $ {{
                '{:,.0f}'.format(salesman['total_new_clients_loan_amount']) }}
              </li>
              <li class="c-card__internal">
                {{ '{:,.0f}'.format(salesman['new_clients']) }}
              </li>
              <li class="c-card__internal">
                Renovaciones: $ {{
                '{:,.0f}'.format(salesman['total_renewal_loans_amount']) }}
              </li>
              <li class="c-card__internal">
                {{ salesman['total_renewal_loans'] }}
              </li>
              <li class="c-card__internal">
                Gastos: $ {{ '{:,.0f}'.format(salesman['daily_expenses_amount'])
                }}
              </li>
              <li class="c-card__internal">
                {{ salesman['daily_expenses'] }}
              </li>
              <li class="c-card__internal">
                Retiros: $ {{ '{:,.0f}'.format(salesman['daily_withdrawals']) }}
              </li>
              <li class="c-card__internal">
                {{ salesman['daily_withdrawals_count'] }}
              </li>
              <li class="c-card__internal">
                Ingresos: $ {{
                '{:,.0f}'.format(salesman['daily_collections_made']) }}
              </li>
              <li class="c-card__internal">
                {{ '{:,.0f}'.format(salesman['daily_collection_count']) }}
              </li>
              <li class="c-card__internal">
                Clientes Activos: {{
                salesman['total_number_of_customers'] }}
              </li>
              <li class="c-card__internal">
                NO PAGO: {{ salesman['customers_in_arrears_for_the_day'] }}
              </li>
              <li class="c-card__internal js-box-status">
                {{ salesman['status_box'] }}
              </li>
            </ul>
            <hr class="mt-4">
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">Gestión</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>
        <table class="c-table" style="color: black">
          <thead>
            <tr>
              <th class="c-table__box text-center">Descripcion</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>
        <h5 class="mb-4 mt-4">Ingresos:</h5>
        <table class="c-table" style="color: black">
          <thead>
            <tr>
              <th class="c-table__box text-center">Venedor</th>
              <th class="c-table__box text-center">Descripcion</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>
        <h5 class="mb-4 mt-4">Retiros:</h5>
        <table class="c-table" style="color: black">
          <thead>
            <tr>
              <th class="c-table__box">Venedor</th>
              <th class="c-table__box">Descripcion</th>
              <th class="c-table__box">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>

<!-- Overlay -->
<div class="modal-overlay"></div>
<style>
    .modal-overlay {
        background-color: rgba(0, 0, 0, 0.7);
        /* Color negro con transparencia del 70% */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: none;
    }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const salesmen = document.querySelectorAll('.js-box-status');
    salesmen.forEach(salesman => {
      const statusBox = salesman.textContent.trim();
      if (statusBox === 'Activa') {
        salesman.classList.add('badge', 'bg-success');
      } else if (statusBox === 'Cerrada') {
        salesman.classList.add('badge', 'bg-secondary');
      } else {
        salesman.classList.add('badge', 'bg-warning', 'text-dark');
      }
    });
  
    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');
      }
    });
  });
</script>

{% endblock %}