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

{% block title %}Listado de Centros de Votación{% endblock title %}

{% block content %}
<div class="mt-4">
  <!-- Tarjeta para el listado de centros -->
  <div class="card mb-4">
    <div class="card-header d-flex align-items-center">
      <h3 class="card-title mb-0">Centros de Votación</h3>
      <div class="ml-auto">
        <!-- Botón para abrir modal de registro -->
        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalRegistrarCentro">
          <i class="fas fa-plus"></i> Agregar Centro
        </button>
      </div>
    </div>
    <div class="card-body">
      <!-- Tabla de centros -->
      <div class="table-responsive">

        <table id="tabla_centros" class="table table-hover table-sm align-middle table-borderless rounded-3"
          style="width: 100%;">
          <thead class="text-white" style="background-color: #A3B0C7 !important;">
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>Dirección</th>
              <th>Región</th>
              <th>Acciones</th>
            </tr>
          </thead>

          <tbody class="small">
            {% for centro in centros %}
            <tr>
              <td>{{ centro.id }}</td>
              <td>{{ centro.nombre }}</td>
              <td>{{ centro.direccion }}</td>
              <td>{{ centro.nombre_region }}</td>
              <td class="text-right">
                <!-- Botón Editar: Abre modal y carga datos -->
                <button type="button" class="btn btn-sm btn-primary btnEditarCentro" data-id="{{ centro.id }}"
                  data-nombre="{{ centro.nombre }}" data-ubicacion="{{ centro.ubicacion }}"
                  data-direccion="{{ centro.direccion }}" data-descripcion="{{ centro.descripcion }}"
                  data-pk_region="{{ centro.pk_region }}" data-nombre_region="{{ centro.nombre_region }}"
                  data-tipo_region="{{ centro.tipo_region }}">
                  <i class="fas fa-edit"></i> Editar
                </button>
                <!-- Botón Borrar -->
                <button type="button" class="btn btn-sm btn-danger btnBorrarCentro" data-id="{{ centro.id }}">
                  <i class="fas fa-trash"></i> Eliminar
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>Dirección</th>
              <th>Región</th>
              <th></th>
            </tr>
          </tfoot>

        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Registrar Centro de Votación -->
<div class="modal fade" id="modalRegistrarCentro" tabindex="-1" role="dialog"
  aria-labelledby="modalRegistrarCentroLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formRegistrarCentro" method="POST" action="{% url 'registrar_centro' %}">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalRegistrarCentroLabel">Registrar Centro de Votación</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="centro_nombre">Nombre</label>
            <input type="text" class="form-control" id="centro_nombre" name="nombre" required>
          </div>
          <div class="form-group">
            <label for="centro_direccion">Dirección</label>
            <input type="text" class="form-control" id="centro_direccion" name="direccion">
          </div>
          <div class="form-group">
            <label for="centro_descripcion">Descripción</label>
            <textarea class="form-control" id="centro_descripcion" name="descripcion"></textarea>
          </div>
          <div class="form-group">
            <label for="centro_region">Región</label>
            <select class="form-control" id="centro_region" name="pk_region" required>
              <option value="">Seleccione una región</option>
              {% for region in regiones %}
              <option value="{{ region.id }}">{{ region.nombre }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar Centro</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal Editar Centro de Votación -->
<div class="modal fade" id="modalEditarCentro" tabindex="-1" role="dialog" aria-labelledby="modalEditarCentroLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Nota: el action se asigna dinámicamente en JS -->
    <form id="formEditarCentro" method="POST" action="">
      {% csrf_token %}
      <input type="hidden" id="edit_centro_id" name="id">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalEditarCentroLabel">Editar Centro de Votación</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="edit_centro_nombre">Nombre</label>
            <input type="text" class="form-control" id="edit_centro_nombre" name="nombre" required>
          </div>
          <div class="form-group">
            <label for="edit_centro_direccion">Dirección</label>
            <input type="text" class="form-control" id="edit_centro_direccion" name="direccion">
          </div>
          <div class="form-group">
            <label for="edit_centro_descripcion">Descripción</label>
            <textarea class="form-control" id="edit_centro_descripcion" name="descripcion"></textarea>
          </div>
          <div class="form-group">
            <label for="edit_centro_region">Región</label>
            <select class="form-control" id="edit_centro_region" name="pk_region" required>
              <option value="">Seleccione una región</option>
              {% for region in regiones %}
              <option value="{{ region.id }}">{{ region.nombre }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar Cambios</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal Confirmar Borrado Centro -->
<div class="modal fade" id="modalBorrarCentro" tabindex="-1" role="dialog" aria-labelledby="modalBorrarCentroLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBorrarCentroLabel">Confirmar Borrado</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ¿Está seguro que desea borrar este centro de votación?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" id="confirmBorrarCentro" class="btn btn-danger">Borrar</button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<!-- Dependencias CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- Dependencias JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
  $(document).ready(function () {
    // Inicializar DataTable para centros
    $('#tabla_centros').DataTable({
      autoWidth: false,
      scrollX: true,
      scrollY: '300px',
      scrollCollapse: true,
      pageLength: 50,
      dom: 'Brftip',
      orderCellsTop: true,  // Permite filtros en el `tfoot`
      buttons: [
        { extend: 'copy', className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-copy"></i>' },
        { extend: 'excel', className: 'btn btn-success btn-sm', text: '<i class="fas fa-file-excel"></i>', attr: { style: 'background-color: #218838; border-color: #218838;' } },
        { extend: 'pdf', className: 'btn btn-danger btn-sm', text: '<i class="fas fa-file-pdf"></i>' },
        { extend: 'print', className: 'btn btn-info btn-sm', text: '<i class="fas fa-print"></i>' },
        {
          extend: 'colvis',
          text: '<i class="fas fa-eye"></i>',
          className: 'btn btn-primary btn-sm'
        }
      ],
      initComplete: function () {
        // **Filtros en el tfoot**
        this.api().columns().every(function () {
          var column = this;
          var title = $(column.footer()).text().trim();

          if (title !== "Acciones" && title !== "") {  // Evita filtros en la columna de Acciones
            var input = $('<input class="form-control form-control-sm filterControl" type="text" placeholder="Filtrar ' + title + '" />')
              .appendTo($(column.footer()).empty())
              .on("keyup change clear", function () {
                if (column.search() !== this.value) {
                  column.search(this.value).draw();
                }
              });
          }
        });
      }
    });

    // Inicializar Select2 en los select de región (para ambos modales)
    $('#centro_region').select2({
      placeholder: "Seleccione una región",
      allowClear: true
    });
    $('#edit_centro_region').select2({
      placeholder: "Seleccione una región",
      allowClear: true
    });

    // Borrado de Centro
    let centroToDelete = null;
    $(".btnBorrarCentro").on("click", function () {
      centroToDelete = $(this).data("id");
      $("#modalBorrarCentro").modal("show");
    });
    $("#confirmBorrarCentro").on("click", function () {
      if (centroToDelete) {
        $.ajax({
          url: "{% url 'eliminar_centro' 0 %}".replace("0", centroToDelete),
          method: "POST",
          data: { csrfmiddlewaretoken: "{{ csrf_token }}" },
          dataType: "json",
          success: function (response) {
            if (response.status === "success") {
              $("#modalBorrarCentro").modal("hide");
              Swal.fire({
                icon: "success",
                title: "Borrado",
                text: response.message
              }).then(() => {
                location.reload();
              });
            } else {
              Swal.fire({
                icon: "error",
                title: "Error",
                text: response.message || "No se pudo borrar el centro."
              });
            }
          },
          error: function () {
            Swal.fire({
              icon: "error",
              title: "Error",
              text: "Error al enviar la solicitud."
            });
          }
        });
      }
    });

    // Edición de Centro: cargar datos en el modal y asignar acción al formulario
    $(".btnEditarCentro").on("click", function () {
      let centroId = $(this).data("id");
      let nombre = $(this).data("nombre");
      let ubicacion = $(this).data("ubicacion");
      let direccion = $(this).data("direccion");
      let descripcion = $(this).data("descripcion");
      let pk_region = $(this).data("pk_region");

      $("#edit_centro_id").val(centroId);
      $("#edit_centro_nombre").val(nombre);
      $("#edit_centro_ubicacion").val(ubicacion);
      $("#edit_centro_direccion").val(direccion);
      $("#edit_centro_descripcion").val(descripcion);

      // Asignar la región actual al select del modal de edición
      $("#edit_centro_region").val(pk_region).trigger('change');

      // Actualizamos el atributo 'action' del formulario dinámicamente
      $("#formEditarCentro").attr("action", "{% url 'editar_centro' 0 %}".replace("0", centroId));
      $("#modalEditarCentro").modal("show");
    });
  });
</script>
{% endblock scripts %}