@extends('layouts.admin-bloqueo-vista')

@section('titulo', 'Lista de inscripciones')

@section('css')
	<style type="text/css">
		th{cursor:pointer}
	</style>
@endsection

@section('botonera')
	<li class="form-group">
		<a href="{!! URL::to('admin') !!}" class="btn btn-warning btn-right">Salir</a>
	</li>
@endsection

@section('content')
	@include('alerts.request')

	<div class="row">
		{!! Form::model($filtro, ['url' => '/lista-de-inscripciones', 'method' => 'GET', 'id' => 'form-filtrar']) !!}
		<div class="col-xs-2">
			<div class="form-group">
				{!! Form::label('documento') !!}
				{!! Form::text('documento', null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por Documento']) !!}
			</div>
		</div>

		<div class="col-xs-3">
			<div class="form-group">
				{!! Form::label('apellido_1') !!}
				{!! Form::text('apellido_1', null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por Apellido 1']) !!}
			</div>
		</div>

		<div class="col-xs-2">
			<div class="form-group">
				{!! Form::label('apellido_2') !!}
				{!! Form::text('apellido_2', null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por Apellido 2']) !!}
			</div>
		</div>

		<div class="col-xs-3">
			<div class="form-group">
				{!! Form::label('nombre_1') !!}
				{!! Form::text('nombre_1', null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por Nombre 1']) !!}
			</div>
		</div>

		<div class="col-xs-2">
			<div class="form-group">
				{!! Form::label('nombre_2') !!}
				{!! Form::text('nombre_2', null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por Nombre 2']) !!}
			</div>
		</div>

		<div class="col-xs-2">
			<div class="form-group">
				{!! Form::label('estado', 'Estado') !!}
				{!! Form::select('estado', ['ambos' => 'Ambos',  'activa' => 'Activa', 'inactiva' => 'Inactiva'] , null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por Estado']) !!}
			</div>
		</div>

		<div class="col-xs-5">
			<div class="form-group">
				{!! Form::label('programa_id', 'Programa') !!}
				{!! Form::select('programa_id', $programas, null, ['class' => 'form-control input-sm', 'placeholder' => 'filtrar por programa']) !!}
			</div>
		</div>

		<div class="col-xs-1">
			<div class="form-group">
				<button type="submit" class="btn btn-success">Filtrar</button>
			</div>
		</div>

		<div class="col-xs-11">
			@include('pagination.default', ['paginator' => $inscripciones])
		</div>
		{!! Form::close() !!}
	</div>

	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th id="deleted_at">
					Estado
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="documento">
					Documento
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="paciente">
					Paciente
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="programa">
					Programa
					<span class="glyphicon" aria-hidden="true"></span>
				</th>
				<th id="fecha">
					Fecha
					<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
				</th>
				<td>Operaciones</td>
			</tr>
		</thead>
		<tbody>
			@include('inscripcion.forms.tbody')
		</tbody>
	</table>
@endsection

@section('scripts')
	<script type="text/javascript">
		$(document).ready(function(){
			var d='glyphicon-chevron-down';
			var u='glyphicon-chevron-up';
			var xhr=null;
			// Animar la flecha en cada <th>
			$('th').click(function(){
				var t=$(this);
				var s = t.find('span');
				var o; // orden para la consulta
				t.siblings().find('span').removeClass(u + ' ' + d);
				if(s.hasClass(d)){
					s.removeClass(d).addClass(u);
					o = 'DESC';
				}
				else{
					s.removeClass(u).addClass(d);
					o = 'ASC';
				}
				if(xhr)xhr.abort();

				var data = $('#form-filtrar').serialize();
				data += '&campo=' + t.attr('id');
				data += '&orden=' + o;

				xhr=$.ajax({
					headers:{'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')},
					url:'lista-de-inscripciones',
					data: data,
					beforeSend:function(){
						$('tbody').html('<tr><td colspan="6">Cargando ...</td></tr>');
					},
					success:function(r){
						$('tbody').html(r);
					}
				});

			});

			@include('componentes.script-mostrar-modal-request')
			
		});
	</script>


	</script>
@endsection