@extends('layouts.admin-bloqueo-vista')
@section('titulo', 'Lista de pacientes')
@section('css')
	<style type="text/css">
		.pagination {
			margin: 0px;
		}
		th {
			cursor: pointer;
		}
	</style>
@endsection
@section('botonera')
	@if(strstr(Auth::user()->permisos['pacientes'], 'c') || Auth::user()->id == 1)
		<a href="{!! URL::to('/paciente/create') !!}" class="btn btn-primary">Crear un nuevo Paciente</a>
	@endif
	@include('componentes.boton-salir-sin-aviso')
@endsection
@section('content')
	@include('alerts.request')
	
	<div class="row">
		{!! Form::model($filtro, ['url' => '/paciente', 'method' => 'GET']) !!}
		<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-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' => $pacientes])
		</div>
		{!! Form::close() !!}
	</div>

	<div class="row">
		<div class="col-xs-12">
			@if (count($pacientes))
				<div class="table-responsive">
					<table id='tabla-pacientes' class="table table-striped table-bordered table-hover table-condensed">
						@include('formularios.ajax-lista-pacientes')
					</table>
				</div>
			@else
				<p>Ningún resultado encontrado.</p>
			@endif
		</div>
	</div>
@endsection

@section('scripts')
	<script type="text/javascript">
	var rutaPadre = '{{URL::to("/")}}/';
	</script>
	{!! Html::script('js/ajax-ordenar-pacientes.js') !!}
	<script type="text/javascript">
		$(document).ready(function(){
			// Mostrar los mensajes alert tipo modal
			@include('componentes.script-mostrar-modal-request')

			// Ordenar la tabla de resultados
			var pacientes = {!! json_encode($pacientes->items()) !!};
			var ordenActual = { 
				'documento': false,
				'apellido_1': true,
				'apellido_2': true,
				'nombre_1': true,
				'nombre_2': true,
			};

			var sort_by = function(field, reverse, primer){
			   var key = primer ? 
			       function(x) {return primer(x[field])} : 
			       function(x) {return x[field]};

			   reverse = !reverse ? 1 : -1;

			   return function (a, b) {
			       return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
			     } 
			}

			$('th').click(function () {
				var campo = $(this).attr('id');
				ordenActual[campo] = ordenActual[campo] ? false : true;

				// Cambiar la dirección de la flecha
				$('.glyphicon').removeClass('glyphicon-chevron-down glyphicon-chevron-up');
				$('th#' + campo + '>span').addClass('glyphicon-chevron-' + (ordenActual[campo] ? 'up' : 'down'));

				pacientes = pacientes.sort(sort_by(campo, ordenActual[campo], function(a){return a.toUpperCase()}))
				
				$('tbody').html('');

				pacientes.map(function (item) {
					var tr = $('<tr/>');
					var deletedAndUpdateLink = $('<form/>', {
						method: 'POST',
						action: 'http://127.0.0.1:8080/clinica/public/paciente/' + item.id_paciente,
						'accept-charset': "UTF-8"
					});

					deletedAndUpdateLink.append($('<input/>', {
						name: "_method",
						type: "hidden",
						value: "DELETE"
					}));

					deletedAndUpdateLink.append($('<input/>', {
						name: "_token",
						type: "hidden",
						value: "{{ csrf_token() }}"
					}));

					deletedAndUpdateLink.append($('<a/>', {
						href: "http://127.0.0.1:8080/clinica/public/paciente/" + item.id_paciente + "/edit",
						class: "btn btn-primary btn-xs",
						html: "Editar",
						style: "margin-right: 4px;"
					}));

					deletedAndUpdateLink.append($('<input/>', {
						class: "btn btn-danger btn-xs",
						type: "submit",
						value: "Inhabilitar"
					}));

					tr.append($('<td/>').html(item.documento));
					tr.append($('<td/>').html(item.apellido_1));
					tr.append($('<td/>').html(item.apellido_2));
					tr.append($('<td/>').html(item.nombre_1));
					tr.append($('<td/>').html(item.nombre_2));
					tr.append($('<td/>').html(deletedAndUpdateLink));

					$('tbody').append(tr);
				});
			});
		});
	</script>
@endsection