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

{% block title %}Listado de JRV{% endblock title %}

{% block content %}
<div class="container mt-4">
  <!-- Tarjeta para el listado de JRV -->
  <div class="card mb-4">
    <div class="card-header d-flex align-items-center">
      <h3 class="card-title mb-0">JRV</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="#modalRegistrarJRV">
          <i class="fas fa-plus"></i> Agregar JRV
        </button>
      </div>
    </div>
    <div class="card-body">
      <!-- Tabla de JRV -->
      <div class="table-responsive">
        <table id="tabla_jrv" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <tr>
              <th>ID</th>
              <th>Número</th>
              <th>Centro de Votación</th>
              <th>Región</th>
              <th>Carga</th>
              <th class="d-none">Cargo</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for jrv in jrv_list %}
            <tr>
              <td>{{ jrv.id }}</td>
              <td>{{ jrv.codigo }}</td>
              <td>{{ jrv.centro_nombre }}</td>
              <td>{{ jrv.departamento }}</td>
              <td>{{ jrv.carga }}</td>
              <td class="d-none">{{ jrv.cargo }}</td>
              <td class="text-right">
                <!-- Botón Editar -->
                <button type="button" class="btn btn-sm btn-primary btnEditarJRV" 
                        data-id="{{ jrv.id }}"
                        data-codigo="{{ jrv.codigo }}"
                        data-centro="{{ jrv.centro_votacion_id }}"
                        data-ubicacion="{{ jrv.ubicacion }}"
                        data-carga="{{ jrv.carga }}"
                        data-cargo="{{ jrv.id_cargo }}">
                  <i class="fas fa-edit"></i> Editar
                </button>
                <!-- Botón Borrar -->
                <button type="button" class="btn btn-sm btn-danger btnBorrarJRV" data-id="{{ jrv.id }}">
                  <i class="fas fa-trash"></i> Eliminar
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Registrar JRV -->
<div class="modal fade" id="modalRegistrarJRV" tabindex="-1" role="dialog" aria-labelledby="modalRegistrarJRVLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formRegistrarJRV" method="POST" action="{% url 'registrar_jrv' %}">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalRegistrarJRVLabel">Registrar JRV</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Campo para el código (número de JRV) -->
          <div class="form-group">
            <label for="jrv_codigo">Código (Número)</label>
            <input type="text" class="form-control" id="jrv_codigo" name="codigo" required>
          </div>
          <div class="form-group">
            <label for="jrv_centro">Centro de Votación</label>
            <select id="jrv_centro" name="centro_votacion_id" class="form-control" required>
              <option value="">Seleccione un centro</option>
              {% for centro in centros %}
                <option value="{{ centro.id }}">{{ centro.nombre }}</option>
              {% endfor %}
            </select>
          </div>
          <!-- Nuevo campo: Carga -->
          <div class="form-group">
            <label for="jrv_carga">Carga</label>
            <input type="text" class="form-control" id="jrv_carga" name="carga" required>
          </div>
          <!-- Nuevo campo: Cargo (oculto) -->
          <div class="form-group d-none">
            <label for="jrv_cargo">Cargo</label>
            <select id="jrv_cargo" name="id_cargo" class="form-control" required>
              <option value="">Seleccione un cargo</option>
              {% for rol in roles %}
                <option value="{{ rol.id }}">{{ rol.nombre_rol }}</option>
              {% endfor %}
            </select>
          </div>
          <!-- Puedes agregar otros campos según necesites -->
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar JRV</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal Editar JRV -->
<div class="modal fade" id="modalEditarJRV" tabindex="-1" role="dialog" aria-labelledby="modalEditarJRVLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formEditarJRV" method="POST" action="{% url 'editar_jrv' 0 %}">
      {% csrf_token %}
      <input type="hidden" id="edit_jrv_id" name="id">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalEditarJRVLabel">Editar JRV</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Campo para el código (número de JRV) -->
          <div class="form-group">
            <label for="edit_jrv_codigo">Código (Número)</label>
            <input type="text" class="form-control" id="edit_jrv_codigo" name="codigo" required>
          </div>
          <!-- Select para elegir el Centro de Votación -->
          <div class="form-group">
            <label for="edit_jrv_centro">Centro de Votación</label>
            <select id="edit_jrv_centro" name="centro_votacion_id" class="form-control" required>
              <option value="">Seleccione un centro</option>
              {% for centro in centros %}
                <option value="{{ centro.id }}">{{ centro.nombre }}</option>
              {% endfor %}
            </select>
          </div>
          <!-- Nuevo campo: Carga -->
          <div class="form-group">
            <label for="edit_jrv_carga">Carga</label>
            <input type="text" class="form-control" id="edit_jrv_carga" name="carga" required>
          </div>
          <!-- Nuevo campo: Cargo (oculto) -->
          <div class="form-group d-none">
            <label for="edit_jrv_cargo">Cargo</label>
            <select id="edit_jrv_cargo" name="id_cargo" class="form-control" required>
              <option value="">Seleccione un cargo</option>
              {% for rol in roles %}
                <option value="{{ rol.id }}">{{ rol.nombre_rol }}</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 JRV -->
<div class="modal fade" id="modalBorrarJRV" tabindex="-1" role="dialog" aria-labelledby="modalBorrarJRVLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBorrarJRVLabel">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 esta JRV?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" id="confirmBorrarJRV" 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"/>

<!-- 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>

<script>
$(document).ready(function(){
  // Inicializar DataTable para JRV
  $('#tabla_jrv').DataTable({
    responsive: true,
    pageLength: 50,
    language: {
      search: "Buscar:",
      lengthMenu: "Mostrar _MENU_ registros",
      info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
      paginate: {
        first: "Primero",
        last: "Último",
        next: "Siguiente",
        previous: "Anterior"
      }
    }
  });

  // Borrado de JRV
  let jrvToDelete = null;
  $(".btnBorrarJRV").on("click", function(){
    jrvToDelete = $(this).data("id");
    $("#modalBorrarJRV").modal("show");
  });
  $("#confirmBorrarJRV").on("click", function(){
    if(jrvToDelete) {
      $.ajax({
        url: "{% url 'eliminar_jrv' 0 %}".replace("0", jrvToDelete),
        method: "POST",
        data: { csrfmiddlewaretoken: "{{ csrf_token }}" },
        dataType: "json",
        success: function(response){
          if(response.status === "success"){
            $("#modalBorrarJRV").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 la JRV."
            });
          }
        },
        error: function(){
          Swal.fire({
            icon: "error",
            title: "Error",
            text: "Error al enviar la solicitud."
          });
        }
      });
    }
  });

  // Edición de JRV: cargar datos en el modal de edición y asignar acción al formulario
  $(".btnEditarJRV").on("click", function(){
    let jrvId     = $(this).data("id");
    let codigo    = $(this).data("codigo");
    let centroId  = $(this).data("centro");
    let ubicacion = $(this).data("ubicacion");
    let carga     = $(this).data("carga");
    let cargoId   = $(this).data("cargo");

    $("#edit_jrv_id").val(jrvId);
    $("#edit_jrv_codigo").val(codigo);
    $("#edit_jrv_centro").val(centroId); // Se preselecciona el centro
    $("#edit_jrv_carga").val(carga);       // Se preselecciona la carga
    $("#edit_jrv_cargo").val(cargoId);       // Se preselecciona el cargo

    // Actualizamos el action del formulario de edición con el ID correcto
    $("#formEditarJRV").attr("action", "{% url 'editar_jrv' 0 %}".replace("0", jrvId));
    $("#modalEditarJRV").modal("show");
  });

  // Mostrar mensajes de Django usando SweetAlert
  {% if messages %}
    {% for message in messages %}
      Swal.fire({
        icon: "{{ message.tags }}",  // Ejemplo: "error" o "success"
        title: "Notificación",
        text: "{{ message }}",
        timer: 4000,
        timerProgressBar: true
      });
    {% endfor %}
  {% endif %}
});
</script>
{% endblock scripts %}