{% extends 'base.html' %}
{% load static %}

{% block title %}Consulta Censo{% endblock title %}

{% block content %}
<div class="container mt-4">
  <!-- Tarjeta para ingresar el DNI -->
  <div class="card mb-4">
    
    <div class="card-header">
      <h3 class="card-title">Consulta de Censo</h3>
    </div>

    <div class="card-body">
      <form method="POST" id="dniForm" action="{% url 'buscar_censo' %}">
        {% csrf_token %}
        <div class="row d-flex align-items-center">

          <div class="col-lg-10">
            <div class="form-group">
              <label for="dni">Número de Identidad (DNI)</label>
              <!-- Input con máscara: 4 dígitos - 4 dígitos - 5 dígitos -->
              <input type="text" class="form-control" id="dni" name="dni" value="{{ dni }}" required>
            </div>

            <button type="submit" class="btn btn-primary">Buscar</button>
          </div>

          <div class="col-lg-2">
            <img src="{% static 'img/logo.png' %}" alt="NEXUS" class="brand-image img-fluid">
          </div>

        </div>

      </form>
    </div>
    
  </div>

  {% if censo_data %}
    {% with censo_data.0 as dato %}
    <div class="card mb-3">
      <div class="card-header">
        <h4 class="card-title mb-0">
          DATOS LISTADO DEFINITIVO DE ELECTORES(AS) - ELECCIONES PRIMARIAS 2025
        </h4>
      </div>
      <div class="card-body">
        <p><strong>DNI:</strong> {{ dato.DNI }}</p>
        <p><strong>Nombre Completo:</strong> {{ dato.NOMBRE_COMPLETO }}</p>
        <p><strong>Sexo:</strong> {{ dato.SEXO }}</p>
        <p><strong>Fecha de Nacimiento:</strong> {{ dato.FECHA_NACIMIENTO }}</p>
        <p><strong>Estado en Censo:</strong> {{ dato.ESTADO_EN_CENSO }}</p>
        <p><strong>Municipio:</strong> {{ dato.MUNICIPIO }}</p>
        <p><strong>Departamento:</strong> {{ dato.DEPARTAMENTO }}</p>
        <p><strong>Sector Electoral:</strong> {{ dato.SECTOR_ELECTORAL }}</p>
        <p><strong>Centro de Votación:</strong> {{ dato.CENTRO_VOTACION }}</p>
        <p><strong>JRV:</strong> {{ dato.JRV }}</p>
        <p><strong>Número de Línea:</strong> {{ dato.NUMERO_LINEA }}</p>
      </div>
    </div>
    {% endwith %}
  {% elif dni %}
    <div class="alert alert-warning" role="alert">
      No se encontraron registros para el número de identidad: <strong>{{ dni }}</strong>
    </div>
  {% endif %}
</div>
{% endblock content %}

{% block scripts %}
<!-- jQuery y Bootstrap -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Librería Inputmask para la máscara -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js"></script>
<script>
  $(document).ready(function(){
    // Aplica la máscara: 4 dígitos - 4 dígitos - 5 dígitos
    $("#dni").inputmask("9999-9999-99999", { "placeholder": "____-____-_____" });
    
    // Antes de enviar el formulario, elimina los guiones para que la view reciba solo números
    $("#dniForm").on("submit", function(){
      var dniSinGuiones = $("#dni").val().replace(/-/g, "");
      $("#dni").val(dniSinGuiones);
    });
  });
</script>
{% endblock scripts %}