{% 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>Número</th>
              <th>Carga</th>
              <th>Centro de Votación</th>
              <th>Región</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for jrv in jrv_list %}
            <tr>
              <td>{{ jrv.codigo }}</td>
              <td>{{ jrv.carga }}</td>
              <td>{{ jrv.centro_nombre }}</td>
              <td>{{ jrv.departamento }}</td>
              <td class="text-right">
                <!-- Botón Ver Asignaciones -->
                <button type="button" class="btn btn-sm btn-info btnVerAsignaciones" data-id="{{ jrv.id }}">
                  <i class="fas fa-eye"></i> Ver Asignaciones
                </button>
                <!-- Botón Editar -->
                <button type="button" class="btn btn-sm btn-primary btnEditarJRV" 
                        data-id="{{ jrv.id }}"
                        data-codigo="{{ jrv.codigo }}"
                        data-carga="{{ jrv.carga }}"
                        data-centro="{{ jrv.centro_votacion_id }}"
                        data-ubicacion="{{ jrv.ubicacion }}">
                  <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>
          <!-- Campo para la carga -->
          <div class="form-group">
            <label for="jrv_carga">Carga</label>
            <input type="text" class="form-control" id="jrv_carga" name="carga" required>
          </div>
          <!-- Select para el centro de votación -->
          <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>
          <!-- Puedes agregar otros campos si lo requieres -->
        </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>
          <!-- Campo para la 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>
          <!-- 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>
        </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 carga    = $(this).data("carga");
    let centroId = $(this).data("centro");

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

    // 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");
  });

  // Acción para el botón Ver Asignaciones
  $(".btnVerAsignaciones").on("click", function(){
    let jrvId = $(this).data("id");
    window.location.href = "{% url 'roles_jrv' 0 %}".replace("0", jrvId);
  });

  // Envío AJAX para el formulario de actualización masiva (Asignar Roles)
  $('#formAsignarRol').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: formData,
      dataType: 'json',
      success: function(response) {
        if(response.status === 'ok'){
          Swal.fire({
            title: 'Éxito',
            text: response.msg,
            icon: 'success'
          });
          $('#modalAsignarRol').modal('hide');
          location.reload();
        } else {
          Swal.fire({
            title: 'Error',
            text: response.msg,
            icon: 'error'
          });
        }
      },
      error: function(xhr, status, error) {
        Swal.fire({
          title: 'Error',
          text: xhr.responseText || 'Ha ocurrido un error inesperado.',
          icon: 'error'
        });
      }
    });
  });

  // Acción para eliminar asignación
  $('.delete-asignacion').on('click', function(){
    var asignacionId = $(this).data('id');
    Swal.fire({
      title: '¿Estás seguro?',
      text: "La asignación se eliminará.",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if(result.isConfirmed) {
        $.ajax({
          type: 'POST',
          url: "{% url 'eliminar_asignacion_jrv' 0 %}".replace('0', asignacionId),
          data: {
            csrfmiddlewaretoken: '{{ csrf_token }}'
          },
          dataType: 'json',
          success: function(response) {
            if(response.status === 'ok'){
              Swal.fire({
                title: 'Eliminada',
                text: response.msg,
                icon: 'success'
              });
              location.reload();
            } else {
              Swal.fire({
                title: 'Error',
                text: response.msg,
                icon: 'error'
              });
            }
          },
          error: function(xhr, status, error) {
            Swal.fire({
              title: 'Error',
              text: xhr.responseText || 'Ha ocurrido un error inesperado.',
              icon: 'error'
            });
          }
        });
      }
    });
  });

  // Acción para editar asignación individual: abre el modal de edición
  $('.edit-asignacion').on('click', function(){
    var asignacionId = $(this).data('id');
    $('#edit_asignacion_id').val(asignacionId);
    var miembroId = $(this).data('miembro');
    if(miembroId) {
      $('#edit_id_miembro').val(miembroId);
    } else {
      $('#edit_id_miembro').val('');
    }
    var url = "{% url 'editar_asignacion_jrv' 0 %}".replace('0', asignacionId);
    $('#formEditarAsignacion').attr('action', url);
    $('#modalEditarAsignacion').modal('show');
  });

  // Envío AJAX para el formulario de edición individual
  $('#formEditarAsignacion').on('submit', function(e){
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: formData,
      dataType: 'json',
      success: function(response){
        if(response.status === 'ok'){
          Swal.fire({
            title: 'Éxito',
            text: response.msg,
            icon: 'success'
          });
          $('#modalEditarAsignacion').modal('hide');
          location.reload();
        } else {
          Swal.fire({
            title: 'Error',
            text: response.msg,
            icon: 'error'
          });
        }
      },
      error: function(xhr, status, error){
        Swal.fire({
          title: 'Error',
          text: xhr.responseText || 'Ha ocurrido un error inesperado.',
          icon: 'error'
        });
      }
    });
  });
});
</script>
{% endblock scripts %}