{% extends 'base.html' %}
{% load dict_filters %}
{% block content %}
<div class="container">
  <h1 class="title">Mis Materias</h1>

  {% if materias %}
    {% for materia in materias %}
      <div class="box">
        <h2 class="subtitle">{{ materia.nombre }}</h2>
        <p>{{ materia.descripcion }}</p>

        <div style="margin-top:1rem;">
          <h3 class="is-size-6">Actividades</h3>
          <table class="table is-fullwidth">
            <thead>
              <tr>
                <th>Actividad</th>
                <th>Progreso</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody>
              {% for act in materia.actividades.all %}
                {% with prog=progresos|get_item:act.pk %}
                <tr>
                  <td>{{ act.titulo }}</td>
                  <td>
                    <span id="progress-text-{{ act.pk }}">
                      {% if prog %}{{ prog.progress }}% {% if prog.completed %}✅{% endif %}{% else %}0%{% endif %}
                    </span>
                  </td>
                  <td>
                    <input type="range" min="0" max="100" value="{% if prog %}{{ prog.progress }}{% else %}0{% endif %}" data-actividad="{{ act.pk }}" class="progress-range">
                    <button class="button is-small is-success btn-mark-complete" data-actividad="{{ act.pk }}">Marcar 100%</button>
                    <a class="button is-small is-light" href="{% url 'actividades:actividad_detalle' act.pk %}">Abrir</a>
                  </td>
                </tr>
                {% endwith %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    {% endfor %}
  {% else %}
    <p>No tienes materias seleccionadas. Ve a <a href="{% url 'actividades:lista_actividades' %}">Actividades</a> y elige una.</p>
  {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  function getCookie(name) {
    let v = null;
    if (document.cookie && document.cookie !== '') {
      document.cookie.split(';').forEach(cookie => {
        const cookiePair = cookie.trim().split('=');
        if (cookiePair[0] === name) v = decodeURIComponent(cookiePair[1]);
      });
    }
    return v;
  }

  function postProgress(actividadId, value) {
    const formData = new FormData();
    formData.append('actividad_id', actividadId);
    formData.append('progress', value);

    fetch("{% url 'actividades:update_progress' %}", {
      method: 'POST',
      headers: {'X-CSRFToken': getCookie('csrftoken')},
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      if (!data.ok) {
        console.error('Error al guardar progreso', data);
      } else {
        const text = document.querySelector(`#progress-text-${actividadId}`);
        if (text) text.textContent = data.progress + '% ' + (data.completed ? '✅' : '');
      }
    })
    .catch(err => console.error(err));
  }

  document.querySelectorAll('.progress-range').forEach(input => {
    input.addEventListener('change', (e) => {
      const val = e.target.value;
      const actId = e.target.dataset.actividad;
      postProgress(actId, val);
    });
  });

  document.querySelectorAll('.btn-mark-complete').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const actId = e.currentTarget.dataset.actividad;
      postProgress(actId, 100);
      const slider = document.querySelector(`input.progress-range[data-actividad="${actId}"]`);
      if (slider) slider.value = 100;
    });
  });
});
</script>
{% endblock %}