const listarPersonal = (selectorName) => {
	initSelect2(selectorName, baseURLRest + URI_TRABAJADORES, {title: "nombresapellidos", subtitle: "documentoidentidad"});
};

const listarTipoJustificacion = (nodeIdentifier) => {
	ajaxWebService.get(URI_JUSTIFICACION_TIPO).then((response) => {
		let data = response.data
		let html = "<option>[SELECCIONE]</option>"
		html += data.map((tipoJustificacion) => `<option value="${tipoJustificacion.id}">${tipoJustificacion.descripcion}</option>`)
		$(nodeIdentifier).html(html)
	})
}

const formControls = {
	init() {
		this.initializeRadioButton()
		this.initializeChooseFile()
		pickersNoConflict()
		initDateRangePicker("#dpRangoFechas")
	},
	initializeRadioButton() {
		$(".styled, .multiselect-container input").uniform({
			radioClass: 'choice'
		});
	},
	initializeChooseFile() {
		// Modal template
		var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' +
			'  <div class="modal-content">\n' +
			'    <div class="modal-header">\n' +
			'      <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
			'      <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\n' +
			'    </div>\n' +
			'    <div class="modal-body">\n' +
			'      <div class="floating-buttons btn-group"></div>\n' +
			'      <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
			'    </div>\n' +
			'  </div>\n' +
			'</div>\n';

		// Buttons inside zoom modal
		var previewZoomButtonClasses = {
			toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
			fullscreen: 'btn btn-default btn-icon btn-xs',
			borderless: 'btn btn-default btn-icon btn-xs',
			close: 'btn btn-default btn-icon btn-xs'
		};

		// Icons inside zoom modal classes
		var previewZoomButtonIcons = {
			prev: '<i class="icon-arrow-left32"></i>',
			next: '<i class="icon-arrow-right32"></i>',
			toggleheader: '<i class="icon-menu-open"></i>',
			fullscreen: '<i class="icon-screen-full"></i>',
			borderless: '<i class="icon-alignment-unalign"></i>',
			close: '<i class="icon-cross3"></i>'
		};

		// File actions
		var fileActionSettings = {
			zoomClass: 'btn btn-link btn-xs btn-icon',
			zoomIcon: '<i class="icon-zoomin3"></i>',
			dragClass: 'btn btn-link btn-xs btn-icon',
			dragIcon: '<i class="icon-three-bars"></i>',
			removeClass: 'btn btn-link btn-icon btn-xs',
			removeIcon: '<i class="icon-trash"></i>',
			indicatorNew: '<i class="icon-file-plus text-slate"></i>',
			indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
			indicatorError: '<i class="icon-cross2 text-danger"></i>',
			indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>'
		};


		$(".file-input-ajax").fileinput({
			uploadUrl: "http://localhost", // server upload action
			uploadAsync: true,
			maxFileCount: 5,
			initialPreview: [],
			fileActionSettings: {
				removeIcon: '<i class="icon-bin"></i>',
				removeClass: 'btn btn-link btn-xs btn-icon',
				uploadIcon: '<i class="icon-upload"></i>',
				uploadClass: 'btn btn-link btn-xs btn-icon',
				zoomIcon: '<i class="icon-zoomin3"></i>',
				zoomClass: 'btn btn-link btn-xs btn-icon',
				indicatorNew: '<i class="icon-file-plus text-slate"></i>',
				indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
				indicatorError: '<i class="icon-cross2 text-danger"></i>',
				indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>',
			},
			layoutTemplates: {
				icon: '<i class="icon-file-check"></i>',
				modal: modalTemplate
			},
			initialCaption: "Ningún archivo seleccionado",
			previewZoomButtonClasses: previewZoomButtonClasses,
			previewZoomButtonIcons: previewZoomButtonIcons
		});
	}
}

const registrarJustificacion = () => {
	let personal = $("#cboPersonal").select2('data')[0];
	let {
		id: trabajador_id,
		nombres: trabajador_nombres,
		apellidos: trabajador_apellidos,
		documentoidentidad: trabajador_documentoidentidad
	} = personal

	let daterangepicker = $("#dpRangoFechas").data('daterangepicker')
	let fecha_inicio = daterangepicker.startDate.format('DD/MM/YYYY')
	let fecha_fin = daterangepicker.endDate.format('DD/MM/YYYY')
	let tipojustificacion_id = $("#cboTipoJustificacion").val()
	let tipojustificacion_descripcion = $("#cboTipoJustificacion option:selected").text()
	let hora_ingreso = $("#txtHora").val()
	let motivo = $("#txtMotivo").val();
	let observacion = $("#txtObservacion").val()
	let numero_documentos_adjuntos = $("#txtNumeroDocumentosAdjuntos").val()
	let documentos_adjuntados = ""

	let documentosSeleccionados = $("#cfDocumentos")[0].files;

	let documentos = []
//	documentosSeleccionados.forEach((file) => {
//	})

	for (let i = 0, length = documentosSeleccionados.length; i < length; i++) {
		documentos.push({url: "https://picsum.photos/300/300/?random"})
	}

	let estado = 0

	let params = {
		trabajador_id,
		trabajador_nombres,
		trabajador_apellidos,
		trabajador_documentoidentidad,
		fecha_inicio,
		fecha_fin,
		hora_ingreso,
		tipojustificacion_id,
		tipojustificacion_descripcion,
		motivo,
		observacion,
		numero_documentos_adjuntos,
		documentos,
		estado
	}

	ajaxWebService.post(URI_JUSTIFICACION, params)
		.then((response) => {
			if (response.status) {
				swal({
					type: 'success',
					title: '¡Justificación registrada!',
					showConfirmButton: false,
					timer: 1500
				});
			}
		})
}

$(document).ready(function () {
	formControls.init()
	listarTipoJustificacion("#cboTipoJustificacion")
	listarPersonal("#cboPersonal")
	$("#btnRegistrar").click(registrarJustificacion)
});