@include('header')
	
	<section class="content">
		<div class="botoneraUser" style="float:left;">
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
		</div>
        <div class="botoneraUser" style="float:right;">
            <button class="btn bg-teal" onclick="window.location.href='../butacas-bloqueadas/exportar/excel';" title="Exportar a Excel">
                <i class="fas fa-file-excel"></i> Exportar
            </button>
        </div>

		<div class="container-fluid">
			<div class="row">
				<div class="titulo">
					<h4 style="margin-top:50px;">Bloqueos Activos</h4>
				</div>
				<div>
					<table class="table table-bordered tabla-circuitos" id="tablaBloqueosActivos" style="border: 0px;">
						<thead>
							<th class="columnas-ocultas" style="vertical-align: middle;">Fecha Bloqueo</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Usuario</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Butaca</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Habitación</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Descripción</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Viaje</th>
						</thead>
					</table>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row">
				<div class="titulo">
					<h4 style="margin-top:50px;">Bloqueos Resueltos</h4>
				</div>
				<div>
					<table class="table table-bordered tabla-circuitos" id="tablaBloqueosResueltos" style="border: 0px;">
						<thead>
							<th class="columnas-ocultas" style="vertical-align: middle;">Fecha Bloqueo</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Usuario</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Butaca</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Habitación</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Descripción</th>
							<th class="columnas-ocultas" style="vertical-align: middle;">Viaje</th>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</section>

@include('footer')

<script>
	var table = $('#tablaBloqueosActivos').DataTable({
		responsive: true,
		autoWidth: false,
		stateSave: true,
		processing: true,
		serverSide: true,
    	pageLength: 25,
		"ajax": "butacas-bloqueadas/datatable-bloqueos/activos",
		"columns": [
			{data: "created_at"},
			{data: "usuario"},
			{data: 'butaca'},
			{data: 'tipo_habitacion'},
			{data: 'descripcion'},
			{data: "viaje"},
		],
		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, "asc" ]],
		"columnDefs": [
			{ className: "text-center", "targets": [ 2 ] },
		],
		"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>
	var table = $('#tablaBloqueosResueltos').DataTable({
		responsive: true,
		autoWidth: false,
		stateSave: true,
		processing: true,
		serverSide: true,
    	pageLength: 10,
		"ajax": "butacas-bloqueadas/datatable-bloqueos/resueltos",
		"columns": [
			{data: "created_at"},
			{data: "usuario"},
			{data: 'butaca'},
			{data: 'descripcion'},
			{data: "viaje"},
		],
		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": [[ 2, "desc" ]],
		"columnDefs": [
			{ className: "text-center", "targets": [ 1 ] },
		],
		"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>