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

{% block title %}Roles de la JRV{% endblock title %}

{% block content %}
<div class="container mt-4">
  <div class="card">
    <div class="card-header">
      <h3>Listado de Asignaciones de Roles</h3>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="tabla_asignaciones" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>Código JRV</th>
              <th>Rol</th>
              <th>Tipo de Rol</th>
              <th>Miembro</th>
              <th>Fecha Asignación</th>
              <th>Observaciones</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for asignacion in asignaciones %}
            <tr>
              <td>{{ asignacion.AsignacionID }}</td>
              <td>{{ asignacion.CodigoJRV }}</td>
              <td>{{ asignacion.Rol }}</td>
              <td>{{ asignacion.TipoRol }}</td>
              <td>
                {% if asignacion.Miembro %}
                  {{ asignacion.Miembro }}
                {% else %}
                  Sin asignar
                {% endif %}
              </td>
              <td>{{ asignacion.fecha_asignacion }}</td>
              <td>{{ asignacion.observaciones }}</td>
              <td class="text-right">
                <!-- Botón para editar asignación -->
                <button type="button" class="btn btn-sm btn-primary btnEditarAsignacion" 
                  data-id="{{ asignacion.AsignacionID }}"
                  data-member="{{ asignacion.MiembroID|default:'' }}"
                  data-toggle="modal" data-target="#modalEditarAsignacion">
                  <i class="fas fa-edit"></i> Editar
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal para Editar Asignación -->
<div class="modal fade" id="modalEditarAsignacion" tabindex="-1" role="dialog" aria-labelledby="modalEditarAsignacionLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formEditarAsignacion" method="POST" action="{% url 'editar_asignacion_rol' %}">
      {% csrf_token %}
      <input type="hidden" name="asignacion_id" id="modal_asignacion_id">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalEditarAsignacionLabel">Editar Miembro Asignado</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Select para elegir un miembro -->
          <div class="form-group">
            <label for="modal_miembro">Miembro</label>
            <select name="id_miembro" id="modal_miembro" class="form-control" required>
              <option value="">Seleccione un miembro</option>
              {% for miembro in miembros %}
                <option value="{{ miembro.id }}">{{ miembro.nombre }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Aceptar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<!-- Dependencias CSS y JS para DataTable y Bootstrap -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function(){
    $('#tabla_asignaciones').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"
        }
      }
    });

    // Al hacer clic en el botón de editar, se llena el modal con la info de la asignación
    $('.btnEditarAsignacion').on('click', function(){
      var asignacionId = $(this).data('id');
      var miembroId = $(this).data('member'); // puede estar vacío si no hay miembro asignado
      // Colocar el id de la asignación en el campo oculto
      $('#modal_asignacion_id').val(asignacionId);
      // Preseleccionar el miembro actual en el select (si existe)
      if(miembroId) {
        $('#modal_miembro').val(miembroId);
      } else {
        $('#modal_miembro').val('');
      }
    });
  });
</script>
{% endblock scripts %}