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`,
			render: (data) => {
				return `<span class="label label-default">${data}</span>`;
			}
		},
		{
			title: `HORARIO`,
			data: `horario`,
			className: 'text-center'
		},
		{
			title: `ROL`,
			data: `tiporol_descripcion`,
			className: 'text-center',
			render: (data) => {
				let label = "";

				switch (data) {
					case "REGULAR":
						label = "label bg-slate";
						break;
					case "AMANECIDA 24H":
						label = "label bg-teal";
						break;
					case "AMANECIDA 12H":
						label = "label bg-brown";
						break;
				}
				return `<span class="${label}">${data}</span>`;
			}
		},
		{
			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: `COSTO HORA`,
			data: `costo_hora`,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data > 0) {
					label = "text-primary";
				}
				return `<span class="${label}">${data}0</span>`;
			}
		},
		{
			title: `TIEMPO LABORADO`,
			data: `tiempo_laborado`,
			className: 'text-center'
		},
		{
			title: `MONTO`,
			data: `monto`,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data > 0) {
					label = "text-primary";
				}
				return `<span class="${label}">${data}.00</span>`;
			}
		},
		{
			title: `DCTO POR NO MARCAR`,
			data: `descuento_no_marco`,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data > 0) {
					label = "text-danger";
				}
				return `<span class="${label}">${data}.00</span>`;
			}
		},
		{
			title: `TIEMPO EXTRA`,
			data: `tiempo_extra`,
			className: 'text-center'
		},
		{
			title: `MONTO EXTRAS`,
			data: `monto_extras`,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data > 0) {
					label = "text-primary";
				}
				return `<span class="${label}">${data}.00</span>`;
			}
		},
		{
			title: `ESTADO EXTRAS`,
			data: `estado_extras`,
			className: 'text-center',
			render: (data) => {
				let label = "";
				let contenido = "";

				if (data == 1) {
					label = "label label-success";
					contenido = "APROBADO";
				} else {
					label = "label label-danger";
					contenido = "SIN APROBAR";
				}
				return `<span class="${label}">${contenido}</span>`;
			}
		},
		{
			title: `MONTO TOTAL`,
			data: `monto_total`,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data > 0) {
					label = "text-primary";
				}
				return `<span class="${label}">${data}.00</span>`;
			}
		},
	];

	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 mostrarTodos(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 aplicarFiltro() {
	debugger
	let rango_fechas = $("#dpRangoFechas").val();
	let split_fechas = rango_fechas.split("-").map(f => f.trim());
	let fecha_inicio = split_fechas[0];
	let fecha_fin = split_fechas[1];
	let policia_nombres = $("#cboPoliciasFiltro option:selected").text();
	let sede_descripcion = $("#cboSedesFiltro option:selected").text();
	let intervalo_fechas = generarFechas(fecha_inicio, fecha_fin);
	policia_nombres = policia_nombres.includes("TODOS") ? "" : policia_nombres
	sede_descripcion = sede_descripcion.includes("TODOS") ? "" : sede_descripcion

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

	mostrarTodos({params});
}

$().ready(function () {
	listarPolicias("#cboPoliciasFiltro");
	listarSedes("#cboSedesFiltro");
	defaultConfigDateRangePicker("#dpRangoFechas");
	$("#btnMostrarTodos").click(mostrarTodos);
	$("#btnAplicarFiltro").click(aplicarFiltro);
});