@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')

    {!! Html::style('plugins/flatpickr/flatpickr.css') !!}
    {!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
    {!! Html::style('plugins/table/datatable/datatables.css') !!}
    {!! Html::style('plugins/table/datatable/dt-global_style.css') !!}

    <style>
        .btn-excel {
            background-color: #28a745;
            color: white;
        }

        .btn-pdf {
            background-color: #007bff;
            color: white;
        }

        .text-right {
            text-align: right;
        }

        .dataTable thead th {
            color: white !important; /* Cambia el color del texto */
            background-color: #0b305d !important; /* Cambia el color de fondo */
        }
    </style>
@endpush

@section('content')
    <div>
        <div class="sub-header-container">
            <header class="header navbar navbar-expand-sm">
                <ul class="navbar-nav flex-row">
                    <li>
                        <div class="page-header">
                            <nav class="breadcrumb-one" aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active" aria-current="page">
                                        <span>CONSULTA CONSOLIDADO DE CHEQUES</span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </li>
                </ul>
            </header>
        </div>
        <div class="col-lg-12">
            <form action="#" id="frm_auditoriaCli" method="post">
                <div class="statbox widget box box-shadow mb-2">
                    <div class="widget-content widget-content-area">
                        <div class="w-100">
                            <div class="form-group row pt-2">
                                <div class="col-md-2">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Desde:</label>
                                        <div class="col-sm-9">
                                             <input id="desde" name="desde" class="form-control form-control-sm fechas" type="date" style="padding-top: 4px; font-size: 8px;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Hasta:</label>
                                        <div class="col-sm-9">
                                             <input id="hasta" name="hasta" class="form-control form-control-sm fechas" type="date" style="padding-top: 4px; font-size: 8px;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Proveedor:</label>
                                        <div class="col-sm-9"> 
                                            <select name="proveedor" id="proveedor" class="form-control form-control-sm">
                                            	<option value="0">Todos</option>
                                            	@foreach ($data['proveedores'] as $p)
                                            		<option value="{{ $p->id }}">{{ $p->nombre }} ({{ $p->proveedor  }})</option>
                                            	@endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Banco:</label>
                                        <div class="col-sm-9"> 
                                            <select name="banco" id="banco" class="form-control form-control-sm">
                                            	<option value="0">Todos</option>
                                            	@foreach ($data['bancos'] as $b)
                                            		<option value="{{ $b->id }}"> {{ $b->descripcion_corta }}</option>
                                            	@endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Beneficiario:</label>
                                        <div class="col-sm-9"> 
                                            <select name="beneficiario" id="beneficiario" class="form-control form-control-sm">
                                            	<option value="0">Todos</option>
                                            	@foreach ($data['beneficiarios'] as $p)
                                            		<option value="{{ $p->id }}"> {{ $p->beneficiario  }} - {{ $p->nombre }}</option>
                                            	@endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="form-group row pt-2">

                                <div class="col-md-12">
                                    <input type="submit" class="btn btn-primary btn-block mt-10" id="btn_auditoriaCli"
                                           value="Generar">
                                    <!--<button class="btn btn-primary btn-block mt-10" onclick="generar();">Generar</button>-->

                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="layout-px-spacing">
        <div class="container-fluid p-0" id="repTable" style="display: none;">
            <div class="row data-table-container layout-top-spacing">
                <div class="table-responsive">
                    <table class="table table-hover display nowrap" style="width:100%" id="tb_auditoriaCli">
                        <thead>
                        <tr>
                            <th>Cuenta Bancaria</th>
                            <th>Cheque</th>
                            <th>Proveedor</th>
                            <th>Beneficiario</th>
                            <th>Fecha</th>
                            <th>Importe</th>
                            <th>Estatus</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <button class="btn btn-primary" onclick="back()">Regresar</button>
        </div>
    </div>
@endsection


@push('plugin-scripts')
    {{-- {!! Html::script('assets/js/loader.js') !!} --}}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    <!--  The following JS library files are loaded to use Copy CSV Excel Print Options-->
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.html5.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.print.min.js') !!}
    <!-- The following JS library files are loaded to use PDF Options-->
    {!! Html::script('plugins/table/datatable/button-ext/pdfmake.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/vfs_fonts.js') !!}

    {!! Html::script('plugins/flatpickr/flatpickr.js') !!}
    {!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
@endpush

@push('custom-scripts')
    @csrf
    <script>
		function obtenerFechaYHoraActual() {
			const fechaHoraActual = new Date();
			const dia = String(fechaHoraActual.getDate()).padStart(2, '0');
			const mes = String(fechaHoraActual.getMonth() + 1).padStart(2, '0');
			const anio = fechaHoraActual.getFullYear();
			let horas = fechaHoraActual.getHours();
			const minutos = String(fechaHoraActual.getMinutes()).padStart(2, '0');
			const periodo = horas >= 12 ? 'PM' : 'AM';

			if (horas > 12) {
				horas -= 12;
			}

			const fechaHoraFormateada = `${dia}/${mes}/${anio} ${horas}:${minutos}${periodo}`;
			return fechaHoraFormateada;
		}

		function commaSeparateNumber(val) {
			while (/(\d+)(\d{3})/.test(val.toString())) {
				val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
			}

			return '$'+val;
		}


		$("#frm_auditoriaCli").submit(function (event) {
			// debugger;
			event.preventDefault();
			 $('#repTable').show();
			$('#loadingModal').modal('show');	
			$('#btn_auditoriaCli').prop('disabled', true);
			var provedor = $('#proveedor').val();
			var banco = $('#banco').val();
			var desde = $('#desde').val();
			var hasta = $('#hasta').val();
			var beneficiario = $('#beneficiario').val();
			

			var header = 'Empresa: {{$data["empresa"]->descripcion}} \n' +
				'Sucursal: {{$data["sucursal"]->descripcion}} \n' +
				'***CONSOLIDADO DE CHEQUES*** \n' + obtenerFechaYHoraActual();

			if ($.fn.DataTable.isDataTable('#tb_auditoriaCli')) {
				$('#tb_auditoriaCli').DataTable().destroy();
			}

			var table = $('#tb_auditoriaCli').DataTable({
				lengthMenu: [10, 15, 20, 50, 100],
				language: {
					url: "{{asset('assets/material/datatable_sp.json')}}"
				},
				processing: true,
				// pageLength: 5,
				responsive: true,
				bPaginate: false,
				scrollY: '37vh',
				scrollCollapse: true,
				ajax: {
					url: "{{ url('reportes/get_consolidado_cheques') }}",
					type: "POST",
					data: {
						desde: desde,
						hasta: hasta,
						banco: banco,
						proveedor: provedor,
						beneficiario: beneficiario,
					},
				},
				dom: 'Bfrtip',
				buttons: [
					{
						extend: 'pdfHtml5',
						footer: true,
						text: '<a href="#" class="btn btn-pdf"><i class="las la-file-pdf la-lg"></i>PDF</a>',
						orientation: 'landscape',
						title: 'CONSOLIDADO DE CHEQUES\n Desde: '+desde+'  Hasta: '+hasta,
						customize: function (doc) {

							// Obtener la tabla generada en el PDF
							var table = doc.content[1].table.body;

							// Alinear a la derecha la celda de la columna en el índice 18
							for (var i = 0; i < table.length; i++) {
								table[i][0].alignment = 'right';
								table[i][2].alignment = 'right';
								table[i][3].alignment = 'right';
							}

							//Remove the title created by datatTables
							// doc.content.splice(0, 1);
							doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
							//Center data
							doc.styles.tableBodyEven.alignment = 'center';
							doc.styles.tableBodyOdd.alignment = 'center';

							{{--var logo = 'data:image/png;base64,{{$data["logo"]}}';--}}

							// It's important to create enough space at the top for a header !!!
							doc.pageMargins = [20, 60, 20, 30];
							// Set the font size fot the entire document
							doc.defaultStyle.fontSize = 8;
							// Set the fontsize for the table header
							doc.styles.tableHeader.fontSize = 9;
							// Create a header object with 3 columns
							// Left side: Logo
							// Middle: brandname
							// Right side: A document title
							// doc['header'] = (function () {
							// 	return {
							// 		columns: [{
							// 			image: logo,
							// 			width: 120
							// 		}],
							// 		margin: 20
							// 	}
							// });

							// Create a footer object with 2 columns

							doc['footer'] = (function (page, pages) {
								return {
									columns: [{
										alignment: 'left',
										text: ['Fecha: ', {
											text: obtenerFechaYHoraActual()
										}]
									},
										{
											alignment: 'right',
											text: [
												'Página ', {
													text: page.toString()
												}, ' de ', {
													text: pages.toString()
												}
											]
										}
									],
									margin: 20
								}
							});

						}
					},
					{
						extend: 'excelHtml5',
						footer: true,
						text: '<a href="#" class="btn btn-excel"><i class="las la-file-excel la-lg"></i>Excel</a>',
						title: 'CONSOLIDADO DE CHEQUES',
						messageTop: header,
					},
				],

				columns: [{
					data: "banco_display"
				},
					{
						data: "cheque"
					},
					{
						data: "proveedor_display"
					},
					{
						data: "beneficiario_display"
					},
					{
						data: "fecha", className: 'text-center'
					},
					{
						data: "importe", className: 'text-right'
					},
					{
						data: "estatus", className: 'text-center'
					},
				],
				columnDefs: [
					{
						render: function (data, type, row) {
							return commaSeparateNumber(data);
						},
						targets: [5]
					},
				],
				footerCallback: function (row, data, start, end, display) {
					var api = this.api();
					let totalc2 = api.column(5).data();
				

					var totalSum2 = totalc2.toArray().reduce(function (acc, value) {
						if (value !== null) {
							// console.log(value);
							var cleanedValue = value;
							var numValue = parseFloat(cleanedValue);
							if (!isNaN(numValue)) {
								return acc + numValue;
							} else {
								return acc;
							}
						} else {
							return acc;
						}
					}, 0);

				

					// Formatear el resultado de la suma como valor de moneda nuevamente
					var formattedTotalSum2 = "$" + totalSum2.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
				

					// Actualizar los valores en los elementos del footer
					$(api.column(5).footer()).html(formattedTotalSum2);
					
				},
				fnDrawCallback: function (oSettings) {
					setTimeout(function() { 
				        $('#repTable').show();
						$('#btn_auditoriaCli').prop('disabled', false);
						$('#loadingModal').modal('hide');
				    }, 2000);
					
				},
			});
			table.columns.adjust();

		});

		function back() {
			$('#repTable').hide();
		}
    </script>
@endpush