@extends('layouts.admin-bloqueo-vista')
@section('titulo')
	Seguimiento - "{{ $formularioNombre }}"</small>
@endsection

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

	{{-- autocomplete --}}
	{!! Html::style('css/jquery-ui.theme.min.css') !!}
	{!! Html::style('css/jquery-ui.structure.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-tabs.nav-justified>li>a {
			border-radius: 6px;
		}

		/*Botón inscripción*/
		.nav-tabs.nav-justified>li>a.green {
			background-color: #a5d6a7;
			color: #fff;
		}
		.nav > li > a.green:hover {
			background-color: #4caf50;
		}
		.nav-tabs.nav-justified>.active>a.green {
			background-color: #388e3c;
		}

		/*Botón histórico*/
		.nav-tabs.nav-justified>li>a.teal {
			background-color: #ffcc80;
			color: #fff;
		}
		.nav > li > a.teal:hover {
			background-color: #ff9800;
		}
		.nav-tabs.nav-justified>.active>a.teal {
			background-color: #f57c00;
		}

		/* Botón Actual */
		.nav-tabs.nav-justified>li>a.deep-purple {
			background-color: #9fa8da;
			color: #fff;
		}
		.nav > li > a.deep-purple:hover {
			background-color: #3f51b5;
		}
		.nav-tabs.nav-justified>.active>a.deep-purple {
			background-color: #303f9f;
		}

		a > h4 > small {
			color: #fff;
		}

		/* Clases para el color de los formularios */
		#seccion-actual a.list-group-item {
			background-color: #e8eaf6;
			border-color: #c5cae9;
			transition: .5s;
		}

		#seccion a.list-group-item {
			background-color: #e8f5e9 ;
			border-color: #a5d6a7;
			transition: .5s;
		}

		/* Seccion histórico */
		#seccion .table-bordered {
			background-color: #fff3e0;
			border-color: #ffcc80;
		}

		/* filas striped */
		#seccion .table-striped>tbody>tr:nth-of-type(odd) {
			background-color: #fff3e0;
			border-color: #ffcc80;
			transition: .5s;
		}

		#seccion .table-striped>tbody>tr:nth-of-type(odd):hover {
			background-color: #fff;
		}

		/* filas normales */
		#seccion .table-bordered>tbody>tr>td {
			border-color: #ffcc80;
			transition: .5s;
		}

		#seccion .table>thead:first-child>tr:first-child>th {
			border-color: #ffcc80;
		}

		#seccion-actual a.list-group-item:hover, #seccion a.list-group-item:hover {
			background-color: #fafafa;
		}

		.nav-tabs.nav-justified>.active>a, .nav > li > a:hover, .nav > li > a {
			border-radius: 16px
		}
		.modal-lg {
			width: 90%;
		}
		.row_form_in_modal div {
			padding-right: 0px;
		}

		/* AUTOCOMPLETE IN BOTTSTRAP MODAL */
		.ui-menu .ui-menu-item {
		  font-size: 12px;
		}
		.ui-autocomplete {
		  z-index: 1510 !important;
		}

		.checkbox label {
		    font-size: 12px;
		    line-height: 2;
		    float: right;
		}

		.checkbox label input[type=checkbox] {
			margin-left: -24px;
		}


	</style>
@endsection

@section('botonera')
	{{-- Si se encuentra revisando un seguimiento deshabilitado --}}
	@if($inscripcion != null)
		@include('componentes.boton-volver-a-la-busqueda-de-paciente')
		@include('componentes.boton-salir-con-aviso')
	@endif
@endsection

@section('content-extra')
<div class="row bg-info content-extra">
	<div class="container">
		{!! Form::model($pacienteSolicitado, ['class' => 'form-horizontal']) !!}
			<div class="row">
				<div id="div-documento">
					{!! Form::label('documento', 'Documento:', ['class' => 'col-sm-1 control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::text('documento', null, ['class' => 'form-control input-sm']) !!}
					</div>
				</div>
				{!! Form::label('nombre', 'Paciente:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
				<div class="col-sm-3">
					{!! Form::text('nombre', null, ['class' => 'form-control input-sm']) !!}
				</div>
			</div>
			<hr class="compacto">
			<div class="row">
				{!! Form::label('nacimiento', 'Fecha de Nacimiento:', ['class' => 'col-sm-1 control-label input-sm']) !!}
				<div class="col-sm-2">
					{!! Form::text('nacimiento', null, ['class' => 'form-control input-sm', 'readonly']) !!}
				</div>

				{!! Form::label('tipo_usuario', 'Tipo Usuario:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
				<div class="col-sm-2">
					{!! Form::select('tipo_usuario', array(
						'co' => 'Contributivo',
						'su' => 'Subsidiado',
						'vi' => 'Vinculado',
						'pa' => 'Particular',
						'ot' => 'Otro',
						'dc' => 'Desplazado Contributivo',
						'ds' => 'Desplazado Subsidiado',
						'dv' => 'Desplazado Vinculado'
					), null,  ['class' => 'form-control input-sm', 'disabled']) !!}
				</div>

				{!! Form::label('estado_civil', 'Estado Civil:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
					<div class="col-sm-2">
						{!! Form::select('estado_civil', array(
							'so' => 'Soltero',
							'ca' => 'Casado',
							'vi' => 'Viudo',
							'se' => 'Separado',
							'un' => 'Union Libre',
							'ot' => 'Otro'
						), null,  ['class' => 'form-control input-sm', 'disabled']) !!}
					</div>

				{!! Form::label('sexo', 'Sexo:', ['class' => 'col-sm-1 control-label input-sm col-sm-1-reducido']) !!}
					<div class="col-sm-2">
						{!! Form::select('sexo', [
							'm' => 'Masculino',
							'f' => 'Femenino',
							'i' => 'Indeterminado'
						], null, ['class' => 'form-control input-sm', 'disabled']) !!}
					</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('telefono_1', 'Tel 1:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
				<div class="col-sm-2">
					{!! Form::text('telefono_1', null, ['class' => 'form-control input-sm', 'readonly']) !!}
				</div>

				{!! Form::label('telefono_2', '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('telefono_2', 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', 'Edad actual:', ['class' => 'col-sm-1 col-sm-1-original control-label input-sm']) !!}
				<div class="col-sm-3">
					{!! Form::text('edad', null, ['class' => 'form-control input-sm', 'readonly']) !!}
				</div>
			</div>
		{!! Form::close() !!}
	</div>
</div>
@endsection

@section('content')
	{{-- modals --}}
	@if($inscripcion != null)
		@include('componentes.modal-salir')
	@endif
	@include('componentes.modal-volver-a-la-busqueda-de-paciente')

	{{-- Modal agregar medicamento --}}
	<div id="modal_medicamentos" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" 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" id="myModalLabel">Agregar medicamentos</h4>
				</div>
				<div class="modal-body">
					<div class="form-group form-group-sm">

						<div class="row row_form_in_modal">

							<div class="col-md-2" style="width: 8%">
								{!! Form::label('codigo', 'COD') !!}
								{!! Form::select('codigo', $medicamentos['cod'], null, ['class' => 'form-control', 'id' => 'medicamento_cod']) !!}
							</div>

							<div id="form_group_medicamento" class="col-md-2" style="width: 20%">
								{!! Form::label('nombre', 'Nombre', ['class' => 'control-label']) !!}
								{!! Form::text('nombre', null, ['class' => 'form-control', 'autocomplete' => 'off', 'id' => 'medicamento_nombre']) !!}
							</div>

							<div class="col-md-2" style="width: 8%">
								{!! Form::label('cantidad', 'Cantidad') !!}
								{!! Form::number('cantidad', null, ['autocomplete' => 'off', 'class' => 'form-control', 'min' => 1, 'id' => 'medicamento_cantidad']) !!}
							</div>

							<div class="col-md-4" style="width: 20%">
								{!! Form::label('posología', 'Posología') !!}
								<span style="font-size: 11px"><span id="span_caracteres_posologia">0</span> / 100</span>
								{!! Form::text('posología', null, ['class' => 'form-control', 'id' => 'medicamento_posologia', 'maxlength' => 100]) !!}
							</div>
							
							<div class="col-md-4" style="width: 20%">
								{!! Form::label('duracion_tto', 'Duración') !!}
								{!! Form::text('Duración', null, ['class' => 'form-control', 'id' => 'medicamento_duracion_tto', 'maxlength' => 100]) !!}
							</div>

							<div class="col-md-2" style="width: 8%">
								{!! Form::label('cum', 'CUM') !!}
								{!! Form::select('cum', $medicamentos['cum'], null, ['class' => 'form-control', 'id' => 'medicamento_cum']) !!}
							</div>

							<div class="col-md-2" style="width: 5%">
								{!! Form::button('Agregar', ['class' => 'btn btn-sm btn-success disabled', 'style' => 'margin-top: 24px', 'id' => 'agregar_medicamento']) !!}
							</div>

						</div>

						<hr>

							<div id="div_table_medicamentos" class="col xs 12 display-none">
								<table class="table table-striped table-bordered table-hover table-condensed">
									<thead>
										<tr>
											<th>CUM</th>
											<th>COD</th>
											<th>Nombre</th>
											<th>Cantidad</th>
											<th>Posología</th>
											<th>Duracion_Tto</th>
											<th></th>
										</tr>
									</thead>
									<tbody id="tbody_medicamentos"></tbody>
								</table>
							</div>

					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">Capturar</button>
					<button type="button" class="btn btn-danger" data-toggle="modal" href="#modal_verificar_eliminar_todos_los_medicamentos">Eliminar todos</button>
					<p id="yamid"></p>
				</div>
			</div>
		</div>
	</div>

	<div id="modal_verificar_eliminar_todos_los_medicamentos" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<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" id="myModalLabel">Advertencia</h4>
				</div>
				<div class="modal-body">
					<p>¿Realmente desea eliminar todos los medicamentos capturados?</p>
				</div>
				<div class="modal-footer">
					<button id="cancelar_medicamentos" type="button" class="btn btn-danger" data-dismiss="modal">Aceptar</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
					<p id="yamid"></p>
				</div>
			</div>
		</div>
	</div>

	{{-- Modal agregar procedimientos --}}
	<div id="modal_procedimientos" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" 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" id="myModalLabel">Agregar procedimientos</h4>
				</div>
				<div class="modal-body">
					<div class="form-group form-group-sm">

						<div class="row row_form_in_modal">

							<div class="col-md-2" style="width: 17%">
								{!! Form::label('cups', 'CUPS') !!}
								{!! Form::select('cups', $procedimientos['cups'], null, ['class' => 'form-control', 'id' => 'procedimiento_cups']) !!}
							</div>

							<div id="form_group_procedimiento" class="col-md-2" style="width: 30%">
								{!! Form::label('nombre', 'Nombre', ['class' => 'control-label']) !!}
								{!! Form::text('nombre', null, ['class' => 'form-control', 'autocomplete' => 'off', 'id' => 'procedimiento_nombre']) !!}
							</div>

							<div class="col-md-2" style="width: 8%">
								{!! Form::label('cantidad', 'Cantidad') !!}
								{!! Form::number('cantidad', null, ['autocomplete' => 'off', 'class' => 'form-control', 'min' => 1, 'id' => 'procedimiento_cantidad']) !!}
							</div>

							<div class="col-md-4" style="width: 35%">
								{!! Form::label('observaciones', 'Observaciones') !!}
								<span style="font-size: 11px"><span id="span_caracteres_observaciones">0</span> / 100</span>
								{!! Form::text('observaciones', null, ['class' => 'form-control', 'id' => 'procedimiento_observaciones', 'maxlength' => 100]) !!}
							</div>

							<div class="col-md-2" style="width: 10%">
								{!! Form::button('Agregar', ['class' => 'btn btn-sm btn-success disabled', 'style' => 'margin-top: 24px', 'id' => 'agregar_procedimiento']) !!}
							</div>

						</div>

						<hr>

							<div id="div_table_procedimientos" class="col xs 12 ">
								<table class="table table-striped table-bordered table-hover table-condensed">
									<thead>
										<tr>
											<th>CUPS</th>
											<th>Nombre</th>
											<th>Cantidad</th>
											<th>Observaciones</th>
											<th></th>
										</tr>
									</thead>
									<tbody id="tbody_procedimientos"></tbody>
								</table>
							</div>

					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">Capturar</button>
					<button type="button" class="btn btn-danger" data-toggle="modal" href="#modal_verificar_eliminar_todos_los_procedimientos">Eliminar todos</button>
					<p id="yamid"></p>
				</div>
			</div>
		</div>
	</div>

	<div id="modal_verificar_eliminar_todos_los_procedimientos" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<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" id="myModalLabel">Advertencia</h4>
				</div>
				<div class="modal-body">
					<p>¿Realmente desea eliminar todos los procedimientos capturados?</p>
				</div>
				<div class="modal-footer">
					<button id="cancelar_procedimientos" type="button" class="btn btn-danger" data-dismiss="modal">Aceptar</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
					<p id="yamid"></p>
				</div>
			</div>
		</div>
	</div>

	{{-- Modal agregar Remisiones --}}
	<div id="modal_remisiones" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" 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" id="myModalLabel">Agregar Remisiones</h4>
				</div>
				<div class="modal-body">
					<div class="form-group form-group-sm">

						<div class="row row_form_in_modal">
							<div class="col-md-2" style="width: 10%">
								<div >
									<label style="display: block;">
										{!! Form::radio('tipo', 'Remision', true) !!}
										Remision
									</label style="display: block;">
									<label >
										{!! Form::radio('tipo', 'ContraRemision') !!}
										ContraRemision
									</label>
									<label style="display: block;">
										{!! Form::radio('tipo', 'InterConsulta') !!}
										InterConsulta
									</label>
								</div>
							</div>

							<div class="col-md-2" style="width: 20%">
								{!! Form::label('destino', 'destino') !!}
								{!! Form::text('destino', null, ['class' => 'form-control', 'autocomplete' => 'off', 'id' => 'remision_destino']) !!}
							</div>

							<div class="col-md-2" style="width: 10%">
								{!! Form::label('especialidades', 'especialidades') !!}
								{!! Form::select('nombre', $especialidades, null, ['class' => 'form-control', 'id' => 'especialidades_nombre']) !!}
							</div>

							<div class="col-md-2" style="width: 20%">
								{!! Form::label('servicio', 'Servicio') !!}
								{!! Form::text('servicio', null, ['class' => 'form-control', 'autocomplete' => 'off', 'id' => 'remision_servicio']) !!}
							</div>

							<div class="col-md-2" style="width: 30%">
								{!! Form::label('ordenamiento', 'ordenamiento') !!}
								{!! Form::textarea('ordenamiento', null, ['class' => 'form-control', 'rows' => 5, 'maxlength' => 2000,'id' => 'remision_ordenamiento','required']) !!}
							</div>

							<div class="col-md-2" style="width: 5%">
								{!! Form::button('Agregar', ['class' => 'btn btn-sm btn-success', 'style' => 'margin-top: 24px', 'id' => 'agregar_remision']) !!}
							</div>

						</div>
						<hr>
							<div id="div_table_remisiones" class="col xs 12 display-none">
								<table class="table table-striped table-bordered table-hover table-condensed">
									<thead>
										<tr>
											<th>Tipo</th>
											<th>Destino</th>
											<th>Especialidad</th>
											<th>Servicio</th>
											<th>Ordenamiento</th>
										</tr>
									</thead>
									<tbody id="tbody_remisiones"></tbody>
								</table>
							</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">Capturar</button>
					<button type="button" class="btn btn-danger" data-toggle="modal" href="#modal_verificar_eliminar_todos_las_remisiones">Eliminar todos</button>
					<p id="yamid"></p>
				</div>
			</div>
		</div>
	</div>

	<input id="paciente" type="hidden" value="{{$nombreYDocumentoPaciente['paciente']}}">
	<input id="programa" type="hidden" value="{{$nombreYDocumentoPaciente['programa']}}">

	<div class="row">
		<div class="col-xs-12 form-group">
			<ul class="nav nav-tabs nav-justified">
				{{-- si la inscripción está vigente --}}
				@if($inscripcion == null)
					<li role="presentation" class="active br-primary" id="actual"><a class="deep-purple"><h4>Actual</h4></a></li>
				@endif
				<li role="presentation" id="inscripcion"><a class="green"><h4>Inscripción <small>(Solo Lectura)</small></h4></a></li>
				<li role="presentation" id="historico"><a class="teal"><h4>Histórico <small>(Solo Lectura)</small></h4></a></li>
			</ul>
		</div>
	</div>

	@if (count($errors))
		@include('alerts.request')
		<!--{{ print_r($errors) }}
		@foreach($errors->all() as $error)
			@if($error == 'El campo responsable es requerido.')
			   <li>{{ $error." " }}</li>
			@endif
		@endforeach   -->
	@endif