{% extends 'base.html' %}

{% block content %}
	<div class="container-fluid" id="app">
		{% csrf_token %}
		<div class="header">
			<h1 class="header-title">Usuarios</h1>
			<nav class="" aria-label="breadcrumb">
				<ol class="breadcrumb">
				
					<li class="active breadcrumb-item" aria-current="page">
						Informe
					</li>
				</ol>
			</nav>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						<!-- <div class="card-actions float-right">
							<span class="cursor-pointer mr-1">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
									<polyline points="23 4 23 10 17 10"></polyline>
									<polyline points="1 20 1 14 7 14"></polyline>
									<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
								</svg>
							</span>
							<div class="d-inline-block dropdown">
								<a aria-haspopup="true" class="" aria-expanded="false">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<circle cx="12" cy="12" r="1">
										</circle>
										<circle cx="12" cy="5" r="1">
										</circle>  
										<circle cx="12" cy="19" r="1">
										</circle>
									</svg>
								</a>
								<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
									<button type="button" tabindex="0" role="menuitem" class="dropdown-item">Action</button>
									<button type="button" tabindex="0" role="menuitem" class="dropdown-item">Another Action</button>
									<button type="button" tabindex="0" role="menuitem" class="dropdown-item">Something else here</button>
								</div>
							</div>
						</div> -->
						<div style="float: left;margin-right: 10px;">
							<form method="GET" id="searchForm">
								{% csrf_token %}
								<select name="criterio" id="criterio" style="height: 36px; margin-right: 5px;">
									<option value="">Seleccione una opción</option>
									<option value="tipo_documento">Tipo Documento</option>
									<option value="numero_identificacion">Número Identificación</option>
									<option value="tipo_usuario">Tipo Usuario</option>
									<option value="correo_electronico">Correo Electrónico</option>
									<option value="departamento">Departamento</option>
									<option value="ciudad">Ciudad</option>
									<option value="primer_nombre">Primer Nombre</option>
									<option value="primer_apellido">Primer Apellido</option>
								</select>
								<input type="text" id="buscar" placeholder="buscar" name="buscar" autocomplete="off" style="height: 36px;" value="{{buscar}}">
								<button type="button" id="searchButton" style="width: 76px;height: 36px;border-radius:4px; background-color: #838681;color: white;border-color: #838681; margin-left: -6px;">
									Buscar
								</button>
							</form>
						</div>
						{% if request.session.login_session.tipo_persona == 'Administrador' %}
						<div style="float: left;">
							<a  href="{% url 'usuario_registro' %}" class="btn btn-primary" >
                                <i class="fa fa-plus-square"></i> Nuevo Usuario
                            </a>
						</div>
						{% endif %}

				
						<div style="float: right;">
							<a href="{% url 'reporte' %}" class="btn btn-outline boton">
								<i class="fas fa-file-excel" style="font-size: 42px; width:50px; color: #007139;">
								</i>
							</a>
						</div>	
					</div>
					<div class="card-body">
						<div style="overflow-x: auto;">
							<table class="mb-0 table" style="text-align: center;">
								<thead>
									<tr>
										<th>Tipo Documento</th>
										<th>Nombre Empresa</th>
										<th>Tipo Usuario</th>
										<th>Número de Identificación</th>
										<th>Correo</th>
										<th>Celular</th>
										<th>Primer Nombre</th>
										<th>Segundo Nombre</th>
										<th>Primer Apellido</th>
										<th>Segundo Apellido</th>
										<th>Fecha Nacimiento</th>
										<th>Fecha Expedición</th>
										<th>Departamento</th>
										<th>Ciudad</th>
										<th>Dirección</th>
										<th>Departamento del Impuesto</th>
										<th>Impuesto</th>
										<th>Documento PDF</th>
										<th>Formulario PDF</th>
										<th>Estado</th>
										<th>Acciones</th>
									</tr>
								</thead>
								<tbody>
									{% for user in page.object_list %}
									<tr>
										{% if user.usuario.tipo_documento == 'cedula' %}
										<td>Cédula</td>
										{% elif user.usuario.tipo_documento == 'cedula_extranjeria' %}
										<td>Cédula de Extranjería</td>
										{% else %}
										<td>{{user.usuario.tipo_documento}}</td>
										{% endif %}
										<td>{{user.usuario.nombre_empresa}}</td>
										<td>{{user.usuario.tipo_persona}}</td>
										<td>{{user.usuario.documento}}</td>
										<td>{{user.usuario.correo}}</td>
										<td>{{user.usuario.celular}}</td>
										<td>{{user.usuario.primer_nombre}}</td>
										<td>{{user.usuario.segundo_nombre}}</td>
										<td>{{user.usuario.primer_apellido}}</td>
										<td>{{user.usuario.segundo_apellido}}</td>
										<td>{{user.usuario.fecha_nacimiento|date:'d-m-Y'}}</td>		
										<td>{{user.usuario.fecha_expedicion|date:'d-m-Y'}}</td>	
										<td>{{user.usuario.departamento}}</td>
										<td>{{user.usuario.ciudad}}</td>
										<td>{{user.usuario.direccion}}</td>
										{% if user.departamento == NULL %}
											<td></td>
										{% else %}
											<td>{{user.departamento}}</td>
										{% endif %}
										{% if user.aplicativo == NULL %}
											<td></td>
										{% else %}
											<td>{{user.aplicativo}}</td>
										{% endif %}
										<td>
											<div class="d-inline-block dropdown" data-toggle="modal" data-target="#agregarCalendarios" onclick="showPdf('{{ user.usuario.documento_pdf }}')" style="cursor: pointer;">
												<i class="fas fa-file-pdf" style="font-size: 42px; width:50px; color: #b30b00;"></i>
											</div>
										</td>
										<td>
											<div class="d-inline-block dropdown" data-toggle="modal" data-target="#agregarCalendarios" onclick="pdfFormulario('{{ user.usuario.id }}')"  style="cursor: pointer;">
												<i class="fas fa-file-pdf" style="font-size: 42px; width:50px; color: #b30b00;"></i>
											</div>
										</td>
										<td>
											{% if user.usuario.estado == 1 %}
												<button style="border-radius: 5px;background-color: #6591dd;color: white;border-color: #165fdd;width: 68px;height: 28px;">Activo</button>	
											{% else %}
												<button style="border-radius: 5px;background-color: #6591dd;color: white;border-color: #165fdd;width: 68px;height: 28px;">Inactivo</button>	
											{% endif %}
										</td>
										<td>
											{% if user.usuario.estado == 1 %}
											<a href="{% url 'inactivar' user.usuario.id %}" class="btn btn-outline boton">
												<i   style="color: #a11212; font-size: 20px;" class="fas fa-times-circle"></i>
											</a>
											{% else %}
											<a href="{% url 'activar' user.usuario.id %}" class="btn btn-outline boton">
												<i  style="color: #05970b; font-size: 20px;" class="fas fa-check-circle"></i>
											</a>
											{% endif %}
										</td>
									</tr>
									{% endfor %}
								</tbody>
							</table>
							<!-- <div style="float: right; margin-top: 1%;">
								<button class="btn btn-primary btn-sm">
									<i class="fas fa-arrow-left" @click="listarUsuarios(-1)" style="font-size: 17px"></i>
								</button>
								<button class="btn btn-primary btn-sm">
									<i class="fas fa-arrow-right" @click="listarUsuarios(1)" style="font-size: 17px"></i>
								</button>
							</div> -->
							<div style="float: right; margin-top: 1%;">
								<!-- {% if page.has_previous %}
								<a href="{% url 'usuario.index' %}?page={{page.previous_page_number}}">
									<i class="fas fa-arrow-left" style="font-size: 17px"></i>
								</a>
							
								{% endif %}

								{% if page.has_next %}
								<a href="{% url 'usuario.index' %}?page={{page.next_page_number}}">
									<i class="fas fa-arrow-right" style="font-size: 17px"></i>
								</a>
								{% endif %}							 -->
								{% if page.has_previous %}
								<a href="javascript:void(0);" onclick="paginate({{ page.previous_page_number }})">
									<i class="fas fa-arrow-left" style="font-size: 17px"></i>
								</a>
								{% endif %}
							
								{% if page.has_next %}
								<a href="javascript:void(0);" onclick="paginate({{ page.next_page_number }})">
									<i class="fas fa-arrow-right" style="font-size: 17px"></i>
								</a>
								{% endif %}
							</div>
							<div style="float: left; margin-top: 1%;">
								{{page.number}}
							</div>							
							<br>
							<br>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="mostrar_modal" tabindex="-1" role="dialog" aria-labelledby="mostrar_modalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
			  <div class="modal-content" style="border: #909497 2px solid;">
				<div class="modal-header" style="background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px;">
				  <h5 class="modal-title text-center" id="exampleModalLabel" style="color: black;">Documento Cargado en PDF</h5>
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true" style="color: black;">&times;</span>
				  </button>
				</div>
				<div class="modal-body" id="ocultar_pdf">
				  <iframe id="pdfUrlIframe" width="100%" height="600px" style="border: none;"></iframe>
				</div>
				<div class="modal-body" id="mostrar_error" style="display: none;">
				  <h5>
					No se ha encontrado ningún documento para este usuario.
				  </h5>
				</div>
		  
				<div class="modal-footer">
				  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
				</div>
			  </div>
			</div>
		</div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
	function showPdf(pdfUrl) {
		if (!pdfUrl || pdfUrl === 'None') {
			// Mostrar el modal de error
			$('#mostrar_modal').modal('show');
			$('#ocultar_pdf').hide();
			$('#mostrar_error').show();
		} else {
			// Mostrar el PDF
			$('#mostrar_modal').modal('show');
			$('#mostrar_error').hide();
			$('#ocultar_pdf').show();
			const url = window.location.origin +'/'+ pdfUrl;
			$('#pdfUrlIframe').attr('src', url);
		}
	}

	document.getElementById('searchButton').addEventListener('click', function () {
		const criterio = document.getElementById('criterio').value;
        const buscar = document.getElementById('buscar').value;

		const baseUrl = "{% url 'usuario.index' %}";
        const queryParams = `?page=1&criterio=${encodeURIComponent(criterio)}&buscar=${encodeURIComponent(buscar)}`;
        const fullUrl = baseUrl + queryParams;

        window.location.href = fullUrl;
    });

	function paginate(pageNumber) {
        const criterio = document.getElementById('criterio').value.trim();
        const buscar = document.getElementById('buscar').value.trim();

        const baseUrl = "{% url 'usuario.index' %}";
        const queryParams = `?page=${pageNumber}&criterio=${encodeURIComponent(criterio)}&buscar=${encodeURIComponent(buscar)}`;
        const fullUrl = baseUrl + queryParams;

        window.location.href = fullUrl;
    }
	
	const criterioSeleccionado = "{{ criterio }}";

	if (criterioSeleccionado) {
		document.getElementById('criterio').value = criterioSeleccionado;
	}	
	function pdfFormulario(data){
		var url = "{% url 'pdfformulario' %}";

		document.location.href = url + "?data=" + data;
	}
</script>
{% endblock %}