<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-chart-line 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="resumen()" class="btn btn-warning" data-toggle="tooltip" title="RESUMEN"><i class="fas fa-file-alt"></i> RESUMEN</button>
          <button type="button" onclick="contador()" class="btn btn-info" data-toggle="tooltip" title="CONTADOR"><i class="fas fa-list-ol"></i> CONTADOR</button>
          <button type="button" onclick="resumenexcel()" class="btn btn-success" data-toggle="tooltip" title="RESUMEN EXCEL"><i class="fas fa-file-excel"></i> RESUMEN EXCEL</button>
          <button type="button" onclick="detalle()" class="btn btn-warning" data-toggle="tooltip" title="DETALLE"><i class="fas fa-file-invoice"></i> DETALLE</button>
          <button type="button" onclick="detalleexcel()" class="btn btn-success" data-toggle="tooltip" title="DETALLE EXCEL"><i class="fas fa-file-excel"></i> DETALLE EXCEL</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>

<script type="text/javascript">
  function resumen() {
    $.ajax({
      url: '<?= $this->url ?>/resumen/' + $('#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 detalle() {
    $.ajax({
      url: '<?= $this->url ?>/detalle/' + $('#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 contador() {
    window.open('<?= $this->url ?>/contador/' + $('#finicio').val() + '/' + $('#factual').val() + '/' + $('#empresa').val());
  };

  function resumenexcel() {
    window.open('<?= $this->url ?>/resumenexcel/' + $('#finicio').val() + '/' + $('#factual').val() + '/' + $('#empresa').val());
  };

  function detalleexcel() {
    window.open('<?= $this->url ?>/detalleexcel/' + $('#finicio').val() + '/' + $('#factual').val() + '/' + $('#empresa').val());
  };
</script>