<!DOCTYPE html>
			<html lang='en'>
			<head>
			<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
			<meta name='viewport' content='width=device-width, initial-scale=1.0'>
			<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
			<link href='https://fonts.googleapis.com/css2?family=Fira+Sans:ital@0;1&display=swap' rel='stylesheet'>
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/loaders.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/animate.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/style.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/responsive.css" rel="stylesheet" type="text/css">
        <link href="<?= $baseUrl ?>/public/assets/clientesverisure/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- Toastr -->
		<link href="<?= $baseUrl ?>/public/js/pages/plugins/toastr/toastr.min.css" rel="stylesheet">
			</head>
			<style type='text/css'>
						
			body {
				font-family: 'Fira Sans', sans-serif;
            margin: 0;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
			}
			table {
			    width: 100%;
			    border-collapse: collapse;
			    margin-bottom: 20px;
				font-family: 'Fira Sans', sans-serif;
			}
			
			
            .header {
                background-color: #e4002b;
                color: white;
                text-align: center;
                padding: 15px;
                font-size: 18px;
                font-weight: 600;
                border-radius: 0 0 40px 0;
                margin-bottom: 20px;
            }
        .container {
            width: 100%;
            max-width: 700px; /* Ancho máximo de 700px */
            margin: 0 auto;
        }
        .section-title {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 10px;
        }
        table td {
            padding: 10px;
            font-size: 14px;
        }
        .table td {
            border: 1px solid #ddd;
        }        
        table th {
            background-color: #e4002b;
            color: white;
            padding: 10px;
            font-weight: 600;
            border: 1px solid #ddd;
            text-align: center;
        }
        .input-box {
            border: none;
            background-color: #f5f5f5;
            padding: 5px;
            width: 100%;
            box-sizing: border-box;
            
        }
        
        .total {
                font-size: 24px;
                font-weight: bold;
                color: #D32F2F;
                text-align: center;
                margin-top: 20px;
            }

        .small-note {
            font-size: 12px;
            color: #666;
            text-align: center;
            margin-top: 10px;
        }
        
        .small-note2 {
            background-color: #e0e3e5; /* Color de fondo similar al de la imagen */
            padding: 10px 15px; /* Espacio interior */
            border-radius: 20px; /* Bordes redondeados */
            color: #555; /* Color del texto */
            font-size: 14px; /* Tamaño del texto */
            text-align: center; /* Centrar el texto */
        }        

        .installment {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #D32F2F;
        } 
                img {
            max-width: 100%;
            height: auto;
            text-align: center;
        }
        .internal-border {
            padding: 5px;
            border: 1px solid #ddd;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
        }
        .no-bullets {
            list-style-type: none; /* Elimina las viñetas */
            padding-left: 0;       /* Opcional: elimina la sangría de la lista */
        }
        .btn.btn-red {
            width: 40%;
            border-radius: 30px;
            font-size: 22px;
            border: 3px solid #DD0612;
            background-color: #DD0612;
            color: #ffffff; /* Asegura que el texto sea blanco */            
        }
        .btn.btn-red {
            border: 3px solid #DD0612;
        }
        .btn-red, a.inverse.btn-red, .inverse a.btn-red {
            background-color: #DD0612;
        }
        .btn, a.btn {
            display: inline-block;
            color: #ffffff;
            padding: 11px 18px;
            margin-bottom: 7px;
            margin-right: 5px;
            font-size: 15px;
            font-weight: 900;
            letter-spacing: 1px;
            vertical-align: middle;
            white-space: pre-line;
            text-align: center;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            cursor: pointer;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }
        
        .swal2-popup {
            font-size: 1.5rem !important;
        }


.pricing-table {
    border-collapse: collapse;
    width: auto;
}

.price-cell {
    text-align: center;
    
}

.description-cell {
    padding-left: 10px;
    vertical-align: top;
}

.price-box {
    display: flex;
    border-radius: 8px;
    align-items: baseline;
    justify-content: center;
    border: 2px solid #E2002F;
    border-radius: 8px;
    padding: 10px;
}

.currency {
    font-size: 20px;
    font-weight: bold;
    margin-right: 5px;
}

.amount {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.installment-description {
    font-size: 18px;
    color: #555;
    margin: 0;
}

.include-igv {
    color: #333;
    font-weight: bold;
    font-size: 12px;
}

.installment-highlight {
    font-size: 16px;
    color: #E2002F;
    font-weight: bold;
    margin: 0;
}
.plus-cell {
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
}

.highlight {
    font-size: 20px;
    color: #E2002F;
    font-weight: bold;
}

.installment-period {
    font-size: 14px;
    color: #E2002F;
    font-weight: 200;
}

		</style>	
				<body>	
    				<?php echo $html; ?>	
                    
        <!-- ========================= SCRIPTS ============================== -->
        
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/jquery1.11.2.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/bootstrap.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/bootstrap-select.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/jquery.easing.1.3.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/wow.min.js"></script>
        <script src="<?= $baseUrl ?>/public/assets/clientesverisure/js/custom.js"></script>
		<!-- Toastr -->
		<script src="<?= $baseUrl ?>/public/js/pages/plugins/toastr/toastr.min.js"></script>
		<!-- Otros -->
		<script type="text/javascript" src="https://static-content.vnforapps.com/v2/js/checkout.js" charset="UTF-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
		
		<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
		
		
<script type="text/javascript">                    
            $(function() {
            
                $('#btn_enviar').on('click', function () { console.log("hola");
                        // Verificar si los checkboxes están seleccionados
                        
                        if (!$('#acepto-condiciones').is(':checked') || !$('#acepto-politica').is(':checked') || !$('#acepto-promociones').is(':checked')) {
                            // Mostrar alerta si algún checkbox no está seleccionado
                            Swal.fire({
                                icon: 'warning',
                                title: 'Faltan condiciones',
                                text: 'Debe aceptar todas las condiciones antes de continuar.',
                                confirmButtonText: 'Aceptar'
                            });
                        } else {
                            // Todos los checkboxes están seleccionados, realizar la acción
                            var datos = {
                                idventa: <?php echo json_encode($idVentaEncriptada); ?>,
                                // Capturando los datos de facturación y contratación
                                ncontrato: "<?php echo $dataVenta['NContrato']; ?>",
                                dni_ruc: "<?php echo ltrim($dataVenta['DocumentoScoring'], '0'); ?>",
                                titular_contrato: "<?php echo $dataVenta['NombreScoring']; ?>",
                                direccion_instalacion: "<?php echo strtoupper($dataVenta['Direccion']); ?>",
                                tipo_comprobante: "<?php echo $dataVenta['TipoComprobante']; ?>",
                                fecha_contrato: "<?php echo $dataVenta['fechainstalacionver']; ?>",
                                correo_facturacion: "<?php echo strtoupper($dataVenta['Correo']); ?>",
                                telefono_autorizado: "<?php echo $dataVenta['movil']; ?>",
                                cuota_monitoreo: "<?php echo number_format($montoCuota, 2); ?>",
                                cuota_con_descuento: "<?php echo number_format(($baseCuota + $dataVenta['TotalCuotaMonitoreo']), 2); ?>",
                                descuento_forma_pago: "<?php echo number_format($descuentoFormaPagoCuota, 2) ?>",
                                costo_instalacion: "<?php echo number_format($totalInstalacion, 2); ?>",
                                pago_inicial: "<?php echo number_format(($dataVenta['PrecioKit'] + $dataVenta['TotalExtra']), 2); ?>",
                                cuotas_pai: "<?php echo $cuotas; ?>",
                                pai: "<?php echo $dataVenta['PAI']; ?>",
                                monto_pai: "<?php echo number_format($montoPAI, 2); ?>",
                                forma_pago: "<?php echo isset($nombresOpciones[$dataVenta['FormaPagoCuota']]) ? $nombresOpciones[$dataVenta['FormaPagoCuota']] : 'Desconocida'; ?>",
                                regalos: "<?php echo ucfirst($textoDetalleRegalo); ?>",
                                oferta_cuota: "<?php echo isset($nombresDescuento[$dataVenta['dsctCuota']]) ? $nombresDescuento[$dataVenta['dsctCuota']] : null; ?>",
                                acepto_condiciones: $('#acepto-condiciones').is(':checked'),
                                acepto_politica: $('#acepto-politica').is(':checked'),
                                acepto_promociones: $('#acepto-promociones').is(':checked')                              
                                
                            };
                            // Aquí podrías agregar tu lógica AJAX
                            $.ajax({
                                type: "POST",
                                // url: './Controller/ControllerHojaCertificacion.php',
                                url: "<?= $baseUrl ?>/enviar-hoja-certificacion",
                                data: datos, 
                                dataType: "Json",
                                success: function(response) {
                                    
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Formulario enviado',
                                        text: 'Las condiciones han sido aceptadas y el formulario ha sido enviado con éxito.',
                                        confirmButtonText: 'Aceptar'
                                    });
                                },
                                error: function() {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: 'Ocurrió un problema al enviar el formulario.',
                                        confirmButtonText: 'Aceptar'
                                    });
                                }
                            });
                        }
                    });  
                     
            });                    
</script>

				</body>
			</html>
	