<?php

if(!isset($_SESSION['idCaja']) && !isset($_SESSION['primer_inicio'])){ ?>
 <script>
    $(document).ready(function(){
      $('#modalApertura').modal('toggle')
    });
  </script>
 <?php
  $_SESSION['primer_inicio'] = 1;
}
?>
<div class="content-wrapper">

  <section class="content-header">

    <h1>

      Tablero

      <small>Panel de Control</small>

    </h1>

    <ol class="breadcrumb">

      <li><a href="inicio"><i class="fa fa-dashboard"></i> Inicio</a></li>

      <li class="active">Tablero</li>

    </ol>

  </section>

  <section class="content">

    <div class="row">

      <?php

        if($_SESSION["perfil"] == "Administrador" || $_SESSION["perfil"] == "Secretaria"){

          include "inicio/cajas-superiores.php";

        }

      ?>


    </div>

     <div class="row">

        <div class="col-lg-12">

          <?php

            if($_SESSION["perfil"] =="Administrador"){

              //include "reportes/grafico-acta-nacimientos.php";

            }

          ?>

        </div>

        <div class="col-lg-6">



        </div>

         <div class="col-lg-6">



        </div>

         <div class="col-lg-12">

          <?php

          if($_SESSION["perfil"] =="Invitado" || $_SESSION["perfil"] =="Registrador"){

             echo '<div class="box box-success">

             <div class="box-header">

             <h1>Bienvenid@ ' .$_SESSION["nombre"].'</h1>

             </div>

             </div>';

          }

          ?>

         </div>

         <div class="row">
           <div class="col-12 col-md-6">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">
                    <i class="fa fa-pie-chart"></i> 
                    Distribución de Contratos por Estado
                  </h3>
                </div>
                <div class="box-body">
                  <canvas id="myChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="box box-success">
                <div class="box-header with-border">
                  <h3 class="box-title">
                    <i class="fa fa-bar-chart"></i> 
                    Estado de Pagos por Zona
                  </h3>
                  <div class="box-tools">
                    <small class="text-muted">Pagado, Pendiente, Atrasado, Baja</small>
                  </div>
                </div>
                <div class="box-body">
                  <canvas id="myChartBar" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                </div>
              </div>
            </div>
         </div>

         <!-- Gráfico de cobros diarios por zona -->
         <div class="row" style="margin-top: 20px;">
           <div class="col-12 col-md-6">
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">
                    <i class="fa fa-line-chart"></i> 
                    Cobros Diarios por Zona (Últimos 15 Días)
                  </h3>
                  <div class="box-tools">
                    <small class="text-muted">Seguimiento de cobros realizados por zona geográfica</small>
                  </div>
                </div>
                <div class="box-body">
                  <canvas id="myChartTendencia" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                </div>
              </div>
            </div>
            
            <!-- Nuevo gráfico de análisis financiero mensual -->
            <div class="col-12 col-md-6">
              <div class="box box-warning">
                <div class="box-header with-border">
                  <h3 class="box-title">
                    <i class="fa fa-money"></i> 
                    Análisis Financiero del Mes
                  </h3>
                  <div class="box-tools">
                    <small class="text-muted">Proyección de recuperación y estado de pagos</small>
                  </div>
                </div>
                <div class="box-body">
                  <canvas id="myChartAnalisisMensual" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                </div>
              </div>
            </div>
         </div>

         <!-- Nuevos gráficos adicionales -->
         <div class="row" style="margin-top: 20px;">
           <!-- Gráfico de cobros anuales por mes -->
           <div class="col-12 col-md-6">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">
                    <i class="fa fa-calendar"></i> 
                    Cobros del Año por Mes
                  </h3>
                  <div class="box-tools">
                    <small class="text-muted">Evolución mensual de cobros realizados</small>
                  </div>
                </div>
                <div class="box-body">
                  <canvas id="myChartCobrosAnuales" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                </div>
              </div>
            </div>
            
            <!-- Gráfico de recaudación por método de pago -->
            <div class="col-12 col-md-6">
              <div class="box box-success">
                <div class="box-header with-border">
                  <h3 class="box-title">
                    <i class="fa fa-credit-card"></i> 
                    Recaudación por Método de Pago
                  </h3>
                  <div class="box-tools">
                    <small class="text-muted">Distribución por método de pago y banco</small>
                  </div>
                </div>
                <div class="box-body">
                  <canvas id="myChartMetodoPago" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                </div>
              </div>
            </div>
         </div>

     </div>

  </section>

</div>
