@extends('layouts.app')

@section('title',"Visitas")

@section('content')
@if (session('create'))
    <div class="alert alert-success">
        {{ session('create') }}
    </div>
@endif

<div class="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title"><i class="icon-clipboard "></i> Visitas </h5>
		<div class="header-elements">
			<div class="list-icons">
        		<a class="list-icons-item" data-action="collapse"></a>
        		<a class="list-icons-item" data-action="reload"></a>
        		<a class="list-icons-item" data-action="remove"></a>
        	</div>
    	</div>
	</div>	
	<div class="card-body">
	
	</div>
	<div class="row justify-content-center">

		<div class="col-4 "><b>Desde:</b><input type="text" id="fecha_desde" onchange="range_fechas(this); return false" placeholder="Desde:" class="form-control fecha"></div>
		<div class="col-4"><b>Hasta:</b><input type="text" id="fecha_hasta"  onchange="range_fechas(this); return false"placeholder="Hasta:"  class="form-control fecha"></div>
		
	</div>
	<div class="row mt-2">
		<div class="col-12 text-center">
			<button class="btn btn-primary" id="reset_form">Reset</button>
		</div>
	</div>

	<table class="table table-bordered table-hover datatable">
		<thead>
			<tr>
				<th>Fecha</th>
				<th>Visitante </th>
				<th>Documento</th>
				<th>Entidad</th>
				<th>Motivo</th>
				<th>Sede</th>
				<th>Empleado publico</th>
				<th>Oficina</th>
				<th>Lugar de reunion</th>
				<th>Entrada</th>
				<th>Salida</th>
				<th>Foto</th>
			</tr>
		</thead>
	</table>
</div>
<div class="response-ajax"></div>
	@section('scripts')
	<script>
		const url = "{{ url('visitas/store') }}";
		
		const columns = [
			        {data: 'fecha'},
			        {data: 'nombre'},
			        {data: 'dni'},
			        {data: 'items_json.entidad.name'},
			        {data: 'items_json.motivo.name'},
			        {data: 'items_json.sede.name'},
			        {data: 'items_json.empleado.name'},
			        {data: 'items_json.oficina.name'},
			        {data: 'lugar'},
			        {data: 'hora_entrada'},
			        {data: 'marcar'},
			        {data: 'foto'},
			    ];
		</script>
		<script src="{!! asset('assets/datatables/datatables_visitas.js') !!}"></script>
		<script src="{!! asset('assets/views_functions/visitas.js') !!}"></script>

		<script>
			const ajax_modal = (i) => {
				let id = $(i).data('id');
				$('.response-ajax').html('');
				$.ajax({
					url: '{{url("visitas/")}}/modal&'+id,
					type: 'GET',
				})
				.done(function(data) {
					$('.response-ajax').html(data);
					$('#fotomodal').modal('show');
				})
				.fail(function() {
					console.log("error");
				})
				.always(function() {
					console.log("complete");
				});
			}
			function range_fechas(i){
				$('.datatable').DataTable().ajax.reload();
			}
			const button_reset = document.querySelector('#reset_form');
			const resets = () =>{
				$('#fecha_desde').val('');
				$('#fecha_hasta').val('');
				$('.datatable').DataTable().ajax.reload();
			}
			button_reset.addEventListener('click',resets);
			$.fn.datepicker.defaults.format = "yyyy-mm-dd";
			$('.fecha').datepicker({
			    weekStart: 1,
			    daysOfWeekHighlighted: "6,0",
			    autoclose: true,
			    todayHighlight: true,
			});
		</script>
	@endsection
@endsection