@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Request'))

@section('vendor-style')
{{-- Page 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/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection


@section('content')

<!-- users list start -->
<section class="contracts-list">
	@if(in_array($control_access_id, [1, 2, 3]))
	<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">{{ __('locale.Table.Respond.Column.TotalRequests') }}</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">{{ __('locale.Table.Respond.Column.RequestsWithinDeadline') }}</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">{{ __('locale.Table.Respond.Column.RequestsNearDeadline') }}</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">{{ __('locale.Table.Respond.Column.RequestsBeyondDeadline') }}</h4>
			<h3 id="card-below-three" class="fs-1 text text-center text-white"></h3>
		</div>
	</div>
	@endif
	<!-- list and filter start -->
	<div class="card">
		<div class="card-body border-bottom">
			<h4 class="card-title">{{ __('locale.Request') }}</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>{{ __('locale.Table.Respond.Column.Client') }}</th>
						<th>{{ __('locale.Table.Respond.Column.Account') }}</th>
						<th>{{ __('locale.Table.Request.Column.Status') }}</th>
						<th>{{ __('locale.Table.Respond.Column.Deadline') }}</th>
						<th>{{ __('locale.Table.Request.Column.Actions') }}</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<div class="accordion" id="accordionExample">
		<div class="accordion-item">
		  <h2 class="accordion-header" id="headingOne">
			<button class="accordion-button fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			  Historico
			</button>
		  </h2>
		  <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<div class="card-body border-bottom">
					
					<div class="row">
						<div class="col-md-4 history_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-history table">
						<thead class="table-light">
							<tr>
								<th>{{ __('locale.Table.Request.Column.Protocol') }}</th>
								<th>{{ __('locale.Table.Request.Column.TypeRequest') }}</th>
								<th>{{ __('locale.Table.Respond.Column.Client') }}</th>
								<th>{{ __('locale.Table.Respond.Column.Account') }}</th>
								<th>{{ __('locale.Table.Request.Column.Status') }}</th>
								
								<th>{{ __('locale.Table.Request.Column.Actions') }}</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		  </div>
		</div>
	  </div>
</section>
@endsection

@section('vendor-script')

<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')

<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'
				},
				5: {
					title: "Cancelada",
					class: 'badge-light-secondary'
				},
			},
			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()
			});
		});

		if (dtUserTable.length) {
			dtUserTable = dtUserTable.DataTable({
				ajax: {
					url: "{{ route('api.requests.index')}}",
					dataSrc: '',
					beforeSend: function(request) {
						request.setRequestHeader("Authorization",
							"Bearer {{ session('Authorization') }}")
					}
				},
				columns: [
					{
						data: 'protocol_number'
					},
					{
						data: null,
					},
					{
						data: 'company'
					},
					{
						data: 'employee.name',
					},
					{
						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) {
							
							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,
					// 	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.employee_by_functions[0].user.name +
					// 			'</span>' +
					// 			'</div>' +
					// 			'</div>'
					// 		);
					// 	}
					// },
					{
						targets: 4,
						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: 5,
						render: function(data, type, full, meta) {
							
							const sumValues = full.sla;

							// 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 > 3) {
								resultClass = 'badge rounded-pill bg-success';
							}
							if (result >= 0 && result <= 3) {
								resultClass = 'badge rounded-pill bg-warning';
							}
							if (result < 0){
								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: 'Ações',
						orderable: false,
						render: function(data, type, full, meta) {
							const urlProtocol = `{{ route("dashboard.requests.respond", ":id") }}`;
                            const urlProtocolWithId = urlProtocol.replace(':id', full.id);

							return (
								// '<div>' +
								// 	'<div class=" d-flex">' +
								// 		`<a href="${urlProtocolWithId}" style="padding:0.4rem 0.6rem;" class="btn btn-primary me-50">` +
								// 		feather.icons['file-text'].toSvg({
								// 			class: 'font-small-4 text-white'
								// 		}) +
								// 		'</a>' +
								// 		'</div>' +
								// 	'</div>' +
								// '</div>'
								'<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>' +
								'</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('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">Accounts</label>`
                                ).appendTo('.company_list');
                                var select = $(
                                        `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> Selecione um Account</option></select>`
                                    )
                                    .appendTo('.company_list')
                                    .on('change', function() {
                                        var val = $.fn.dataTable.util.escapeRegex($(this)
                                            .val());
                                        column.search(val ? '^' + val + '$' : '', true, false)
                                            .draw();
                                    });

									var uniqueNames = new Set();

									column
										.data()
										.each(function(d, j) {
											var name = d;
											
											uniqueNames.add(name);
										});

									uniqueNames.forEach(function(name) {
										select.append(
											'<option value="' +
											name +
											'" class="text-capitalize">' +
											name +
											'</option>'
										);
									});
                            });

					

				}
			});
		}

		if (dtUserTableHistory.length) {
			dtUserTableHistory = dtUserTableHistory.DataTable({
				ajax: {
					url: "{{ route('api.requests.requestsFixedMaster', ['id' => 2]) }}",
					dataSrc: '',
					cache: false,
					beforeSend: function(request) {
						request.setRequestHeader("Authorization",
							"Bearer {{ session('Authorization') }}")
					}
				},
				columns: [
					{
						data: 'protocol_number'
					},
					{
						data: null,
					},
					{
						data: 'company'
					},
					{
						data: null,
					},
					{
						data: 'status'
					},
					// {
					// 	data: 'status'
					// },
					{
						data: null,
					},
				],
				columnDefs: [
					{
						targets: 0,
						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.protocol_number +
								'</span>' +
								'</div>' +
								'</div>'
							);
						}
					},
					{
						targets: 1,
						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.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,
						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.employee_by_functions[0].user.name +
								'</span>' +
								'</div>' +
								'</div>'
							);
						}
					},
					{
						targets: 4,
						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: -1,
						title: 'Actions',
						orderable: false,
						render: function(data, type, full, meta) {
							const urlProtocol = `{{ route("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>' + '</div>' +
								// 	'</div>' +
								// '</div>'
								'<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>' +
								'</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: [
					{
						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'];
							}
						}),
					}
				},
				// responsive: false,
                //     scrollX: true,
                //     scrollCollapse: true,
				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() {
			let url = "{{ route('api.requests.index')}}";
			axios.get(url, {
				headers: {
					"Authorization": "Bearer {{ session('Authorization') }}"
				}
			})
			.then(function(response) {
				requestData = response.data;
				console.log(requestData);
				let resultsCount = {};
				

				requestData.forEach(function(request){

					

					let timeSlas = request.sla;

					let createdAt = new Date(request.created_at);

					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 >= 0 && index <= 3) {
						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);
			});
		}

		@if(in_array($control_access_id, [1, 2, 3]))
		getRequest();
		@endif

	});
</script>

@endsection