@extends('layouts/contentLayoutManager')

@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')
<!-- Dashboard Analytics Start -->
<section id="dashboard-analytics">
  <div class="row match-height">
    
  </div>

  <div class="row match-height">
    
  <!--/ List DataTable -->
  <div class="row mb-3">
    <div class="col-md-4">
      <div id="requests_status" class="rounded-3"></div>
    </div>
    <div class="col-md-4">
      <div id="requests_account_manager" class="rounded-3"></div>
    </div>
    <div class="col-md-4">
      <div id="slas" class="rounded-3"></div>
    </div>  
  </div>
  <div class="row mb-3">
    <div class="col-md-4">
      <div id="companies_with_positions_products_life" class="rounded-3"></div>
    </div>
    <div class="col-md-4">
      <div id="total_lives_product" class="rounded-3"></div>
    </div>
    <div class="col-md-4">
      <div id="company_product_life" class="rounded-3"></div>
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-4">
      <div id="payment_situation_companies" class="rounded-3"></div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body border-bottom">
          <h4 class="card-title">Solicitações</h4>
          <div class="row">
            <div class="col-md-4 company_list"></div>
            <!-- <div class="col-md-4 company_type"></div>
            <div class="col-md-4 company_country"></div> -->
            {{-- <div class="col-md-4 company_status"></div> --}}
          </div>
        </div>
        <div class="card-datatable table-responsive pt-0">
          <table class="user-list-table table">
            <thead class="table-light">
              <tr>
                <th>{{ __('locale.Table.Request.Column.Protocol') }}</th>
                <th>{{ __('locale.Table.Request.Column.TypeRequest') }}</th>
                <th>Cliente</th>
                <th>{{ __('locale.Table.Request.Column.Status') }}</th>
                <th>Prazo</th>
                <th>{{ __('locale.Table.Request.Column.Actions') }}</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
  
</section>
<!-- Dashboard Analytics end -->
@endsection

@section('vendor-script')
  <!-- vendor files -->
  
  <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.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>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.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/axios/dist/axios.min.js"></script>
<script>

        function getDataSlas() {
          return axios.get(`{{ route('api.slas-graph-reports.show') }}`, {
              headers: {
                  "Authorization": `Bearer {{ session('Authorization') }}`
              }
          })
          .then(function(response) {

              return response.data;
          })
          .catch(function(error) {
              console.error('Erro na requisição:', error);
              throw error;
          });
      }

      function getDataCompanyProduct() {
          return axios.get(`{{ route('api.company-product-reports.show') }}`, {
              headers: {
                  "Authorization": `Bearer {{ session('Authorization') }}`
              }
          })
          .then(function(response) {

              return response.data;
          })
          .catch(function(error) {
              console.error('Erro na requisição:', error);
              throw error;
          });
      }

      function getDataCompanyProductLife() {
          return axios.get(`{{ route('api.company-product-life-reports.show') }}`, {
              headers: {
                  "Authorization": `Bearer {{ session('Authorization') }}`
              }
          })
          .then(function(response) {

              return response.data;
          })
          .catch(function(error) {
              console.error('Erro na requisição:', error);
              throw error;
          });
      }

      // axios.get(`{{ route('api.slas-graph-reports.show') }}`, {
      //         headers: {
      //             "Authorization": `Bearer {{ session('Authorization') }}`
      //         }
      //     })
      //     .then(function(response) {
      //       console.log(response.data)
      //         return response.data;
      //     })
      //     .catch(function(error) {
      //         console.error('Erro na requisição:', error);
      //         throw error;
      //     });


      // 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
          }
      });
      }

      getDataCompanyProduct()
            .then(responseData => {
                // Preparar os dados para o gráfico
                const categories = responseData.map(item => item.name);
                const seriesData = {};

                responseData.forEach(company => {
                    company.products.forEach(product => {
                        if (!seriesData[product.name]) {
                            seriesData[product.name] = [];
                        }

                        // Adicionar o valor do produto para a empresa atual
                        seriesData[product.name].push(product.y);
                    });
                });

                // Transformar o objeto seriesData em um formato adequado para a configuração do Highcharts
                const series = Object.keys(seriesData).map(productName => ({
                    name: productName,
                    data: seriesData[productName]
                }));

                // Configurar o gráfico Highcharts
                Highcharts.chart('companies_with_positions_products_life', {
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: 'Empresas com Postos x Produtos x Vidas'
                    },
                    xAxis: {
                        categories: categories,
                        title: {
                            text: 'Empresas'
                        },
                        labels: {
                            formatter: function () {
                                const maxLength = 15; // Define o comprimento máximo para o nome da empresa
                                return this.value.length > maxLength ? this.value.substring(0, maxLength) + '...' : this.value;
                            },
                        }
                    },
                    yAxis: {
                      min: 0,
                      max: 100,
                      tickPositions: [0, 25, 50, 75, 100],
                      title: {
                          text: 'Percentagem'
                      },
                      labels: {
                          formatter: function () {
                            return this.value + '%';
                          }
                      }
                  },
                    legend: {
                        reversed: true
                    },
                    plotOptions: {
                        series: {
                            stacking: 'percent',
                            dataLabels: {
                                enabled: true,
                                formatter: function () {
                                    if (this.y === 0) {
                                        return null;
                                    }
                                    return Highcharts.numberFormat(this.y, 0, ',', '.');
                                }
                            }
                        }
                    },
                    series: series,
                    credits: {
                        enabled: false
                    }
                });
            })
            .catch(error => {
                console.error('Erro ao configurar o gráfico:', error);
            });
            

      // Highcharts.chart('companies_with_positions_products_life', {
      //     chart: {
      //         type: 'bar'
      //     },
      //     title: {
      //         text: 'Empresas com Postos x Produtos x Vidas'
      //     },
      //     xAxis: {
      //         categories: ['Empresa A', 'Empresa B', 'Empresa C', 'Empresa D']
      //     },
      //     yAxis: {
      //         min: 0,
      //         max: 100,
      //         tickPositions: [0, 25, 50, 75, 100],
      //         title: {
      //             text: 'Percentagem'
      //         },
      //         labels: {
      //             formatter: function () {
      //               return this.value + '%';
      //             }
      //         }
      //     },
      //     legend: {
      //         reversed: true
      //     },
      //     plotOptions: {
      //         series: {
      //             stacking: 'percent',
      //             dataLabels: {
      //                 enabled: true,
      //                 formatter: function () {
      //                   if (this.y === 0) {
      //                         return null;
      //                     }
      //                   return Highcharts.numberFormat(this.y, 0, ',', '.');
      //                 } 
      //             }
      //         }
      //     },
      //     series: [{
      //         name: 'Saúde',
      //         data: [10, 15, 15, 0]  
      //     }, {
      //         name: 'Odonto',
      //         data: [20, 10, 15, 20]
      //     }, {
      //         name: 'VR/VA',
      //         data: [12, 0, 12, 0]
      //     }, {
      //         name: 'Gympass',
      //         data: [38, 15, 50, 10]
      //     }],
      //     credits: {
      //           enabled: false
      //       }
      // });

      Highcharts.chart('total_lives_product', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Vidas totais por Produtos HM'
        },
        xAxis: {
            categories: ['Saúde', 'Odonto', 'VR/VA', 'Gympass']
        },
        yAxis: {
            min: 0,
            max: 100,
            tickPositions: [0, 25, 50, 75, 100],
            title: {
                text: 'Percentagem'
            },
            labels: {
                formatter: function () {
                  return this.value + '%';
                }
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'percent',
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                      if (this.y === 0) {
                            return null;
                        }
                      return Highcharts.numberFormat(this.y, 0, ',', '.');
                    } 
                }
            }
        },
        series: [{
            name: 'Sub-básico',
            data: [10, 15, 15, 0]  
        }, {
            name: 'Básico',
            data: [20, 10, 15, 20]
        }, {
            name: 'Intermediário',
            data: [12, 0, 12, 0]
        }, {
            name: 'Executivo',
            data: [38, 15, 50, 10]
        }],
        credits: {
            enabled: false
        }
      });

      // Highcharts.chart('company_product_life', {
      //     chart: {
      //         type: 'bar'
      //     },
      //     title: {
      //         text: 'Empresas x Produtos x Vidas'
      //     },
      //     xAxis: {
      //         categories: ['Empresa A', 'Empresa B', 'Empresa C', 'Empresa D']
      //     },
      //     yAxis: {
      //         min: 0,
      //         max: 100,
      //         tickPositions: [0, 25, 50, 75, 100],
      //         title: {
      //             text: 'Percentagem'
      //         },
      //         labels: {
      //             formatter: function () {
      //               return this.value + '%';
      //             }
      //         }
      //     },
      //     legend: {
      //         reversed: true
      //     },
      //     plotOptions: {
      //         series: {
      //             stacking: 'percent',
      //             dataLabels: {
      //                 enabled: true,
      //                 formatter: function () {
      //                   if (this.y === 0) {
      //                         return null;
      //                     }
      //                   return Highcharts.numberFormat(this.y, 0, ',', '.');
      //                 } 
      //             }
      //         }
      //     },
      //     series: [{
      //         name: 'Saúde',
      //         data: [10, 20, 12, 38]  
      //     }, {
      //         name: 'Odonto',
      //         data: [15, 10, 0, 15]
      //     }, {
      //         name: 'VR/VA',
      //         data: [15, 15, 12, 50]
      //     }, {
      //         name: 'Gympass',
      //         data: [0, 20, 0, 10]
      //     }],
      //     credits: {
      //         enabled: false
      //     }
      // });

      getDataCompanyProductLife()
        .then(responseData => {
            // Preparar os dados para o gráfico
            const categories = responseData.map(item => item.name);
            const seriesData = {};

            // Inicializar o array para cada produto
            responseData.forEach(company => {
                company.products.forEach(product => {
                    if (!seriesData[product.name]) {
                        seriesData[product.name] = Array(categories.length).fill(0); // Inicializa com zero
                    }
                });
            });

            // Preencher o array com os dados do total
            responseData.forEach((company, companyIndex) => {
                company.products.forEach(product => {
                    seriesData[product.name][companyIndex] = product.y;
                });
            });

            // Transformar o objeto seriesData em um formato adequado para a configuração do Highcharts
            const series = Object.keys(seriesData).map(productName => ({
                name: productName,
                data: seriesData[productName]
            }));

            // Configurar o gráfico Highcharts
            Highcharts.chart('company_product_life', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Empresas x Produtos x Vidas'
                },
                xAxis: {
                    categories: categories,
                    title: {
                        text: 'Empresas'
                    },
                    labels: {
                        formatter: function () {
                            const maxLength = 15; // Define o comprimento máximo para o nome da empresa
                            return this.value.length > maxLength ? this.value.substring(0, maxLength) + '...' : this.value;
                        },
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    tickPositions: [0, 25, 50, 75, 100],
                    title: {
                        text: 'Percentagem'
                    },
                    labels: {
                        formatter: function () {
                          return this.value + '%';
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    series: {
                        stacking: 'percent',
                        dataLabels: {
                            enabled: true,
                            formatter: function () {
                                if (this.y === 0) {
                                    return null;
                                }
                                return Highcharts.numberFormat(this.y, 0, ',', '.');
                            }
                        }
                    }
                },
                series: series,
                credits: {
                    enabled: false
                }
            });
        })
        .catch(error => {
            console.error('Erro ao configurar o gráfico:', error);
        });






      // 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
      }];

      async function updateGraphDataSlas() {
        try {

            const data = await getDataSlas();
            console.log('Dados recebidos:', data);
            createPieChart('slas', 'Slas', data);
            
        } catch (error) {
            console.error('Erro ao atualizar os dados do gráfico:', error);
        }
      }


      // 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);

      updateGraphDataSlas();

      let requestData = {};
        /**
         * @param {number} request_id
         */
        const deleteGroup = async (request_id) => {

          if(typeof request_id !== 'number'){
            if(window.Swal !== undefined){
              return window.Swal.fire({
                title: 'Ops!',
                text: '{{ __("locale.Table.Contract.Column.DeleteInt") }}',
                icon: 'error'
              })
            }
            return window.alert('{{ __("locale.Table.Contract.Column.DeleteInt") }}');
          }

          if(window.Swal === undefined) return window.alert('{{ __("locale.Table.Contract.Column.ModelSweetAlert2") }}');
          if(window.toastr === undefined) return window.alert('{{ __("locale.Table.Contract.Column.ModelSweetToastr") }}');

          let swal = await window.Swal.fire({
            title: '{{ __("locale.Table.Contract.Column.DeleteAttention") }}',
            text: '{{ __("locale.Table.Contract.Column.DeleteMessageDelete") }}',
            icon: 'question',
            showCancelButton: true,
            cancelButtonText: '{{ __("locale.Table.Contract.Column.DeleteMessageCancel") }}',
            confirmButtonText: '{{ __("locale.Table.Contract.Column.DeleteMessage") }}'
          })

          if(!swal.isConfirmed) return cancelDeleteAction();

          let { data: json, ...response} = await axios({
            url: `{{route('api.contracts.delete','')}}/${request_id}`,
            method: 'delete',
            headers: {
              "Authorization": "Bearer {{ session('Authorization') }}"
            }
          })
          .catch((e) => {

            let response = e.response;

            @if(env('APP_DEBUG'))
            console.warn(e)
            @endif

            if (response.status === 400 || response.status === 422) {
              Swal.fire({
                title: 'Ops!',
                text: response.data.message,
                icon: 'error',
                cancelButtonText: '{{ __("locale.Table.Contract.Column.CloseButton") }}'
              })
            } else if (response.status === 404) {
              Swal.fire({
                title: 'Ops!',
                text: '{{ __("locale.Table.Contract.Column.RequestedNotFound") }}',
                icon: 'error',
                cancelButtonText: '{{ __("locale.Table.Contract.Column.CloseButton") }}'
              })
            } else {

              Swal.fire({
                title: 'Ops!',
                text: '{{ __("locale.Table.Contract.Column.DeleteErrorForm") }}',
                icon: 'error',
                cancelButtonText: '{{ __("locale.Table.Contract.Column.CloseButton") }}'
              })

            }
          });

          if(response.status === 204) {
            swal = await window.Swal.fire({
              title: 'Uhuul!',
              text: '{{ __("locale.Table.Contract.Column.DeleteSuccess") }}',
              icon: 'success'
            });

            if(swal.isConfirmed){
              dtUserTable.ajax.reload()
            }

          }

        }

        const cancelDeleteAction = () => {
          window.toastr.error('{{ __("locale.Table.Contract.Column.DeleteOperationCanceled") }}', '{{ __("locale.Table.Contract.Column.DeleteAttention") }}', {
            positionClass: "toast-top-right",
            progressBar: true
          })
        }

        var dtUserTable = $('.user-list-table'),
          dtUserTableHistory = $('.user-list-table-history'),
            select = $('.select2'),
            dtContact = $('.dt-contact'),
            statusObj = {
              1: {
                title: "Ativa",
                class: 'badge-light-success '
              },
              2: {
                title: "Encerrada",
                class: 'badge-light-secondary'
              },
              3: {
                title: "Com pendências - Solicitante",
                class: 'badge-light-warning'
              },
              4: {
                title: "Com pendências - Operadora",
                class: 'badge-light-warning'
              },
            },
            prazoObj = {
              1: {
                title: "Ativa",
                class: 'badge-light-success '
              },
              2: {
                title: "Encerrada",
                class: 'badge-light-secondary'
              },
              3: {
                title: "Com pendências - Solicitante",
                class: 'badge-light-warning'
              },
              4: {
                title: "Com pendências - Operadora",
                class: 'badge-light-warning'
              },
            };

        $(function() {

          'use strict';

          var assetPath = '../../../app-assets/',
            userView = 'app-user-view-account.html';

          assetPath = 'laravel' in window ? window.laravel.assetPath : assetPath;
          userView = assetPath + 'app/user/view/account';

          select.each(function() {
            var $this = $(this);
            $this.wrap('<div class="position-relative"></div>');
            $this.select2({
              dropdownAutoWidth: true,
              width: '100%',
              dropdownParent: $this.parent()
            });
          });
          
          let company_id = @json($company);
          // console.log(company_id);
          if (dtUserTable.length) {
            dtUserTable = dtUserTable.DataTable({
              ajax: {
                url: "{{ route('api.requests.indexOperational','')}}/" + company_id,
                dataSrc: '',
                beforeSend: function(request) {
                  request.setRequestHeader("Authorization",
                    "Bearer {{ session('Authorization') }}")
                }
              },
              columns: [
                {
                  data: 'protocol_number'
                },
                {
                  data: null,
                },
                {
                  data: 'company'
                },
                {
                  data: 'status'
                },
                {
                  data: 'status'
                },
                {
                  data: null,
                },
              ],
              columnDefs: [
                {
                  targets: 0,
                  render: function(data, type, full, meta) {
                    //console.log(full)
                    return (
                      '<div class="d-flex justify-content-left align-items-center">' +
                      '<div class="user-info text-truncate">' +
                      '<span class="d-block font-weight-bold text-truncate">' +
                      full.protocol_number +
                      '</span>' +
                      '</div>' +
                      '</div>'
                    );
                  }
                },
                {
                  targets: 1,
                  render: function(data, type, full, meta) {
                    //console.log(full);
                    return (
                      '<div class="d-flex justify-content-left align-items-center">' +
                      '<div class="user-info text-truncate">' +
                      '<span class="d-block font-weight-bold text-truncate">' +
                      full.supplier_type_request.type_request +
                      '</span>' +
                      '</div>' +
                      '</div>'
                    );
                  }
                },
                {
                  targets: 2,
                  render: function(data, type, full, meta) {
                    return (
                      '<div class="d-flex justify-content-left align-items-center">' +
                      '<div class="user-info text-truncate">' +
                      '<span class="d-block font-weight-bold text-truncate">' +
                      full.company.name +
                      '</span>' +
                      '</div>' +
                      '</div>'
                    );
                  }
                },
                {
                  targets: 3,
                  orderable: true,
                  render: function(data, type, full, meta) {
                    var $status_number = full.status;
                    //console.log(statusObj[$status_number].class);
                    //console.log(statusObj[$status_number].title);
                    return (
                      '<span class="badge rounded-pill ' +
                      statusObj[$status_number].class +
                      '">' +
                      statusObj[$status_number].title  +
                      '</span>'
                    );
                  }
                },
                {
                  targets: 4,
                  render: function(data, type, full, meta) {
                    // Obtendo os valores
                    const humanittare = full.supplier_type_request.supplier_slas[0].humanittare;
                    const business_operator = full.supplier_type_request.supplier_slas[0].business_operator;
                    
                    // Calculando a soma dos valores
                    const sumValues = humanittare + business_operator;

                    // Convertendo a data de registro para um objeto Date
                    const createdAt = new Date(full.created_at);
                    
                    // Obtendo a data atual
                    const currentDate = new Date();
                    
                    // Calculando a diferença em milissegundos
                    const diffTime = Math.abs(currentDate - createdAt);
                    
                    // Convertendo a diferença para dias
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
                    
                    // Subtraindo a diferença em dias da soma dos valores
                    const result = sumValues - diffDays;

                    let resultClass = '';
                    if (result > sumValues) {
                      resultClass = 'badge rounded-pill bg-success';
                    } else if (result > (sumValues-3)) {
                      resultClass = 'badge rounded-pill bg-warning';
                    } else {
                      resultClass = 'badge rounded-pill bg-danger';
                    }

                    // Retornando o resultado formatado
                    return (
                      '<div class="d-flex justify-content-left align-items-center">' +
                      '<div class="user-info text-truncate text-center">' +
                      `<span class="${resultClass}">` +
                        result +
                      '</span>' +
                      '</div>' +
                      '</div>'
                    );
                  }
                },
                {
                  targets: -1,
                  title: 'Actions',
                  orderable: false,
                  render: function(data, type, full, meta) {
                    const urlProtocol = `{{ route("operational.dashboard.requests.respond", ":id") }}`;
                                  const urlProtocolWithId = urlProtocol.replace(':id', full.id);

                    return (
                      '<div class="btn-group">' +
                        '<a class="btn btn-sm dropdown-toggle hide-arrow" data-bs-toggle="dropdown">' +
                        feather.icons['more-vertical'].toSvg({
                          class: 'font-small-4'
                        }) +
                        '</a>' +
                        '<div class="dropdown-menu dropdown-menu-end">' +
                          `<a href="${urlProtocolWithId}" class="dropdown-item">` +
                          feather.icons['file-text'].toSvg({
                            class: 'font-small-4 me-50'
                          }) +
                          'Responder</a>' +
                          // `<a href="javascript:deleteRequest(${full.id});" class="dropdown-item delete-record">` +
                          // feather.icons['trash-2'].toSvg({
                          // 	class: 'font-small-4 me-50'
                          // }) +
                          // '{{ __("locale.Table.Contract.Column.DeleteButton") }}</a>' +
                          `<a href="#" data-toggle="tooltip" title="Iterações" class="dropdown-item delete-record">` +
                          feather.icons['list'].toSvg({
                            class: 'font-small-4 me-50'
                          }) +
                          'Iterações</a></div>' +
                        '</div>' +
                      '</div>'
                    );
                  }
                }
              ],
              order: [
                [0, 'desc']
              ],
              dom: '<"d-flex justify-content-between align-items-center header-actions mx-2 row mt-75"' +
                '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                '<"col-sm-12 col-lg-8 ps-xl-75 ps-0"<"dt-action-buttons d-flex align-items-center justify-content-center justify-content-lg-end flex-lg-nowrap flex-wrap"<"me-1"f>B>>' +
                '>t' +
                '<"d-flex justify-content-between mx-2 row mb-1"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
                '>',
              language: {
                sLengthMenu: "{{ __('locale.Listing') }} _MENU_",
                search: "{{ __('locale.Search') }}",
                searchPlaceholder: "{{ __('locale.Search') }}..",
                paginate: {
                  previous: '&nbsp;',
                  next: '&nbsp;'
                },
                info: "{{ __('locale.ListingInfo') }}",
                infoEmpty: "{{ __('locale.ListingEmpty') }}",
                zeroRecords: "{{ __('locale.ZeroRecords') }}"

              },
              buttons: [{
                  text: "+ {{ __('locale.Add') }}",
                  className: 'add-new btn btn-primary me-2',
                  action: function() {
                    window.location.href = "{{ route('operational.dashboard.requests.create') }}";
                  },
                  init: function(api, node, config) {
                    $(node).removeClass('btn-secondary');
                  }
                },
                {
                  extend: 'collection',
                  className: 'btn btn-outline-secondary dropdown-toggle me-2',
                  text: feather.icons['external-link'].toSvg({
                    class: 'font-small-4 me-50'
                  }) + "{{__('locale.Export')}}",
                  buttons: [{
                      extend: 'print',
                      text: feather.icons['printer'].toSvg({
                        class: 'font-small-4 me-50'
                      }) + 'Print',
                      className: 'dropdown-item',
                      exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                      }
                    },
                    {
                      extend: 'csv',
                      text: feather.icons['file-text'].toSvg({
                        class: 'font-small-4 me-50'
                      }) + 'Csv',
                      className: 'dropdown-item',
                      exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                      }
                    },
                    {
                      extend: 'excel',
                      text: feather.icons['file'].toSvg({
                        class: 'font-small-4 me-50'
                      }) + 'Excel',
                      className: 'dropdown-item',
                      exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                      }
                    },
                    {
                      extend: 'pdf',
                      text: feather.icons['clipboard'].toSvg({
                        class: 'font-small-4 me-50'
                      }) + 'Pdf',
                      className: 'dropdown-item',
                      exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                      }
                    },
                    {
                      extend: 'copy',
                      text: feather.icons['copy'].toSvg({
                        class: 'font-small-4 me-50'
                      }) + 'Copy',
                      className: 'dropdown-item',
                      exportOptions: {
                        columns: [1, 2, 3, 4, 5]
                      }
                    }
                  ],
                  init: function(api, node, config) {
                    $(node).removeClass('btn-secondary');
                    $(node).parent().removeClass('btn-group');
                    setTimeout(function() {
                      $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex mt-50');
                    }, 50);
                  }
                }
              ],
              responsive: {
                details: {
                  display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                      var data = row.data();
                      return 'Details of ' + data['full_name'];
                    }
                  }),
                }
              },
              initComplete: function() {

                window.tableList = this.api();
                this.api()
                  .columns(3)
                  .every(function() {

                    var column = this;
                    var label = $('<label class="form-label" for="FilterTransaction">Status</label>').appendTo('.company_status');
                    var select = $(`<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> {{ __('locale.SelectStatus') }} </option></select>`)
                      .appendTo('.company_status')
                      .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                      });



                    column
                      .data()
                      .unique()
                      .sort()
                      .each(function(d, j) {
                        select.append(
                          '<option value="' +
                          statusObj[d].title +
                          '" class="text-capitalize">' +
                          statusObj[d].title +
                          '</option>'
                        );
                      });
                  });

              }
            });
          }

          function getRequest() {
            axios.get(`{{ route('api.requests.index') }}`, {
              headers: {
                "Authorization": "Bearer {{ session('Authorization') }}"
              }
            })
            .then(function(response) {
              requestData = response.data;
              
              let resultsCount = {};

              requestData.forEach(function(item) {

                let supplier_slas = item.supplier_type_request.supplier_slas;
                let createdAt = new Date(item.created_at);

                supplier_slas.forEach(function(supplier_sla){
                  let timeSlas = supplier_sla.humanittare + supplier_sla.pme_operator + supplier_sla.pme_operator ;

                  let currentDate = new Date();
                  
                  let diffTime = Math.abs(currentDate - createdAt);
                  
                  let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
                  
                  let result = timeSlas - diffDays;

                  if (resultsCount[result]) {
                    resultsCount[result]++;
                  } else {
                    resultsCount[result] = 1;
                  }
        
                });

              });

              let categorizedCounts = {
                aboveThree: 0,
                equalThree: 0,
                belowThree: 0
              };

              for (let [index, count] of Object.entries(resultsCount)) {
                if (index > 3) {
                  categorizedCounts.aboveThree = categorizedCounts.aboveThree + count;
                } else if (index <= 3 && index >= 0) {
                  categorizedCounts.equalThree = categorizedCounts.equalThree + count;
                } else if (index < 0) {
                  categorizedCounts.belowThree = categorizedCounts.belowThree + count;
                }
              }
              
              $('#card-above-three').text(categorizedCounts.aboveThree);
              $('#card-equal-three').text(categorizedCounts.equalThree);
              $('#card-below-three').text(categorizedCounts.belowThree);
              let categorizedTotal = categorizedCounts.aboveThree + categorizedCounts.equalThree + categorizedCounts.belowThree;
              $('#card-total').text(categorizedTotal);

            })
            .catch(function(error) {
              console.error('Erro na requisição:', error);
            });
          }

          getRequest()

        });
</script>
@endsection