@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.tools.index') }}">Herramientas Administrativas</a></li>
                <li class="breadcrumb-item active" aria-current="page">Disponibilidad sujetos pasivos</li>
            </ol>
        </nav>

		@if(Auth::user()->root || Auth::user()->hasRol('admin') )
		<h2 class="destacado mb-5">Disponibilidad de sujetos pasivos</h2>

		<div class="row">
			<div class="col-12">
				<p>Con esta herramienta podrá visualizar los sujetos pasivos que se encuentran disponibles o los que se encuentran fuera de la oficina. Además, podrá cambiar la disponibilidad de este asignando un sujeto activo disponible como fuera de la oficina y viceversa. </p>
				<p><b>Si el sujeto pasivo tiene más de un cargo vigente tendrá que cambiar cada uno de ellos individualmente.</b></p>
			</div>
		</div>
		<br>

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

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


		<div class="row">
			<div class="col-12">

				{!! html()->form('GET', url('admin/tools/disponibilidad'))
				->class('form-horizontal')
				->name('form-disponibilidad_sujetos_pasivos')
				->open()
			!!}

					<div class="row">
						<div class="col-6">
						{!! html()->label('Institución', 'institucion')
							->class('form-label') !!}

						{!! html()->select('institucion',
			[null => 'Seleccione una opción'] + ($instituciones->all() ?? []),
			$institucion['id'] ?? ''
		)->class('')->id('institucion') !!}
						</div>
						<div class="col-6">
							<label for="pasaporte" class="form-label">Identificación</label>
							<input type="text" class="form-control mb-4" name="pasaporte" id="pasaporte" value="{{ $pasaporte ?? '' }}" placeholder="búsqueda por RUT">
						</div>
					</div>

					<br>
					<div class="row">
						<div class="col-12 mt-2 text-right">
						{!! html()->button('Filtrar')
							->class('btn btn-primary')
							->type('submit') !!}
							<a class='btn btn-outline-primary' href="/admin/tools/disponibilidad">Limpiar</a>
						</div>
					</div>

				{!! html()->form()->close() !!}
			</div>
		</div>
		<br>

		<div>
			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="nav-item">
					<a class="nav-link text-dark {{((count($sujetos_pasivos_fuera) > 0) || count($sujetos_pasivos_disponibles) == 0)?'active':''}}" href="#fuera-oficina" aria-controls="fuera-oficina" role="tab" data-bs-toggle="tab">Fuera oficina ({{$total_spf}})</a>
				</li>
				<li role="presentation" class="nav-item">
					<a class="nav-link text-dark  {{((count($sujetos_pasivos_fuera) == 0) && count($sujetos_pasivos_disponibles) > 0)?'active':''}}" href="#disponibles" aria-controls="disponibles" role="tab" data-bs-toggle="tab">Disponibles ({{$total_spd}})</a>
				</li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">

				<div role="tabpanel" class="tab-pane {{((count($sujetos_pasivos_fuera) > 0) || count($sujetos_pasivos_disponibles) == 0)?'active':''}} " id="fuera-oficina">

				@if(count($sujetos_pasivos_fuera) < 1)
					<p>No existen sujetos pasivos fuera de la oficina que cumplan con los criterios de búsqueda seleccionados</p>
				@else
					<div class="row">
						<div class="col-12">
							<h3 class="line"><b>Total fuera de la oficina: </b>{{$total_spf}}</h3>
						</div>
					</div>

					<div class="row">
						<div class="col-12 table_movil">
							<table class="table table-striped mt-0">
								<thead class="table-dark">
									<tr>
										<th scope="col">Pasaporte</th>
										<th scope="col">Nombre</th>
										<th scope="col">Cargo</th>
										<th scope="col">Institucion</th>
										<th scope="col">Estado</th>
										<th scope="col">Acción</th>
									</tr>
								</thead>
								<tbody>
									@foreach($sujetos_pasivos_fuera as $sujeto)
										<tr>
											<td>{{ $sujeto->usuario['pasaporte'] ?? '' }}</td>
											<td>
												{{
													($sujeto->usuario['nombres'] ?? null) !== null && ($sujeto->usuario['apellidos'] ?? null) !== null
													? mb_convert_case($sujeto->usuario['nombres'], MB_CASE_TITLE, "UTF-8") . ' ' . mb_convert_case($sujeto->usuario['apellidos'], MB_CASE_TITLE, "UTF-8")
													: ''
												}}
											</td>
											<td>{{ $sujeto['cargo'] ?? '' }}</td>
											<td>{{ $sujeto->institucion['nombre'] ?? '' }}</td>
											<td>
												@if(($sujeto['fuera_de_oficina'] ?? 0) == 1)
													<label class="label label-default p-2 text-center" style="width: 113px;">Fuera de la oficina</label>
												@else
													<label class="label label-success p-2 text-center" style="width: 113px;">Disponible</label>
												@endif
											</td>
											<td>
												<button type="button" class="btn btn-sm btn-outline-primary me-2 mb-2"
													onclick="cambiarEstado(
													{{ $sujeto['id'] ?? '' }},
													'{{
														($sujeto->usuario['nombres'] ?? null) !== null && ($sujeto->usuario['apellidos'] ?? null) !== null
														? mb_convert_case($sujeto->usuario['nombres'], MB_CASE_TITLE, 'UTF-8') . ' ' . mb_convert_case($sujeto->usuario['apellidos'], MB_CASE_TITLE, 'UTF-8')
														: ''
													}}',
													'{{ ($sujeto['fuera_de_oficina'] ?? 0) == 1 ? 'Fuera de la oficina' : 'Disponible' }}',
													'{{ $sujeto['cargo'] ?? '' }}'
													)">Cambiar estado</button>
											</td>
										</tr>
									@endforeach

								</tbody>
							</table>
														@if(($filtros ?? null) !== null)
								{{ $sujetos_pasivos_fuera->fragment('fuera')->appends($filtros)->links() }}
							@else
								{{ $sujetos_pasivos_fuera->fragment('fuera')->links() }}
							@endif

						</div>
					</div>

				@endif

				</div>

				<div role="tabpanel" class="tab-pane {{((count($sujetos_pasivos_fuera) == 0) && count($sujetos_pasivos_disponibles) > 0)?'active':''}}" id="disponibles">

					@if(count($sujetos_pasivos_disponibles) < 1)
						<p>No existen sujetos pasivos disponibles que cumplan con los criterios de búsqueda seleccionados</p>
					@else
						<div class="row">
							<div class="col-12">
								<h3 class="line"><b>Total disponibles: </b>{{$total_spd}}</h3>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<table class="table table-striped mt-0">
									<thead class="table-dark">
										<tr>
											<th scope="col">Pasaporte</th>
											<th scope="col">Nombre</th>
											<th scope="col">Cargo</th>
											<th scope="col">Institucion</th>
											<th scope="col">Estado</th>
											<th scope="col">Acción</th>
										</tr>
									</thead>
									<tbody>
										@foreach($sujetos_pasivos_disponibles as $sujeto)
											<tr>
												<td>{{ $sujeto->usuario['pasaporte'] ?? '' }}</td>
												<td>
													{{
														($sujeto->usuario['nombres'] ?? null) !== null && ($sujeto->usuario['apellidos'] ?? null) !== null
														? mb_convert_case($sujeto->usuario['nombres'], MB_CASE_TITLE, "UTF-8") . ' ' . mb_convert_case($sujeto->usuario['apellidos'], MB_CASE_TITLE, "UTF-8")
														: ''
													}}
												</td>
												<td>{{ $sujeto['cargo'] ?? '' }}</td>
												<td>{{ $sujeto->institucion['nombre'] ?? '' }}</td>
												<td>
													@if(($sujeto['fuera_de_oficina'] ?? 0) == 1)
														<label class="label label-default p-2 text-center" style="width: 113px;">Fuera de la oficina</label>
													@else
														<label class="label label-success p-2 text-center" style="width: 113px;">Disponible</label>
													@endif
												</td>
												<td>
													<!-- <button type="button" class="btn btn-sm btn-outline-primary me-2 mb-2"
														onclick="cambiarEstado(
														{{ $sujeto['id'] ?? '' }},
														'{{
															($sujeto->usuario['nombres'] ?? null) !== null && ($sujeto->usuario['apellidos'] ?? null) !== null
															? mb_convert_case($sujeto->usuario['nombres'], MB_CASE_TITLE, 'UTF-8') . ' ' . mb_convert_case($sujeto->usuario['apellidos'], MB_CASE_TITLE, 'UTF-8')
															: ''
														}}',
														'{{ ($sujeto['fuera_de_oficina'] ?? 0) == 1 ? 'Fuera de la oficina' : 'Disponible' }}',
														'{{ $sujeto['cargo'] ?? '' }}'
														)">Cambiar estado</button> -->
														<button type="button" class="btn btn-sm btn-outline-primary me-2 mb-2"
															onclick="cambiarEstado(
																{{ $sujeto['id'] ?? '' }},
																'{{ \Str::title($sujeto->usuario['nombres'] ?? '') }} {{ \Str::title($sujeto->usuario['apellidos'] ?? '') }}',
																'{{ ($sujeto['fuera_de_oficina'] ?? 0) == 1 ? 'Fuera de la oficina' : 'Disponible' }}',
																'{{ $sujeto['cargo'] ?? '' }}'
															)">
															Cambiar estado
														</button>
												</td>
											</tr>
										@endforeach

									</tbody>
								</table>
																@if(($filtros ?? null) !== null)
									{{ $sujetos_pasivos_disponibles->fragment('disponible')->appends($filtros)->links() }}
								@else
									{{ $sujetos_pasivos_disponibles->fragment('disponible')->links() }}
								@endif

							</div>
						</div>

					@endif

				</div>

			</div>
		</div>
		<style>
			@media (max-width: 768px) {
			.modal-dialog {
				width: 100% !important;
				margin: 1.75rem auto;
			}
		}
		</style>
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">Cambio de estado</h4>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					
					<!-- FORMULARIO NATIVO APUNTANDO A LA RUTA POST -->
					<form action="{{ route('admin.tools.disponibilidad.toggle') }}" method="POST" id="form-disponibilidad-sujeto-pasivo">
						@csrf <!-- DIRECTIVA DE SEGURIDAD OBLIGATORIA -->
						
						<!-- INPUT OCULTO PARA EL ID -->
						<input type="hidden" name="pertenencia_id" id="modal-pertenencia-id" value="">

						<div class="modal-body">
							<h5>Está seguro que desea cambiar el estado del usuario: <b><span id="nombre-usuario"></span></b> en el cargo <b><span id="cargo-usuario"></span></b>.</h5>

							<h3>
								<div id="disponible-fuera" style="display:none">
									<label class="label label-success form-label p-2 text-center">Disponible</label> <label class="fa fa-arrow-right m-5"></label> <label class="label label-default form-label p-2 text-center">Fuera de la oficina</label>
								</div>
								<div id="fuera-disponible" style="display:none">
									<label class="label label-default form-label p-2 text-center">Fuera de la oficina</label> <label class="fa fa-arrow-right m-5"></label> <label class="label label-success form-label p-2 text-center">Disponible</label>
								</div>
							</h3>
						</div>
						
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary">Cambiar estado</button>
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<style>
		.nav-tabs .nav-link {
			color: #495057 !important; /* Color gris oscuro para links inactivos */
			border-color: #6c757d !important; /* Borde gris oscuro para pestañas inactivas */
		}

		.nav-tabs .nav-link.active {
			color: #0d6efd !important; /* Color azul para link activo */
			background-color: #fff;
			border-color: #dee2e6 #dee2e6 #fff !important; /* Bordes del tab activo */
		}

		.nav-tabs .nav-link:hover {
			color: #0d6efd !important; /* Color azul en hover */
			border-color: #495057 !important; /* Borde un poco más oscuro en hover */
		}

		@media (max-width: 768px) {
			.modal-dialog {
				width: 100% !important;
				margin: 1.75rem auto;
			}
		}
		</style>
		@endif


	</div>
</div>

@endsection