{% extends 'base.html' %}
{% block title %}{{ st.code }} — {{ rec.student.full_name }}{% endblock %}
{% block content %}
{% set f = st.form %}
<div class="max-w-6xl mx-auto px-4 py-8 space-y-6">
  <div>
    <a href="{{ url_for('training.record', record_id=rec.id, tab='forms') }}" class="text-sm text-ocean-600">← Formulaires de {{ rec.student.full_name }}</a>
    <div class="flex flex-wrap items-center justify-between gap-3 mt-2">
      <div>
        <h1 class="text-2xl">{{ st.title }}</h1>
        <p class="text-sm text-gray-600">Formulaire PADI n° {{ st.code }}{% if f.hint %} · {{ f.hint }}{% endif %}</p>
      </div>
      <span class="pill">{{ st.label }}</span>
    </div>
  </div>

  {% if rec.locked %}
  <div class="px-4 py-3 rounded-md bg-amber-50 border border-amber-200 text-amber-900 text-sm">Dossier verrouillé : ce formulaire ne peut plus être modifié.</div>
  {% endif %}

  <div class="grid lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] gap-6 items-start">
    <section aria-label="Formulaire PADI">
      {% if has_pdf %}
      <iframe src="{{ url_for('training.form_pdf', code=st.code) }}#view=FitH" title="Formulaire PADI {{ st.code }}"
              class="w-full h-[70vh] min-h-[28rem] bg-white border border-ocean-200 rounded-md"></iframe>
      <p class="text-sm mt-2"><a class="text-ocean-600 underline" href="{{ url_for('training.form_pdf', code=st.code) }}" target="_blank">Ouvrir le PDF dans un nouvel onglet</a>, utile sur téléphone ou pour l'imprimer vierge.</p>
      {% else %}
      <div class="card p-6 text-sm text-gray-600">Le PDF {{ st.code }} est introuvable dans le dossier Doc/OW du site.</div>
      {% endif %}
    </section>

    <div class="space-y-4">
      {% if f.kind == 'quiz' %}
      <form method="post" action="{{ url_for('training.save_quiz_score', record_id=rec.id, code=st.code) }}" class="card p-4 space-y-3">
        <h2 class="text-lg">Résultat</h2>
        <div class="grid grid-cols-3 gap-2">
          <div><label class="text-xs text-gray-600" for="score">Bonnes réponses</label>
            <input id="score" name="score" type="number" min="0" max="25" required value="{{ st.entry.score if st.entry and st.entry.score is not None }}" class="input num" {{ 'disabled' if rec.locked }}/></div>
          <div><label class="text-xs text-gray-600" for="total">Sur</label>
            <select id="total" name="total" class="input" {{ 'disabled' if rec.locked }}>
              {% for t in totals %}<option value="{{ t }}" {{ 'selected' if st.entry and st.entry.total == t }}>{{ t }}</option>{% endfor %}
            </select></div>
          <div><label class="text-xs text-gray-600" for="done_on">Date</label>
            <input id="done_on" name="done_on" type="date" max="{{ today.isoformat() }}" value="{{ (st.entry.done_on if st.entry and st.entry.done_on else today).isoformat() }}" class="input" {{ 'disabled' if rec.locked }}/></div>
        </div>
        <p class="text-xs text-gray-600">21 questions si l'élève planifie avec un ordinateur de plongée, 25 s'il utilise les tables.</p>
        {% if not rec.locked %}<button class="btn-primary">Enregistrer le score</button>{% endif %}
      </form>
      {% endif %}

      {% if f.kind != 'scan' %}
      <div class="card p-4 space-y-3" x-data="{pad:null}">
        <h2 class="text-lg">Signatures</h2>
        <p class="text-xs text-gray-600">Après lecture du formulaire ci-contre, chaque signataire signe à la main (doigt, stylet ou souris).</p>
        {% for role, label, sig in st.rows %}
        <div class="border border-ocean-100 rounded-md p-3 text-sm">
          <div class="flex flex-wrap items-center justify-between gap-2">
            <div><div class="font-medium">{{ label }}</div>
              {% if sig %}<div class="text-xs text-gray-600">{{ sig.signer_name }} · {{ sig.signed_at.strftime('%Y-%m-%d %H:%M') }} UTC</div>{% endif %}</div>
            {% if sig %}
              <img src="{{ sig.data_url }}" alt="Signature : {{ sig.signer_name }}" class="h-10"/>
              {% if not rec.locked %}
              <form method="post" action="{{ url_for('training.delete_form_signature', record_id=rec.id, code=st.code, signature_id=sig.id) }}" onsubmit="return confirm('Retirer cette signature ?')">
                <button class="text-red-700 text-xs">Retirer</button></form>
              {% endif %}
            {% elif not rec.locked %}
              <button type="button" class="btn-secondary !py-1.5 !px-3" @click="pad='{{ role }}'">Signer</button>
            {% else %}<span class="pill">Non signé</span>{% endif %}
          </div>
        </div>
        {% endfor %}
        {% if st.rows|selectattr(2)|list %}
        <div class="flex flex-wrap gap-x-5 gap-y-1 text-sm">
          <a href="{{ url_for('training.form_signed_pdf', record_id=rec.id, code=st.code) }}" target="_blank" class="btn-primary !py-1.5 !px-3">PDF signé</a>
          <a href="{{ url_for('training.form_attestation', record_id=rec.id, code=st.code) }}" target="_blank" class="text-ocean-600 underline self-center">Attestation de signature</a>
        </div>
        {% endif %}

        {% if not rec.locked %}
        <div x-show="pad" x-cloak @click.self="pad=null" @keydown.escape.window="pad=null"
             class="fixed inset-0 z-50 bg-black/40 flex items-end sm:items-center justify-center p-4">
          <form method="post" action="{{ url_for('training.sign_form', record_id=rec.id, code=st.code) }}" x-data="formPad" @submit="save($event)"
                class="bg-white rounded-md p-5 w-full max-w-lg space-y-3 max-h-[95vh] overflow-y-auto">
            <h3 class="text-lg" x-text="{{ {'student':'Signature de l\'élève','guardian':'Signature du parent ou tuteur','minor':'Signature du participant mineur'}|tojson }}[pad]"></h3>
            <input type="hidden" name="role" :value="pad"/>
            <div x-show="pad==='guardian'">
              <label class="text-sm font-medium" for="signer_name">Nom du parent ou tuteur</label>
              <input id="signer_name" name="signer_name" maxlength="120" class="input" :required="pad==='guardian'"/>
            </div>
            <div x-show="pad!=='guardian'" class="text-sm">Signataire : <strong>{{ rec.student.full_name }}</strong></div>
            <div class="relative">
              <canvas x-ref="canvas" width="900" height="300" aria-label="Zone de signature"
                      class="w-full aspect-[3/1] bg-white border-2 border-dashed border-ocean-300 rounded-md touch-none cursor-crosshair"
                      @pointerdown="start($event)" @pointermove="move($event)" @pointerup="end()" @pointercancel="end()"></canvas>
              <span x-show="!drawn" class="absolute inset-0 flex items-center justify-center text-gray-400 pointer-events-none">Signez ici</span>
              <button type="button" x-show="drawn" @click="clear()" class="absolute top-2 right-3 text-xs text-ocean-600 underline">Effacer</button>
            </div>
            <input type="hidden" name="image" x-ref="image"/>
            <p x-show="drawn && !enough" class="text-xs text-amber-800">Signature trop courte : signez à la main dans le cadre.</p>
            <div class="flex justify-end gap-2">
              <button type="button" class="btn-secondary" @click="pad=null">Annuler</button>
              <button class="btn-primary" :disabled="!enough">Signer</button>
            </div>
          </form>
        </div>
        {% endif %}
      </div>
      {% endif %}

      <div class="card p-4 space-y-3">
        <h2 class="text-lg">{{ 'Formulaire papier numérisé' if f.kind != 'scan' else 'Formulaire numérisé' }}</h2>
        {% if f.kind != 'scan' %}<p class="text-xs text-gray-600">Si l'élève a rempli la version papier, téléversez le scan : il remplace les signatures à l'écran.</p>{% endif %}
        {% if st.entry and st.entry.scan_name %}
        <div class="flex flex-wrap items-center gap-3 text-sm">
          <a class="text-ocean-600 font-medium" href="{{ url_for('training.download_form_scan', record_id=rec.id, code=st.code) }}">{{ st.entry.scan_original }}</a>
          <span class="text-xs text-gray-600">{{ (st.entry.scan_size / 1024)|round|int }} Ko</span>
          {% if not rec.locked %}
          <form method="post" action="{{ url_for('training.delete_form_scan', record_id=rec.id, code=st.code) }}" onsubmit="return confirm('Supprimer ce scan ?')" class="ml-auto">
            <button class="text-red-700 text-xs">Supprimer</button></form>
          {% endif %}
        </div>
        {% endif %}
        {% if not rec.locked %}
        <form method="post" enctype="multipart/form-data" action="{{ url_for('training.upload_form_scan', record_id=rec.id, code=st.code) }}" class="flex flex-wrap gap-2 items-center">
          <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png" required class="text-sm" aria-label="Fichier"/>
          <button class="btn-secondary">{{ 'Remplacer' if st.entry and st.entry.scan_name else 'Téléverser' }}</button>
          <span class="text-xs text-gray-600 w-full">PDF, JPG, JPEG, PNG — 10 Mo max</span>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Pavé de signature (souris, doigt ou stylet) exporté en PNG dans le champ « image »
document.addEventListener('alpine:init', () => {
  Alpine.data('formPad', () => ({
    drawn: false, drawing: false, last: null,
    ink: 0,  // longueur totale du tracé, pour refuser un simple point
    get enough() { return this.ink >= 150; },
    init() { this.$watch('pad', () => this.clear()); },
    point(e) {
      const c = this.$refs.canvas, r = c.getBoundingClientRect();
      return [(e.clientX - r.left) * c.width / r.width, (e.clientY - r.top) * c.height / r.height];
    },
    line(a, b) {
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#0f172a';
      ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0] + 0.01, b[1]); ctx.stroke();
    },
    start(e) {
      e.preventDefault();
      this.$refs.canvas.setPointerCapture(e.pointerId);
      this.drawing = true; this.last = this.point(e); this.line(this.last, this.last); this.drawn = true;
    },
    move(e) {
      if (!this.drawing) return;
      const p = this.point(e);
      this.line(this.last, p);
      this.ink += Math.hypot(p[0] - this.last[0], p[1] - this.last[1]);
      this.last = p;
    },
    end() { this.drawing = false; },
    clear() {
      const c = this.$refs.canvas;
      c.getContext('2d').clearRect(0, 0, c.width, c.height);
      this.drawn = false; this.ink = 0;
    },
    save(e) {
      if (!this.enough) { e.preventDefault(); return; }
      this.$refs.image.value = this.$refs.canvas.toDataURL('image/png');
    },
  }));
});
</script>
{% endblock %}