@extends('layouts/contentLayoutMaster')

@section('title', 'Relatórios')

@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">
	<!-- list and filter start -->
	<div class="card">
		<div class="card-body border-bottom">
			<h4 class="card-title">{{ __('locale.List') }}</h4>
		
		</div>
		<div class="card-datatable table-responsive pt-0">
			<table class="user-list-table table">
				<thead class="table-light">
					<tr>
						<th>Nome</th>
						<th>{{ __('locale.Table.Contract.Column.Actions') }}</th>
					</tr>
				</thead>
			</table>
		</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>

	/**
	 * @param {number} contract_id
	 */

	var dtUserTable = $('.user-list-table'),
			select = $('.select2'),
			dtContact = $('.dt-contact'),
			statusObj = {
				1: {
					title: "{{ __('locale.Active') }}",
					class: 'badge-light-success '
				},
				0: {
					title: "{{__('locale.Inactive')}}",
					class: 'badge-light-secondary'
				}
			};

	$(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()
			});
		});

        var Data = [
        { name: 'Upgrades', uri: 'upgrade-reports' },
        { name: 'Maioridade', uri: 'majority-reports' },
        { name: 'Movimentações', uri: 'movements-reports' },
        { name: 'Pendências e Críticas', uri: 'pending-critical-reports' },
        { name: 'Performance de Tarefas', uri: 'task-performance-reports' },
        { name: 'Faturamento não pago', uri: 'unpaid-billing-reports' },
        { name: 'Reembolsos Pagos', uri: 'refunds-paid-reports' },
        { name: 'Tipo de Solicitações', uri: 'request-type-reports' },
        { name: 'Curvas da Empresa', uri: 'company-curve-reports' },
        { name: 'Produtos das Empresas', uri: 'company-product-reports' },
        { name: 'Produtos por Categoria HM', uri: 'product-category-reports' },
        { name: 'Clientes Cancelados', uri: 'canceled-customers-reports' },
        { name: 'Gráfico de Ganho/Perda de Prêmio', uri: 'premium-reports' },
        { name: 'Clientes por ex-Corretora', uri: 'client-broker-reports' },
        { name: 'Clientes por ex-Operadora', uri: 'client-operator-reports' },
        { name: 'Gráfico de Quantidade de Inclusões', uri: 'number-inclusions-reports' },
        { name: 'Gráfico de Vidas Cadastradas', uri: 'registered-lives-reports' },
        { name: 'Faturamento', uri: 'billing-reports' },
        { name: 'Coparticipação', uri: 'co-participation-reports' },
        { name: 'Clientes por localidade', uri: 'customer-location-reports' },
        { name: 'Titulares por Status', uri: 'holders-status-reports' }
    ];

		if (dtUserTable.length) {
			dtUserTable = dtUserTable.DataTable({
				data: Data,
				columns: [
					{
						data: 'name'
					},
					{
						data: null,
					},
				],
				columnDefs: [
					{
						targets: -1,
						title: 'Actions',
						orderable: false,
						render: function(data, type, full, meta) {
                            var uri = `{{ url('dashboard/admin/reports/${full.uri}') }}`;
							return `<a href="${uri}" class="btn btn-primary btn-sm">
                                Abrir
                            </a>`;
						}
					}
				],
				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>>>' +
					'>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.contracts.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'];
				// 			}
				// 		}),
				// 	}
				// },
				responsive: false,
                    scrollX: true,
                    scrollCollapse: true,
				initComplete: function() {

					window.tableList = this.api();

					this.api()
						.columns(2)
						.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>'
									);
								});
						});

				}
			});
		}

	});
</script>

@endsection