{% extends 'menu/menu.html' %}
{% load static %}

{% block title %}Control de Caja{% endblock %}

{% block body %}
<style>
  /* Contenedor General */
  .dashboard-container {
    margin-top: 2rem;
  }
  /* Panel de Resumen */
  .summary-card {
    background-color: #f8f9fa;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  .summary-card h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  .summary-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .summary-card li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
  }
  .summary-card li:last-child {
    border-bottom: none;
  }
  .summary-card li span {
    font-weight: bold;
  }
  /* Filtros */
  .filter-card {
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  /* Tabla */
  .table-card {
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1rem;
  }
  .table-card .card-header {
    background-color: #0d6efd;
    color: #fff;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .table-card .card-body {
    padding: 1rem;
  }
  table#tablaCaja {
    width: 100% !important;
    border-collapse: collapse;
  }
  table#tablaCaja thead {
    background-color: #0d6efd;
    color: #fff;
  }
  table#tablaCaja th,
  table#tablaCaja td {
    vertical-align: middle !important;
    padding: 0.75rem;
  }
  /* Alineación a la derecha para los montos */
  .text-end {
    text-align: right !important;
  }
</style>

<div class="container-fluid dashboard-container">
  <h2 class="text-center mb-4"><i class="fas fa-cash-register me-2"></i>Control de Caja</h2>
  <div class="row">
    <!-- Columna Izquierda: Resumen y Filtros -->
    <div class="col-md-4">
      <!-- Resumen de Ventas -->
      <div class="summary-card">
        <h4>Resumen de Ventas - <span id="nombreMes">Mes</span></h4>
        <ul class="list-group list-group-flush">
          <li class="d-flex justify-content-between">
            <span>Total Pedidos</span>
            <span id="totalPedidos">0</span>
          </li>
          <li class="d-flex justify-content-between">
            <span>Sub Total</span>
            <span id="totalSubTotal">0.00</span>
          </li>
          <li class="d-flex justify-content-between">
            <span>ISV</span>
            <span id="totalISV">0.00</span>
          </li>
          <li class="d-flex justify-content-between">
            <span>Total General</span>
            <span id="totalGeneral">0.00</span>
          </li>
          <li class="d-flex justify-content-between">
            <span>Promedio de Venta</span>
            <span id="promedioVenta">0.00</span>
          </li>
        </ul>
      </div>
      <!-- Filtros para Movimientos -->
      <div class="filter-card">
        <h4 class="mb-3">Filtrar Movimientos</h4>
        <div class="mb-3">
          <label for="fechaInicio" class="form-label">Fecha Inicio:</label>
          <input type="date" id="fechaInicio" class="form-control" autocomplete="off">
        </div>
        <div class="mb-3">
          <label for="fechaFin" class="form-label">Fecha Fin:</label>
          <input type="date" id="fechaFin" class="form-control" autocomplete="off">
        </div>
        <button id="filtrarMovimientos" class="btn btn-primary w-100">Filtrar</button>
      </div>
    </div>
    <!-- Columna Derecha: Tabla de Transacciones -->
    <div class="col-md-8">
      <div class="table-card">
        <div class="card-header">
          <h4 class="mb-0">Detalle de Transacciones</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="tablaCaja" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Tipo</th>
                  <th>Concepto</th>
                  <th class="text-end">Monto</th>
                  <th>Usuario</th>
                </tr>
              </thead>
              <tbody>
                <!-- Se cargarán los datos vía AJAX -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Configuración para notificaciones (SweetAlert2)
  var toastMixin = Swal.mixin({
    toast: true,
    icon: 'success',
    title: '',
    animation: false,
    position: 'top-right',
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: true,
    didOpen: (toast) => {
      toast.addEventListener('mouseenter', Swal.stopTimer);
      toast.addEventListener('mouseleave', Swal.resumeTimer);
    }
  });

  $(document).ready(function(){
    // Inicialización de DataTable para la tabla de caja
    var tablaCaja = $('#tablaCaja').DataTable({
      ajax: {
        url: "{% url 'control_list_movimientos_caja' %}",
        type: "POST",
        dataSrc: 'data',
        data: function(d){
          d.fecha_inicio = $('#fechaInicio').val();
          d.fecha_fin = $('#fechaFin').val();
          d.csrfmiddlewaretoken = "{{ csrf_token }}";
        }
      },
      dom: 'Bfrtip',
      buttons: [
        { extend: 'excel', text: '<i class="fas fa-file-excel"></i>', titleAttr: 'Exportar a Excel' },
        { extend: 'pdf', text: '<i class="fas fa-file-pdf"></i>', titleAttr: 'Exportar a PDF' },
        { extend: 'print', text: '<i class="fas fa-print"></i>', titleAttr: 'Imprimir' }
      ],
      columns: [
        { data: 'fecha' },
        { data: 'tipo' },
        { data: 'concepto' },
        { data: 'monto',
          render: function(data){ return parseFloat(data).toFixed(2); },
          className: 'text-end'
        },
        { data: 'usuario' }
      ]
    });

    // Función para actualizar el resumen utilizando la view 'dashboard_data'
    function actualizarResumen(){
      $.ajax({
        url: "{% url 'dashboard_data' %}",
        type: "POST",
        data: {
          fecha_inicio: $('#fechaInicio').val(),
          fecha_fin: $('#fechaFin').val(),
          csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function(response) {
          if(response.error) {
            alert("Error: " + response.error);
            return;
          }
          var resumen = response.resumen;
          $('#totalPedidos').text(parseFloat(resumen.TotalPedidos).toFixed(0));
          $('#totalSubTotal').text(parseFloat(resumen.TotalSubTotal).toFixed(2));
          $('#totalISV').text(parseFloat(resumen.TotalISV).toFixed(2));
          $('#totalGeneral').text(parseFloat(resumen.TotalGeneral).toFixed(2));
          var promedio = parseFloat(resumen.TotalPedidos) > 0 ?
                         (parseFloat(resumen.TotalGeneral) / parseFloat(resumen.TotalPedidos)) : 0;
          $('#promedioVenta').text(promedio.toFixed(2));
          
          // Depuración: Verificar el valor actual del input fechaInicio
          console.log("Fecha inicio:", $('#fechaInicio').val());
          
          // Actualizar el nombre del mes a partir de la fecha de inicio
          var fechaInicioVal = $('#fechaInicio').val();
          var dt = fechaInicioVal ? new Date(fechaInicioVal) : new Date();
          var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", 
                       "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
          $('#nombreMes').text(meses[dt.getMonth() + 1]);
          console.log("Mes mostrado:", meses[dt.getMonth()]);
        }
      });
    }

    // Filtrado de movimientos
    $('#filtrarMovimientos').click(function(){
      tablaCaja.ajax.reload();
      actualizarResumen();
    });

    // Establecer fechas por defecto al cargar la página (mes actual)
    (function setDefaultDates(){
      var today = new Date();
      // Si quieres forzar Abril para pruebas, descomenta la línea siguiente:
      // var today = new Date(2025, 3, 15); // 3 = Abril (en JS, meses inician en 0)
      var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
      var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      var format = function(date){
          var d = date.getDate().toString().padStart(2, '0');
          var m = (date.getMonth() + 1).toString().padStart(2, '0');
          return date.getFullYear() + '-' + m + '-' + d;
      };
      $('#fechaInicio').val(format(firstDay));
      $('#fechaFin').val(format(lastDay));
      console.log("Fecha Inicio default:", $('#fechaInicio').val());
      console.log("Fecha Fin default:", $('#fechaFin').val());
    })();

    // Inicializar resumen al cargar la página
    actualizarResumen();
  });
</script>
{% endblock %}