function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `id`,
			className: 'text-center'
		},
		{
			title: `POLICIA`,
			data: `policia_nombres`,
			className: `text-center`,
		},
		{
			title: `SEDE`,
			data: `sede_descripcion`,
			className: `text-center`,
		},
		{
			title: `HORARIO`,
			data: `horario`,
			className: 'text-center'
		},
		{
			title: `FECHA ENTRADA`,
			data: `fecha_entrada`,
			className: 'text-center'
		},
		{
			title: `MARC. ENTRADA`,
			data: `marcacion_entrada`,
			className: 'text-center'
		},
		{
			title: `MARC. SALIDA`,
			data: `marcacion_salida`,
			className: 'text-center'
		},
		{
			title: `FECHA SALIDA`,
			data: `fecha_salida`,
			className: 'text-center'
		},
		{
			title: `ROL`,
			data: `tiporol_descripcion`,
			className: 'text-center'
		},
		{
			title: `COSTO HORA`,
			data: `costo_hora`,
			className: 'text-center'
		},
		{
			title: `TIEMPO LABORADO`,
			data: `tiempo_laborado`,
			className: 'text-center'
		},
		{
			title: `MONTO`,
			data: `monto`,
			className: 'text-center'
		},
		{
			title: `DCTO POR NO MARCAR`,
			data: `descuento_no_marco`,
			className: 'text-center'
		},
		{
			title: `TIEMPO EXTRA`,
			data: `tiempo_extra`,
			className: 'text-center'
		},
		{
			title: `MONTO EXTRAS`,
			data: `monto_extras`,
			className: 'text-center'
		},
		{
			title: `ESTADO EXTRAS`,
			data: `estado_extras`,
			className: 'text-center'
		},
		{
			title: `MONTO TOTAL`,
			data: `monto_total`,
			className: 'text-center'
		},
	];

	return columns;
}

function listarPolicias(selectorName) {
	ajaxWebService.get(URI_POLICIAS).then((result) => {
		let policias = result.data;
		policias = _.orderBy(policias, p => p.nombres);
		let html = `<option value="">[TODOS]</option>`;
		policias.forEach(p => html += `<option documento_identidad="${p.dni}" value="${p.id}">${p.nombres}</option>`);
		$(`${selectorName}`).html(html);
		$('.select-search').select2();
	});
}

function listarSedes(selectorName) {
	ajaxWebService.get(URI_SEDES).then((result) => {
		let sedes = result.data;
		sedes = _.orderBy(sedes, s => s.descripcion);
		let html = `<option value="">[TODOS]</option>`;
		sedes.forEach(sede => html += `<option value="${sede.codigo}">${sede.descripcion}</option>`);
		$(`${selectorName}`).html(html);
	});
}

function defaultConfigDateRangePicker(selectorName) {
	$(selectorName).daterangepicker({
		"autoApply": true,
		"locale": {
			"format": "DD/MM/YYYY",
			"separator": " - ",
			"applyLabel": "Apply",
			"cancelLabel": "Cancel",
			"fromLabel": "From",
			"toLabel": "To",
			"customRangeLabel": "Custom",
			"weekLabel": "W",
			"daysOfWeek": [
				"Do",
				"Lu",
				"Ma",
				"Mi",
				"Ju",
				"Vi",
				"Sa"
			],
			"monthNames": [
				"Enero",
				"Febrero",
				"Marzo",
				"Abril",
				"Mayo",
				"Junio",
				"Julio",
				"Agosto",
				"Setiembre",
				"Octubre",
				"Noviembre",
				"Diciembre"
			],
			"firstDay": 1
		},
		"startDate": "17/08/2018",
		"endDate": "23/08/2018"
	}, function (start, end, label) {
//                    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
	});
	$(selectorName).datepicker('setDate', 'now');
}


function mostrarReporte(objParams = {}) {
	ajaxWebService.get(URI_POLICIA_REPORTE_MONTOS, objParams).then((response) => {
		let columns = getColumns();

		let wrapsNameDatatable = `divDatatable`;
		let classNameForDatatable = `display table table-bordered`;

		makeDatatable(
		  wrapsNameDatatable,
		  {
			  data: response.data,
			  columns
		  },
		  classNameForDatatable,
		  );
	});
}



function verReporte() {
	debugger
	let rango_fechas = $("#dpRangoFechas").val();
	let split_fechas = rango_fechas.split("-").map(f => f.trim());
	let fecha_inicio = split_fechas[0];
	let policia_nombres = $("#cboPoliciasFiltro option:selected").text();
	let sede_descripcion = $("#cboSedesFiltro option:selected").text();

	policia_nombres = policia_nombres.includes("TODOS") ? "" : policia_nombres
	sede_descripcion = sede_descripcion.includes("TODOS") ? "" : sede_descripcion

	let params = cleanQueryParams({
		fecha_entrada: fecha_inicio,
		policia_nombres,
		sede_descripcion
	});

	mostrarReporte({params});
}

$().ready(function () {
	listarPolicias("#cboPoliciasFiltro");
	listarSedes("#cboSedesFiltro");
	defaultConfigDateRangePicker("#dpRangoFechas");
	$("#btnVerTodos").click(mostrarReporte);
	$("#btnVerReporte").click(verReporte);
});