@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( !is_null(\Session::get('status')) )
<div class="row">
	<div class="col-12">
		<div class="alert alert-success" role="alert"> <p>{{ \Session::get('status') }}</p></div>
	</div>
</div>
@endif

@if( !is_null(\Session::get('error')) )
<div class="row">
	<div class="col-12">
		<div class="alert alert-error" role="alert"> <p>{{ \Session::get('error') }}</p></div>
	</div>
</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>
										</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>
			<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>.</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>
			{!! html()->form('POST')
				->class('form-horizontal')
				->name('form-disponibilidad-sujeto-pasivo')
				->id('form-disponibilidad-sujeto-pasivo')
				->open() !!}
			<div class="modal-footer">
				{!! html()->button('Cambiar estado')
					->class('btn btn-primary')
					->type('submit') !!}
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
			</div>
			{!! html()->form()->close() !!}
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<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