{% extends 'base.html' %}
{% block title %}Teacher registration — Student Smart Portal{% endblock %}
{% block content %}
<section class="card register-card">
  <div class="eyebrow">PHARMACY DEPARTMENT · FACULTY PORTAL</div>
  <h1>Create your teacher account</h1>
  <p class="muted">Enter your academic information and at least one teaching portfolio. The administrator will review your application before access is enabled.</p>
  <form id="teacher-register" class="form-stack" method="post" action="{{url_for('teachers.register')}}">
    <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
    <div class="form-grid">
      <label>Username *<input name="username" required minlength="4" maxlength="32" autocomplete="username" placeholder="e.g. pharmacology_teacher" value="{{request.form.get('username','')}}"></label>
      <label>Teacher name *<input name="full_name" required minlength="3" maxlength="100" dir="auto" autocomplete="name" placeholder="Your full name" value="{{request.form.get('full_name','')}}"></label>
      <label>Academic rank *<select name="academic_rank" required><option value="">Select rank</option>{% for rank in ranks %}<option value="{{rank}}" {% if request.form.get('academic_rank')==rank %}selected{% endif %}>{{rank}}</option>{% endfor %}</select></label>
      <label>Scientific Degree *<select name="scientific_degree" required><option value="">Select degree</option>{% for degree in degrees %}<option value="{{degree}}" {% if request.form.get('scientific_degree')==degree %}selected{% endif %}>{{degree}}</option>{% endfor %}</select></label>
      <label>Password * (6 characters minimum)<input name="password" type="password" minlength="6" maxlength="128" required autocomplete="new-password"></label>
      <label>Confirm password *<input name="confirm_password" type="password" minlength="6" maxlength="128" required autocomplete="new-password"></label>
    </div>
    <p class="muted small-text">For better account security, use a unique password longer than the minimum.</p>
    <div class="notice">Your display name: <strong id="display-name-preview" dir="auto">Enter your name and qualifications</strong></div>
    <hr class="soft-rule">
    <div class="section-heading"><h2>Teaching Portfolios</h2><span class="muted small-text">Up to 15 portfolios</span></div>
    <div id="portfolio-list" class="portfolio-list"></div>
    <button type="button" class="button outline" id="add-portfolio">+ Add Teaching Portfolio</button>
    <div class="notice">For example: <strong>Pharmacology Theory 3rd Stage 1st Semester</strong>. You can teach multiple stages, components, or semesters.</div>
    <button type="submit" class="button primary">Request administrator approval</button>
  </form>
  <p><a href="{{url_for('login')}}">Already registered? Sign in</a></p>
</section>
<template id="portfolio-template">
  <div class="portfolio-entry">
    <label>Subject / Course Name *<input name="course_name" required minlength="2" maxlength="120" placeholder="e.g. Pharmacology"></label>
    <label>Component *<select name="component" required><option value="Theory">Theory</option><option value="Practice">Practice</option></select></label>
    <label>Stage *<select name="stage" required><option value="">Select stage</option>{% for stage in stages %}<option value="{{stage}}">{{stage}}</option>{% endfor %}</select></label>
    <label>Semester *<select name="semester" required><option value="">Select semester</option>{% for semester in semesters %}<option value="{{semester}}">{{semester}} Semester</option>{% endfor %}</select></label>
    <button type="button" class="button small outline remove-portfolio">Remove</button>
  </div>
</template>
{% endblock %}
{% block scripts %}
<script>
(()=>{
  const area=document.getElementById('portfolio-list');
  const template=document.getElementById('portfolio-template');
  const prefixes={{ ranks|tojson }};
  function preview(){
    const name=document.querySelector('[name="full_name"]').value.trim();
    const rank=document.querySelector('[name="academic_rank"]').value;
    const degree=document.querySelector('[name="scientific_degree"]').value;
    let prefix=prefixes[rank]||'';
    if(degree==='Ph.D.'){if(prefix&&!prefix.endsWith('.'))prefix+='.';prefix+='Dr.';}
    document.getElementById('display-name-preview').textContent=((prefix?prefix+' ':'')+name).trim()||'Enter your name and qualifications';
  }
  ['full_name','academic_rank','scientific_degree'].forEach(n=>document.querySelector('[name="'+n+'"]').addEventListener('input',preview));
  function add(values){
    if(area.children.length>=15){alert('Maximum 15 portfolios.');return;}
    area.appendChild(template.content.cloneNode(true));
    if(values){const entry=area.lastElementChild;['course_name','component','stage','semester'].forEach(k=>{entry.querySelector('[name="'+k+'"]').value=values[k]||'';});}
  }
  document.getElementById('add-portfolio').addEventListener('click',()=>add());
  area.addEventListener('click',e=>{if(e.target.classList.contains('remove-portfolio')){
    if(area.children.length<=1){alert('At least one portfolio is required.');return;}
    e.target.closest('.portfolio-entry').remove();
  }});
  const previous={{ {'course_name': request.form.getlist('course_name'),'component':request.form.getlist('component'),'stage':request.form.getlist('stage'),'semester':request.form.getlist('semester')}|tojson }};
  if(previous.course_name.length){previous.course_name.forEach((_,i)=>add({course_name:previous.course_name[i],component:previous.component[i],stage:previous.stage[i],semester:previous.semester[i]}));}
  else add();
  preview();
})();
</script>
{% endblock %}