@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
@include('admin.informes._styles')

<div class="inf-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Listado de ventas</span> diarias</h4>
      <p class="hint">Revise los ingresos de venta del período. Puede editar o eliminar un registro.</p>
    </div>
  </div>

  <div class="inf-filters">
    <div class="row g-3 align-items-end">
      <div class="col-6 col-md-3 col-xl-2">
        <label class="form-label" for="inicio">Desde</label>
        <input type="date" class="form-control" id="inicio" name="inicio" value="{{ date('Y-m-d'); }}" />
      </div>
      <div class="col-6 col-md-3 col-xl-2">
        <label class="form-label" for="fin">Hasta</label>
        <input type="date" class="form-control" id="fin" name="fin" value="{{ date('Y-m-d'); }}" />
      </div>
      <div class="col-12 col-md-6 col-xl-8">
        <div class="inf-actions">
          <button type="button" class="btn btn-primary" onClick="generar();">
            <i class="bx bx-search"></i> Generar
          </button>
          <button type="button" class="btn btn-outline-secondary" onclick="$('.tabla_excel').trigger('click');">
            <i class="bx bx-spreadsheet"></i> Excel
          </button>
          <button type="button" class="btn btn-outline-secondary" onclick="$('.tabla_pdf').trigger('click');">
            <i class="bx bx-file"></i> PDF
          </button>
        </div>
      </div>
    </div>
  </div>

  <div id="bloque_vacio" class="inf-empty">
    <i class="bx bx-list-ul"></i>
    Seleccione el rango y pulse <strong>Generar</strong> para ver el listado.
  </div>

  <div class="inf-result d-none" id="bloque_tabla">
    <div class="inf-result-head">
      <h6>Resultados del período</h6>
    </div>
    <div class="inf-result-body">
      <div class="table-responsive" style="min-height:420px;">
        <table id="tabla" class="table table-bordered table-sm table-striped table-hover w-100">
          <thead class="table-light">
            <tr>
              <th class="text-center">ID</th>
              <th class="text-center">Fecha ingreso</th>
              <th class="text-center">Turno</th>
              <th class="text-center">Vts boleta</th>
              <th class="text-center">Acciones</th>
            </tr>
          </thead>
          <tfoot class="table-light">
            <tr>
              <td class="text-center fw-bold" colspan="3">Totales</td>
              <td class="text-center">$0</td>
              <td class="text-center"></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

  function generar(){
    let inicio = $('#inicio').val();
    let fin = $('#fin').val();

    if(inicio == ''){
      Swal.fire({ position: 'top-end', icon: 'error', title: "¡ Debe ingresar un inicio !", showConfirmButton: false, timer: 1500 });
      return;
    }
    if(fin == ''){
      Swal.fire({ position: 'top-end', icon: 'error', title: "¡ Debe ingresar un fin !", showConfirmButton: false, timer: 1500 });
      return;
    }

    if ($.fn.DataTable.isDataTable('#tabla')) {
      $('#tabla').DataTable().destroy();
    }

    $('#bloque_vacio').addClass('d-none');
    $('#bloque_tabla').removeClass('d-none');

    $('#tabla').DataTable({
      processing: true,
      serverSide: true,
      lengthMenu: [[1000],["1000"]],
      dom: "Brt<'row mx-0 mt-2'<'col-sm-6'l><'col-sm-6'p>>",
      ajax: {
        url: "{{ URL::to('/') }}/listado_ventas/",
        data : { 'fecha_inicio' : inicio, 'fecha_fin' : fin }
      },
      columns: [
        { data: 'id', 'class':'text-center' },
        { data: 'fecha_ingreso', 'class':'text-center' },
        { data: 'turno_venta', 'class':'text-center' },
        { data: 'total_precio_total', 'class':'text-center' },
        {
          "data": null,
          "width": "120px",
          "className" : "text-center",
          "render": function(data, type, row) {
            return `
              <div class="dropdown">
                <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Acciones
                </button>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="javascript:editar(${row.id});"><i class="bx bx-edit-alt me-1"></i> Editar</a>
                  <a class="dropdown-item" href="javascript:eliminar(${row.id});"><i class="bx bx-trash me-1"></i> Eliminar</a>
                </div>
              </div>`;
          },
          "orderable": false
        },
      ],
      buttons: [
        {
          extend: 'excel',
          footer: true,
          exportOptions: {
            format: {
              body: function (data, row, column) {
                if (column == 3) data = data.toString().replace(/\./g, ',');
                return data;
              }
            },
            columns: 'th:not(:last-child)'
          },
          className: 'tabla_excel d-none',
        },
        {
          extend: 'pdfHtml5',
          orientation: 'landscape',
          pageSize: 'LEGAL',
          footer: true,
          exportOptions: { columns: 'th:not(:last-child)' },
          customize: function(doc) { doc.content[1].margin = [ 100, 0, 100, 0 ]; },
          className: 'tabla_pdf d-none',
        }
      ],
      language: {
        sProcessing: "Procesando...",
        sLengthMenu: "Mostrar _MENU_ registros",
        sZeroRecords: "No se encontraron resultados",
        sEmptyTable: "Ningún dato disponible en esta tabla",
        sInfo: "Mostrando _START_ a _END_ de _TOTAL_ registros",
        sInfoEmpty: "Mostrando 0 a 0 de 0 registros",
        sInfoFiltered: "(filtrado de _MAX_ registros)",
        sSearch: "Buscar:",
        sLoadingRecords: "Cargando...",
        oPaginate: { sFirst: "Primero", sLast: "Último", sNext: "Siguiente", sPrevious: "Anterior" }
      },
      footerCallback: function () {
        var api = this.api();
        var opciones = {minimumFractionDigits: 0, maximumFractionDigits: 2};
        var intVal = function (i) {
          return typeof i === 'string' ? i.replace(/[\s+$,.NOTA DE CREDITO]/g,'')*1 : (typeof i === 'number' ? i : 0);
        };
        var total = api.column(3, { page: 'current'}).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
        $(api.column(3).footer()).html(total.toLocaleString('es-ES', opciones));
      },
      initComplete: function(){ $('.dt-buttons').hide(); }
    });
  }

  function editar(id){ window.location.href = '{{ URL::to('/') }}/ingreso_venta/'+id; }

  eliminar = function(id){
    Swal.fire({
      title: '¿Está seguro que desea eliminar el ingreso de venta?',
      text: "No podrá revertir esto.",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí, eliminarlo',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed){
        $.ajax({
          url: '{{ URL::to('/') }}/ingreso_venta/eliminar',
          type: 'POST',
          data: {id},
          success: function(){
            Swal.fire('Eliminado', 'El registro ha sido eliminado.', 'success');
            generar();
          },
          error: function(xhr) { console.error(xhr.responseText); }
        });
      }
    });
  };
</script>
@endsection