@extends('layouts.admin-bloqueo-vista')
@section('titulo', 'Formulario de Inscripción')
@section('botonera')
	@include('componentes.boton-salir-con-aviso')
@endsection

@section('css')
	{!! Html::style('css/inscripcion-seguimiento.css') !!}
	{!! Html::style('css/jquery.datetimepicker.min.css') !!}

	<style type="text/css">
		/*Alineación del botón ver lista de históricos a la derecha*/
		.right-button {
			float: right;
		}
		/* START Listado de historicos */
		.input-group.item-de-lista-historico {
			margin: 4px 0;
			cursor: pointer;
		}
		.input-group.item-de-lista-historico .form-control[readonly] {
			background-color: #fff;
			cursor: pointer;
			transition: 0.25s;
		}
		.input-group.item-de-lista-historico span {
			transition: 0.25s;
		}
		.input-group.item-de-lista-historico:hover .form-control[readonly] {
			background-color: #eee;
		}
		.input-group.item-de-lista-historico:hover span {
			background-color: #fff;
		}
		/* END Listado de historicos */
		#contenedor-azul{
			position: fixed;
			width: 100%;
			z-index: 1;
		}

		#contenedor-principal{
			margin-top: 130px;
		}

		/*Muestra los inputs mas cercanos verticalmente*/
		.formulario-horizontal div {
		    margin-bottom: 1px
		}

		.formulario-horizontal .control-label {
			font-weight: 100;
		}

		.formulario-horizontal input[type=text].form-control, .formulario-horizontal select.form-control, .formulario-horizontal input[type=number].form-control{
			height: 26px;
		}

		/*aumenta el magen en el encabezado de cada sección del formulario de seguimiento*/
		.list-group-item-heading {
			margin-bottom: 12px;
		}

		input[type=checkbox] {
			vertical-align: text-top;
			height: 21px;
			width: 21px;
			margin: 2px 0 0;
			cursor: pointer;
		}

		.list-group-item {
			transition: 0.5s;
		}

		label.radio-inline {
			font-size: 12px;
		}

		.input-group-addon:last-child {
			font-size: 12px;
		}

		textarea {
			resize: none;
		}
		table.informe {
			font-size: 12px;
		}

		.input-group .form-control {
			z-index: 0;
		}
		a.list-group-item-info {
			background-color: #e8eaf6;
		}
		a.list-group-item-info:hover {
			background-color: #c5cae9;
		}
		.form-horizontal .form-group-sm .control-label {
			cursor: pointer;
		}
		select {
			cursor: pointer;
		}
		@media (min-width: 768px) {
			.nav-tabs.nav-justified>li {
			    padding: 0 20px;
			}
		}

		.nav > li > a.green:hover, .nav-tabs.nav-justified>.active>a.green {
			background-color: #66bb6a;
		}

		.nav > li > a.teal:hover, .nav-tabs.nav-justified>.active>a.teal {
			background-color: #78909c;
		}

		.nav > li > a.deep-purple:hover, .nav-tabs.nav-justified>.active>a.deep´-purple {
			background-color: #5c6bc0;
		}
		.nav-tabs.nav-justified>.active>a, .nav > li > a:hover, .nav > li > a {
			border-radius: 16px
		}
		body {
			margin-bottom: 40px;
		}
		.list-group-item-heading > small {
			font-size: 75%;
			color: #9e9e9e;
		}
		input[type=radio] {
			width: 21px;
			height: 21px;
			left: 15px;
		}

		.radio-inline {
			padding-left: 26px; /* Separación a la izquierda de el radio button y el label que lo representa */
			padding-top: 5px;
		}

		.form-horizontal .radio-inline {
			padding-top: 3px;
		}

	</style>

@endsection
@section('scripts')
	<script type="text/javascript">
		var procedencia = 'inscripcion';
		var horasPermitidas = [];
		var rutaPadre = "{{URL::to('')}}/";
		for (var h = 0; h < 24; h++) {
			for (var m = 0; m < 60; m++) {
				horasPermitidas.push(h + ':' + m);
			};
		};
	</script>
	{!! Html::script('js/ajax-cargar-paciente-con-documento.js') !!}
	{!! Html::script('js/ajax-cargar-inscripcion-programas.js') !!}
	{!! Html::script('js/ajax-validar-edad.js') !!}
	{!! Html::script('js/jquery.datetimepicker.full.js') !!}

	{{-- Script para calcular la edad por js --}}
	{!! Html::script('js/obtener-edad.js') !!}

	<script type="text/javascript">
		$( window ).load(function(){
			$('input[name=documento]').on("focus",function(){
				var valor = $('#documento').val();
					if ('input[name=documento]'!= input) {
					$('#paciente_id').val(0);
					$('#paciente_id').change();
					$('#documento').val(valor);
				}
			});

		});
		@if(Session::has('paciente_id'))
			$(window).load(function(){
				$('#alert-respuesta').fadeIn('slow', 'swing', function(){
					$(this).fadeOut(8000);
				});
				$('#paciente_id').val({{Session::get('paciente_id')}});
				window.setTimeout(function(){
					$('#paciente_id').change();
				}, 1000)
			});
		@endif
		$(document).ready(function(){
			$('#alert-success').fadeOut(8000);
			@include('componentes.script-mostrar-modal-request');
		});
	</script>

@endsection

@section('content-extra')
	<div class="row bg-info content-extra">
		<div class="container">
			{!! Form::open(['class' => 'form-horizontal']) !!}
				<div class="row">
					<div id="div-documento">
						{!! Form::label('documento', 'Documento:', ['class' => 'col-sm-1 control-label input-sm','autofocus']) !!}
						<div class="col-sm-2">
							{!! Form::text('documento', null, ['class' => 'form-control input-sm','autofocus']) !!}
						</div>
					</div>

					{!! Form::label('paciente_id', 'Paciente:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
					<div class="col-sm-3">
						{!! Form::select('paciente_id', $pacientes, null, ['class' => 'form-control input-sm']) !!}
					</div>

					{!! Form::label('programa_id', 'Programa:', ['class' => 'col-sm-1 control-label input-sm col-sm-1-original']) !!}
					<div class="col-sm-3">
						{!! Form::select('programa_id', $programas, null, ['class' => 'form-control input-sm', 'id' => 'select-programa', 'disabled' ]) !!}
					</div>
				</div>
				<hr class="compacto">
				<div class="row">
					{!! Form::label('fechaDeNacimiento', 'Fecha de Nacimiento:', ['class' => 'col-sm-1 control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('fechaDeNacimiento', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					{!! Form::label('tipoUsuario', 'Tipo Usuario:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('tipoUsuario', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					{!! Form::label('estadoCivil', 'Estado Civil:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
						<div class="col-sm-2">
							{!! Form::text('estadoCivil', null, ['class' => 'form-control input-sm', 'readonly']) !!}
						</div>

					{!! Form::label('sexo', 'Sexo:', ['class' => 'col-sm-1 control-label input-sm col-sm-1-reducido']) !!}
						<div class="col-sm-2">
							{!! Form::text('sexo', null, ['class' => 'form-control input-sm', 'readonly']) !!}
						</div>

					{!! Form::label('ocupacion', 'Ocupación:', ['class' => 'col-sm-1 control-label input-sm']) !!}
						<div class="col-sm-2">
							{!! Form::text('ocupacion', null, ['class' => 'form-control input-sm', 'readonly']) !!}
						</div>
					{!! Form::label('direccion', 'Dirección:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('direccion', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					{!! Form::label('telefono1', 'Tel 1:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('telefono1', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					{!! Form::label('telefono2', 'Tel 2:', ['class' => 'col-sm-1 col-sm-1-original col-sm-1-reducido control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('telefono2', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					{!! Form::label('sisben', 'Sisben:', ['class' => 'col-sm-1 control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('sisben', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					{!! Form::label('edad_actual', 'Edad actual:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
					<div class="col-sm-3">
						{!! Form::text('edad_actual', null, ['class' => 'form-control input-sm', 'readonly']) !!}
					</div>

					<div id="btn-editar-paciente" class="col-sm-4">

					</div>
				</div>
			{!! Form::close() !!}
		</div>
	</div>
@endsection

@section('content')
	{{-- modals --}}
	<div id="alert-respuesta" class="alert alert-darger alert-dismissible" style="display:none" role="alert">
		<!--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
		<div id="contenido-alert"></div>
	</div>
	@include('componentes.modal-salir')
	@include('alerts.request')

	<div id="modal-confirmar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  		<div class="modal-dialog modal-sm" role="document">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        			<h4 class="modal-title">Advertencia</h4>
     			</div>
	      		<div class="modal-body">
	        		<p>¿Realmente deseas abandonar la inscripción del paciente actual?</p>
	      		</div>
	      		<div class="modal-footer">
	        		<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="desbloquear()">Aceptar</button>
	        		<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
	      		</div>
	    	</div><!-- /.modal-content -->
	  	</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	{!! Form::open(['route' => 'inscripcion.store', 'class' => 'form-horizontal', 'id' => 'formulario']) !!}
		<div id="div-programa"></div>
	{!! Form::close() !!}
@endsection


@section('scripts')
	<script type="text/javascript">
		var procedencia = 'inscripcion';
		var horasPermitidas = [];
		var rutaPadre = "{{URL::to('')}}/";
		for (var h = 0; h < 24; h++) {
			for (var m = 0; m < 60; m++) {
				horasPermitidas.push(h + ':' + m);
			};
		};
	</script>
	{{-- {!! Html::script('js/ajax-cargar-paciente-con-documento.js') !!}
	{!! Html::script('js/ajax-cargar-inscripcion-programas.js') !!}
	{!! Html::script('js/ajax-validar-edad.js') !!}
	{!! Html::script('js/jquery.datetimepicker.full.js') !!}

	{{-- Script para calcular la edad por js --}}
	{{-- {!! Html::script('js/obtener-edad.js') !!} --}} --}}

	<script type="text/javascript">
		$( window ).load(function(){
			$('input[name=documento]').on("focus",function(){
				var valor = $('#documento').val();
					if ('input[name=documento]'!= input) {
					$('#paciente_id').val(0);
					$('#paciente_id').change();
					$('#documento').val(valor);
				}
			});

		});
		@if(Session::has('paciente_id'))
			$(window).load(function(){
				$('#alert-respuesta').fadeIn('slow', 'swing', function(){
					$(this).fadeOut(8000);
				});
				$('#paciente_id').val({{Session::get('paciente_id')}});
				window.setTimeout(function(){
					$('#paciente_id').change();
				}, 1000)
			});
		@endif
		$(document).ready(function(){
			$('#alert-success').fadeOut(8000);
			@include('componentes.script-mostrar-modal-request');
		});
	</script>

@endsection