{% 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 'detalle_calendario_tributario_registro' %}" class="btn btn-success" >
									<i class="fa fa-plus-square"></i> Registrar Detalle 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>Calendario</th>
										<th>Aplicativo</th>
										<th>Consumo Quincenal</th>
										<th>Quincenal</th>
										<th>Periodo</th>
										<th>Plazo Periodo</th>
										<th>Año Final</th>
										<th>Plazo Año Final</th>
										<th>Estado</th>
										<th>Acciones</th>
									</tr>
								</thead>
								<tbody>
									{% for calendario in page.object_list %}
									<tr>
										<td>{{calendario.vigencia_departamento}}</td>
										<td>{{calendario.nombre_aplicativo}}</td>
										<td>{{calendario.consumo_quincena}}</td>
										<td>{{calendario.quincena}}</td>
										<td>{{calendario.periodo}}</td>
										<td>{{calendario.plazo_periodo}}</td>
										<td>{{calendario.anho_inicial}}</td>
										<td>{{calendario.plazo_anho_inicial}}</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-departamento="{{ calendario.calendario_tributario_id }}" data-nombre-aplicativo="{{ calendario.aplicativo_update }}" 
																				data-consumo-quincena="{{ calendario.consumo_quincena }}" data-quincena="{{ calendario.quincena }}" data-periodo="{{ calendario.periodo }}" 
																				data-plazo-periodo="{{ calendario.plazo_periodo }}" data-anho-inicial="{{ calendario.anho_inicial }}" data-plazo-anho-inicial="{{ calendario.plazo_anho_inicial }}" 
																				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 'detalle_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 'detalle_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 'detalle_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 'detalle_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 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 Detalle 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 'detalle_calendario_tributario_update' %}" enctype="multipart/form-data">
										{% csrf_token %}
										<input type="hidden" id="calendario_id" name="calendario_id">
										<div class="modal-body">
											<div class="row">
												<div class="col-md-6" id="calendarioContainer" style="display: none;">
													<div class="form-group row">
														<div class="col-sm-12">
															<label for="calendario_tributario">Calendario Tributario: <span style="color: #FF0000">*</span></label>
															<select name="calendario_tributario" id="calendario_tributario" class="form-control">
																<option value="" {% if not calendario_tributario %} selected {% endif %}>Seleccione un calendario tributario</option>
																{% for calendario_tributarios in arrayCalendarioTributario %}
																	{% if calendario_tributario|default:""|stringformat:"s" == calendario_tributarios.id|default:""|stringformat:"s" %}
																		<option value="{{ calendario_tributarios.id }}" selected>{{ calendario_tributarios.vigencia_departamento }}</option>
																	{% else %}
																		<option value="{{ calendario_tributarios.id }}">{{ calendario_tributarios.vigencia_departamento }}</option>
																	{% endif %}
																{% endfor %}
															</select>
														</div>
													</div>
												</div>
												<div class="col-md-6" id="aplicativoContainer" style="display: none">
													<div class="form-group row">
														<div class="col-sm-12">
															<label for="aplicativo">Aplicativo: <span style="color: #FF0000">*</span></label>
															<select name="aplicativo" id="aplicativo" class="form-control">
																<option value="" {% if not aplicativo %} selected {% endif %}>Seleccione un aplicativo</option>
																{% for aplicativos in arrayAplicativos %}
																	{% if aplicativo|default:""|stringformat:"s" == aplicativos|stringformat:"s" %}
																		<option value="{{aplicativos}}" selected>{{aplicativos.aplicativo}}</option>
																	{% else %}
																		<option value="{{aplicativos}}">{{aplicativos.aplicativo}}</option>
																	{% endif %}
																{% endfor %}
															</select>
														</div>
													</div>
												</div>
												<div class="col-md-6" id="anhoContainer" style="display: none;">
													<div class="form-group row">
														<div class="col-sm-12">
															<label for="anho">Año: <span style="color: #FF0000">*</span></label>
															<select name="anho" id="anho" class="form-control">
																<option value="" {% if not anho %} selected {% endif %}>Seleccione un año</option>
																{% for anhos in arrayAnhos %}
																	{% if anho|default:""|stringformat:"s" == anhos|stringformat:"s" %}
																		<option value="{{anhos}}" selected>{{anhos}}</option>
																	{% else %}
																		<option value="{{anhos}}">{{anhos}}</option>
																	{% endif %}
																{% endfor %}
															</select>
														</div>
													</div>
												</div>
												<div class="col-md-6" id="plazoAnhoContainer" style="display: none">
													<div class="form-group row">
														<div class="col-sm-12">
															<label>Plazo Año: <span style="color: #FF0000">*</span></label>
															<input type="date" id="plazo_anho" name="plazo_anho" class="form-control">
														</div>
													</div>
												</div>
												<div class="col-md-6" id="consumoTTIQuincenaContainer" style="display: none">
													<div class="form-group row">
														<div class="col-sm-12">
															<label for="consumo_tti_quincena">Consumo TTI: <span style="color: #FF0000">*</span></label>
															<select name="consumo_tti_quincena" id="consumo_tti_quincena" class="form-control">
																<option value="" {% if not consumo_tti_quincena %} selected {% endif %}>Seleccione un consumo</option>
																{% for consumo in arraySubConsumo %}
																	{% if consumo_tti_quincena|default:""|stringformat:"s" == consumo|stringformat:"s" %}
																		<option value="{{consumo}}" selected>{{consumo}}</option>
																	{% else %}
																		<option value="{{consumo}}">{{consumo}}</option>
																	{% endif %}
																{% endfor %}
															</select>
														</div>
													</div>
												</div>
												<div class="col-md-6" id="quincenaContainer" style="display: none">
													<div class="form-group row">
														<div class="col-sm-12">
															<label for="quincena">Quincena: </label>
															<input type="number" id="quincena" name="quincena" class="form-control">
														</div>
													</div>
												</div>
												<div class="col-md-6" id="periodoContainer" style="display: none">
													<div class="form-group row">
														<div class="col-sm-12">
															<label for="periodo">Periodo: <span style="color: #FF0000">*</span></label>
															<select name="periodo" id="periodo" class="form-control">
																<option value="" {% if not periodo %} selected {% endif %}>Seleccione un periodo</option>
																{% for periodos in arrayPeriodos %}
																	{% if periodo|default:""|stringformat:"s" == periodos|stringformat:"s" %}
																		<option value="{{periodos}}" selected>{{periodos}}</option>
																	{% else %}
																		<option value="{{periodos}}">{{periodos}}</option>
																	{% endif %}
																{% endfor %}
															</select>
														</div>
													</div>
												</div>
												<div class="col-md-6" id="plazoPeriodoContainer" style="display: none">
													<div class="form-group row">
														<div class="col-sm-12">
															<label>Plazo Periodo: <span style="color: #FF0000">*</span></label>
															<input type="date" id="plazo_periodo" name="plazo_periodo" class="form-control">
														</div>
													</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-abrir-modal').forEach(button => {
			button.addEventListener('click', function () {
				const id = this.getAttribute('data-id');
				const vigencia_departamento = this.getAttribute('data-vigencia-departamento');
				const nombre_aplicativo = this.getAttribute('data-nombre-aplicativo');
				const consumo_quincena = this.getAttribute('data-consumo-quincena');
				const quincena = this.getAttribute('data-quincena');
				const periodo = this.getAttribute('data-periodo');
				const texto_plazo_periodo = this.getAttribute('data-plazo-periodo');
				const anho_inicial = this.getAttribute('data-anho-inicial');
				const texto_plazo_anho_inicial = this.getAttribute('data-plazo-anho-inicial');

				const meses = {
					"Enero": "01", "Febrero": "02", "Marzo": "03", "Abril": "04",
					"Mayo": "05", "Junio": "06", "Julio": "07", "Agosto": "08",
					"Septiembre": "09", "Octubre": "10", "Noviembre": "11", "Diciembre": "12"
				};

				function convertirFecha(fecha) {
					const partes = fecha.split(" ");
					const dia = partes[0].padStart(2, '0'); 
					const mes = meses[partes[2]];
					const anio = partes[4];
					return `${anio}-${mes}-${dia}`;
				}

				const plazo_periodo = convertirFecha(texto_plazo_periodo);
				const plazo_anho_inicial = convertirFecha(texto_plazo_anho_inicial);

				document.getElementById('calendario_id').value = id;
				document.getElementById('calendario_tributario').value = vigencia_departamento;
				document.getElementById('aplicativo').value = nombre_aplicativo;
				document.getElementById('anho').value = anho_inicial;
				document.getElementById('plazo_anho').value = plazo_anho_inicial;
				document.getElementById('consumo_tti_quincena').value = consumo_quincena;
				document.getElementById('quincena').value = quincena;
				document.getElementById('periodo').value = periodo;
				document.getElementById('plazo_periodo').value = plazo_periodo;
				valdiate()
			});
		});

		function valdiate(){
			const calendarioSelect = document.getElementById('calendario_tributario');
			const aplicativoSelect = document.getElementById('aplicativo');
			const consumoTTISelect = document.getElementById('consumo_tti_quincena');
			const containers = {
				calendarioContainer: document.getElementById('calendarioContainer'),
				aplicativoContainer: document.getElementById('aplicativoContainer'),
				anhoContainer: document.getElementById('anhoContainer'),
				plazoAnhoContainer: document.getElementById('plazoAnhoContainer'),
				periodoContainer: document.getElementById('periodoContainer'),
				plazoPeriodoContainer: document.getElementById('plazoPeriodoContainer'),
				consumoTTIQuincenaContainer: document.getElementById('consumoTTIQuincenaContainer'),
				quincenaContainer: document.getElementById('quincenaContainer'),
			};

			function toggleVisibility(element, condition) {
				element.style.display = condition ? 'block' : 'none';
			}

			function verificarEstadoAplicativo() {
				const aplicativoValue = (() => {
					try {
						return JSON.parse(aplicativoSelect.value.replace(/'/g, '"'));
					} catch {
						return null;
					}
				})();

				const aplicativoText = aplicativoValue?.aplicativo?.toLowerCase() || '';

				toggleVisibility(containers.anhoContainer, aplicativoText.includes('vehiculos'));
				toggleVisibility(containers.plazoAnhoContainer, aplicativoText.includes('vehiculos'));
				toggleVisibility(containers.periodoContainer, aplicativoText.includes('registro') || aplicativoText.includes('estampillas'));
				toggleVisibility(containers.plazoPeriodoContainer, aplicativoText.includes('registro') || aplicativoText.includes('estampillas'));
				toggleVisibility(containers.consumoTTIQuincenaContainer, aplicativoText.includes('tti-consumo'));
				verificarEstadoConsumo(2);
				if(aplicativoText.includes('vehiculos')){
					toggleVisibility(containers.periodoContainer, false);
					toggleVisibility(containers.plazoPeriodoContainer, false);
					toggleVisibility(containers.quincenaContainer, false); 
				}
			}

			function verificarEstadoCalendarioAplicativo() {
				const isCalendarioSelected = Boolean(calendarioSelect.value);
				toggleVisibility(containers.calendarioContainer, false);
				toggleVisibility(containers.aplicativoContainer, false);

				if (!isCalendarioSelected) {
					Object.values(containers).forEach(el => toggleVisibility(el, false));
				} else {
					verificarEstadoAplicativo();
				}
			}

			function verificarEstadoConsumo(validate) {
				const consumoValue = consumoTTISelect.value.toLowerCase();

				if(!consumoValue && validate === 1){
					toggleVisibility(containers.periodoContainer, false);
					toggleVisibility(containers.plazoPeriodoContainer, false);
					toggleVisibility(containers.quincenaContainer, false); 
				}
				if (consumoValue.includes('cervezas')) {
					toggleVisibility(containers.periodoContainer, true);
					toggleVisibility(containers.plazoPeriodoContainer, true);
					toggleVisibility(containers.quincenaContainer, false); 
				}

				if (consumoValue.includes('cigarrillos y tabacos')) {
					toggleVisibility(containers.quincenaContainer, true);
					toggleVisibility(containers.periodoContainer, true);
					toggleVisibility(containers.plazoPeriodoContainer, true);
				}
			}

			function revertirCambiosProhibidos(mutation) {
				const target = mutation.target;
				const expectedState = target.dataset.expectedDisplay || 'none';

				if (target.style.display !== expectedState) {
					target.style.display = expectedState;
				}
			}

			function configurarObservadores() {
				const observer = new MutationObserver(mutations => {
					mutations.forEach(mutation => {
						if (mutation.attributeName === 'style') {
							revertirCambiosProhibidos(mutation);
						}
					});
				});

				Object.values(containers).forEach(container => {
					container.dataset.expectedDisplay = container.style.display || 'none';
					observer.observe(container, {
						attributes: true,
						attributeFilter: ['style'],
					});
				});
			}

			calendarioSelect.addEventListener('change', () => {
				verificarEstadoCalendarioAplicativo();
				Object.values(containers).forEach(container => {
					container.dataset.expectedDisplay = container.style.display;
				});
			});

			aplicativoSelect.addEventListener('change', () => {
				verificarEstadoAplicativo();
				Object.values(containers).forEach(container => {
					container.dataset.expectedDisplay = container.style.display;
				});
			});

			consumoTTISelect.addEventListener('change', () => {
				verificarEstadoConsumo(1); 
				Object.values(containers).forEach(container => {
					container.dataset.expectedDisplay = container.style.display;
				});
			});

			verificarEstadoCalendarioAplicativo();
			configurarObservadores();
			verificarEstadoConsumo(1);
		}

		document.addEventListener('DOMContentLoaded', function () {
			validate()
		});
	</script>
{% endblock %}