@include('header')

	<link href="{{asset('css/datatables.css')}}" rel="stylesheet">
	<link href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css" rel="stylesheet">
	<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
	<link href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

	<section class="content">
		<div style="margin-bottom:15px;">
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
			<button type="button" class="btn bg-teal" data-toggle="modal" data-target="#modalBusqueda" style="float:right;"><i class="fas fa-search" style="margin-right:4px;"></i>Busqueda Avanzada</button>
		</div>

		<div class="container-fluid">
			<div class="row">
				<div class="containerCaja"></div>
			</div>
		</div>
	</section>

	<!-- Modal -->
	<div id="modalBusqueda" class="modal fade" role="dialog">
		<div class="modal-dialog" style="max-width: 1100px !important;width: 100%;">
	
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Busqueda Avanzada <span style="font-style: italic; font-size:15px; font-weight: 100; color: rgb(87, 87, 87)">(Todos los registros)</span></h4>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<table id="insumos" class="hover" style="width:100%">
							<thead>
								<tr class="tabla-pers uppercase text-sm text-yellow-500 align-middle">
									<th>Fecha</th>
									<th>Factura</th>
									<th>Concepto</th>
									<th>Viaje</th>
									<th>Pago</th>
									<th>Haber</th>
									<th>Debe</th>
									<th>Oficina</th>
									<th></th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	
		</div>
	</div>

@include('footer')

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
<script>
	$(document).ready(function() {
		var caja = new caja_View();
	})
</script>
<script>
	var table = $('#insumos').DataTable({
		responsive: true,
		autoWidth: false,
		stateSave: true,
		processing: true,
		serverSide: true,
		"ajax": "caja/datatable-historial-caja",
		"columns": [
			{data: "fecha"},
			{data: 'nro_factura'},
			{data: 'concepto'},
			{data: "id",
				render: function(row, data, dataIndex) {
					if (dataIndex.viaje == null) {
						return '';
					} else {
						return dataIndex.viaje+' ('+dataIndex.fecha_viaje+')';
					}
				}
			},
			{data: 'forma_de_pago'},
			{data: "id",
				render: function(row, data, dataIndex) {
					if (dataIndex.tipo_transaccion_id != '6' && dataIndex.tipo_transaccion_id != '7' && dataIndex.tipo_transaccion_id != '15' && dataIndex.tipo_transaccion_id != '16') {
						return '$'+dataIndex.monto;
					}
					return '';
				}
			},
			{data: "id",
				render: function(row, data, dataIndex) {
					if (dataIndex.tipo_transaccion_id == '6' || dataIndex.tipo_transaccion_id == '7' || dataIndex.tipo_transaccion_id == '15' || dataIndex.tipo_transaccion_id == '16') {
						return '$'+dataIndex.monto;
					}
					return '';
				}
			},
			{data: 'oficina'},
			{data: "id",
				render: function(row, data, dataIndex) {
					var response = '';
					return response;
				}
			},
		],
		createdRow: function(row, data, dataIndex, cells) {
			$(row).addClass('tabla-pers relative transform scale-100 text-xs py-1 border-b-2 hover-datatables cursor-default border-b border-gray-200 hover:bg-blue-200 odd');
			$(row).attr('id', 'fila'+data.id);
		},
		"fnCreatedRow": function( nRow, aData, iDataIndex ) {
			$(nRow).attr('id', aData[0]);
		},
		"order": [[ 0, "desc" ]],
		"columnDefs": [
			{ className: "columnaFechaDatatables", "targets": [ 0 ] },
			{ className: "text-center custom-clickable-row cursor-pointer", "targets": [ 1 ] },
			{ className: "exportable custom-clickable-row cursor-pointer", "targets": [ 2,3,4,5 ] },
			{ className: "text-right exportable custom-clickable-row cursor-pointer", "targets": [ 6,7 ] },
			{ className: "text-right", "targets": [ 8 ] },
			{
				"targets": [1,6,7,8],
				"orderable": false
			}
		],
		"language": {
			"lengthMenu": "Mostrar " +
							`<select class="custom-select custom-select-sm form-control form-control-sm">
								<option value='10'>10</option>
								<option value='25'>25</option>
								<option value='50'>50</option>
								<option value='100'>100</option>
								<option value='-1'>Todos</option>
							</select>` +
						" registros por página",
			"zeroRecords": "No se han encontrado Resultados.",
			"info": "Mostrando página _PAGE_ de _PAGES_ (_TOTAL_ registros)",
			"infoEmpty": "No hay registros disponibles",
			"infoFiltered": "",
			"search": "Buscar:",
			"paginate": {
				'next': "Siguiente",
				'previous': "Anterior"
			}
		}
	});
</script>
{{-- <script>
	let gastosPesosChart;
	let gastosDolaresChart;
	let gastosEurosChart;
	let gastosRealesChart;

	$(document).ready(function() {

		$('.grafico-gastos-pesos').html(
			'<div class="w-full my-6 bg-white border border-gray-200 rounded-lg p-4"><canvas id="gastosPesosChart"></canvas><a class="btn btn-block bg-teal w-full mt-4" id="botonDetallesGastosPesos" href="caja/gastos/pdf" target="_blank">Ver Detalles</a></div>'
		);
		$('.grafico-gastos-dolares').html(
			'<div class="w-full my-6 bg-white border border-gray-200 rounded-lg p-4"><canvas id="gastosDolaresChart"></canvas><a class="btn btn-block bg-teal w-full mt-4" id="botonDetallesGastosDolares" href="caja/gastos/pdf" target="_blank">Ver Detalles</a></div>'
		);
		$('.grafico-gastos-euros').html(
			'<div class="w-full my-6 bg-white border border-gray-200 rounded-lg p-4"><canvas id="gastosEurosChart"></canvas><a class="btn btn-block bg-teal w-full mt-4" id="botonDetallesGastosEuros" href="caja/gastos/pdf" target="_blank">Ver Detalles</a></div>'
		);
		$('.grafico-gastos-reales').html(
			'<div class="w-full my-6 bg-white border border-gray-200 rounded-lg p-4"><canvas id="gastosRealesChart"></canvas><a class="btn btn-block bg-teal w-full mt-4" id="botonDetallesGastosReales" href="caja/gastos/pdf" target="_blank">Ver Detalles</a></div>'
		);

		const ctxPesos = document.getElementById('gastosPesosChart');
		gastosPesosChart = new Chart(ctxPesos, {
			type: 'pie',
			data: {
				labels: ['Fijos', 'Operativos'],
				datasets: [{
					data: [0, 0],
					backgroundColor: [
						'#FF7C61',
						'#7DC6FF'
					],
					borderColor: ['#ffffff','#ffffff'],
					borderWidth: 2
				}]
			},
			options: {
				responsive: true,
				plugins: {
					legend: { position: 'top' },
					title: {
						display: true,
						text: 'Tipos de Gastos ($)'
					},
					tooltip: {
						callbacks: {
							label: function(context) {

								let value = context.raw;

								let formatted = new Intl.NumberFormat('es-AR', {
									minimumFractionDigits: 2,
									maximumFractionDigits: 2
								}).format(value);

								return '$' + formatted;
							}
						}
					}
				}
			}
		});

		const ctxDolares = document.getElementById('gastosDolaresChart');
		gastosDolaresChart = new Chart(ctxDolares, {
			type: 'pie',
			data: {
				labels: ['Fijos', 'Operativos'],
				datasets: [{
					data: [0, 0],
					backgroundColor: [
						'#FF7C61',
						'#7DC6FF'
					],
					borderColor: ['#ffffff','#ffffff'],
					borderWidth: 2
				}]
			},
			options: {
				responsive: true,
				plugins: {
					legend: { position: 'top' },
					title: {
						display: true,
						text: 'Tipos de Gastos (U$S)'
					},
					tooltip: {
						callbacks: {
							label: function(context) {

								let value = context.raw;

								let formatted = new Intl.NumberFormat('es-AR', {
									minimumFractionDigits: 2,
									maximumFractionDigits: 2
								}).format(value);

								return 'U$S' + formatted;
							}
						}
					}
				}
			}
		});

		const ctxEuros = document.getElementById('gastosEurosChart');
		gastosEurosChart = new Chart(ctxEuros, {
			type: 'pie',
			data: {
				labels: ['Fijos', 'Operativos'],
				datasets: [{
					data: [0, 0],
					backgroundColor: [
						'#FF7C61',
						'#7DC6FF'
					],
					borderColor: ['#ffffff','#ffffff'],
					borderWidth: 2
				}]
			},
			options: {
				responsive: true,
				plugins: {
					legend: { position: 'top' },
					title: {
						display: true,
						text: 'Tipos de Gastos (€)'
					},
					tooltip: {
						callbacks: {
							label: function(context) {

								let value = context.raw;

								let formatted = new Intl.NumberFormat('es-AR', {
									minimumFractionDigits: 2,
									maximumFractionDigits: 2
								}).format(value);

								return '€' + formatted;
							}
						}
					}
				}
			}
		});

		const ctxReales = document.getElementById('gastosRealesChart');
		gastosRealesChart = new Chart(ctxReales, {
			type: 'pie',
			data: {
				labels: ['Fijos', 'Operativos'],
				datasets: [{
					data: [0, 0],
					backgroundColor: [
						'#FF7C61',
						'#7DC6FF'
					],
					borderColor: ['#ffffff','#ffffff'],
					borderWidth: 2
				}]
			},
			options: {
				responsive: true,
				plugins: {
					legend: { position: 'top' },
					title: {
						display: true,
						text: 'Tipos de Gastos (R$)'
					},
					tooltip: {
						callbacks: {
							label: function(context) {

								let value = context.raw;

								let formatted = new Intl.NumberFormat('es-AR', {
									minimumFractionDigits: 2,
									maximumFractionDigits: 2
								}).format(value);

								return 'R$' + formatted;
							}
						}
					}
				}
			}
		});
	});

	function recargarGraficoGastos(date	= null) {
		$('#botonDetallesGastosPesos').attr('href', 'caja/gastos/pdf?date='+date);
		$('#botonDetallesGastosDolares').attr('href', 'caja/gastos/pdf?date='+date);
		$('#botonDetallesGastosEuros').attr('href', 'caja/gastos/pdf?date='+date);
		$('#botonDetallesGastosLibras').attr('href', 'caja/gastos/pdf?date='+date);

		$.ajax({
			url: 'caja/gastos/grafico',
			method: 'GET',
			data: {
				date: date
			},
			success: function(response) {
				if (response.gastos_fijos_pesos == 0 && response.gastos_operativos_pesos == 0) {
					$('.grafico-gastos-pesos').hide();
				} else {
					$('.grafico-gastos-pesos').show();
					gastosPesosChart.data.datasets[0].data = [
						response.gastos_fijos_pesos,
						response.gastos_operativos_pesos
					];
					gastosPesosChart.update();
				}

				if (response.gastos_fijos_dolares == 0 && response.gastos_operativos_dolares == 0) {
					$('.grafico-gastos-dolares').hide();
				} else {
					$('.grafico-gastos-dolares').show();
					gastosDolaresChart.data.datasets[0].data = [
						response.gastos_fijos_dolares,
						response.gastos_operativos_dolares
					];
					gastosDolaresChart.update();
				}

				if (response.gastos_fijos_euros == 0 && response.gastos_operativos_euros == 0) {
					$('.grafico-gastos-euros').hide();
				} else {
					$('.grafico-gastos-euros').show();
					gastosEurosChart.data.datasets[0].data = [
						response.gastos_fijos_euros,
						response.gastos_operativos_euros
					];
					gastosEurosChart.update();
				}

				if (response.gastos_fijos_reales == 0 && response.gastos_operativos_reales == 0) {
					$('.grafico-gastos-reales').hide();
				} else {
					$('.grafico-gastos-reales').show();
					gastosRealesChart.data.datasets[0].data = [
						response.gastos_fijos_reales,
						response.gastos_operativos_reales
					];
					gastosRealesChart.update();
				}
			}
		});
	}

	recargarGraficoGastos();
</script> --}}