@extends('layouts/contentLayoutManagement')

@section('title', 'Dashboard Analytics')

@section('vendor-style')
  <!-- vendor css files -->
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
@endsection
@section('page-style')
  <!-- Page css files -->
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-invoice-list.css')) }}">
  @endsection

@section('content')
  <!--/ List DataTable -->
  <div class="row mb-3">
    <div class="col-md-6">
      <div id="requests_status" class="rounded-3"></div>
    </div>
    <div class="col-md-6">
      <div id="slas" class="rounded-3"></div>
    </div>  
  </div>
  
  
</section>
<!-- Dashboard Analytics end -->
@endsection

@section('vendor-script')
  <!-- vendor files -->
  <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
@endsection
@section('page-script')
  <!-- Page js files -->
  <script src="{{ asset(mix('js/scripts/pages/dashboard-analytics.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/pages/app-invoice-list.js')) }}"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  
<script>
  
    (function (H) {
      H.seriesTypes.pie.prototype.animate = function (init) {
          const series = this,
                chart = series.chart,
                points = series.points,
                { animation } = series.options,
                { startAngleRad } = series;
  
          function fanAnimate(point, startAngleRad) {
              const graphic = point.graphic,
                    args = point.shapeArgs;
  
              if (graphic && args) {
                  graphic
                      .attr({
                          start: startAngleRad,
                          end: startAngleRad,
                          opacity: 1
                      })
                      .animate({
                          start: args.start,
                          end: args.end
                      }, {
                          duration: animation.duration / points.length
                      }, function () {
                          if (points[point.index + 1]) {
                              fanAnimate(points[point.index + 1], args.end);
                          }
                          if (point.index === series.points.length - 1) {
                              series.dataLabelsGroup.animate({
                                  opacity: 1
                              }, void 0, function () {
                                  points.forEach(point => {
                                      point.opacity = 1;
                                  });
                                  series.update({
                                      enableMouseTracking: true
                                  }, false);
                                  chart.update({
                                      plotOptions: {
                                          pie: {
                                              innerSize: '40%',
                                              borderRadius: 8
                                          }
                                      }
                                  });
                              });
                          }
                      });
              }
          }
  
          if (init) {
              points.forEach(point => {
                  point.opacity = 0;
              });
          } else {
              fanAnimate(points[0], startAngleRad);
          }
      };
  }(Highcharts));
  
  // Grafico pizza
  function createPieChart(containerId, titleText, seriesData) {
      Highcharts.chart(containerId, {
          chart: {
              type: 'pie'
          },
          title: {
              text: titleText,
              align: 'left'
          },
          subtitle: {
              text: '',
              align: 'left'
          },
          tooltip: {
              pointFormat: '<b>{point.percentage:.1f}%</b>'
          },
          accessibility: {
              point: {
                  valueSuffix: '%'
              }
          },
          plotOptions: {
              pie: {
                  allowPointSelect: false,
                  borderWidth: 2,
                  cursor: 'pointer',
                  dataLabels: {
                      enabled: true,
                      format: '<br> {point.percentage:.1f}%',
                      distance: -20, // Distância do centro da fatia
                      style: {
                          color: 'white', // Cor do texto
                          textOutline: 'none', // Sem contorno de texto
                          fontWeight: 'bold' // Negrito
                      }
                  },
                  showInLegend: true
              }
          },
          series: [{
              enableMouseTracking: true,
              animation: {
                  duration: 2000
              },
              colorByPoint: true,
              data: seriesData
          }],
          credits: {
              enabled: false
          }
      });
  }
  
  function createLineChart(containerId, titleText, seriesData, color) { 
    Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: titleText
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                'Jan', 'Feb', 'Mar', 'Abr', 'Mai', 'Jun',
                'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'
            ]
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return 'R$ ' + this.value.toFixed(2);
                }
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,
                    format: 'R$ {y:.2f}'
                },
                enableMouseTracking: false
            }
        },
        tooltip: {
            pointFormat: 'R$ {point.y:.2f}'
        },
        series: [{
            name: '',
            data: seriesData,
            color: color
            
        }],
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        }
    });
  }

  // Dados dos graficos
  const requests_status_data = [{
        name: 'Ativas',
        y: 24
    }, {
        name: 'Resolvidas',
        y: 36
    }, {
        name: 'Canceladas',
        y: 12
    }, {
        name: 'Com pendencias',
        y: 38
    }];
  
  const requests_account_manager_data = [{
        name: 'Daniela',
        y: 24
    }, {
        name: 'Marcela',
        y: 36
    }, {
        name: 'Maria',
        y: 12
    }, {
        name: 'Joana',
        y: 38
    }];
  
  const slas_data = [{
        name: 'Dentro do prazo',
        y: 24
    }, {
        name: '+de 3 dias',
        y: 36
    }, {
        name: '+de 4 dias',
        y: 12
    }, {
        name: 'Acima de 5 dias',
        y: 38
    }];
  
  const prize_graph_data = [
      10, 20, 12, 38, 10, 50, 30, 38, 35, 29,
      22, 17
  ];
  
  const commission_graph_data = [
      10, 20, 12, 38, 10, 50, 30, 38, 35, 29,
      22, 17
  ];
  
  const payment_situation_companies_data = [{
        name: 'Adimplentes',
        y: 24
    }, {
        name: 'Inadimplentes',
        y: 36
    }];
  
  const graphic_life_segment_data = [{
        name: 'Individual',
        y: 10
    }, {
        name: 'PME',
        y: 20
    }, {
        name: 'Empresarial',
        y: 12
    }];
  
  const product_life_graph_data = [{
        name: 'Saúde',
        y: 10
    }, {
        name: 'Odonto',
        y: 20
    }, {
        name: 'VR/VA',
        y: 12
    }, {
        name: 'Gympass',
        y: 15
    }];
  
  const company_curve_graph_data = [{
        name: 'A',
        y: 10
    }, {
        name: 'B',
        y: 20
    }, {
        name: 'C',
        y: 12
    }];
  
  const business_graphics_data = [{
        name: 'Com Posto',
        y: 10
    }, {
        name: 'Sem Posto',
        y: 20
    }];
  
  
  // Chama função de graficos
  createPieChart('requests_status', 'Solicitações por Status', requests_status_data);
  
  //createPieChart('requests_account_manager', 'Solicitações por Account Manager', requests_account_manager_data);
  createPieChart('slas', 'Slas', slas_data);
  //createPieChart('payment_situation_companies', 'Comissão x Tipo de Produto', payment_situation_companies_data);
  // createPieChart('graphic_life_segment', 'Total de Vidas por Segmento', graphic_life_segment_data);
  // createPieChart('product_life_graph', 'Total de Vidas por Produto', product_life_graph_data);
  // createPieChart('company_curve_graph', 'Curva por Empresas', company_curve_graph_data);
  // createPieChart('business_graphics', 'Empresas com Posto/sem Posto', business_graphics_data);
  
  // createLineChart('prize_graph', 'Evolução Mensal Prêmio Total', prize_graph_data, '#2caffe');
  // createLineChart('commission_graph', 'Evolução Mensal Comissão', commission_graph_data, '#22d53c');
    
</script>

@endsection