{% extends 'seekers/base_portal.html' %}
{% load static taxonomy_tags %}

{% block title %}Professional Profile{% endblock %}
{% block topbar_title %}Professional Profile{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/company-profile-edit.css' %}?v=5" />
<link rel="stylesheet" href="{% static 'css/seeker-profile-edit.css' %}?v=1" />
{% endblock %}

{% block dash_content %}
<div class="cp-page">

  <div class="cp-head">
    <div class="cp-head-text">
      <h1>Build your professional profile</h1>
      <p>Keep your profile up to date so employers and PezaJob recruiters can better understand your experience and match you with relevant opportunities. Each section saves on its own.</p>
    </div>
    <div class="cp-progress-card">
      <div class="cp-progress-top"><span>Profile completion</span><strong>{{ progress.percent }}%</strong></div>
      <div class="cp-bar" role="progressbar" aria-valuenow="{{ progress.percent }}" aria-valuemin="0" aria-valuemax="100"><span style="width:{{ progress.percent }}%"></span></div>
      <p class="cp-progress-note">{% if progress.percent == 100 %}Your profile is complete.{% else %}{{ progress.done_count }} of {{ progress.total }} steps done. A complete profile helps employers understand your background.{% endif %}</p>
      <a href="{% url 'seekers:detail' profile.slug %}" target="_blank" rel="noopener" class="btn btn-primary btn-sm cp-preview"><i class="fas fa-eye"></i> Preview my profile</a>
    </div>
  </div>

  <div class="cp-layout">
    <nav class="cp-tabs" aria-label="Profile sections">
      {% for s in sections %}
      <a href="{% url 'seekers:edit_profile' %}?section={{ s.key }}" class="cp-tab{% if s.key == section %} is-active{% endif %}">
        <i class="fas {{ s.icon }}"></i><span>{{ s.label }}</span>{% if s.done %}<i class="fas fa-circle-check cp-tab-done" title="Complete"></i>{% endif %}
      </a>
      {% endfor %}
    </nav>

    <div class="cp-main">
      {% if progress.missing and progress.percent < 100 and section != 'preview' %}
      <div class="cp-todo">
        <strong>Still to complete</strong>
        <div class="cp-todo-list">{% for m in progress.missing %}<a href="{% url 'seekers:edit_profile' %}?section={{ m.section }}">{{ m.label }}</a>{% endfor %}</div>
      </div>
      {% endif %}

      {# ------------- forms sections ------------- #}
      {% if section == 'basics' %}
      <form method="post" enctype="multipart/form-data" class="cp-card">
        {% csrf_token %}<input type="hidden" name="section" value="basics">
        <div class="cp-card-head"><h2>Photo and basic information</h2><p>This is the first thing employers see. A clear photo and a sharp headline make a strong first impression.</p></div>
        <div class="cp-media">
          <div class="cp-media-logo">{% if profile.user.avatar %}<img src="{{ profile.user.avatar.url }}" alt="Current photo">{% else %}<span>{{ profile.initials }}</span>{% endif %}</div>
          <div class="cp-media-field">
            {% include 'seekers/profile_edit/field.html' with field=form.photo %}
            <label class="cp-check"><input type="checkbox" name="{{ form.show_photo.html_name }}" {% if form.show_photo.value %}checked{% endif %}> {{ form.show_photo.label }}</label>
          </div>
        </div>
        <div class="cp-media cp-media-cover">
          <div class="cp-media-cover-preview">{% if profile.display_cover_url %}<img src="{{ profile.display_cover_url }}" alt="Current cover">{% else %}<span>No cover photo</span>{% endif %}</div>
          <div class="cp-media-field">
            {% include 'seekers/profile_edit/field.html' with field=form.cover_image %}
            {% if profile.uploaded_cover_url %}<label class="cp-check"><input type="checkbox" name="{{ form.clear_cover_image.html_name }}"> {{ form.clear_cover_image.label }}</label>{% endif %}
          </div>
        </div>
        <h3 class="cp-sub">Full name</h3>
        <div class="cp-grid">
          {% include 'seekers/profile_edit/field.html' with field=form.first_name %}
          {% include 'seekers/profile_edit/field.html' with field=form.last_name %}
        </div>
        {% include 'seekers/profile_edit/field.html' with field=form.headline %}
        <div class="cp-grid">
          {% include 'seekers/profile_edit/field.html' with field=form.current_job_title %}
          {% include 'seekers/profile_edit/field.html' with field=form.current_employer %}
          {% include 'seekers/profile_edit/field.html' with field=form.industry %}
          {% include 'seekers/profile_edit/field.html' with field=form.sub_industry %}
        </div>
        <h3 class="cp-sub">Location</h3>
        <div class="cp-grid">
          {% include 'seekers/profile_edit/field.html' with field=form.city %}
          {% include 'seekers/profile_edit/field.html' with field=form.country %}
          {% include 'seekers/profile_edit/field.html' with field=form.years_experience %}
          {% include 'seekers/profile_edit/field.html' with field=form.professional_status %}
        </div>
        <datalist id="sp-companies">{% for n in company_names %}<option value="{{ n }}">{% endfor %}</datalist>
        {% include 'seekers/profile_edit/actions.html' %}
      </form>

      {% elif section == 'about' %}
      <form method="post" class="cp-card">
        {% csrf_token %}<input type="hidden" name="section" value="about">
        <div class="cp-card-head"><h2>About me</h2><p>Tell employers who you are professionally and which products or services you know.</p></div>
        {% include 'seekers/profile_edit/field.html' with field=form.bio %}
        {% include 'seekers/profile_edit/field.html' with field=form.products_experience %}
        {% include 'seekers/profile_edit/actions.html' %}
      </form>

      {% elif section == 'skills' %}
      <form method="post" class="cp-card">
        {% csrf_token %}<input type="hidden" name="section" value="skills">
        <div class="cp-card-head"><h2>Skills</h2><p>Skills are what employers search for first, and they feed your match score on every application.</p></div>
        {% include 'seekers/profile_edit/field.html' with field=form.skills %}
        {% include 'seekers/profile_edit/actions.html' %}
      </form>
      {% include 'seekers/profile_edit/items.html' %}
      <datalist id="sp-languages">{% for n in language_names %}<option value="{{ n }}">{% endfor %}</datalist>

      {% elif section == 'experience' or section == 'education' %}
      {% include 'seekers/profile_edit/items.html' %}
      <div class="cp-actions cp-actions-plain"><a href="{% url 'seekers:edit_profile' %}?section={% if section == 'experience' %}education{% else %}skills{% endif %}" class="btn btn-primary">Continue</a><a href="{% url 'seekers:dashboard' %}" class="btn btn-outline">Continue later</a></div>

      {% elif section == 'preferences' %}
      <form method="post" class="cp-card">
        {% csrf_token %}<input type="hidden" name="section" value="preferences">
        <div class="cp-card-head"><h2>Career preferences</h2><p>Help us find the right opportunities for you. Employers see the parts you choose to make public, and PezaJob uses all of it to match jobs to you.</p></div>
        <h3 class="cp-sub">What opportunities are you interested in?</h3>
        {% include 'seekers/profile_edit/field.html' with field=form.target_titles %}
        {% include 'seekers/profile_edit/field.html' with field=form.preferred_industries %}
        {% include 'seekers/profile_edit/field.html' with field=form.preferred_categories %}
        {% include 'seekers/profile_edit/field.html' with field=form.preferred_locations %}
        <h3 class="cp-sub">Employment preferences</h3>
        {% include 'seekers/profile_edit/checks.html' with field=form.employment_options %}
        {% include 'seekers/profile_edit/checks.html' with field=form.arrangement_options %}
        <label class="cp-check cp-check-block"><input type="checkbox" name="{{ form.willing_to_relocate.html_name }}" id="sp-relocate" {% if form.willing_to_relocate.value %}checked{% endif %}> {{ form.willing_to_relocate.label }}</label>
        <div id="sp-relocate-box">{% include 'seekers/profile_edit/field.html' with field=form.relocation_locations %}</div>
        <h3 class="cp-sub">Availability</h3>
        <div class="cp-grid">
          {% include 'seekers/profile_edit/field.html' with field=form.availability %}
          {% include 'seekers/profile_edit/field.html' with field=form.availability_timeline %}
          <div id="sp-date-box">{% include 'seekers/profile_edit/field.html' with field=form.available_from %}</div>
        </div>
        <h3 class="cp-sub">Salary expectations</h3>
        <div class="cp-grid">
          {% include 'seekers/profile_edit/field.html' with field=form.salary_min %}
          {% include 'seekers/profile_edit/field.html' with field=form.salary_max %}
          {% include 'seekers/profile_edit/field.html' with field=form.salary_currency %}
        </div>
        <label class="cp-check cp-check-block"><input type="checkbox" name="{{ form.salary_negotiable.html_name }}" {% if form.salary_negotiable.value %}checked{% endif %}> {{ form.salary_negotiable.label }}</label>
        <label class="cp-check cp-check-block"><input type="checkbox" name="{{ form.salary_private.html_name }}" {% if form.salary_private.value %}checked{% endif %}> {{ form.salary_private.label }}</label>
        <h3 class="cp-sub">Work authorisation</h3>
        {% include 'seekers/profile_edit/field.html' with field=form.authorised_countries %}
        {% include 'seekers/profile_edit/checks.html' with field=form.authorisation_options %}
        {% include 'seekers/profile_edit/actions.html' %}
      </form>

      {% elif section == 'cv' %}
      <form method="post" enctype="multipart/form-data" class="cp-card">
        {% csrf_token %}<input type="hidden" name="section" value="cv">
        <div class="cp-card-head"><h2>CV and professional links</h2><p>Your CV is what PezaJob reads to work out your match score, so keep it current.</p></div>
        {% if profile.cv_file %}
        <div class="sp-cv-current">
          <i class="fas fa-file-lines"></i>
          <div><strong>{{ profile.cv_file.name|cut:"seekers/cv/" }}</strong><small>Current CV</small></div>
          <a href="{% url 'seekers:serve_cv' profile.slug %}" target="_blank" rel="noopener" class="btn btn-outline btn-sm">View CV</a>
        </div>
        {% endif %}
        {% include 'seekers/profile_edit/field.html' with field=form.cv_file %}
        {% if profile.cv_file %}<label class="cp-check"><input type="checkbox" name="{{ form.clear_cv.html_name }}"> {{ form.clear_cv.label }}</label>{% endif %}
        <label class="cp-check cp-check-block"><input type="checkbox" name="{{ form.allow_cv_access.html_name }}" {% if form.allow_cv_access.value %}checked{% endif %}> {{ form.allow_cv_access.label }}</label>
        <h3 class="cp-sub">Professional links</h3>
        <div class="cp-grid">
          {% include 'seekers/profile_edit/field.html' with field=form.linkedin_url hide_optional=True %}
          {% include 'seekers/profile_edit/field.html' with field=form.website_url hide_optional=True %}
          {% include 'seekers/profile_edit/field.html' with field=form.portfolio_url hide_optional=True %}
          {% include 'seekers/profile_edit/field.html' with field=form.github_url hide_optional=True %}
          {% include 'seekers/profile_edit/field.html' with field=form.other_link_url hide_optional=True %}
        </div>
        {% include 'seekers/profile_edit/actions.html' %}
      </form>
      {% include 'seekers/profile_edit/items.html' %}

      {% elif section == 'privacy' %}
      <form method="post" class="cp-card">
        {% csrf_token %}<input type="hidden" name="section" value="privacy">
        <div class="cp-card-head"><h2>Privacy and contact</h2><p>You control how your professional information is shared. Your contact details are never shown publicly.</p></div>
        <h3 class="cp-sub">Contact details</h3>
        <div class="cp-grid">
          <div class="cp-field"><label>Email address</label><p class="cp-help">Your login email. Change it under <a href="{% url 'accounts:settings' %}" class="set-link">Account Settings</a>.</p><input type="email" class="form-control" value="{{ request.user.email }}" disabled></div>
          {% include 'seekers/profile_edit/field.html' with field=form.phone %}
        </div>
        {% include 'seekers/profile_edit/radios.html' with field=form.contact_visibility %}
        <h3 class="cp-sub">Profile visibility</h3>
        <div class="sp-radios">
          {% for radio in form.visibility %}
          <label class="sp-radio">{{ radio.tag }}<span><strong>{{ radio.choice_label }}</strong>
            {% if radio.data.value == 'public' %}Anyone can view your professional profile.{% elif radio.data.value == 'recruiters' %}Your profile can be discovered by relevant employers and recruiters. Recommended.{% else %}Your profile is not available for professional discovery (PezaJob Zambia only).{% endif %}</span></label>
          {% endfor %}
        </div>
        <h3 class="cp-sub">Recruitment preferences</h3>
        {% for f in form %}{% if f.name == 'consent_contact' or f.name == 'consent_present' or f.name == 'consent_matching' or f.name == 'confirm_accuracy' or f.name == 'is_online' %}
        <label class="cp-check cp-check-block sp-consent"><input type="checkbox" name="{{ f.html_name }}" {% if f.value %}checked{% endif %}> {{ f.label }}</label>
        {% endif %}{% endfor %}
        {% include 'seekers/profile_edit/actions.html' %}
      </form>
      {% include 'seekers/profile_edit/items.html' %}

      {% elif section == 'preview' %}
      <div class="cp-card">
        <div class="cp-card-head"><h2>Preview your profile</h2><p>See how your profile appears to employers and recruiters. The preview only shows information allowed by your privacy and visibility settings.</p></div>
        <ul class="cp-preview-list">
          {% for item in progress.items %}<li class="{% if item.done %}is-done{% endif %}"><a href="{% url 'seekers:edit_profile' %}?section={{ item.section }}"><i class="fas {% if item.done %}fa-circle-check{% else %}fa-circle{% endif %}"></i> {{ item.label }}<em>{% if item.done %}Done{% else %}Add{% endif %}</em></a></li>{% endfor %}
        </ul>
        {% if profile.visibility == 'private' %}<p class="cp-help" style="margin-top:14px;"><i class="fas fa-eye-slash"></i> Your profile is private, so only you can see it. Change this under <a href="{% url 'seekers:edit_profile' %}?section=privacy" class="set-link">Privacy and contact</a>.</p>{% endif %}
        <div class="cp-actions"><a href="{% url 'seekers:detail' profile.slug %}" target="_blank" rel="noopener" class="btn btn-primary"><i class="fas fa-eye"></i> Preview my professional profile</a><a href="{% url 'seekers:dashboard' %}" class="btn btn-outline">Back to dashboard</a></div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% industry_tree_script %}
<script src="{% static 'js/industry-cascade.js' %}?v=1"></script>
<script src="{% static 'js/company-profile-edit.js' %}?v=3"></script>
<script src="{% static 'js/seeker-profile-edit.js' %}?v=1"></script>
{% endblock %}