// {} Librerías e importaciones

// ! Utilidades
import { parametros } from "../../../utilidades.js";

// ! Tabla
import Tabla from "../../elementos/tabla.js";

// {}
(() => {

  // ! Declaración de variables
  let
		peticion = { actual: null },
		campo = { monto_cuota_sugerido: window.aplicacion.campo.mascara.monto_cuota_sugerido },
		tabla = {
			amortizacion: {
				elemento: $(tablaRegistros),
				clase: new Tabla({
					tabla: $(tablaRegistros),
					datos: {
						peticion: {
							ruta: '../ejecutar?procedimiento=p_traer_tabla_amortizacion',
							parametro: () => Object.fromEntries(parametros(formularioAmortizacion))
						}
					},
					configuracion: { dom: `tB`, pageLength: -1 }
				})
			},
			correo: {
				elemento: $(tablaRegistrosCorreo),
				clase: new Tabla({
					tabla: $(tablaRegistrosCorreo),
					datos: {
						peticion: {
							ruta: '../ejecutar?procedimiento=p_traer_tabla_amortizacion',
							parametro: () => Object.fromEntries(parametros(formularioAmortizacion))
						}
					},
					configuracion: {
						dom: `t`,
						pageLength: -1,
						scrollY: false,
						scrollX: false,
						paging:false
					}
				})
			}
		},
		correo = {}

	// !
	$(formularioAmortizacion).on('submit reset', function(evento) {

		if (evento.type === 'reset') {

			evento.target.nodeName === 'FORM' && $(tablaRegistros).is('.dataTable') && $(tablaRegistros).DataTable().clear().draw(false);

			return

		}

		if (
			(!document.activeElement.type && !['BODY', 'DIV'].includes(document.activeElement.tagName)) ||
			(document.activeElement.type && document.activeElement.type !== 'submit')
		)
			return
		;

		campo.monto_cuota_sugerido.value = '';

		// +
		tabla.amortizacion.clase.inicializar();

		botonEnviarCorreo.disabled = false

		setTimeout(() => {
			tabla.correo.clase.inicializar();
		},550)

	});

	$(botonEnviarCorreo).click(async function (evento) {

		if(!document.querySelector('#correo').value)
		{
			return
		}

		correo = {
			formulario: new FormData(formularioAmortizacion),
		}

		const correo_destino = correo.formulario.get('correo').split(',')

		correo.formulario.append('correo_destino',correo_destino)
		correo.formulario.append('monto_cuota_sugerido',monto_cuota_sugerido.value)
		correo.formulario.append('asunto', `TABLA DE AMORTIZACIÓN DE ${window.aplicacion.empresa.compania}`)
		correo.formulario.append('tipo_correo','amortizacion')

		enviarCorreo(correo.formulario,evento)

	});

	// !
  $(document).on('ajaxSuccess', function(evento, peticion, configuracion) {

		if (!peticion.responseJSON)
			return
		;

		campo.monto_cuota_sugerido.value = peticion.responseJSON[0]?.monto_cuota ?? '0.00'

  })

	async function enviarCorreo(request,evento) {

		let
			logotipo = window.aplicacion.empresa.logo,
			empresa = window.aplicacion.empresa.compania,
			ubicacion = window.aplicacion.empresa.direccion,
			telefono = window.aplicacion.empresa.telefono,
			rnc = window.aplicacion.empresa.rnc,
			calendario = new Date().toLocaleString(`es-419`, {
				hour12: true,
				day: '2-digit',
				month: '2-digit',
				year: 'numeric',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			}).split(', '),
			fecha = calendario[0],
			hora = calendario[1],
			paginado = '00/00',
			usuario = window.aplicacion.empresa.usuario
		;

		const printt = document.querySelector('.printt')

		if (printt.hasChildNodes()) {

			while (printt.firstChild) {
				printt.removeChild(printt.firstChild);
			}

		}

		$('.printt').append(`
			<div class="row">
				<div
					class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12"
					style="
						border: 1px solid var(--bs-primary);
						border-top: 15px solid var(--bs-primary);
						border-radius: 5px;
						padding: 5px
					"
				>
					<div class="row">

						<div
							class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8"
							style="
								border-right: 1px solid var(--bs-primary);
								align-self: center;
								padding: 5px
							"
						>

							<img
								src="${window.aplicacion.enlace}/archivos/imagenes/logotipo/${logotipo}.png"
								alt="${empresa}"
								style="width: auto; height: 80px; margin: 5px 0"
							/>

							<p>

								${empresa}

								<br />

								${ubicacion}

								<br />

								Teléfono: ${telefono}

								<br />

								RNC: ${rnc}

							</p>

						</div>

						<div
							class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4"
							style="align-self: center; padding: 5px"
						>
							<div class="row">

								<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">

									<p>

										<br />
										<br />
										<br />
										<br />
										<br />
										<br />

										Fecha:

										<br />

										Hora:

										<br />

										Usuario:

									</p>

								</div>

								<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">

									<p class="text-end">

										${fecha}

										<br />

										${hora}

										<br />

										${usuario}

									</p>

								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
		`)

		$('.printt').append(`
		<div class="row">
			<div
				class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12"
				style="
					border: 1px solid var(--bs-primary);
					border-radius: 5px;
					padding: 5px
				"
			>
				<div class="row">

					<div
						class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8"
						style="
							border-right: 1px solid var(--bs-primary);
							align-self: center;
							padding: 3px
						"
					>
						<p class="text-uppercase">

							Forma Pago: ${request.get('forma_pago')}

							<br />

							Tipo de Calculo: ${request.get('tipo_calculo')}

							<br />

							Monto Prestamo: ${request.get('monto')}

							<br />

							Gastos de cierre: ${request.get('gastos_cierre') ?? 0.00}

							<br />

							Monto Seguro: ${request.get('monto_seguro') ?? 0.00}

							<br />

							Total Prestamo: ${request.get('monto')}

						</p>

					</div>

					<div
						class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4"
						style="align-self: center; padding: 5px"
					>
						<div class="row">

							<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">

								<p class="text-uppercase">

									Tasa de Interes

									<br />

									Tasa de Comisión

									<br />

									Tasa de Seguros

									<br />

									Cantidad de cuotas

									<br />

									Monto Cuota

								</p>

							</div>

							<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">

								<p class="text-end">

									${request.get('tasa_interes')}

									<br />

									${request.get('tasa_comision') ?? 0.00}

									<br />

									${request.get('tasa_seguros')  ?? 0.00}

									<br />

									${request.get('tiempo')}

									<br />

									${request.get('monto_cuota_sugerido')}

								</p>

							</div>

						</div>
					</div>

				</div>
			</div>
		</div>
		`)

		$('.printt').append(`
			<div class="row">
				<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 bg-primary">
					<p class="text-center fs-6 text-white"> ${document.title} </p>
				</div>
			</div>
		`)

		const imagen = await canvas(document.querySelector('#tablaRegistrosCorreo_wrapper .dataTables_scroll'),{
			scale: 2,
			windowHeight: 700,
			windowWidth: 992
		});

		$('.printt').append(imagen)

		const correo = await canvas(document.querySelector('.printt'),{
			scale:4,
			windowHeight: 700,
			windowWidth: 992
		})

		const imgData = correo.toDataURL('image/png');

		const docDefinition = {
			pageSize: 'A4',
			pageMargins: [5, 5, 5, 5],
			content: [
			{
				image: imgData,
				width: 580,
				height: 500
			}
			]
		};

		const pdfDoc = pdfMake.createPdf(docDefinition);

		pdfDoc.getBlob((blob) => {
			request.append('imagen',blob)

			$.ajax({
				type: 'POST',
				url: '../correo',
				data: request,
				headers: {
					'X-CSRF-TOKEN': $('input[name="_token"]').attr('value')
				},
				dataType: 'json',
				processData: false,
				contentType: false,
				beforeSend: function () {
					$(evento.delegateTarget).prop('disabled', true);
				},
				success: function (respuesta,estado) {

					if(estado === 'success') {

						// +
						$(evento.delegateTarget).prop('disabled', false);

						// +
						$('#ventanaEmergenteAlerta .modal-header')
							.removeClass('bg-danger')
							.addClass('bg-success')
						;

						// +
						$('#ventanaEmergenteAlerta .modal-body p').text(`Correo Enviado Exitosamente`).css({
							'font-size': '16px',
							'text-align': 'center'
						});


						$(ventanaEmergenteAlerta).modal('show');

					}

				},
				error: function (respuesta,estado) {

					$(evento.delegateTarget).prop('disabled', false);
					// +
					$('#ventanaEmergenteAlerta .modal-header')
						.removeClass('bg-success')
						.addClass('bg-danger')
					;

					$('#ventanaEmergenteAlerta .modal-body p')
					.text(`Hubo un error al enviar el correo. Verifique sus datos e intente de nuevo.`);

					$(ventanaEmergenteAlerta).modal('show');

				}
			});

		})

		// correo.toBlob((blob) => {
		// 	request.append('imagen',blob)

		// 	$.ajax({
		// 		type: 'POST',
		// 		url: '../correo',
		// 		data: request,
		// 		headers: {
		// 			'X-CSRF-TOKEN': $('input[name="_token"]').attr('value')
		// 		},
		// 		dataType: 'json',
		// 		processData: false,
		// 		contentType: false,
		// 		beforeSend: function () {
		// 			$(evento.delegateTarget).prop('disabled', true);
		// 		},
		// 		success: function (respuesta,estado) {

		// 			if(estado === 'success') {

		// 				$(evento.delegateTarget).prop('disabled', false);

		// 				// +
		// 				$('#ventanaEmergenteAlerta .modal-header')
		// 					.removeClass('bg-danger')
		// 					.addClass('bg-success')
		// 				;

		// 				$('#ventanaEmergenteAlerta .modal-body p').text(`Correo Enviado Exitosamente`).addClass('fs-5 text-center');

		// 				$(ventanaEmergenteAlerta).modal('show');

		// 			}

		// 		},
		// 		error: function (respuesta,estado) {

		// 			$(evento.delegateTarget).prop('disabled', false);
		// 			// +
		// 			$('#ventanaEmergenteAlerta .modal-header')
		// 				.removeClass('bg-success')
		// 				.addClass('bg-danger')
		// 			;

		// 			$('#ventanaEmergenteAlerta .modal-body p')
		// 			.text(`Hubo un error al enviar el correo. Verifique sus datos e intente de nuevo.`);

		// 			$(ventanaEmergenteAlerta).modal('show');

		// 		}
		// 	});

		// }),'image/png','1';



	async function canvas(elemento,configuracion = {}) {

		if(!$('#tablaRegistrosCorreo').is('.dataTable'))
			return
		;

		const canvas = await html2canvas(elemento,configuracion)

		canvas.style.width = '100%';
		canvas.style.marginRight = 'auto';

		return await canvas;

	}

	}

})()
