// {} Librerías e importaciones

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

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

// !
import "./caja/cuentas.js";
import "./caja/prestamos.js";
import "./caja/documentos.js";

// {}
(async () => {

  // ! Declaración de variables
  let
		peticion = {},
		campo = {
			id_cliente: window.aplicacion.campo.mascara.id_cliente,
			id_medio_pago: formulario_cuentas.id_medio_pago,
			monto: window.aplicacion.campo.mascara[formulario_cuentas.monto.id]
		},
		boton = { desglose: formulario_cuentas.boton_desglose },
    tabla = {
			cheques: {
				elemento: $(tabla_cheques),
				clase: new Tabla({
					tabla: tabla_cheques,
					datos: {
						peticion: {
							ruta: window.aplicacion.enlace + '/ejecutar',
							parametro: {
								procedimiento: 'p_traer_cheques_documento',
								// id_documento: () => !id_documento.value ? -1 : id_documento.value
							}
						}
					},
					configuracion: { dom: `t`, pageLength: -1 }
				})
			},
			billetes: {
				elemento: $(tabla_billetes),
				clase: new Tabla({
					tabla: tabla_billetes,
					datos: {
						peticion: {
							ruta: window.aplicacion.enlace + '/ejecutar',
							parametro: {
								procedimiento: 'p_traer_registros_combinados',
								renglon: 'BILLETES'
							}
						}
					},
					configuracion: { dom: `t`, pageLength: -1 }
				})
			}
    },
		ventana = {
			desglose: {
				elemento: ventana_desglose,
				contenedor: ventana_desglose.firstElementChild,
				boton: {
					limpiar: ventana_desglose.querySelector('.modal-footer .btn-warning')
				}
			}
		},
		formulario = {
			actual: formulario_cuentas,
			funcion: {
				limpiar: () => {

					formulario_cuentas.id_cuenta.innerHTML = '';
					formulario_cuentas.id_tipo_documento.innerHTML = '';

					formulario_cuentas.id_cuenta.disabled = true;
					formulario_cuentas.id_tipo_documento.disabled = true;

					$([id_cliente, formulario_prestamos]).trigger('reset')

				}
			}
		},
		fila = {}
	;

  // !
	$('table').on('draw.dt', function(evento) {

		evento.id = evento.tabla.id.replace('tabla_', '');

		if (!tabla[evento.id])
			return
		;

		evento.tabla.clase  = tabla[evento.id].clase;
		tabla[evento.id] = evento.tabla

	});

  // !
  await tabla.cheques.clase.inicializar();

  // !
  await tabla.billetes.clase.inicializar();

  // !
  $(id_cliente).focusout(function(evento) {

    // +
    if (!this.value)
      return formulario.funcion.limpiar()
		;

    // + Condición para verificar si la
    // + petición existe y cancelarla
    peticion.actual && peticion.actual.abort();

    // + Petición hacía el
    // + controlador 'traerRegistros'
    peticion.actual = $.ajax({
      url: window.aplicacion.enlace + '/ejecutar',
      data: {
				0: 0,
        procedimiento: 'p_traer_unico_registro',
        renglon: 'CLIENTE',
				filtro: 'CLIENTES_CUENTAS',
        id_renglon: this.value
      },
      beforeSend: function(peticion, configuracion) { formulario.funcion.limpiar() },
      success: function(respuesta, estado, peticion) {

				if (!respuesta.length)
					return
				;

				respuesta = respuesta[0];

				campo.id_cliente.value = respuesta.id_cliente;
				cliente.value = respuesta.cliente

			},
      error: function(peticion, estado) {},
      complete: function(peticion, estado) {}
    })

  });

	// !
	$('.list-group-item').on('shown.bs.tab', function(evento) {

		evento.ventana = document.querySelector('.tab-pane.active.show')
		formulario.actual = evento.ventana.querySelector('form');

		if (!formulario.actual)
			return
		;

		boton_guardar.setAttribute('form', formulario.actual.id);
		boton_limpiar.setAttribute('form', formulario.actual.id);

		campo.id_medio_pago = formulario.actual.id_medio_pago;
		campo.monto = window.aplicacion.campo.mascara[formulario.actual.monto.id];

		boton.desglose = formulario.actual.boton_desglose

	});

	// !
	$('[name=id_medio_pago]').change(function(evento) {

		if (this.value === 'CHEQUE') {

			evento.ventana = {
				contenedor: {
					clases: { agregar: 'modal-xl', eliminar: 'modal-md' }
				},
				elementos: {
					mostrar: [boton.desglose, formulario_desglose.firstElementChild, tabla.cheques.contenedor],
					ocultar: [tabla.billetes.contenedor]
				},
				abrir: true
			}

		} else if (this.value === 'EFECTIVO') {

			evento.ventana = {
				contenedor: {
					clases: { agregar: 'modal-md', eliminar: 'modal-xl' }
				},
				elementos: {
					mostrar: [boton.desglose, tabla.billetes.contenedor],
					ocultar: [formulario_desglose.firstElementChild, tabla.cheques.contenedor]
				},
				abrir: Number(window.aplicacion.configuracion.abrir_desglose_efectivo)
			}

		} else
			return boton.desglose.classList.add('d-none')
		;

		ventana.desglose.contenedor.classList.add(evento.ventana.contenedor.clases.agregar);
		ventana.desglose.contenedor.classList.remove(evento.ventana.contenedor.clases.eliminar);

		evento.ventana.elementos.mostrar.forEach(elemento => elemento.classList.remove('d-none'));
		evento.ventana.elementos.ocultar.forEach(elemento => elemento.classList.add('d-none'));

		evento.ventana.abrir && boton.desglose.click()

	});

	// !
	$(boton_agregar).click(function(evento) {

		// +
		let datos_cheque = {
			numero_cheque: numero_cheque.value,
			id_banco: Number($(id_banco).val()),
			banco: $('#id_banco option:selected').text().trim(),
			monto: Number(montoCheque.value.replaceAll(',','')),
			beneficiario: beneficiarioCheque.value
		},
		ventana = {
			emergente: { mensaje: '' }
		},
		formulario = {
			campos : { validar: $(`[name="numero_cheque"], [name="id_banco"], [name="monto"], [name="beneficiario"]`).removeClass('is-invalid') }
		}

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

		// +
		$(this).find('.is-invalid').removeClass('is-invalid');

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

		if(!datos_cheque.numero_cheque)
		{
			ventana.emergente.mensaje = 'NO PUEDES DEJAR EL NUMERO DE CHEQUE VACÍO.'

			window.aplicacion.peticion.formulario.campo.invalido = $('#numero_cheque')
		}
		else if(!datos_cheque.id_banco)
		{
			ventana.emergente.mensaje = 'NO PUEDES DEJAR EL BANCO VACÍO.'

			window.aplicacion.peticion.formulario.campo.invalido = $('#id_banco')

		}
		else if(!datos_cheque.beneficiario)
		{
			ventana.emergente.mensaje = 'NO PUEDES DEJAR EL BENEFICIARIO VACÍO.'

			window.aplicacion.peticion.formulario.campo.invalido = $('#beneficiario')
		}
		else if(!datos_cheque.monto || datos_cheque.monto < 0 )
		{
			ventana.emergente.mensaje = 'NO PUEDES DEJAR EL MONTO EN BLANCO.'

			window.aplicacion.peticion.formulario.campo.invalido = $('#montoCheque')

		}

		// +
		if (formulario.campos.validar.is(window.aplicacion.peticion.formulario.campo.invalido)) {

			window.aplicacion.peticion.formulario.campo.invalido.addClass('is-invalid');

			window.aplicacion.peticion.formulario.campo.invalido =
				window.aplicacion.peticion.formulario.campo.invalido.first()
			;

			$(ventanaEmergenteAlerta).find('.modal-body p').text(ventana.emergente.mensaje);

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

		}

		// +
		fila = $(`#tabla_cheques tbody .numero_cheque:contains(${numero_cheque.value})`);

		if(fila.length > 0 && fila[0].textContent === numero_cheque.value) {

			tabla.cheques.instancia.row(fila).data(datos_cheque).draw(false);

			formulario_desglose.reset();

			return false
		}

		tabla.cheques.instancia.row.add(datos_cheque).draw(false);

		formulario_desglose.reset();

		campo.monto.value = tabla.cheques.instancia.column('[data-columna-nombre=monto]').footer().textContent

	});

	// !
	$(ventana.desglose.boton.limpiar).click(function(evento) {

		campo.monto.typedValue = 0;

		if (campo.id_medio_pago.value === 'CHEQUE') {

			formulario_desglose.reset();

			tabla.cheques.instancia.clear().draw(false)

		} else if (campo.id_medio_pago.value === 'EFECTIVO') {

			tabla.billetes.instancia.rows().data().each((fila, indice) => {

				fila.cantidad = '0';
				fila.monto = '0.00';

				tabla.billetes.instancia.row(indice).data(fila)

			});

			tabla.billetes.columna.monto.pie.elemento.textContent = '0.00'

		}

	});

	// !
	$(tabla.billetes.elemento).find('tbody').on('change', 'tr', function(evento) {

		evento.tabla.instancia
			.cell(this._DT_RowIndex, '[data-columna-nombre=monto]')
			.data(
				formatoNumerico(evento.tabla.fila.datos.cantidad * evento.tabla.fila.datos.valor, 2)
			)
		;

		campo.monto.typedValue = evento.tabla.columna.monto.pie.total();

		evento.tabla.columna.monto.pie.elemento.textContent = campo.monto.value

	});

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

		evento.target.nodeName === 'FORM' &&
		ventana.desglose.boton.limpiar.click()

	});

	// !
	$(boton_guardar).click(function (evento) {

		evento.formulario = {
			parametros: parametros(formulario.actual)
		}

		if (campo.id_medio_pago.value === 'CHEQUE')
			evento.tabla = { instancia: tabla.cheques.instancia }
		else if (campo.id_medio_pago.value === 'EFECTIVO')
			evento.tabla = { instancia: tabla.billetes.instancia }
		;

		evento.tabla &&
		evento.formulario.parametros.append(
			'json_detalle_desglose',
			JSON.stringify(evento.tabla.instancia.data().toArray().map(valor => ({
				numero_cheque: valor.numero_cheque ?? '',
				id_banco: Number(valor.id_banco ?? 0),
				monto: Number(valor.monto.replaceAll(',', '') ?? 0),
				beneficiario: valor.beneficiario ?? '',
				id_billete: Number(valor.id_billete ?? 0),
				cantidad: Number(valor.cantidad ?? 0)
			})))
		);

		window.aplicacion.peticion.formulario.parametro = evento.formulario.parametros

	});

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

		configuracion.parametros = new URLSearchParams(configuracion.url);

    if (!peticion.responseJSON)
      return
    ;

    peticion.respuesta = peticion.responseJSON[0];

		if (configuracion.parametros.get('procedimiento') === 'p_traer_filtros')
			switch (configuracion.parametros.get('renglon')) {

				case 'CUENTAS': formulario.actual[4]?.focus(); break;

				case 'TIPOS_DOCUMENTOS': formulario.actual.id_tipo_documento.focus(); break;

			}

	})

})()
