@extends('admin.template_LFv2')

@section('content')
<div class="container">
    <div class="row">

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

<script type="application/json" id="solicitudes-audiencia-form-page-config">
@json($solicitudesAudienciaFormPageConfig)
</script>
<form id="SolicitudesAudienciaForm" name="form" novalidate class="form-horizontal" readonly onsubmit="return false;"
    @if($auxFieldEnabled ?? false) data-aux-field="{{ $auxFieldName ?? 'website' }}" @endif>
	@if($auxFieldEnabled ?? false)
	<div class="form-aux-wrapper visually-hidden" aria-hidden="true">
		<label for="form-aux-{{ $auxFieldName ?? 'website' }}">Sitio web</label>
		<input type="text" id="form-aux-{{ $auxFieldName ?? 'website' }}" name="{{ $auxFieldName ?? 'website' }}" value="" tabindex="-1" autocomplete="off" class="form-aux-input" />
	</div>
	@endif
	@if ($preview !== null && $preview && $solicitud->estado == 'aceptada')
		<a href="{{ route('imprimir', $solicitud->id) }}" target="_blank" class="btn btn-outline-dark pull-right print-hide">
			<i class="bi bi-printer"></i>
			Imprimir
		</a>
	@endif

	@if ($digitador && !$edit)
		<h2 class="destacado mb-5">Formulario para solicitar una audiencia de lobby (Ley N°20.730) (Ingreso Papel)</h2>
	@else
		<h2 class="destacado mb-5">Formulario para solicitar una audiencia de lobby (Ley N°20.730)</h2>
	@endif

	@if($digitador || $preview)
		<fieldset {{ $preview ? 'disabled' : '' }}>
			<h2 class="line">Datos de la solicitud</h2>

			<div class="form-group">
				<div class="col-lg-10">
					<div class="input-group">
						<label for="folio" class="col-lg-2 form-label label-right">Folio</label>
						<span class="input-group-text mb-2">{{ $institucion->codigo }}A{{ $edit ? $solicitud->folio->ingreso : 'P' }}</span>
						<input id="correlativo" type="text" class="form-control mb-2" name="folio" placeholder="Correlativo" required data-sanitize="true" />
					</div>
				</div>
			</div>
			<div class="form-group" >
				<div class="col-lg-10">
					<div class="input-group">
						<label for="fecha" class="col-lg-2 control-label label-right">Fecha Recepción</label>
						<span for="fecha_termino" class="input-group-text mb-2">
							<i class="bi bi-calendar"></i>
						</span>
						<input id="fecha_recepcion" type="text" class="form-control mb-2 datepicker" name="fecha" readonly placeholder="Seleccionar Fecha" required />
					</div>
				</div>
			</div>

			@if(!empty($solicitud->motivo_rechazo))
				<div class="form-group">
					<div class="col-lg-10">
						<div class="input-group">
							<label for="folio" class="col-lg-2 control-label">{{ $solicitud->estado == 'cancelada' ? 'Motivo Cancelación' : 'Motivo Rechazo' }}:</label>
							<textarea class="form-control hidden-print" rows="3" id="motivo_rechazo" name="motivo_rechazo" data-sanitize="true">
								{{$solicitud->motivo_rechazo}}
							</textarea>
						</div>
					</div>
				</div>
			@endif
		</fieldset>
	@endif

	<fieldset {{ $preview ? 'disabled' : '' }}>
		<h2 class="line">1. Receptor de la Solicitud</h2>
		@if ($closable ?? false)
			<p class="destacado-descripcion">Autoridad o funcionario con quién se solicita audiencia</p>
		@else
			<p class="destacado-descripcion">¿Con qué autoridad o funcionario desea tener audiencia?<a class="help-marker pull-right" data-bs-toggle="popover" data-placement="top" data-container="body"  data-trigger="hover"></a></p>
		@endif

		<div class="form-group">
		 	<div class="col-lg-10">
				<div class="input-group">
					<label for="" class="col-lg-2 control-label label-right">Institución</label>
					<input type="text" class="form-control mb-2" readonly value="{{ $institucion->nombre }}" />
		 		</div>
			</div>
		</div>

		<div class="form-group solicitud-cargo-field" >
			<div class="col-lg-10">
				<div class="input-group">
					<label for="cargo" class="col-lg-2 control-label label-right">Cargo</label>
					@if ($edit)
						<input id="selectEdit" type="text" class="form-control mb-2" readonly value="{{ $solicitud->pertenencia->cargo }} ({{ $solicitud->pertenencia->usuario->displayName() }})" />
					@else
						<x-sujeto-pasivo.select
							name="cargo"
							id="cargo"
							:cargos="$cargos"
							:cargos-alcalde="$cargos_alcalde"
							required
						/>
					@endif
				</div>
			</div>
		</div>
	</fieldset>

	<style>
		#SolicitudesAudienciaForm .solicitud-cargo-field .sujeto-pasivo-select {
			flex: 1 1 auto;
			width: 1%;
			min-width: 0;
		}
	</style>

	<fieldset {{ $preview ? 'disabled' : '' }} >
		<h2 class="line">2. Individualización del Solicitante</h2>
		@if ($closable ?? false)
			<p class="destacado-descripcion">Datos de la persona que solicita</p>
		@else
			<p class="destacado-descripcion">¿Cuáles son sus datos personales? Debe proporcionar su nombre completo<a class="help-marker pull-right" data-bs-toggle="popover" data-placement="top" data-container="body" data-content="" data-trigger="hover"></a></p>
		@endif

		<div class="input-group col-lg-10">
			<div class="col-12 col-lg-5">
				<div class="input-group">
					<label for="nombres" class="col-lg-4 control-label label-right">Nombres</label>
					<input id="nombres" class="form-control mb-2" name="nombres" placeholder="Nombres" type="text" required data-sanitize="true">
				</div>
			</div>
			<div class="col-12 col-lg-5">
				<div class="input-group">
					<label for="apellidos" class="col-lg-4 control-label label-right">Apellidos</label>
					<input id="apellidos" class="form-control mb-2" name="apellidos" placeholder="Apellidos" type="text" required data-sanitize="true">
				</div>
			</div>
		</div>

		<div class="input-group col-lg-10">
			<div class="col-12 col-lg-5">
				<div class="input-group">
					<label for="pasaporte" class="col-lg-4 control-label label-right">RUT/Pasaporte</label>
					<div id="pass" class="col-8">
						<input id="pasaporte" class="form-control mb-2" name="pasaporte" placeholder="RUT/Pasaporte" type="text" required>
					</div>
				</div>
			</div>
			
			<div class="col-lg-5">
				<div class="input-group">
					<label for="" class="col-lg-4 control-label label-right">País Emisor</label>
					<select name="paisEmisor" class="form-control mb-2" id="select" onchange="SolicitudesAudienciaAdmin.toggleRutValidation()" disabled>
					@foreach ($paises as $pais)
						<option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
					@endforeach
					</select>
				</div>
			</div>
		</div>

		<div class="input-group col-lg-10">
			<div class="col-12 col-lg-5">
				<div class="input-group">
					<label for="medio" class="col-lg-4 control-label label-right">Medio de contacto</label>
					<select id="medio" class="form-control mb-2" name="medio" required>
						<option value="">Seleccione uno</option>
						<option value="telefono">Teléfono</option>
						<option value="email">E-Mail</option>
					</select>
				</div>
			</div>
			
			<div class="col-12 col-lg-5">
				<div class="input-group">
					<label for="genero" class="col-lg-4 control-label label-right">Género</label>
					<select name="genero" class="form-control mb-2" id="genero" {{ ($edit && !$preview) ? '' : 'required' }}>
						<option value="">Seleccione uno</option>
						<option value="masculino">Masculino</option>
						<option value="femenino">Femenino</option>
						<option value="otro">Otro</option>
						<option value="prefiero_no_decir">Prefiero no decir</option>
					</select>
				</div>
			</div>
		</div>

		<div id="telefonoDiv" class="form-group d-none">
			<div class="col-lg-10">
				<div class="input-group">
					<label for="mediotelefono" class="col-lg-2 control-label  label-right">Teléfono</label>
					<input type="tel" id="mediotelefono" name="mediotelefono" class="form-control mb-2" inputmode="tel" autocomplete="tel" data-sanitize="tel" >
				</div>
			</div>
		</div>

		<div id="emailDiv" class="form-group d-none">
			<div class="col-lg-10">
				<div class="input-group">
					<label for="medioemail" class="col-lg-2 control-label label-right">E-Mail</label>
					<input type="email" id="medioemail" name="medioemail" class="form-control mb-2" inputmode="email" autocomplete="email" data-sanitize="email">
				</div>
			</div>
		</div>
		
		@if(!$edit)
		<div class="form-group">
			<div class="col-lg-10">
				<div class="input-group">
					<br/>
					<label id="errorAsistenteText" for="" class="col-lg-2 control-label  label-right">¿Asistirá Ud. a la audiencia?</label>
					<div class="col-lg-1">
						<input type="radio" name="asistente" onchange="SolicitudesAudienciaAdmin.asistenteChange('1')" required /> Si 
					</div>
					<div class="col-lg-1">
						<input type="radio" name="asistente" onchange="SolicitudesAudienciaAdmin.asistenteChange('0')" required /> No
					</div>
				</div>
			</div>
		</div>
		@endif
	</fieldset>

	<fieldset class="table_movil">
		<h2 class="line" id="errorInvitados">3. Individualización de los Asistentes a la audiencia o reunión</h2>
		
		<table class="table mt-5" >
			<thead class="table-dark">
				<tr>
					<th>Nombre</th>
					<th>RUT</th>
					<th>Calidad</th>
					<th>Representado</th>
					<th>Acciones</th>
				</tr>
			</thead>

			<tbody id="tbodyInvitados">
			</tbody>
		</table>

		<input class="hide" type="number" name="invitados" min="1">

		@if(!$preview)
			<div class="form-group">
				<p><span id="cargoActivoError" class="text-danger d-none">Debe asistir al menos un cargo activo</span></p>
				<br/>
				<a type="button" class="btn btn-link" onclick="SolicitudesAudienciaAdmin.openItemModal()"><i class="bi bi-plus-lg"></i> Agregar otro asistente</a>
			</div>
		@endif
	</fieldset>

	<fieldset {{ $preview ? 'disabled' : '' }}>
		<h2 class="line" id="errorMaterias">4. Materia específica a tratar en la audiencia o reunión.</h2>
		<p class="destacado-descripcion">Destinada a obtener que se adopten, o que no se adopten, las siguiente decisiones y actividades (artículo 5° ley N°20.730)
			<a class="help-marker pull-right" data-bs-toggle="popover" data-placement="top" data-container="body" data-content="" data-trigger="hover"></a>
		</p>

		<div class="form-group" >
			<div class="col-lg-10 offset-1">
				@php
					$materiasSeleccionadas = ($solicitud ?? null)?->materias?->toArray() ?? [];
				@endphp

				@foreach($materias as $i => $materia)
					@if($materia->id != 99 || (($solicitud ?? false) && in_array('99', Arr::flatten($solicitud->materias?->toArray() ?? []))))
						<div class="form-check solicitud-checkbox-row">
							<label class="form-check-label solicitud-checkbox-label">
							<input class="form-check-input solicitud-checkbox-input" type="checkbox" onchange="SolicitudesAudienciaAdmin.onMateriaChange(Number(this.value))" value="{{ $materia->id }}" {{ in_array($materia->id, $materiasSeleccionadas) ? 'checked' : '' }}> {{$materia->nombre}}
								@if($i == 0)
									<span class="d-inline-block" tabindex="0"  >
										<i class="bi bi-question-circle" data-bs-toggle="tooltip" title="Se está discutiendo un proyecto de construcción de una carretera en su región, y usted como representante de una ONG ambiental quiere presentar un estudio de impacto ambiental a la Dirección de Vialidad del Ministerio de Obras Públicas para que sea considerado."></i>
									</span>
									@elseif($i == 1)
										<span class="d-inline-block" tabindex="0"  >
											<i class="bi bi-question-circle" data-bs-toggle="tooltip" title="Se está discutiendo un proyecto de ley en la Comisión Especial del Senado que lo revisa, usted quiere reunirse con uno de los Senadores integrantes para poder entregarle su punto de vista o de la asociación que representa para que sea considerado en la modificación, aprobación o rechazo del mismo."></i>
										</span>
									@elseif($i == 2)
										<span class="d-inline-block" tabindex="0"  >
											<i class="bi bi-question-circle" data-bs-toggle="tooltip" title="Si usted quiere reunirse con la autoridad para enterarse de los programas que va a desarrollar una institución pública determinada, y usted quiere ofrecer un servicio relacionado con estos (por ejemplo: sistemas informáticos, software, sistemas de vigilancia, etc.)"></i>
										</span>
									@elseif($i == 3)
										<span class="d-inline-block" tabindex="0"  >
											<i class="bi bi-question-circle" data-bs-toggle="tooltip" title="Se está discutiendo el plan regulador de la comuna donde usted vive y quiere plantearle a la autoridad relevante su punto de vista o la de su junta de vecinos sobre temas que esa autoridad debiese considerar."></i>
										</span>
								@endif
							</label>
						</div>
					@endif
				@endforeach
			</div>
		</div>
	</fieldset>

	<fieldset {{ $preview ? 'disabled' : ''}}>
		<h2 class="line">5. Especifique las materias que desea abordar en la Audiencia</h2>

		<div class="form-group">
			<div class="input-group">
				<label for="inputEmail" class="col-lg-12 "></label>
				<div class="col-12 col-lg-12">
					<textarea id="errorReferencia" class="form-control print-hide" rows="5" name="referencia" required data-sanitize="true"></textarea>
					<p class="visible-print-block text-justify">{{ $solicitud->referencia ?? '' }}</p>
				</div>
			</div>
		</div>
	</fieldset>


	<fieldset {{ $preview ? 'disabled' : '' }}>
		<h2 class="line">6. Agregue la información adicional que desee</strong><a class="help-marker pull-right" data-bs-toggle="popover" data-placement="top" data-container="body" data-content="" data-trigger="hover"></a></h2>
		<div class="form-group">
			<div class="col-lg-12">
				<textarea class="form-control print-hide" rows="5" name="observaciones" id="textArea" data-sanitize="true"></textarea>
				<p class="visible-print-block text-justify">{{ $solicitud->folio->observaciones ?? '' }}</p>
			</div>
		</div>
	</fieldset>

	@if ($closable ?? false)
		<fieldset {{$preview ? 'disabled' : '' }}>
			<h2 class="line">7. Especifique detalles de la reunión</h2>

			<div class="form-group">
				<div class="col-lg-10">
					<div class="input-group">
						<label for="inputEmail" class="col-lg-2 control-label label-right">Forma</label>
						<select id="forma" name="forma" class="form-control mb-2" data-forma-inicial="{{ $solicitud->forma }}">
							<option value="">Seleccione una</option>
							<option value="P">Presencial</option>
							<option value="V">Videoconferencia</option>
						</select>
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-lg-10">
					<div class="input-group">
						<label for="lugar" id="lugar-label" class="col-lg-2 control-label label-right">Lugar o enlace reunión</label>
						<div class="col-12 col-lg-10">
							<textarea id="lugar" name="lugar" class="form-control mb-2" rows="2" maxlength="300" oninput="updateCharacterCount(this, 'lugar_counter')">{{ old('lugar', $solicitud->getRawOriginal('lugar') ?? '') }}</textarea>
							<small id="lugar_counter" data-always-show="1" class="text-danger d-none" style="float: right; margin-right: 8px;"></small>
						</div>
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-lg-10">
					<div class="input-group">
						<label for="inputEmail" class="col-lg-2 control-label label-right">Observaciones</label>
						<div class="col-12 col-lg-10">
							<input id="observaciones_reunion" name="observaciones_reunion" class="form-control mb-2" type="text" maxlength="100" data-sanitize="true" oninput="updateCharacterCount(this, 'observaciones_reunion_counter')" value="{{ old('observaciones_reunion', $solicitud->observaciones_reunion ?? '') }}" />
							<small id="observaciones_reunion_counter" data-always-show="1" class="text-danger d-none" style="float: right; margin-right: 8px;"></small>
						</div>
					</div>
				</div>
			</div>

			<div class="form-group" id="comuna-container">
				<div class="col-lg-10">
					<div class="input-group">
						<label for="comuna" class="col-lg-2 control-label label-right">Comuna</label>
						<select class="form-control mb-2" id="comuna" name="comuna">
							<option value="">Seleccione una comuna</option>
							@foreach ($comunas as $comuna)
								<option value="{{$comuna->id }}">{{$comuna->nombre}}</option>
							@endforeach
						</select>
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-lg-10">
					<div class="input-group">
						<label for="inputEmail" class="col-lg-2 control-label label-right">Fecha y Hora Inicio</label>
						<div class="col-12 col-lg-3">
							<div class="input-group">
								<span for="fecha_termino" class="input-group-text mb-2">
									<i class="bi bi-calendar"></i>
								</span>
								<input id="fechaCita" class="form-control mb-2 datepicker" name="fechaCita" type="text"  placeholder="Fecha"/>
							</div>
							<div>
								<p class="text-danger d-none" style="font-size: 14px;" id="mensaje-fecha">Fecha no puede ser menos a la actual</p>
								<p class="text-danger d-none" style="font-size: 14px;" id="mensaje-feriado">El dia seleccionado es Feriado</p>
							</div>
						</div>

						<div class="col-lg-1"></div>

						<div class="col-12 col-lg-3">
							<div class="input-group">
								<span for="fecha_termino" class="input-group-text mb-2">
									<i class="bi bi-clock"></i>
								</span>
								<input id="hora" class="form-control mb-2 time-picker" name="hora" type="text" placeholder="Hora" />
							</div>
							<div>
								<p class="text-danger d-none" style="font-size: 14px;" id="mensaje-hora" >Ya reservado (las sesiones son de 30m) </p>
							</div>
						</div>

						@if(!$preview)
							<div class="col-lg-3">
								<div class="input-group">
									<div class="mb-2 ms-3">
										<p class="text-muted textHorasTomadas" style="margin-bottom: 5px;">Horas ya reservadas:</p>
										<p class="horasTomadas text-muted"></p>
									</div>
								</div>
							</div>
						@endif
					</div>
				</div>
			</div>
		</fieldset>
	@endif

	<div id="errorValidacionContainer" class="form-group text-danger" class="d-none">
		<div class="col-lg-12 text-center">
			<p id="errorValidacion"></p>
		</div>
	</div>
	
	<br>
	
	<div class="form-group">
		@if(!$edit)
			<div class="col-lg-12 text-center">
				<fieldset>
					<div class="form-group mb-4">
						<label class="d-inline-flex align-items-center gap-2 solicitud-checkbox-label">
							<input id="politicasCheckbox" class="form-check-input solicitud-checkbox-input" type="checkbox" name="politicasCheckbox">
							<a href="{{ asset('files/buenas_practicas_lobby.pdf') }}" target="_blank">Declaro tener conocimiento del código de buenas prácticas para lobbistas</a>
						</label>
						<div id="mensajePolitica" class="d-none">
							<p class="text-danger">Debe confirmar tener conocimientos del código de buenas prácticas para lobbistas.</p>
						</div>
					</div>
				</fieldset>

				@if($captchaEnabled ?? false)
					@if(($captchaProvider ?? 'turnstile') === 'turnstile')
						<script src="{{ $captchaScriptUrl }}" async defer></script>
						<input type="hidden" id="lobby-captcha-token" name="captcha_token" value="">
						<script>
							window.__lobbyCaptchaToken = null;
							function onLobbyTurnstileSuccess(token) {
								window.__lobbyCaptchaToken = token;
								var el = document.getElementById('lobby-captcha-token');
								if (el) {
									el.value = token;
								}
							}
						</script>
						<div class="mb-4 d-flex justify-content-center">
							<div class="cf-turnstile"
								data-sitekey="{{ $captchaSiteKey }}"
								data-callback="onLobbyTurnstileSuccess"></div>
						</div>
					@endif
				@endif

				<button type="button" class="btn btn-lobby btn-lg" id="btnSolicitar" onclick="SolicitudesAudienciaAdmin.submitForm()">
					Solicitar
				</button>
				
				<button type="button" class="btn btn-default btn-lg border" onclick="window.history.back()">Cancelar</button>
			</div>
		@else

			@if(!\Auth::user()->hasRol('auditor', 'digitador', 'ciudadano') || \Auth::user()->root)
				<div class="col-lg-12 text-center">
					@if($preview)
						@if(($closable ?? false) || ($forwardable ?? false))

							@if($solicitud->estado != 'encomendada' && $solicitud->estado != 'rechazada' && $solicitud->estado != 'cancelada')
								<a href="{{ url('admin/solicitudes/' . $solicitud->id . '/edit') }}" class="btn btn-primary btn-lg print-hide">
									Editar Solicitud
								</a>
							@endif

							@if($solicitud->estado == 'ingresada')
								<button type="button" class="btn btn-lobby btn-lg print-hide submit-disable" onclick="SolicitudesAudienciaAdmin.submitAudienciaAprobar()">Aceptar Solicitud</button>
								<button type="button" class="btn btn-danger btn-lg print-hide submit-disable" onclick="SolicitudesAudienciaAdmin.submitAudienciaRechazar()">Rechazar Solicitud</button>
								<a class="btn btn-info btn-lg" href="