@extends('layouts/contentLayoutOperational')

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

@section('vendor-style')
  <!-- vendor css files -->
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.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')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.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 d-flex justify-content-between m-2 mb-3">
		<div class="col-md-2 bg-secondary p-2 rounded-3 ">
			<h4 class="mb-1 text-center text-white">Total de Solicitações</h4>
			<h3 id="card-total" class="fs-1 text text-center text-white"></h3>
		</div>
		<div class="col-md-2 bg-success p-2 rounded-3 ">
			<h4 class="mb-1 text-center text-white">Solicitações dentro do prazo</h4>
			<h3 id="card-above-three" class="fs-1 text text-center text-white"></h3>
		</div>
		<div class="col-md-2 bg-warning p-2 rounded-3 ">
			<h4 class="mb-1 text-center text-white">Solicitações proximas ao prazo</h4>
			<h3 id="card-equal-three" class="fs-1 text text-center text-white"></h3>
		</div>
		<div class="col-md-2 bg-danger p-2 rounded-3 ">
			<h4 class="mb-1 text-center text-white">Solicitações fora do prazo</h4>
			<h3 id="card-below-three" class="fs-1 text text-center text-white"></h3>
		</div>
	</div>
  <div class="row match-height">
    <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>

  <div class="row match-height">
  </div> 
  
</section>
<!-- Dashboard Analytics end -->
@endsection

@section('vendor-script')
  <!-- vendor files -->
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.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>
  <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/toastr.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/apexcharts"></script>
  <script>
    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: [
            [3, 'asc']
          ],
          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(company_id) {
        let url = "{{ route('api.requests.indexOperational','')}}/" + company_id;
        axios.get( url, {
          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(company_id)
  
    });
  </script>
@endsection