<?php $empresa = $this->Controlador_model->get($this->empresa, 'empresa'); ?>

<div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <div class="info-box shadow-sm">
      <span class="info-box-icon bg-info"><i class="fas fa-users"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Clientes</span>
        <span class="info-box-number"><?= $CustomerNumber ?></span>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-12">
    <div class="info-box shadow-sm">
      <span class="info-box-icon bg-success"><i class="fas fa-archive"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Productos</span>
        <span class="info-box-number"><?= $ProductNumber ?> <small>(En <?= $CategoriesNumber ?> Categorías)</small></span>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-12">
    <div class="info-box shadow-sm">
      <span class="info-box-icon bg-warning text-white"><i class="fas fa-money-bill-wave"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Ventas HOY</span>
        <span class="info-box-number"><?= number_format($TodaySales, 2, '.', '') ?> <small>Soles</small></span>
      </div>
    </div>
  </div>
</div>

<div class="row mt-4">
  <div class="col-md-8">
    <div class="card card-outline card-info">
      <div class="card-header">
        <h3 class="card-title">Estadísticas mensuales de Ingresos / Egresos</h3>
      </div>
      <div class="card-body">
        <div class="chart">
          <canvas id="canvas" style="min-height: 250px; height: 330px; max-height: 330px; max-width: 100%;"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-outline card-danger">
      <div class="card-header">
        <h3 class="card-title">5 Productos TOP este mes</h3>
      </div>
      <div class="card-body">
        <div id="canvas-holder" class="text-center">
          <?= count($Top5product) >= 5 ? '<canvas id="chart-area2" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>' : '<h3 class="my-5">NO HAY PRODUCTOS</h3>'; ?>
        </div>
      </div>
    </div>
  </div>
</div>

<?php if (count($Top5product) >= 5) { ?>
  <div class="row mt-4">
    <div class="col-md-12">
      <div class="card card-outline card-warning">
        <div class="card-body p-3">
          <div class="row text-center">
            <div class="col-md-2">
              <h5 class="mb-0"><strong>TOP 5 Productos</strong></h5>
            </div>
            <?php 
            $colors = ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-primary'];
            for($i=0; $i<5; $i++) {
              $p = $this->Controlador_model->get($Top5product[$i]->producto, 'producto');
              echo '<div class="col-md-2"><span class="badge '.$colors[$i].' p-2 w-100">' . $p->nombre . '</span></div>';
            }
            ?>
          </div>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

<div class="row mt-4 mb-5">
  <div class="col-md-12">
    <div class="card card-outline card-secondary">
      <div class="card-header">
        <h3 class="card-title"><i class="fas fa-calendar-alt mr-2"></i> Resumen Anual: <?= $year; ?></h3>
        <div class="card-tools">
          <button class="btn btn-tool" type="button" onclick="getyearstats('next')"><i class="fas fa-chevron-left"></i></button>
          <button class="btn btn-tool" type="button" onclick="getyearstats('prev')"><i class="fas fa-chevron-right"></i></button>
        </div>
      </div>
      <div class="card-body table-responsive p-0">
        <table class="table table-bordered text-center mb-0">
          <tbody>
            <tr>
              <td><span class="text-success d-block"><b><?= $monthly->january ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->january ?></b> <small>Soles</small></span>Enero</td>
              <td><span class="text-success d-block"><b><?= $monthly->feburary ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->feburary ?></b> <small>Soles</small></span>Febrero</td>
              <td><span class="text-success d-block"><b><?= $monthly->march ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->march ?></b> <small>Soles</small></span>Marzo</td>
              <td><span class="text-success d-block"><b><?= $monthly->april ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->april ?></b> <small>Soles</small></span>Abril</td>
            </tr>
            <tr>
              <td><span class="text-success d-block"><b><?= $monthly->may ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->may ?></b> <small>Soles</small></span>Mayo</td>
              <td><span class="text-success d-block"><b><?= $monthly->june ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->june ?></b> <small>Soles</small></span>Junio</td>
              <td><span class="text-success d-block"><b><?= $monthly->july ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->july ?></b> <small>Soles</small></span>Julio</td>
              <td><span class="text-success d-block"><b><?= $monthly->august ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->august ?></b> <small>Soles</small></span>Agosto</td>
            </tr>
            <tr>
              <td><span class="text-success d-block"><b><?= $monthly->september ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->september ?></b> <small>Soles</small></span>Setiembre</td>
              <td><span class="text-success d-block"><b><?= $monthly->october ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->october ?></b> <small>Soles</small></span>Octubre</td>
              <td><span class="text-success d-block"><b><?= $monthly->november ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->november ?></b> <small>Soles</small></span>Noviembre</td>
              <td><span class="text-success d-block"><b><?= $monthly->december ?></b> <small>Soles</small></span><span class="text-danger d-block"><b><?= $monthlyExp->december ?></b> <small>Soles</small></span>Diciembre</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer py-2">
        <div class="float-right">
          <span class="badge badge-success mr-2">Ingresos</span>
          <span class="badge badge-danger">Gastos</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mt-4">
  <div class="col-md-12">
    <div class="card card-outline card-warning">
      <div class="card-header">
        <h3 class="card-title"><i class="fas fa-file-alt mr-2"></i> Reporte de <?= $this->titulo_controlador ?></h3>
      </div>
      <form action="" class="form-horizontal" method="POST" id="form_01" 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" required>
              <?php foreach ($empresas as $value) { ?>
                <option value="<?= $value->id ?>"><?= $value->ruc . ' | ' . $value->razonsocial ?></option>
              <?php } ?>
            </select>
          </div>
        </div>
        <div class="card-footer text-center">
          <button type="button" onclick="consolidar()" class="btn btn-warning" data-toggle="tooltip" title="CONSOLIDAR"><i class="fas fa-file-contract"></i> CONSOLIDAR</button>
          <button type="button" onclick="consolidarexcel()" class="btn btn-success" data-toggle="tooltip" title="EXCEL CONSOLIDADO"><i class="fas fa-file-excel"></i> EXCEL</button>
          <button type="button" onclick="vendido()" class="btn btn-warning" data-toggle="tooltip" title="VENDIDO"><i class="fas fa-shopping-cart"></i> VENDIDO</button>
          <button type="button" onclick="vendidoexcel()" class="btn btn-success" data-toggle="tooltip" title="EXCEL VENDIDO"><i class="fas fa-file-excel"></i> EXCEL</button>
          <button type="button" onclick="valorizado()" class="btn btn-warning" data-toggle="tooltip" title="VALORIZADO"><i class="fas fa-dollar-sign"></i> VALORIZADO</button>
          <button type="button" onclick="valorizadoexcel()" class="btn btn-success" data-toggle="tooltip" title="EXCEL VALORIZADO"><i class="fas fa-file-excel"></i> EXCEL</button>
          <button type="button" onclick="inventarioexcel()" class="btn btn-success" data-toggle="tooltip" title="INVENTARIO EXCEL"><i class="fas fa-boxes"></i> INVENTARIO</button>
          <button type="button" onclick="location.reload()" class="btn btn-secondary" data-toggle="tooltip" title="RECARGAR"><i class="fas fa-sync-alt"></i></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 text-dark">Lista de <?= $this->titulo_controlador ?></h3>
      </div>
      <div class="card-body table-responsive">
        <div id="div_grafico"></div>
      </div>
    </div>
  </div>
</div>