@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])
@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! Html::style('assets/css/apps/tickets.css') !!}
    {!! Html::style('assets/css/elements/tooltip.css') !!}
    {!! Html::style('plugins/apex/apexcharts.css') !!}
    {!! Html::style('plugins/flatpickr/flatpickr.css') !!}
    {!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
@endpush

@section('content')
    <style>
        .ui-autocomplete-input {
            /*border: none;*/
            font-size: 14px;
            /* width: 300px; */
            /* height: 24px; */
            /*margin-bottom: 5px;
      /*padding-top: 2px;
      border: 1px solid #DDD !important;*/
            padding-top: 0px !important;
            z-index: 1000;
            position: relative;
        }

        .ui-menu .ui-menu-item a {
            font-size: 12px;
        }

        .ui-autocomplete {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000 !important;
            float: left;
            display: none;
            min-width: 160px;
            width: 160px;
            padding: 4px 0;
            margin: 2px 0 0 0;
            list-style: none;
            background-color: #ffffff;
            border-color: #ccc;
            border-color: rgba(0, 0, 0, 0.2);
            border-style: solid;
            border-width: 1px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            *border-right-width: 2px;
            *border-bottom-width: 2px;
        }

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }

        .ui-menu-item > a.ui-corner-all {
            display: block;
            padding: 3px 15px;
            clear: both;
            font-weight: normal;
            line-height: 18px;
            color: #555555;
            white-space: nowrap;
            text-decoration: none;
        }

        .ui-state-hover,
        .ui-state-active {
            color: #ffffff;
            text-decoration: none;
            background-color: #0088cc;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            background-image: none;
        }

        option {
            font-size: 10px;
        }

        .form-control {
            font-size: 10px;
        }

        .form-1-box {
            padding-top: 30px;
            text-align: left;
        }

        .form-1-box legend {
            font-size: 4px;
            line-height: 10px;
            font-weight: 100;
            text-transform: uppercase;
            color: #555;
        }

        .form-1-box .form-check-label {
            line-height: 1.5;
            vertical-align: top;
        }

        .tableFixHead {
            overflow: auto;
            height: 30vh;
        }

        .tableFixHead thead th {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        /* Just common table stuff. Really. */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px 16px;
        }

        th {
            background: #0b305d;
        }

        .numeros {
            text-align: right;
        }

        .selectF {
            font-size: 8px !important;
        !important;
            padding: 0;
        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h5>Auditoria Cancelacion</h5>
            </div>
        </div>
        <!--  Navbar Ends / Breadcrumb Area Ends -->
        <form action="#" id="frm_cancelacion" method="post">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label>Fecha: <span class="text-danger">*</span></label>
                        <input id="fecha_desde"
                               name="fecha_desde"
                               class="form-control form-control-sm flatpickr flatpickr-input fechas active"
                               type="text" placeholder="Seleccione fecha"
                               value="{{ $data['fecha'] }}">
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label>Fecha: <span class="text-danger">*</span></label>
                        <input id="fecha_hasta"
                               name="fecha_hasta"
                               class="form-control form-control-sm flatpickr flatpickr-input fechas active"
                               type="text" placeholder="Seleccione fecha"
                               value="{{ $data['fecha'] }}">
                    </div>
                </div>
            </div>

            <div class="row pt-5">
                <div class="col-md-12">
                    <div class="statbox widget box box-shadow mb-4">
                        <div class="widget-content widget-content-area">
                            <div class="w-100">
                                <div class="row date-table-container layout-top-spacing">
                                    <div class="table-responsive">
                                        <table class="table table-hover display nowrap" style="width:100%"
                                               id="tb_auditoriaCancelacion">
                                            <thead>
                                            <tr>
                                                <th>Cuenta</th>
                                                <th>Serie</th>
                                                <th>Folio</th>
                                                <th>UUID</th>
                                                <th>Estatus SAT</th>
                                                <th>Estatus Documentos</th>
                                                <th>Estatus CFDI</th>
                                                <th>Importe</th>
                                                <th>Tipo</th>
                                                <th>Fecha</th>
                                                <th>#</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                            <tfoot>

                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-lg-4 p-5">

                </div>
                <div class="col-lg-4 p-5">

                </div>
                <div class="col-lg-4 p-5">
                    <input type="button" id="btn_auditoria" name="btn_auditoria"
                           class="btn btn-primary btn-block"
                           value="Auditoria" onclick="envia_auditoria()">
                </div>
            </div>
        </form>
    </div>

@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/apps/companies.js') !!}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    {!! Html::script('plugins/flatpickr/flatpickr.js') !!}
    {!! Html::script('plugins/flatpickr/custom-flatpickr.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') !!}
@endpush

@push('custom-scripts')
    <script type="text/javascript">
		$(document).ready(function () {

			$(".fechas").flatpickr({
				dateFormat: "Y-m-d",
			});
		});

		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 envia_auditoria() {
			// debugger;

			var fecha_desde = $("#fecha_desde").val();
			var fecha_hasta = $("#fecha_hasta").val();
			$('#btn_auditoria').prop('disabled', true);
			$('#loadingModal').modal('show');

			var header = '***Auditoria_Cancelacion*** ' + obtenerFechaYHoraActual();

			$('#tb_auditoriaCancelacion').dataTable().fnDestroy();
			$('#tb_auditoriaCancelacion').DataTable({
				lengthMenu: [10, 15, 20, 50, 100],
				processing: true,
				responsive: true,
				bPaginate: false,
				scrollY: '50vh',
				scrollCollapse: true,
				ajax: {
					url: "{{ url('operaciones/envia-auditoria-cancelacion') }}",
					type: "POST",
					data: {
						fecha_desde: fecha_desde,
						fecha_hasta: fecha_hasta
					},
				},
				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: 'Auditoria de Clientes',
						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';


							// 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: 'Auditoría de Clientes',
						messageTop: header,
					},
				],

				columns: [{
					data: "Cuenta"
				},
					{
						data: "Serie"
					},
					{
						data: "Folio"
					},
					{
						data: "UUID"
					},
					{
						data: "EstatusSat"
					},
					{
						data: "EstatusDocumentos"
					},
					{
						data: "EstatusCFDI"
					},
					{
						data: "ImporteDocumentos", className: 'text-right'
					},
					{
						data: "TipoDocumentos"
					},
					{
						data: "Fecha"
					},
					{
						data: "Acciones"
					},
				],

				fnDrawCallback: function (oSettings) {

					$('#btn_auditoria').prop('disabled', false);
					$('#loadingModal').modal('hide');
				},
			});

		}

		function cancelaDocumento(posicion, id, motivo, serie, folio, tipo) {

			$('#btn_accion_' + posicion).prop('disabled', true);
			$.ajax({
				url: '{{url('operaciones/cancela_factura')}}',
				type: 'POST',
				dataType: 'json',
				data: {
					id: id,
					motivo: motivo,
					serie: serie,
					folio: folio,
					tipo: tipo,
				},
			})
				.done(function (resp) {
					console.log("success");
					if (resp[0].strStatus == '0') {
						var mensaje = resp[0].strResult;
						Swal.fire({
							title: mensaje,
							type: 'success',
						});
						$('#btn_accion_' + posicion).prop('disabled', true);
						$('#btn_accion_' + posicion).html("Cancelado");

						return false;
					} else {
						var mensaje = resp[0].strResult;
						Swal.fire({
							title: mensaje,
							type: 'warning',
						});
						$('#btn_accion_' + posicion).prop('disabled', false);

						return false;
					}

				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
				});

		}

    </script>

    @include('comunes.busca_cuenta')

@endpush