{% extends 'base.html.twig' %}
{% block title %}{{ program.label }} — RepTrack{% endblock %}
{% block body %}

<div class="page-title">{{ program.label|upper }}</div>
<div class="page-sub">Gère les jours et exercices</div>

<div class="card">
  {{ form_start(form) }}
  <div class="form-group">
    {{ form_label(form.label) }}{{ form_widget(form.label) }}{{ form_errors(form.label) }}
  </div>
  <button type="submit" class="btn btn-primary btn-sm">Enregistrer</button>
  {{ form_end(form) }}
</div>

<div class="row-between" style="margin:20px 0 8px">
  <div class="section-label" style="margin:0">JOURS</div>
  <a href="{{ path('app_day_new', {programId: program.id}) }}" class="btn btn-primary btn-sm">+ Jour</a>
</div>

{% for day in program.days %}
  <div class="card">

    {# Header jour #}
    <div style="margin-bottom:12px">
      <div class="row-between" style="margin-bottom:8px">
        <div>
          <span style="font-family:var(--font-display);font-size:18px;letter-spacing:1px">{{ day.label|upper }}</span>
          {% if day.focus %}
            <div style="font-size:11px;color:var(--text-muted);margin-top:2px">{{ day.focus }}</div>
          {% endif %}
        </div>
        <div class="row" style="gap:6px">
          <a href="{{ path('app_exercise_new', {dayId: day.id}) }}" class="btn btn-primary btn-sm">+ Ex.</a>
          <a href="{{ path('app_day_edit', {id: day.id}) }}" class="btn btn-secondary btn-sm">✎</a>
          <form method="post" action="{{ path('app_day_delete', {id: day.id}) }}" style="display:inline"
                onsubmit="return confirm('Supprimer ce jour ?')">
            <input type="hidden" name="_token" value="{{ csrf_token('delete_day'~day.id) }}"/>
            <button type="submit" class="btn btn-danger btn-sm">✕</button>
          </form>
        </div>
      </div>
    </div>

    {# Exercices #}
    {% for exercise in day.exercises %}
      <div style="background:var(--surface2);border-radius:8px;padding:10px 12px;
                  margin-bottom:6px;border:1px solid var(--border)">
        <div class="row-between">
          <div style="min-width:0;flex:1">
            <div style="font-size:13px;font-weight:500;
                        white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
              {{ exercise.name }}
            </div>
            <div style="font-size:11px;color:var(--text-muted)">
              {{ exercise.seriesCount }} séries
              {% if exercise.series|first %}
                · {{ exercise.series|first.reps }} · {{ exercise.series|first.restLabel }}
              {% endif %}
            </div>
          </div>
          <div class="row" style="gap:6px;flex-shrink:0;margin-left:8px">
            <a href="{{ path('app_exercise_edit', {id: exercise.id}) }}" class="btn btn-secondary btn-xs">✎</a>
            <form method="post" action="{{ path('app_exercise_delete', {id: exercise.id}) }}" style="display:inline"
                  onsubmit="return confirm('Supprimer ?')">
              <input type="hidden" name="_token" value="{{ csrf_token('delete_ex'~exercise.id) }}"/>
              <button type="submit" class="btn btn-danger btn-xs">✕</button>
            </form>
          </div>
        </div>
      </div>

      {# Repos entre exercices #}
      {% if not loop.last %}
        {% set effectiveRest = exercise.restAfterSeconds ?? app.user.defaultRestAfterExercise %}
        <div class="rest-between-ex" id="restBetween_{{ exercise.id }}">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/>
          </svg>
          <span class="rest-between-value" id="restValue_{{ exercise.id }}">
            {{ effectiveRest }}s repos
            {% if exercise.restAfterSeconds is null %}<span style="opacity:.4">(défaut)</span>{% endif %}
          </span>
          <button class="rest-between-edit-btn" onclick="openRestEdit({{ exercise.id }}, {{ effectiveRest }})">
            modifier
          </button>
        </div>
        <div class="rest-between-form" id="restForm_{{ exercise.id }}" style="display:none">
          <input type="number" id="restInput_{{ exercise.id }}" min="0" max="600" value="{{ effectiveRest }}"
                 style="width:72px;background:var(--bg);border:1px solid var(--accent);color:var(--text);
                        padding:6px 8px;border-radius:6px;font-size:13px;text-align:center"/>
          <span style="font-size:12px;color:var(--text-muted)">sec</span>
          <button class="btn btn-primary btn-xs"
                  onclick="saveRestAfter({{ exercise.id }}, '{{ path('app_exercise_rest_after', {id: exercise.id}) }}')">
            ✓
          </button>
          <button class="btn btn-secondary btn-xs" onclick="closeRestEdit({{ exercise.id }})">✕</button>
          <button class="btn btn-secondary btn-xs" style="color:var(--text-dim)"
                  onclick="resetRestAfter({{ exercise.id }}, '{{ path('app_exercise_rest_after', {id: exercise.id}) }}', {{ app.user.defaultRestAfterExercise }})">
            ↺ {{ app.user.defaultRestAfterExercise }}s
          </button>
        </div>
      {% endif %}

    {% else %}
      <div style="font-size:13px;color:var(--text-dim);text-align:center;padding:12px">
        Aucun exercice — <a href="{{ path('app_exercise_new', {dayId: day.id}) }}">Ajouter</a>
      </div>
    {% endfor %}
  </div>
{% else %}
  <div class="card" style="text-align:center;padding:24px;color:var(--text-muted)">
    Aucun jour. <a href="{{ path('app_day_new', {programId: program.id}) }}">Ajouter le premier jour</a>
  </div>
{% endfor %}

{% endblock %}

{% block stylesheets %}
<style>
  .rest-between-ex {
    display:flex;align-items:center;gap:8px;
    margin:4px 0;padding:6px 10px;
    border:1px dashed var(--border);border-radius:8px;
    font-size:12px;color:var(--text-dim);
  }
  .rest-between-ex svg{opacity:.4;flex-shrink:0}
  .rest-between-value{flex:1}
  .rest-between-edit-btn{
    background:transparent;border:1px solid var(--border);
    color:var(--text-dim);font-size:11px;padding:3px 8px;
    border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s;
  }
  .rest-between-edit-btn:hover{border-color:var(--accent);color:var(--accent)}
  .rest-between-form{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    margin:3px 0 6px;padding:8px 10px;
    background:var(--surface2);border-radius:8px;
    border:1px solid var(--accent);
  }
</style>
{% endblock %}

{% block javascripts %}
<script>
function openRestEdit(exId, v) {
  document.getElementById('restBetween_'+exId).style.display='none';
  document.getElementById('restForm_'+exId).style.display='flex';
  const inp = document.getElementById('restInput_'+exId);
  inp.focus(); inp.select();
}
function closeRestEdit(exId) {
  document.getElementById('restBetween_'+exId).style.display='flex';
  document.getElementById('restForm_'+exId).style.display='none';
}
async function saveRestAfter(exId, url) {
  const s = parseInt(document.getElementById('restInput_'+exId).value)||0;
  await _doSave(exId,url,s);
}
async function resetRestAfter(exId,url,def) { await _doSave(exId,url,0,true); }
async function _doSave(exId,url,seconds,reset=false) {
  try {
    const res  = await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({seconds:reset?null:seconds})});
    const data = await res.json();
    if(data.success){
      document.getElementById('restValue_'+exId).innerHTML =
        data.effective+'s repos'+(data.seconds===null?' <span style="opacity:.4">(défaut)</span>':'')';
      closeRestEdit(exId);
    }
  } catch(e){alert('Erreur.');}
}
</script>
{% endblock %}