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

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

{% block content %}
<div class="container mt-4">
  <div class="card">
    <!-- Encabezado -->
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
      <h3 class="card-title mb-2 mb-md-0">Listado de Capacitaciones</h3>
      <div class="ml-auto">
        <!-- Botón para abrir el modal de Registrar -->
        <button type="button" class="btn btn-success" id="btnAbrirModalRegistrarCapacitacion">
          <i class="fas fa-plus"></i> Agregar Capacitación
        </button>
      </div>
    </div>
    <div class="card-body">
      <!-- Envolver la tabla en un contenedor responsive -->
      <div class="table-responsive">
        <table id="tabla_capacitaciones" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>Fecha</th>
              <th>Lugar</th>
              <th>Acciones</th>
            </tr>
            <!-- Fila para filtros individuales, colocada justo debajo de los títulos -->
            <tr class="filters">
              <th><input type="text" placeholder="Filtrar ID" class="form-control form-control-sm" /></th>
              <th><input type="text" placeholder="Filtrar Nombre" class="form-control form-control-sm" /></th>
              <th><input type="text" placeholder="Filtrar Fecha" class="form-control form-control-sm" /></th>
              <th><input type="text" placeholder="Filtrar Lugar" class="form-control form-control-sm" /></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for cap in capacitaciones %}
            <tr data-id="{{ cap.id }}"
                data-nombre="{{ cap.nombre }}"
                data-fecha="{{ cap.fecha }}"
                data-lugar="{{ cap.lugar }}"
                data-capacitador-id="{{ cap.capacitador_id|default_if_none:'' }}"
                data-capacitador-nombre="{{ cap.capacitador_nombre|default_if_none:'' }}"
                data-overall-progress="{{ cap.overall_progress|default_if_none:'' }}"
                data-estado="{{ cap.estado|default_if_none:'' }}">
              <td>{{ cap.id }}</td>
              <td>{{ cap.nombre }}</td>
              <td>{{ cap.fecha }}</td>
              <td>{{ cap.lugar }}</td>
              <td>
                <!-- Botón Ver Asistencias -->
                <a href="{% url 'asistencias_masivas' cap.id %}" class="btn btn-sm btn-info">
                  <i class="fas fa-eye"></i>
                </a>
                <!-- Botón Editar (abre modal) -->
                <button type="button" class="btn btn-warning btnEditarCapacitacion" data-id="{{ cap.id }}">
                  <i class="fas fa-edit"></i>
                </button>
                <!-- Botón Borrar (borrado suave) -->
                <button type="button" class="btn btn-danger btnBorrarCapacitacion" data-id="{{ cap.id }}">
                  <i class="fas fa-trash"></i>
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal para Registrar Capacitación -->
<div class="modal fade" id="modalRegistrarCapacitacion" tabindex="-1" role="dialog" aria-labelledby="modalCapacitacionLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="formRegistrarCapacitacion" method="POST">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="modalCapacitacionLabel">Registrar Capacitació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">
          <!-- Nombre y Fecha -->
          <div class="form-group">
            <label for="reg_nombre">Nombre</label>
            <input type="text" class="form-control" id="reg_nombre" name="nombre" required>
          </div>
          <div class="form-group">
            <label for="reg_fecha">Fecha</label>
            <input type="datetime-local" class="form-control" id="reg_fecha" name="fecha" required>
          </div>
          <!-- Lugar y Capacitador -->
          <div class="form-group">
            <label for="reg_lugar">Lugar</label>
            <input type="text" class="form-control" id="reg_lugar" name="lugar">
          </div>
          <div class="form-group">
            <label for="reg_capacitador_id">Capacitador</label>
            <select id="reg_capacitador_id" name="capacitador_id" class="form-control"></select>
          </div>
          <!-- Overall Progress -->
          <div class="form-group">
            <label for="reg_overall_progress">Overall Progress</label>
            <input type="text" class="form-control" id="reg_overall_progress" name="overall_progress">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal para Editar Capacitación (estructura similar a la de registrar) -->
<div class="modal fade" id="modalEditarCapacitacion" tabindex="-1" role="dialog" aria-labelledby="modalCapacitacionLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="formEditarCapacitacion" method="POST">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="modalCapacitacionLabel">Editar Capacitació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">
          <!-- Campo oculto para el ID -->
          <input type="hidden" id="edit_capacitacion_id" name="capacitacion_id">
          <!-- Nombre y Fecha -->
          <div class="form-group">
            <label for="edit_nombre">Nombre</label>
            <input type="text" class="form-control" id="edit_nombre" name="nombre" required>
          </div>
          <div class="form-group">
            <label for="edit_fecha">Fecha</label>
            <input type="datetime-local" class="form-control" id="edit_fecha" name="fecha" required>
          </div>
          <!-- Lugar y Capacitador -->
          <div class="form-group">
            <label for="edit_lugar">Lugar</label>
            <input type="text" class="form-control" id="edit_lugar" name="lugar">
          </div>
          <div class="form-group">
            <label for="edit_capacitador_id">Capacitador</label>
            <select id="edit_capacitador_id" name="capacitador_id" class="form-control"></select>
          </div>
          <!-- Overall Progress -->
          <div class="form-group">
            <label for="edit_overall_progress">Overall Progress</label>
            <input type="text" class="form-control" id="edit_overall_progress" name="overall_progress">
          </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>
      </form>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<!-- Dependencias -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>
<!-- CSS para FixedColumns -->
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- JS para FixedColumns -->
<script src="https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Para usar Select2 en vez de Tom Select en el campo "capacitador" en edición -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
  // Función para convertir "YYYY-MM-DD HH:MM:SS" a "YYYY-MM-DDTHH:MM"
  function convertirFechaDateTimeLocal(fechaStr) {
    if (!fechaStr) return "";
    let partes = fechaStr.split(" ");
    if (partes.length < 2) return fechaStr;
    let fecha = partes[0]; // "2025-02-24"
    let horaCompleta = partes[1]; // "15:42:00"
    let hora = horaCompleta.substring(0,5); // "15:42"
    return fecha + "T" + hora; // "2025-02-24T15:42"
  }
  
  $(document).ready(function(){
    // 1. Inicializar DataTable con búsqueda general y filtros, anclando la columna de "Acciones"
    var table = $('#tabla_capacitaciones').DataTable({
      responsive: true,
      fixedColumns: {
        rightColumns: 1
      },
      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>>",
      pageLength: 50,
      orderCellsTop: true,
      language: {
        search: "Buscar:",
        lengthMenu: "Mostrar _MENU_ registros",
        info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
        paginate: {
          first: "Primero",
          last: "Último",
          next: "Siguiente",
          previous: "Anterior"
        }
      }
    });
  
    // Asociar eventos de filtrado a cada input de la segunda fila (clase .filters)
    $('#tabla_capacitaciones thead tr.filters th').each(function (index) {
      // No se agrega filtro en la columna de "Acciones" (última columna)
      if (index === 4) return;
      $('input', this).on('keyup change', function () {
        table.column(index).search(this.value).draw();
      });
    });
  
    // 2. Abrir modal de Registrar
    $("#btnAbrirModalRegistrarCapacitacion").on("click", function(){
      $('#formRegistrarCapacitacion')[0].reset();
      $("#modalRegistrarCapacitacion").modal("show");
    });
  
    // 3. Inicializar Select2 para el select de capacitador en Registro
    $("#reg_capacitador_id").select2({
      ajax: {
        url: "{% url 'get_capacitadores' %}",
        data: function(params){
          return { term: params.term };
        },
        processResults: function(data){
          return {
            results: data.map(item => ({id: item.id, text: item.label}))
          }
        }
      },
      placeholder: "Buscar capacitador",
      width: '100%'
    });
  
    // 4. Enviar formulario de Registro vía AJAX
    $("#formRegistrarCapacitacion").on("submit", function(e) {
      e.preventDefault();
      let formData = $(this).serialize();
      
      $.ajax({
        url: "{% url 'registrar_capacitacion' %}",
        method: "POST",
        data: formData,
        dataType: "json",
        success: function(res) {
          if (res.success) {
            $("#modalRegistrarCapacitacion").modal("hide");
            Swal.fire("Éxito", "Capacitación registrada exitosamente.", "success");
            location.reload();
          } else {
            console.error("Error en respuesta:", res);
            Swal.fire("Error", res.error || "No se pudo registrar.", "error");
          }
        },
        error: function(xhr) {
          console.error("Error AJAX:", xhr.responseText);
          Swal.fire("Error", "Error en el servidor.", "error");
        }
      });
    });
  
    // 5. Inicializar Select2 para el select de capacitador en el Modal de Edición
    $("#edit_capacitador_id").select2({
      ajax: {
        url: "{% url 'get_capacitadores' %}",
        data: function(params){
          return { term: params.term };
        },
        processResults: function(data){
          return {
            results: data.map(item => ({id: item.id, text: item.label}))
          }
        }
      },
      placeholder: "Buscar capacitador",
      width: '100%'
    });
  
    // 6. Abrir modal de Edición
    $(".btnEditarCapacitacion").on("click", function(){
      let row = $(this).closest("tr");
      let id = row.data("id");
      let nombre = row.data("nombre") || "";
      let fechaRaw = row.data("fecha") || "";
      let fechaFmt = convertirFechaDateTimeLocal(fechaRaw);
      let lugar = row.data("lugar") || "";
      let capId = row.data("capacitador-id") || "";
      let capNombre = row.data("capacitador-nombre") || "No asignado";
      let overall = row.data("overall-progress") || "";
      let estado = row.data("estado") || "";
  
      // Rellenar campos del modal de edición
      $("#edit_capacitacion_id").val(id);
      $("#edit_nombre").val(nombre);
      $("#edit_fecha").val(fechaFmt);
      $("#edit_lugar").val(lugar);
      $("#edit_overall_progress").val(overall);
      // Actualizar el select2 de capacitador en edición:
      $("#edit_capacitador_id").empty();
      if(capId) {
        var newOption = new Option(capNombre, capId, true, true);
        $("#edit_capacitador_id").append(newOption).trigger("change");
      } else {
        $("#edit_capacitador_id").val(null).trigger("change");
      }
  
      $("#modalEditarCapacitacion").modal("show");
    });
  
    // 7. Enviar formulario de Edición vía AJAX
    $("#formEditarCapacitacion").on("submit", function(e){
    e.preventDefault();
    let id = $("#edit_capacitacion_id").val();
    let formData = $(this).serialize();
    $.ajax({
      url: "{% url 'editar_capacitacion' 0 %}".replace("0", id),
      method: "POST",
      data: formData,
      success: function(res){
        if(res.success){
          $("#modalEditarCapacitacion").modal("hide");
          Swal.fire("Éxito", "Capacitación actualizada exitosamente.", "success");
          location.reload();
        } else {
          Swal.fire("Error", res.error || "No se pudo actualizar.", "error");
        }
      },
      error: function(){
        Swal.fire("Error", "Error al enviar el formulario.", "error");
      }
    });
  });

  // 9. Borrar (AJAX) suave
  $(".btnBorrarCapacitacion").on("click", function(){
    let id = $(this).data("id");
    Swal.fire({
      title: "¿Estás seguro?",
      text: "Se realizará un borrado de esta capacitación.",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sí, borrar",
      cancelButtonText: "Cancelar"
    }).then((result) => {
      if(result.isConfirmed){
        $.ajax({
          url: "{% url 'borrar_capacitacion' 0 %}".replace("0", id),
          method: "POST",
          data: { csrfmiddlewaretoken: "{{ csrf_token }}" },
          success: function(res){
            if(res.success){
              Swal.fire("Borrado", "La capacitación fue borrada exitosamente.", "success");
              location.reload();
            } else {
              Swal.fire("Error", res.error || "No se pudo borrar.", "error");
            }
          },
          error: function(){
            Swal.fire("Error", "Error al borrar la capacitación.", "error");
          }
        });
      }
    });
  });
});
</script>

<!-- Alertas de Django con SweetAlert2 -->
<script>
  {% if messages %}
    {% for message in messages %}
      Swal.fire({
        icon: '{% if message.tags == "success" %}success{% else %}error{% endif %}',
        title: '{{ message }}',
        timer: 5000,
        showConfirmButton: true
      });
    {% endfor %}
  {% endif %}
</script>
{% endblock scripts %}