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

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

{% block content %}
<div class="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-hover table-sm align-middle table-borderless rounded-3"
          style="width: 100%;">
          <thead class="text-white" style="background-color: #A3B0C7 !important;">
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>Fecha</th>
              <th>Lugar</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody class="small">
            {% 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 'listar_asistencias' 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>
          <tfoot>
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>Fecha</th>
              <th>Lugar</th>
              <th>Acciones</th>
            </tr>
          </tfoot>
        </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 %}

<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({
      autoWidth: false,
      scrollX: true,
      scrollY: '300px',
      scrollCollapse: true,
      pageLength: 50,
      dom: 'Brftip',
      orderCellsTop: true,  // Permite filtros en el `tfoot`
      buttons: [
        { extend: 'copy', className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-copy"></i>' },
        { extend: 'excel', className: 'btn btn-success btn-sm', text: '<i class="fas fa-file-excel"></i>', attr: { style: 'background-color: #218838; border-color: #218838;' } },
        { extend: 'pdf', className: 'btn btn-danger btn-sm', text: '<i class="fas fa-file-pdf"></i>' },
        { extend: 'print', className: 'btn btn-info btn-sm', text: '<i class="fas fa-print"></i>' },
        {
          extend: 'colvis',
          text: '<i class="fas fa-eye"></i>',
          className: 'btn btn-primary btn-sm'
        }
      ],
      initComplete: function () {
        // **Filtros en el tfoot**
        this.api().columns().every(function () {
          var column = this;
          var title = $(column.footer()).text().trim();

          if (title !== "Acciones" && title !== "") {  // Evita filtros en la columna de Acciones
            var input = $('<input class="form-control form-control-sm filterControl" type="text" placeholder="Filtrar ' + title + '" />')
              .appendTo($(column.footer()).empty())
              .on("keyup change clear", function () {
                if (column.search() !== this.value) {
                  column.search(this.value).draw();
                }
              });
          }
        });
      },
      fixedColumns: {
        rightColumns: 1
      },

    });

    // 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 %}