{% extends 'base.html' %}
{% from 'training/_program.html' import program_fields %}
{% block title %}{{ stu.full_name }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8 space-y-8" x-data="{edit:false, create:false}">
  <div>
    <a href="{{ url_for('training.students') }}" class="text-sm text-ocean-600">← Élèves</a>
    <div class="flex flex-wrap items-start justify-between gap-3 mt-2">
      <div>
        <h1 class="text-3xl">{{ stu.full_name }}</h1>
        <p class="text-sm text-gray-600">{{ stu.email or 'Pas de courriel' }} · {{ stu.phone or 'Pas de téléphone' }}{% if stu.birth_date %} · né le {{ stu.birth_date.strftime('%Y-%m-%d') }}{% endif %}</p>
      </div>
      <div class="flex gap-2">
        <button type="button" @click="edit=!edit" class="btn-secondary">Modifier la fiche</button>
        <button type="button" @click="create=!create" class="btn-coral">Nouveau dossier</button>
      </div>
    </div>
  </div>

  <form x-show="edit" x-cloak method="post" action="{{ url_for('training.update_student', student_id=stu.id) }}" class="card p-5 space-y-3">
    <div class="grid md:grid-cols-2 gap-3">
      <input name="first_name" value="{{ stu.first_name }}" class="input" placeholder="Prénom" aria-label="Prénom" required/>
      <input name="last_name" value="{{ stu.last_name }}" class="input" placeholder="Nom" aria-label="Nom" required/>
      <input name="email" type="email" value="{{ stu.email or '' }}" class="input" placeholder="Courriel" aria-label="Courriel"/>
      <input name="phone" value="{{ stu.phone or '' }}" class="input" placeholder="Téléphone" aria-label="Téléphone"/>
      <div><label class="text-xs text-gray-600">Date de naissance</label><input name="birth_date" type="date" value="{{ stu.birth_date.isoformat() if stu.birth_date }}" class="input"/></div>
    </div>
    <button class="btn-primary">Enregistrer</button>
  </form>

  <form x-show="create" x-cloak method="post" action="{{ url_for('training.create_student_record', student_id=stu.id) }}" class="card p-5 space-y-4">
    <h2 class="text-lg">Nouveau dossier pour {{ stu.first_name }}</h2>
    <div><label class="text-xs text-gray-600">Début de formation</label><input name="start_date" type="date" value="{{ today.isoformat() }}" class="input max-w-[12rem]"/></div>
    {{ program_fields() }}
    <button class="btn-primary">Créer le dossier</button>
  </form>

  <section aria-labelledby="dossiers">
    <h2 id="dossiers" class="text-xl mb-3">Dossiers de formation</h2>
    <div class="card divide-y divide-ocean-100">
      {% for r in records %}
      <a href="{{ url_for('training.record', record_id=r.id) }}" class="flex items-center gap-4 p-4 hover:bg-ocean-50">
        <div class="flex-1 min-w-0">
          <div class="font-semibold text-ocean-900 truncate">{{ r.program_name }}</div>
          <div class="text-xs text-gray-600">début {{ r.start_date.strftime('%Y-%m-%d') if r.start_date }}</div>
        </div>
        <div class="w-32 hidden sm:block">
          <div class="gauge"><i style="width:{{ r.progress }}%"></i></div>
          <div class="text-xs text-gray-600 mt-1 num">{{ r.progress }} % · {{ r.done_count }}/{{ r.milestones|length }}</div>
        </div>
        <span class="pill">{{ r.status }}</span>
        {% if r.locked %}<span class="pill" title="Un transfert a été émis">Verrouillé</span>{% endif %}
      </a>
      {% else %}
      <div class="p-6 text-center text-sm text-gray-600">Aucun dossier. Créez-en un avec « Nouveau dossier ».</div>
      {% endfor %}
    </div>
  </section>

  <section id="documents" aria-labelledby="documents-title" class="space-y-3">
    <h2 id="documents-title" class="text-xl">Pièces de l'élève</h2>
    <p class="text-sm text-gray-600">Ces pièces servent à tous ses dossiers : il suffit de les téléverser une fois.</p>

    {% if stu.document_alerts %}
    <div class="px-4 py-3 rounded-md bg-amber-50 border border-amber-200 text-amber-900 text-sm">
      À régler : {{ stu.document_alerts|join(', ') }}.
    </div>
    {% endif %}

    <form method="post" enctype="multipart/form-data" action="{{ url_for('training.upload_student_document', student_id=stu.id) }}"
          class="card p-4 grid sm:grid-cols-[14rem_1fr_auto] gap-3 items-end" x-data="{kind:'{{ kind_medical }}'}">
      <div><label class="text-xs text-gray-600">Type</label>
        <select name="kind" x-model="kind" class="input">{% for k in doc_kinds %}<option>{{ k }}</option>{% endfor %}</select></div>
      <div><label class="text-xs text-gray-600">Fichier (PDF, JPG, PNG — 10 Mo max)</label>
        <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png" required class="text-sm w-full"/></div>
      <button class="btn-primary justify-center">Téléverser</button>
      <div x-show="['{{ kind_medical }}','{{ kind_waiver }}'].includes(kind)" x-cloak class="sm:col-span-3">
        <label class="text-xs text-gray-600">Valide jusqu'au (optionnel)</label>
        <input name="valid_until" type="date" class="input max-w-[12rem]"/>
      </div>
    </form>

    <div class="card divide-y divide-ocean-100">
      {% for d in stu.documents %}
      <div class="p-3 flex flex-wrap items-center gap-3 text-sm">
        <div class="flex-1 min-w-[12rem]">
          <a class="text-ocean-600 font-medium" href="{{ url_for('training.download_student_document', student_id=stu.id, doc_id=d.id) }}">{{ d.original_name }}</a>
          <div class="text-xs text-gray-600">{{ d.kind }} · {{ (d.size / 1024)|round|int }} Ko · {{ d.uploaded_by }} · {{ d.uploaded_at.strftime('%Y-%m-%d') }}</div>
        </div>
        {% if d.valid_until %}
        <span class="pill {{ '!border-coral-500 !text-ocean-900' if d.expired }}">{{ 'Expiré le' if d.expired else 'Valide jusqu\'au' }} {{ d.valid_until.strftime('%Y-%m-%d') }}</span>
        {% endif %}
        <form method="post" action="{{ url_for('training.delete_student_document', student_id=stu.id, doc_id=d.id) }}" onsubmit="return confirm('Supprimer ce document ?')">
          <button class="text-red-700 text-xs">Supprimer</button></form>
      </div>
      {% else %}<div class="p-6 text-center text-sm text-gray-600">Aucune pièce.</div>{% endfor %}
    </div>
  </section>
</div>
{% endblock %}