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

{% block title %}Roles por Mesa{% endblock title %}

{% block content %}
<div class="container mt-4">
  <div class="card">
    <!-- Encabezado con título y botón "Editar Roles" o "Ver Roles" -->
    <div class="card-header d-flex align-items-center">
      <h3 class="card-title mb-0">Asignaciones de Roles para JRV</h3>
      <div class="ml-auto">
        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalAsignarRol">
          <i class="fas fa-edit"></i> {% if tiene_roles_asignados %}Ver Roles{% else %}Editar Roles{% endif %}
        </button>
      </div>
    </div>
    <div class="card-body">
      <!-- Tabla de asignaciones -->
      <div class="table-responsive">
        <table id="tabla_roles_mesa" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <!-- Fila de filtros -->
            <tr>
              <th><input type="text" placeholder="Buscar Código JRV" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Carga" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Rol" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Tipo de Rol" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Miembro" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Movimiento" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Observaciones" class="form-control form-control-sm"></th>
              <th>Acciones</th>
            </tr>
            <!-- Fila de encabezados -->
            <tr>
              <th>Código JRV</th>
              <th>Carga</th>
              <th>Rol</th>
              <th>Tipo de Rol</th>
              <th>Miembro</th>
              <th>Movimiento</th>
              <th>Observaciones</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for asig in asignaciones %}
            <tr>
              <td>{{ asig.CodigoJRV }}</td>
              <td>{{ asig.carga }}</td>
              <td>{{ asig.Rol }}</td>
              <td>{{ asig.TipoRol }}</td>
              <td>{{ asig.Miembro }}</td>
              <td>{{ asig.Movimiento }}</td>
              <td>{{ asig.observaciones }}</td>
              <td>
                <button class="btn btn-primary btn-sm edit-asignacion" data-id="{{ asig.AsignacionID }}" data-miembro="{{ asig.MiembroID }}">Editar</button>
                <button class="btn btn-danger btn-sm delete-asignacion" data-id="{{ asig.AsignacionID }}">Eliminar</button>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="9">No hay asignaciones para esta JRV.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal para Actualización Masiva (modo edición de asignaciones sin valor asignado) -->
<div class="modal fade" id="modalAsignarRol" tabindex="-1" role="dialog" aria-labelledby="modalAsignarRolLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <form id="formAsignarRol" method="POST" action="{% url 'insertar_asignacion_jrv_multiple' jrv_id %}">
      {% csrf_token %}
      <input type="hidden" name="jrv_id" value="{{ jrv_id }}">
      <div class="modal-content">
        <div class="modal-header">
          {% if tiene_roles_asignados %}
            <h5 class="modal-title" id="modalAsignarRolLabel">Roles Asignados</h5>
          {% else %}
            <h5 class="modal-title" id="modalAsignarRolLabel">Asignar Roles de la JRV</h5>
          {% endif %}
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {% for asig in asignaciones %}
          <div class="form-group">
            <label for="miembro_id_{{ forloop.counter }}">
              {{ asig.Rol }} - {{ asig.TipoRol }} {% if asig.MiembroID %}(Asignado){% endif %}
            </label>
            <select name="miembro_id_{{ forloop.counter }}" id="miembro_id_{{ forloop.counter }}" class="form-control" {% if asig.MiembroID %} disabled {% endif %}>
              <option value="">Seleccione un miembro</option>
              {% for m in miembros %}
                <option value="{{ m.id }}"
                  {% if asig.MiembroID %}
                    {% if m.id == asig.MiembroID %} selected {% endif %}
                  {% else %}
                    {% if forloop.first %} selected {% endif %}
                  {% endif %}
                >
                  {{ m.nombres }} {{ m.apellidos }} ({{ m.dni }})
                </option>
              {% endfor %}
            </select>
            {% if asig.MiembroID %}
              <!-- Campo oculto para enviar el valor, ya que disabled no se envía -->
              <input type="hidden" name="miembro_id_{{ forloop.counter }}" value="{{ asig.MiembroID }}">
            {% endif %}
            <input type="hidden" name="asignacion_id_{{ forloop.counter }}" value="{{ asig.AsignacionID }}">
          </div>
          {% endfor %}
          
          <div class="form-group">
            <label for="modal_movimiento">Movimiento</label>
            <select name="pk_movimiento" id="modal_movimiento" class="form-control">
              <option value="">Seleccione un Movimiento</option>
              {% for movimiento in movimientos %}
                <option value="{{ movimiento.pk_movimiento }}" {% if forloop.first %} selected {% endif %}>{{ movimiento.nombre }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label for="modal_fecha_asignacion">Fecha de Asignación</label>
            <input type="date" class="form-control" id="modal_fecha_asignacion" name="fecha_asignacion">
          </div>
          <div class="form-group">
            <label for="modal_observaciones">Observaciones</label>
            <textarea class="form-control" id="modal_observaciones" name="observaciones" rows="3"></textarea>
          </div>
        </div>
        {% if not tiene_roles_asignados %}
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Actualizar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
        {% endif %}
      </div>
    </form>
  </div>
</div>

<!-- Modal Individual para Editar Asignación (cuando ya hay un miembro asignado) -->
<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_jrv' 0 %}">
      {% csrf_token %}
      <input type="hidden" name="asignacion_id" id="edit_asignacion_id">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalEditarAsignacionLabel">Editar Asignació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">
          <!-- Se permite editar el miembro incluso si ya está asignado -->
          <div class="form-group">
            <label for="edit_id_miembro">Miembro</label>
            <select name="id_miembro" id="edit_id_miembro" class="form-control">
              <option value="">Seleccione un miembro</option>
              {% for m in miembros %}
                <option value="{{ m.id }}">{{ m.nombres }} {{ m.apellidos }} ({{ m.dni }})</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label for="edit_pk_movimiento">Movimiento</label>
            <select name="pk_movimiento" id="edit_pk_movimiento" class="form-control">
              <option value="">Seleccione un Movimiento</option>
              {% for movimiento in movimientos %}
                <option value="{{ movimiento.pk_movimiento }}" {% if forloop.first %} selected {% endif %}>{{ movimiento.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>
{% 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
  var table = $('#tabla_roles_mesa').DataTable({
    responsive: true,
    pageLength: 50,
    dom: "<'row'<'col-md-6'l><'col-md-6 text-right'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-md-6'i><'col-md-6'p>>",
    language: {
      search: "Buscar en general:",
      lengthMenu: "Mostrar _MENU_ registros",
      info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
      paginate: {
        first: "Primero",
        last: "Último",
        next: "Siguiente",
        previous: "Anterior"
      }
    }
  });

  $('#tabla_roles_mesa thead tr:first-child th').each(function (i) {
    $('input', this).on('keyup change', function () {
      if (table.column(i).search() !== this.value) {
        table.column(i).search(this.value).draw();
      }
    });
  });

  // Envío AJAX para el formulario de actualización masiva
  $('#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 %}