<?= $this->session->flashdata('mensaje') ?>
<div class="row">
  <div class="col-md-12">
    <div class="card shadow-sm border-0 mb-4">
      <div class="card-header bg-navy text-white d-flex justify-content-between align-items-center">
        <h3 class="card-title mb-0"><i class="fas fa-filter mr-2"></i>Filtro por fecha</h3>
      </div>
      <div class="card-body p-4">
        <form id="form_01" autocomplete="off">
          <div class="row align-items-end">
            <div class="col-md-5">
              <div class="form-group mb-0">
                <label class="small font-weight-bold text-muted text-uppercase mb-1">Rango de Fechas</label>
                <div class="input-group">
                  <input type="date" class="form-control" id="fechainicio" name="fechainicio" value="<?= date('Y-m-d') ?>">
                  <div class="input-group-prepend input-group-append">
                    <span class="input-group-text bg-light"><i class="fas fa-arrows-alt-h"></i></span>
                  </div>
                  <input type="date" class="form-control" id="fechafinal" name="fechafinal" value="<?= date('Y-m-d') ?>">
                </div>
              </div>
            </div>
            <div class="col-md-5">
              <div class="form-group mb-0">
                <label class="small font-weight-bold text-muted text-uppercase mb-1">Producto</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text bg-light"><i class="fas fa-box"></i></span>
                  </div>
                  <input type="hidden" name="producto" id="producto">
                  <input type="text" class="form-control" name="productos" id="productos" placeholder="Escriba el nombre del producto...">
                </div>
              </div>
            </div>
            <div class="col-md-2 text-right">
              <div class="btn-group shadow-sm">
                <button type="button" onclick="verxFecha()" class="btn btn-warning" title="GENERAR REPORTE">
                  <i class="fa fa-sync-alt"></i>
                </button>
                <button type="button" onclick="imprimirnotaingresodetalle()" class="btn btn-danger" title="IMPRIMIR">
                  <i class="fa fa-file-pdf"></i>
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-12">
    <div class="card shadow-sm border-0">
      <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
        <h3 class="card-title text-navy font-weight-bold mb-0">
          <i class="fas fa-exchange-alt mr-2"></i>Movimientos de Kardex
        </h3>
      </div>
      <div class="card-body p-0">
        <div id="div_grafico" class="p-0">
           <div class="text-center py-5 text-muted">
              <i class="fas fa-search fa-3x mb-3 opacity-25"></i>
              <p class="mb-0">Seleccione un producto y rango de fechas para ver los movimientos.</p>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal ticket -->
<div class="modal fade" id="ticket" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="width:50%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div id="printSection" class="modal-body" id="modal-body"></div>
    </div>
  </div>
</div>
<!-- /.Modal -->

<script type="text/javascript">
  $(document).ready(function() {
    // Fix for jQuery UI zIndex error
    if (typeof $.fn.zIndex !== 'function') {
      $.fn.zIndex = function(val) {
        if (val !== undefined) return this.css('zIndex', val);
        var elem = this[0], value, parent;
        while (elem && elem !== document) {
          value = $(elem).css("zIndex");
          if (value !== "auto" && value !== "0") return parseInt(value, 10);
          elem = elem.parentNode || elem;
        }
        return 0;
      };
    }

    jQuery(".opcion").select2({
      width: '100%'
    });
    
    $("#productos").autocomplete({
      source: "<?= $this->url ?>/autocompletar",
      minLength: 2,
      select: function(event, ui) {
        $("#producto").val(ui.item.producto);
      }
    });
  });
  
  function verxFecha() {
    if (!$('#producto').val()) {
        Lobibox.notify('warning', {
          size: 'mini',
          position: 'top right',
          msg: 'Por favor, seleccione un producto del buscador.'
        });
        $('#productos').focus();
        return;
    }

    $.ajax({
      url: '<?= $this->url ?>/kardexFecha',
      data: {
        'producto': $('#producto').val(),
        'fechainicio': $('#fechainicio').val(),
        'fechafinal': $('#fechafinal').val()
      },
      type: 'post',
      beforeSend: function() {
        $("#div_grafico").html('<br><h3>Cargando datos...</h3>');
      },
      success: function(data) {
        $("#div_grafico").html(data);
      }
    });
  };

  function imprimirnotaingresodetalle() {
    $.ajax({
      url: "<?= $this->url ?>/imprimirnotaingresopdf/<?= $this->empresa ?>/" + $('#fechainicio').val() + "/" + $('#fechafinal').val(),
      type: "POST",
      success: function(data) {
        $('#printSection').html(data);
        $('#ticket').modal('show');
        $('.modal-title').text('IMPRIMIR');
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: 'Error al obtener datos de ajax.'
        });
      }
    });
  };
</script>