<?php
session_start();
if (!isset($_SESSION['idUsuarioLogado'])) {
  header("location: ./");
}
include_once("header-clean.php");
$idUsuarioLogado  = $_SESSION['idUsuarioLogado'];
?>
<div class="app-content content" style="background-color: #e9e9e7;">
  <div class="content-wrapper" style="padding: 15px;">
    <div class="content-body">
      <div class="row">
        <div class="col-12">
          <div class="card barra-titulo" style="height: 70px; border:2px dotted #289CD4">
            <div class="card-content">
              <div class="card-body" style='padding-left: 20px; padding-top: 20px;'>
                <div class="form-body">
                  <h4 class="form-section" style='font-size:16pt'>
                    <i class="icofont icofont-chart-bar-graph nova_fonte_blue" style='font-size:20pt'></i><b>&nbsp;Dashboard Informativo:</b>
                    <font style="font-size:15pt; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#289CD4">
                      <b>Acompanhamento de Solicitações e Agendamentos</b>
                    </font>
                  </h4>
                </div>
              </div>
            </div>
          </div>
          <div class="card barra-titulo" style="height: 430px; border:2px dotted #289CD4; margin-top:-20px">
            <div class="card-content">
              <div class="card-body" style='padding-left: 20px; padding-top: 20px;'>
                <h4 class="form-section success" style='border-bottom: dotted 1px #37BC9B; padding-bottom:10px;font-size:16pt'>
                  <i class="icofont icofont-info-square"></i> <b>Dados de hoje</b>
                </h4><br>
                <div class="row" style='margin-top:-20px'>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#289CD4 solid 1px">
                        <div class="card-body">
                          <div id="chartTotalSolicitacoesHoje" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalSolicitacoesHoje" style="font-size: 20px; font-weight: bold;background: #289CD4;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#8B0000 solid 1px">
                        <div class="card-body">
                          <div id="chartAguardandoAgendamentoHoje" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalAguardandoAgendamentoHoje" style="font-size: 20px; font-weight: bold;background: #8B0000;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#4caf50 solid 1px">
                        <div class="card-body">
                          <div id="chartAgendadoFilaHoje" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalAgendadoFilaHoje" style="font-size: 20px; font-weight: bold;background: #4caf50;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#4caf50 solid 1px">
                        <div class="card-body">
                          <div id="chartAgendadoAvulsoHoje" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalAgendadoAvulsoHoje" style="font-size: 20px; font-weight: bold;background: #4caf50;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card barra-titulo" style="height: 750px; border:2px dotted #289CD4; margin-top:-20px">
            <div class="card-content">
              <div class="card-body" style='padding-left: 20px; padding-top: 20px;'>
                <h4 class="form-section success" style='border-bottom: dotted 1px #37BC9B; padding-bottom:10px;font-size:16pt'>
                  <i class="icofont icofont-info-square"></i> <b>Dados dos últimos 15 dias</b>
                </h4><br>
                <div class="row" style='margin-top:-20px'>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#289CD4 solid 1px">
                        <div class="card-body">
                          <div id="chartTotalSolicitacoes" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalSolicitacoes" style="font-size: 20px; font-weight: bold;background: #289CD4;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#8B0000 solid 1px">
                        <div class="card-body">
                          <div id="chartAguardandoAgendamento" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalAguardandoAgendamento" style="font-size: 20px; font-weight: bold;background: #8B0000;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#4caf50 solid 1px">
                        <div class="card-body">
                          <div id="chartAgendadoFila" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalAgendadoFila" style="font-size: 20px; font-weight: bold;background: #4caf50;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <div class="card-title text-center" style="border-radius: 4%; border:#4caf50 solid 1px">
                        <div class="card-body">
                          <div id="chartAgendadoAvulso" style="height: 250px;"></div>
                        </div>
                        <div>
                          <p id="totalAgendadoAvulso" style="font-size: 20px; font-weight: bold;background: #4caf50;padding:5px; color:#fff">...</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" style='margin-top:-10px;'>
                  <div class="col-md-12">
                    <div class="form-group" style='border-top: 1px dotted gray; padding-top:5pt'>
                      <div class="height-300">
                        <canvas id="agendamentos-entregues-cancelados"></canvas>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card barra-titulo" style="height: 385px; border:2px dotted #289CD4; margin-top:-20px">
            <div class="card-content">
              <div class="card-body" style='padding-left: 20px; padding-top: 20px;'>
                <h4 class="form-section success" style='border-bottom: dotted 1px #37BC9B; padding-bottom:10px;font-size:16pt'>
                  <i class="icofont icofont-info-square"></i> <b>Solicitações X Agendamentos (últimos 12 meses)</b>
                </h4><br>
                <div class="row" style='margin-top:-10px;'>
                  <div class="col-md-12">
                    <div class="form-group">
                      <div class="height-300">
                        <canvas id="solicitacoes-agendamentos"></canvas>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div><br>
        </div>
      </div>
    </div>
  </div>
</div>
<?php
include_once("footer.php"); // Rodapé padrão de todoas as páginas
?>

<script src="../app-assets/vendors/js/forms/extended/inputmask/jquery.inputmask.bundle.min.js"></script>
<script src="../app-assets/js/scripts/forms/extended/form-inputmask.min.js"></script>
<script src="../app-assets/vendors/js/tables/datatable/datatables.min.js"></script>
<script src="../app-assets/js/scripts/tables/datatables/datatable-basic.min.js"></script>
<script src="../app-assets/js/scripts/ui/jquery-ui/buttons-selects.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
  function renderChart(selector, value, color, isPercentage = true, title = '') {
    const options = {
      chart: {
        height: 280,
        type: 'radialBar',
      },
      series: [value],
      colors: [color],
      plotOptions: {
        radialBar: {
          startAngle: -135,
          endAngle: 135,
          hollow: {
            size: '70%',
          },
          dataLabels: {
            value: {
              fontSize: '22px',
              color: '#111',
              formatter: function(val) {
                return isPercentage ? `${val.toFixed(2)}%` : `${val}`;
              }
            },

            style: {
              fontSize: '16px',
              lineHeight: '24px',
              fontWeight: '600',
              fill: '#111111'
            }
          }
        }
      },
      labels: title.split('\n'),
      tooltip: {
        enabled: false
      }
    };

    const chart = new ApexCharts(document.querySelector(selector), options);
    chart.render();
  }

  async function fetchDados() {
    try {

      const capturarDados = await fetch('action/carregar_dadosdashboard.php');
      const resultadoRetorno = await capturarDados.json();

      // Hoje
      renderChart('#chartTotalSolicitacoesHoje', resultadoRetorno.dadosHoje.totalSolicitacoesHoje, '#03a9f4', false, 'SOLICITAÇÕES');
      document.getElementById('totalSolicitacoesHoje').textContent = `${resultadoRetorno.dadosHoje.totalSolicitacoesHoje}`;

      renderChart('#chartAguardandoAgendamentoHoje', (resultadoRetorno.dadosHoje.totalAguardando / resultadoRetorno.dadosHoje.totalSolicitacoesHoje) * 100, '#8B0000', true, 'AGUARDANDO');
      document.getElementById('totalAguardandoAgendamentoHoje').textContent = `${resultadoRetorno.dadosHoje.totalAguardando} / ${resultadoRetorno.dadosHoje.totalSolicitacoesHoje}`;

      renderChart('#chartAgendadoFilaHoje', (resultadoRetorno.dadosHoje.totalAgendadoFilaHoje / resultadoRetorno.dadosHoje.totalSolicitacoesHoje) * 100, '#4caf50', true, 'AGENDADAS FILA');
      document.getElementById('totalAgendadoFilaHoje').textContent = `${resultadoRetorno.dadosHoje.totalAgendadoFilaHoje} / ${resultadoRetorno.dadosHoje.totalSolicitacoesHoje}`;

      renderChart('#chartAgendadoAvulsoHoje', (resultadoRetorno.dadosHoje.totalAgendadoAvulsoHoje / resultadoRetorno.dadosHoje.totalSolicitacoesHoje) * 100, '#4caf50', true, 'AGENDADAS AVULSO');
      document.getElementById('totalAgendadoAvulsoHoje').textContent = `${resultadoRetorno.dadosHoje.totalAgendadoAvulsoHoje} / ${resultadoRetorno.dadosHoje.totalSolicitacoesHoje}`;

      // 15 dias
      renderChart('#chartTotalSolicitacoes', resultadoRetorno.dadosCard15Dias.total_solicitacoes, '#03a9f4', false, 'SOLICITAÇÕES');
      renderChart('#chartAguardandoAgendamento', (resultadoRetorno.dadosCard15Dias.total_aguardando_agendamento / resultadoRetorno.dadosCard15Dias.total_solicitacoes) * 100, '#8B0000', true, 'AGUARDANDO');
      renderChart('#chartAgendadoFila', (resultadoRetorno.dadosCard15Dias.total_agendadoFila / resultadoRetorno.dadosCard15Dias.total_solicitacoes) * 100, '#4caf50', true, 'AGENDADAS FILA');
      renderChart('#chartAgendadoAvulso', (resultadoRetorno.dadosCard15Dias.total_agendadoAvulso / resultadoRetorno.dadosCard15Dias.total_solicitacoes) * 100, '#4caf50', true, 'AGENDADAS AVULSO');

      document.getElementById('totalSolicitacoes').textContent = `${resultadoRetorno.dadosCard15Dias.total_solicitacoes}`;

      document.getElementById('totalAguardandoAgendamento').textContent = `${resultadoRetorno.dadosCard15Dias.total_aguardando_agendamento} / ${resultadoRetorno.dadosCard15Dias.total_solicitacoes}`;

      document.getElementById('totalAgendadoFila').textContent = `${resultadoRetorno.dadosCard15Dias.total_agendadoFila} / ${resultadoRetorno.dadosCard15Dias.total_solicitacoes}`;
      document.getElementById('totalAgendadoAvulso').textContent = `${resultadoRetorno.dadosCard15Dias.total_agendadoAvulso} / ${resultadoRetorno.dadosCard15Dias.total_solicitacoes}`;
    } catch (error) {
      console.error('Erro ao buscar dados:', error);
    }
  }

  function gerarGrafico(opcaoGrafico) {

    switch (opcaoGrafico) {
      case "linha-15dias-entregues-cancelados":

        $.ajax({
          url: 'action/carregar_dadosdashboard',
          type: 'post',
          dataType: 'html',
          data: {
            'seletorDadosGrafico': opcaoGrafico
          }
        }).done(function(resultadoRetornoGrafico) {

          var arrayDiaSemana = [];
          var arrayEntregues = [];
          var arrayCancelados = [];

          const dadosRetornados = JSON.parse(resultadoRetornoGrafico);
          const contarRegistros = dadosRetornados['dadosEntregeCancelado'].length;

          for (indexGrafico = 0; indexGrafico < contarRegistros - 1; indexGrafico++) {
            if ((contarRegistros - indexGrafico) <= 16) {
              arrayDiaSemana.push(dadosRetornados['dadosEntregeCancelado'][indexGrafico]['diaSemanaEntrega']);
              arrayEntregues.push(dadosRetornados['dadosEntregeCancelado'][indexGrafico]['totalRegistroEntrega']);
              arrayCancelados.push(dadosRetornados['dadosEntregeCancelado'][indexGrafico]['totalRegistroCancelado']);
            }
          }

          /* MONTAGEM DO GRÁFICO */
          var graficoContratos = $("#agendamentos-entregues-cancelados");
          new Chart(graficoContratos, {
            type: "line",
            options: {
              responsive: !0,
              maintainAspectRatio: !1,
              legend: {
                position: "bottom",
                labels: {
                  fontSize: 14,
                  fontColor: 'black',
                  family: 'Arial',
                  style: 'bold',
                }
              },
              hover: {
                mode: "label"
              },
              title: {
                fontSize: 16,
                display: true,
                fontColor: 'green',
                text: "Agendamentos Entregues X Agendamentos Cancelados (últimas 15 dias)",
              },
              scales: {
                xAxes: [{
                  ticks: {
                    fontSize: 12,
                    fontColor: 'black',
                    family: 'Arial',
                    style: 'bold',
                  }
                }],
                yAxes: [{
                  display: true,
                }]
              }
            },
            data: {
              labels: arrayDiaSemana,
              datasets: [{
                  label: "Agendamentos Entregues",
                  data: arrayEntregues,
                  backgroundColor: 'rgba(40, 156, 212,.08)',
                  borderDash: [0, 0],
                  borderColor: "#006DB3",
                  pointBorderColor: "#006DB3",
                  pointBackgroundColor: "#3d45e0",
                  pointBorderWidth: 2,
                  pointHoverBorderWidth: 2,
                  pointRadius: 4,
                },
                {
                  label: "Agendamentos Cancelados",
                  data: arrayCancelados,
                  backgroundColor: "transparent",
                  borderDash: [2, 2],
                  borderColor: "#aa0404",
                  pointBorderColor: "#aa0404",
                  pointBackgroundColor: "#f31c1c",
                  pointBorderWidth: 2,
                  pointHoverBorderWidth: 2,
                  pointRadius: 4
                },
              ],
            },
          });
          /***********************/
        });
        break;

      case "linha-12meses-solicitacoes-agendamentos":
        $.ajax({
          url: 'action/carregar_dadosdashboard',
          type: 'post',
          dataType: 'html',
          data: {
            'seletorDadosGrafico': opcaoGrafico
          }
        }).done(function(resultadoRetornoGrafico) {

          var arrayMesAno = [];
          var arraySolicitacoes = [];
          var arrayAgendamentos = [];

          const dadosRetornados = JSON.parse(resultadoRetornoGrafico);
          const contarRegistros = dadosRetornados['dadosSolicitacaoAgendamento'].length;

          for (indexGrafico = 0; indexGrafico < contarRegistros-1; indexGrafico++) {
            arrayMesAno.push(dadosRetornados['dadosSolicitacaoAgendamento'][indexGrafico]['mesSolicitacao']);
            arraySolicitacoes.push(dadosRetornados['dadosSolicitacaoAgendamento'][indexGrafico]['totalRegistroSolicitacoes']);
            arrayAgendamentos.push(dadosRetornados['dadosSolicitacaoAgendamento'][indexGrafico]['totalRegistroAgendamentos']);
          }

          /* MONTAGEM DO GRÁFICO */
          var graficoContratos = $("#solicitacoes-agendamentos");
          new Chart(graficoContratos, {
            type: "bar",
            options: {
              responsive: !0,
              maintainAspectRatio: !1,              
              legend: {
                position: "bottom",
                labels: {
                  fontSize: 14,
                  fontColor: 'black',
                  family: 'Arial',
                  style: 'bold',
                }
              },              
              hover: {
                mode: "label"
              },
              title: {
                display: false,
              },
              scales: {
                xAxes: [{
                  ticks: {
                    fontSize: 12,
                    fontColor: 'black',
                    family: 'Arial',
                    style: 'bold',
                  }
                }],
                yAxes: [{
                  display: true,
                }]
              },
              
            },
            data: {
              labels: arrayMesAno,
              datasets: [{
                  label: "Solicitaçõs Registradas",
                  data: arraySolicitacoes,
                  backgroundColor: '#27B4F4'
                },
                {
                  label: "Agendamentos Registrados",
                  data: arrayAgendamentos,
                  backgroundColor: '#4CAF50'
                },
              ],
            },
          });
          /***********************/
        });
        break;
    }

  }
  fetchDados();
  gerarGrafico("linha-15dias-entregues-cancelados");
  gerarGrafico("linha-12meses-solicitacoes-agendamentos");
</script>