<div class="row">
  <div class="col-md-12">
    <div class="card card-outline card-warning">
      <div class="card-header">
        <h3 class="card-title">
          <i class="fas fa-cash-register text-warning mr-2"></i> <?= $this->titulo_controlador ?> Específico
        </h3>
      </div>
      <!-- /.card-header -->
      <form action="" class="form-horizontal" method="POST" id="form_01" target="_blank" role="form">
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>Fecha Inicio <span class="text-danger">*</span></label>
                <input class="form-control" id="finicio" type="date" name="finicio" value="<?= date('Y-m-d') ?>">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Fecha Fin <span class="text-danger">*</span></label>
                <input class="form-control" id="factual" type="date" name="factual" value="<?= date('Y-m-d') ?>">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>Empresa <span class="text-danger">*</span></label>
            <select id="empresa" name="empresa" class="form-control">
              <?php foreach ($empresas as $value) { ?>
                <option value="<?= $value->id ?>"><?= $value->ruc . ' | ' . $value->razonsocial ?></option>
              <?php } ?>
            </select>
          </div>
        </div>
        <!-- /.card-body -->
        <div class="card-footer text-center">
          <button type="button" onclick="general()" class="btn btn-primary" data-toggle="tooltip" title="GENERAL"><i class="fas fa-file-alt"></i> GENERAL</button>
          <button type="button" onclick="generalpdf()" class="btn btn-info" data-toggle="tooltip" title="IMPRIMIR"><i class="fas fa-print"></i> IMPRIMIR</button>
          <button type="button" onclick="especifico()" class="btn btn-primary" data-toggle="tooltip" title="ESPECIFICA"><i class="fas fa-file-invoice-dollar"></i> ESPECÍFICA</button>
          <button type="button" onclick="especificopdf()" class="btn btn-info" data-toggle="tooltip" title="IMPRIMIR"><i class="fas fa-print"></i> IMPRIMIR</button>
          <button type="button" onclick="location.reload()" class="btn btn-secondary" data-toggle="tooltip" title="RECARGAR"><i class="fas fa-sync-alt"></i> RECARGAR</button>
        </div>
      </form>
    </div>
  </div>

  <div class="col-md-12">
    <div class="card card-outline card-warning">
      <div class="card-header">
        <h3 class="card-title">Lista de <?= $this->titulo_controlador ?></h3>
      </div>
      <div class="card-body table-responsive">
        <div id="div_grafico"></div>
      </div>
    </div>
  </div>
</div>

<!-- Modal ticket -->
<div class="modal fade" id="ticket" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title"></h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-body table-responsive" id="printSection"></div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Detalle Caja -->
<div class="modal fade" id="caja_form" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">DETALLE DE CAJA</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-body table-responsive" id="seccioncaja"></div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Ventas -->
<div class="modal fade" id="modal_ventas" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-warning text-white">
        <h5 class="modal-title">CONTROL DE STOCK EN CAJA</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body table-responsive">
        <table id="tableventas" class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>Producto</th>
              <th>Categoría</th>
              <th>Vendido</th>
              <th>Stock Final</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var tableventas;
  $(document).ready(function() {
    $('.restaurar').bind('click', function(e) {
      e.preventDefault();
      bootbox.confirm("¿Seguro desea Restaurar esta caja?", function(result) {
        if (result === true) {
          window.location = e.currentTarget;
        }
      });
    });
  });

  function general() {
    $.ajax({
      url: '<?= $this->url ?>/general/' + $('#finicio').val() + '/' + $('#factual').val() + '/' + $('#empresa').val(),
      type: 'POST',
      beforeSend: function() {
        $("#div_grafico").html('<br><div class="text-center"><h3><i class="fas fa-spinner fa-spin"></i> Cargando datos...</h3></div>');
      },
      success: function(data) {
        $("#div_grafico").html(data);
        $('#example1').dataTable({
          language: dtlanguage,
        });
      }
    });
  };

  function especifico() {
    $.ajax({
      url: '<?= $this->url ?>/especifico/' + $('#finicio').val() + '/' + $('#factual').val() + '/' + $('#empresa').val(),
      type: 'post',
      beforeSend: function() {
        $("#div_grafico").html('<br><div class="text-center"><h3><i class="fas fa-spinner fa-spin"></i> Cargando datos...</h3></div>');
      },
      success: function(data) {
        $("#div_grafico").html(data);
        $('#example1').dataTable({
          language: dtlanguage,
        });
      }
    });
  };

  function generalpdf() {
    $.ajax({
      url: "<?= $this->url ?>/generalpdf",
      data: {
        'finicio': $('#finicio').val(),
        'factual': $('#factual').val()
      },
      type: "POST",
      success: function(data) {
        $('#printSection').html(data);
        $('#ticket').modal('show');
        $('.modal-title').text('IMPRIMIR CAJA GENERAL');
      },
      error: function() {
        Lobibox.notify('error', { size: 'mini', position: 'top right', msg: 'Error al obtener datos' });
      }
    });
  };

  function especificopdf() {
    $.ajax({
      url: "<?= $this->url ?>/especificopdf",
      data: {
        'finicio': $('#finicio').val(),
        'factual': $('#factual').val()
      },
      type: "POST",
      success: function(data) {
        $('#printSection').html(data);
        $('#ticket').modal('show');
        $('.modal-title').text('IMPRIMIR CAJA ESPECÍFICO');
      },
      error: function() {
        Lobibox.notify('error', { size: 'mini', position: 'top right', msg: 'Error al obtener datos' });
      }
    });
  };
</script>