{% extends 'base.html' %}

{% block content %}
	<div class="container-fluid" id="app">
		{% csrf_token %}
		<div class="header">
			<h1 class="header-title">Calendario Tributario</h1>
			<nav class="" aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="active breadcrumb-item" aria-current="page">
						Calendario Tributario
					</li>
				</ol>
			</nav>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						{% if request.session.login_session.tipo_persona == 'AdminDepartamento' %}
							<div style="float: left;">
								<a  href="{% url 'calendario_tributario_registro' %}" class="btn btn-success" >
									<i class="fa fa-plus-square"></i> Registrar Calendario Trubutario
								</a>
							</div>
						{% endif %}
					</div>
					<div class="card-body">
						<div style="overflow-x: auto;">
							<table class="mb-0 table" style="text-align: center;">
								<thead>
									<tr>
										<th>Vigencia</th>
										<th>Departamento</th>
										<th>Documento</th>
										<th>Estado</th>
										<th>Acciones</th>
									</tr>
								</thead>
								<tbody>
									{% for calendario in page.object_list %}
									<tr>
										<td>{{calendario.vigencia}}</td>
										<td>{{calendario.departamento}}</td>
										<td>
											<button class="btn btn-calendario-tributario" data-toggle="modal" data-target="#modalVerPDF" data-pdf="{{ calendario.documento }}">
												<i style="color: #af0303; font-size: 35px;" class="fas fa-file-pdf"></i>
											</button>
										</td>
										<td>
											{% if calendario.estado == 1 %}
												<span style="border: 2px solid #4CAF50; border-radius: 5px; padding: 5px 10px; color: white; background-color: #A5D6A7;"> Activo </span>
											{% else %}
												<span style="border: 2px solid #F44336; border-radius: 5px; padding: 5px 10px; color: white; background-color: #FFCDD2;"> Inactivo </span>
											{% endif %}
										</td>
										<td>
											<button class="btn btn-abrir-modal" data-id="{{ calendario.id }}" data-vigencia="{{ calendario.vigencia }}" data-departamento="{{ calendario.departamento }}" data-documento="{{ calendario.documento }}"data-toggle="modal" data-target="#modalCalendario">
												<i style="color: #0353af; font-size: 20px;"  class="fas fa-edit"></i>
											</button>
											{% if calendario.estado == 1 %}
												<a href="{% url 'calendario_tributario_inactivar' calendario.id %}" class="btn btn-outline boton">
													<i   style="color: #a11212; font-size: 20px;" class="fas fa-times-circle"></i>
												</a>
											{% else %}
												<a href="{% url 'calendario_tributario_activar' calendario.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%;">
								{% if page.has_previous %}
									<a href="{% url 'calendario_tributario.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 'calendario_tributario.index' %}?page={{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>

						<!-- Modal para visualizar el PDF -->
						<div class="modal fade" id="modalVerPDF" tabindex="-1">
							<div class="modal-dialog" style="max-width: 70%; max-height: 70%;">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title">Ver Documento PDF</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<iframe id="pdfIframe" style="width: 100%; height: 500px;" frameborder="0"></iframe>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-danger border-radius" data-dismiss="modal">Cerrar</button>
									</div>
								</div>
							</div>
						</div>
						
						<!-- Modal Actualizar -->
						<div class="modal fade" id="modalCalendario" tabindex="-1">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title">Actualizar Calendario Tributario</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<form method="POST"  action="{% url 'calendario_tributario_update' %}" enctype="multipart/form-data">
										{% csrf_token %}
										<input type="hidden" id="calendario_id" name="calendario_id">
										<div class="modal-body">
											<div class="form-group">
												<label for="calendario_vigencia">Vigencia</label>
												<select id="calendario_vigencia" required class="form-control" name="calendario_vigencia">
													<option value="" selected>Seleccione una vigencia...</option>
													{% for year in vigencias %}|
														<option value="{{ year }}">{{ year }}</option>
													{% endfor %}
												</select>
											</div>
											<div class="form-group">
												<label for="calendario_departamento">Departamento</label>
												<input type="text" id="calendario_departamento" name="calendario_departamento" class="form-control" readonly>
											</div>
											<div class="form-group row">
												<div class="col-sm-12">
													<label for="calendario_documento">Subir Documento:</label>
													<input type="file" id="calendario_documento" name="calendario_documento" class="form-control" accept=".pdf" onchange="handleFileChange()">
													
													<div id="iframe-container" style="display: none; margin-top: 10px;">
														<iframe id="pdfIframeActualizar" style="width: 100%; height: 500px;" frameborder="0"></iframe>
													</div>

													<div id="file-name-display" style="white-space: normal; overflow-wrap: break-word; margin-top: 5px;"></div>
												</div>
											</div>
										</div>
										<div class="modal-footer">
											<button type="submit" class="btn btn-success border-radius">Guardar</button>
											<button type="button" class="btn btn-danger border-radius" data-dismiss="modal">Cerrar</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script type="text/javascript">
		document.querySelectorAll('.btn-calendario-tributario').forEach(button => {
			button.addEventListener('click', function () {
				const documento = this.getAttribute('data-pdf'); 
				const fileName = documento.split('/').pop(); 
				const pdfUrl = '/calendario_tributario_pdf/' + fileName;
				const fullUrl = window.location.origin; 

				const pdfIframe = document.getElementById('pdfIframe');
				pdfIframe.src = fullUrl + pdfUrl;
			});
		});

		document.querySelectorAll('.btn-abrir-modal').forEach(button => {
			button.addEventListener('click', function () {
				const id = this.getAttribute('data-id');
				const vigencia = this.getAttribute('data-vigencia');
				const departamento = this.getAttribute('data-departamento');
				const documento = this.getAttribute('data-documento');
				
				document.getElementById('calendario_id').value = id;
				document.getElementById('calendario_vigencia').value = vigencia;
				document.getElementById('calendario_departamento').value = departamento;

			});
		});

		function handleFileChange() {
			const fileInput = document.getElementById('calendario_documento');
			const display = document.getElementById('file-name-display');
			const iframeContainer = document.getElementById('iframe-container');
			const iframe = document.getElementById('pdfIframeActualizar');

			const file = fileInput.files[0];

			if (file) {
				if (file.type === 'application/pdf') {
					const fileName = file.name;
					display.textContent = fileName;

					if (fileName.length > 20) {
						fileInput.style.width = '100%';
						display.style.display = 'block';
					} else {
						fileInput.style.width = '100%';
						display.style.display = 'none';
					}

					iframeContainer.style.display = 'block';
					const fileURL = URL.createObjectURL(file);
					iframe.src = fileURL;
				} else {
					fileInput.value = ''; 
					display.textContent = '';
					iframeContainer.style.display = 'none';
					iframe.src = '';
					alert("Por favor, selecciona un archivo PDF válido.");
				}
			} else {
				display.textContent = '';
				iframeContainer.style.display = 'none';
				iframe.src = '';
			}
		}
	</script>
{% endblock %}