@extends('layouts.admin')

@section('content')

<div class="container">
    <div class="row">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Inicio</a></li>
				<li class="breadcrumb-item"><a href="{{ route('admin.viajes.index') }}">Viajes</a></li>
                <li class="breadcrumb-item active" aria-current="page">Editar Viaje</li>
            </ol>
        </nav>

        @if (session('status'))
			<div class="col-12 alert alert-success mb-5">
				{{ session('status') }}
			</div>
		@endif



		@php
			$viaje = $viaje ?? null;
			$edit = $edit ?? false;
			$pertenencias = $pertenencias ?? [];
			$paises = $paises ?? [];
			$tipos = $tipos ?? [];
			$viajesTipos = $viajesTipos ?? [];
			$viajesFormPageConfig = $viajesFormPageConfig ?? [];
		@endphp
		<script type="application/json" id="viajes-form-page-config">@json($viajesFormPageConfig)</script>
		<form novalidate id="viajes-form" class="form-horizontal" name="viajes_form">
			<div id="errorBlockDiv" class="validacion">
			</div>

			<h2 class="destacado mb-3">Registro de viaje realizado</h2>

			<input type="hidden" name="_method" value="{{ $edit ? 'put' : 'post' }}" />

			<fieldset>
				<h2 class="line">Sujeto pasivo</h2>
				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-2">
							<label for="institucion" class="col-lg-2 form-label label-right">Cargo</label>
							@if (count($pertenencias) == 1)
							<select class="form-select" name="viaje[pertenencia_id]" onchange="ViajesAdmin.validateViajeFields()" required readonly>
								<option value="{{ $pertenencias[0]->id }}" selected>{{ \Str::limit($pertenencias[0]->institucion->nombre, 50) }}, {{ \Str::limit($pertenencias[0]->cargo, 50) }}</option>
							</select>
						@else
							<div class="select2-form-control-wrapper flex-grow-1">
							<select id="viaje-pertenencia-id" class="form-select" name="viaje[pertenencia_id]" onchange="ViajesAdmin.validateViajeFields()" required>
								<option value="">Seleccione un cargo</option>
								@foreach ($pertenencias as $pertenencia)
									@if (!is_null($pertenencia->usuario))
										<option value="{{ $pertenencia->id }}">{{ \Str::limit($pertenencia->institucion->nombre, 50) }}, {{ \Str::limit($pertenencia->cargo, 40) }}, {{ \Str::limit($pertenencia->usuario->nombres, 40) }} {{ \Str::limit($pertenencia->usuario->apellidos, 50) }}</option>
									@else
										<option value="{{ $pertenencia->id }}">{{ \Str::limit($pertenencia->institucion->nombre, 50) }}, {{ \Str::limit($pertenencia->cargo, 40) }}</option>
									@endif
								@endforeach
							</select>
							</div>
						@endif
						</div>
					</div>
				</div>
			</fieldset>

			<fieldset>
				<h2 class="line">Detalles del viaje</h2>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-2">
							<label for="descripcion" class="col-lg-2 form-label label-right">Destino</label>
							<input name="viaje[destino]" class="form-control" onchange="ViajesAdmin.validateViajeFields()" id="descripcion" placeholder="ej. Antofagasta, Chile" required data-sanitize="true">
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-2">
							<label for="tipo" class="col-lg-2 form-label label-right">Categoría</label>
							<select name="viaje[tipo_id]" class="form-select" onchange="ViajesAdmin.validateViajeFields()" required>
								<option value="">Seleccione categoría</option>
								@foreach ($tipos as $tipo)
									<option value="{{ $tipo->id }}">{{ $tipo->valor }}</option>
								@endforeach
						</select>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-2">
							<label for="ocasion" class="col-lg-2 form-label label-right">Objeto</label>
							<textarea name="viaje[objeto]" class="form-control" onchange="ViajesAdmin.validateViajeFields()" id="ocasion" rows="3" placeholder="ej. Invitación a Congreso de Innovación" required data-sanitize="true"></textarea>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-1">
							<label for="form-fecha-inicio" class="col-lg-2 form-label label-right">Fecha Inicio</label>
							<span class="input-group-text" id="basic-addon1"><i class="fa fa-calendar" aria-hidden="true"></i></span>
								<input name="viaje[fecha_inicio]" onchange="ViajesAdmin.validateViajeFields()" class="form-control datepicker" id="form-fecha-inicio" placeholder="Seleccionar una fecha" readonly required>
							</div>
						<div class="col-sm-10 offset-md-2">
							<p class="help-block">La fecha de inicio de viaje debe ser anterior o igual a la fecha de término. La fecha de inicio no puede ser previa a la fecha de entrada en vigencia de la Ley</p>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-1">
							<label for="form-fecha-termino" class="col-lg-2 form-label label-right">Fecha Término</label>
							<span class="input-group-text" id="basic-addon1"><i class="fa fa-calendar" aria-hidden="true"></i></span>
							<input name="viaje[fecha_termino]" onchange="ViajesAdmin.syncFechaInicioWithTermino(); ViajesAdmin.validateViajeFields()" class="form-control datepicker" id="form-fecha-termino" placeholder="Seleccionar una fecha" readonly required>
						</div>
						<div class="col-sm-10 offset-md-2">
							<p class="help-block">La fecha de término de viaje NO puede ser futura NI anterior a la fecha de inicio. La fecha de inicio no puede ser previa a la fecha de entrada en vigencia de la Ley </p>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="input-group mb-1">
							<label for="valor" class="col-lg-2 form-label label-right">Costo Total</label>
							<span class="input-group-text" id="basic-addon1"><i class="fa fa-dollar-sign" aria-hidden="true"></i></span>
							<input type="number" name="viaje[valor]" onchange="ViajesAdmin.validateViajeFields()" class="form-control" id="valor" placeholder="ej. 12345" required readonly>
						</div>
						<div class="col-sm-10 offset-md-2">
							<p class="help-block">El valor ingresado no puede ser vacio ni contener puntos separadores </p>
						</div>
					</div>
				</div>
			</fieldset>

			<fieldset>
				<h2 class="line" id="errorDesglose">Desglose</h2>

				<div class="form-group">
					<div class="col-sm-10">
						<div class="col-sm-10 offset-sm-2 table_movil">
							<table class="table mt-5">
								<thead class="table-dark">
									<tr>
										<th>#</th>
										<th>Tipo</th>
										<th>Costo</th>
										<th>Financiado por</th>
										<th></th>
									</tr>
								</thead>
							<tbody id="tbodyItems">

							</tbody>
							</table>


							<!-- Button trigger modal -->
							<a id="agregar-item-cubierto" class="btn btn-default" onclick="ViajesAdmin.openItemModal()">
								<i class="fa fa-plus" aria-hidden="true"></i> Agregar ítem cubierto
							</a>

						</div>
					</div>
				</div>

			</fieldset>

			<hr/>

			<div class="form-group">
				<div class="col-sm-10">
					<div class="col-sm-10 offset-sm-2">
						<div class="alert alert-warning" role="alert"><p>Al presionar el botón "{{$viaje !== null? ($viaje->estado == 'publicado' ? "Actualizar Publicación" : "Guardar y Publicar") : "Guardar y Publicar"}}", entiendo que
							la información registrada será remitida al Consejo para la Transparencia, en el reporte mensual consolidado, en cumplimiento del artículo 16 del decreto N°71, de 2014, del Ministerio Secretaría General
							de la Presidencia.</p>
						</div>
					</div>
				</div>
				<div id="divSubmit" class="col-sm-11" style="text-align: center;">
				</div>
			</div>
			<div id="divErrores" class="form-group text-danger">

			</div>
		</form>
		<!-- Modal Start here-->
		<div class="modal fade bs-example-modal-sm" id="loadModal" tabindex="-1"
			role="dialog" aria-hidden="true" data-backdrop="static">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-body">
						<div class="col-md-12">
							<h4>
								<span class="glyphicon glyphicon-time">
								</span> Actualizando...
							</h4>
						</div>
					</div>
				</div>
			</div>
		</div>
		<template id="gift-item-modal">
			<div class="modal fade" id="item-create-modal" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">Agregar ítem cubierto</h4>
						<button type="button" class="close" data-bs-dismiss="modal">
							<span aria-hidden="true">&times;</span>
							<span class="sr-only">Cerrar</span>
						</button>
						</div>

						<div class="modal-body">

						<form name="itemForm">
						<p> * Todos los campos son obligatorios para la definición de un item</p>

						<div id="divtipo" class="form-group">
							<label for="tipo" class="control-label">Tipo</label>

							<select name="tipo" class="form-select" onchange="ViajesAdmin.onItemTipoChange()" required>
								<option value="">Selecciona uno</option>
								@foreach ($viajesTipos as $tipo)
								<option value="{{ $tipo->id }}">{{ $tipo->valor }}</option>
								@endforeach
							</select>

						</div>
						<div id="divtitulo" class="form-group" style="display: none;">
							<label for="titulo" class="control-label">Título</label>
							<input name="titulo" class="form-control" id="titulo" placeholder="ej. Peajes" required data-sanitize="true" />
						</div>
						<div id="divvalor" class="form-group" >
							<label for="valor" class="control-label">Costo</label>
							<div class="input-group">
								<span class="input-group-text" id="basic-addon1"><i class="fa fa-dollar-sign" aria-hidden="true"></i></span>
								<input name="valor" class="form-control" id="valor" placeholder="ej. 12345" type="number" required>
							</div>
							<span class="help-block">Sin puntos separadores </span>
						</div>

						<div id="divrepresentado_tipo" class="form-group" style="padding-top: 20px;">
							<label for="representado_tipo" class="control-label">Financista</label>
							<select name="representado_tipo" class="form-select" onchange="ViajesAdmin.onRepresentadoTipoChange()" required>
								<option value="">Seleccione una opción</option>
								<option value="persona_natural">Persona Natural</option>
								<option value="persona_juridica">Persona Jurídica</option>
								<option value="otras_entidades">Otras Entidades</option>
							</select>
						</div>

						<div name="natural" style="display: none;">

							<div id="divpasaporte" class="form-group">
								<label for="pasaporte" class="control-label">Identificación</label>

								<div class="row">
									<div class="col-6">
										<div id="divpais" class="input-group identification">
											<select name="pais" class="form-select" required onchange="ViajesAdmin.toggleRutValidation(this)">
												<option value="">Seleccione Pais</option>
												<optgroup label="RUT">
													<option value="CHL" selected="item.representado.pais_id == 'CHL'">Chile</option>
												</optgroup>
												<optgroup label="Pasaporte">
																									</optgroup>
											</select>
										</div>
									</div>
									<div class="col-6">
										<div class="viaje-pasaporte-pass">
											<input name="pasaporte" class="form-control" placeholder="RUT/Pasaporte" type="text" required maxlength="32" />
										</div>
									</div>
								</div>
								<span class="help-block text-danger" id="error-pasaporte-natural" style="display: none;"></span>
							</div>

							<div id="divnombre" class="form-group">
								<label for="nombre" class="control-label">Nombre Completo</label>
								<input name="nombre" class="form-control" id="nombre" required data-sanitize="true" />
							</div>
						</div>

						<div name="juridica" style="display: none;">

							<div id="divnombre" class="form-group">
								<label for="nombre" class="control-label">Razón Social o Nombre de Fantasía</label>
								<input name="nombre" class="form-control" id="nombre" required data-sanitize="true" />
								<span class="help-block">Ingrese un nombre de mínimo cinco caracteres </span>
								<span class="help-block text-danger" id="error-nombre-juridica" style="display: none;"></span>
							</div>

							<div id="divpasaporte" class="form-group">
								<label for="pasaporte" class="control-label">Identificación</label>

								<div class="row">
									<div class="col-6">
										<div class="input-group identification">
											<select name="pais" class="form-select" required onchange="ViajesAdmin.toggleRutValidation(this)">
												<option value="">Seleccione Pais</option>
												<optgroup label="RUT">
													<option value="CHL" selected="item.representado.pais_id == 'CHL'">Chile</option>
												</optgroup>
												<optgroup label="Otros Paises">
																									</optgroup>
											</select>
										</div>
									</div>
									<div class="col-6">
										<div class="viaje-pasaporte-pass">
											<input name="pasaporte" class="form-control" placeholder="RUT/Pasaporte" type="text" required maxlength="32" />
										</div>
									</div>
								</div>
								<span class="help-block text-danger" id="error-pasaporte-juridica" style="display: none;"></span>
							</div>

						</div>
							<div name="otras_entidades" style="display: none;">

								<div class="form-group">
									<label for="nombre" class="control-label">Nombre Entidad</label>
									<input name="nombre" class="form-control" id="nombre" required data-sanitize="true" />
								</div>

								<div class="form-group">
								<label for="actividades" class="control-label">Actividades</label>
								<input name="actividades" class="form-control" id="actividades" required data-sanitize="true" />
							</div>

						</div>	

						</form>

						</div>


						<div class="modal-footer">
						<button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancelar</button>
						<button type="button" class="btn btn-primary submit-btn">Guardar</button>
						</div>
					</div>
				</div>
			</div>
		</template>

		@if (($viajesFormPageConfig['pertenenciasCount'] ?? 0) > 1)
			@push('codigoAdicionalFinalPaginaTemplateAntesDeJQueryReady')
				<link href="{{ asset('css/select2-4.1.0/select2.min.css') }}" rel="stylesheet" />
				<script src="{{ asset('js/select2-4.1.0/select2.min.js') }}"></script>
				<script src="{{ asset('js/select2-4.1.0/i18n/es.js') }}"></script>
			@endpush
		@endif

    </div>
</div>

@endsection