{% extends base_template %}

{% block title %}Account Settings{% endblock %}
{% block topbar_title %}Account Settings{% endblock %}

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

  <header class="set-hero">
    <div class="set-hero-avatar">
      {{ request.user.first_name|slice:":1"|upper }}{{ request.user.last_name|slice:":1"|upper }}{% if not request.user.first_name and not request.user.last_name %}{{ request.user.username|slice:":2"|upper }}{% endif %}
      {% if request.user.avatar %}<img src="{{ request.user.avatar.url }}" alt="" onerror="this.remove()">{% endif %}
    </div>
    <div class="set-hero-info">
      <h1>{{ request.user.get_full_name|default:request.user.username }}</h1>
      <p>{{ request.user.email }} &middot; {{ request.user.get_role_display }}</p>
      <div class="set-chips">
        {% if request.user.is_staff %}<span class="set-chip"><i class="fas fa-shield-halved"></i> Staff access</span>{% endif %}
        {% if seeker_profile %}
          <span class="set-chip {% if seeker_profile.is_public %}is-on{% endif %}"><i class="fas fa-{% if seeker_profile.is_public %}eye{% else %}eye-slash{% endif %}"></i> Profile {% if seeker_profile.is_public %}public{% else %}private{% endif %}</span>
          <span class="set-chip {% if seeker_profile.is_online %}is-on{% endif %}"><i class="fas fa-circle"></i> {% if seeker_profile.is_online %}Online{% else %}Offline{% endif %}</span>
        {% elif company %}
          <span class="set-chip {% if company.is_public %}is-on{% endif %}"><i class="fas fa-{% if company.is_public %}eye{% else %}eye-slash{% endif %}"></i> Page {% if company.is_public %}public{% else %}private{% endif %}</span>
          <span class="set-chip {% if company.is_online %}is-on{% endif %}"><i class="fas fa-circle"></i> {% if company.is_online %}Online{% else %}Offline{% endif %}</span>
        {% endif %}
      </div>
    </div>
    <div class="set-hero-actions">
      {% if seeker_profile and seeker_profile.is_public %}<a href="{{ seeker_profile.get_absolute_url }}" class="btn btn-outline btn-sm" target="_blank" rel="noopener"><i class="fas fa-arrow-up-right-from-square"></i> View public profile</a>{% endif %}
      {% if company and company.is_public %}<a href="{{ company.get_absolute_url }}" class="btn btn-outline btn-sm" target="_blank" rel="noopener"><i class="fas fa-arrow-up-right-from-square"></i> View public page</a>{% endif %}
    </div>
  </header>

  <nav class="set-tabs" role="tablist" aria-label="Settings sections">
    <a href="?tab=account" class="set-tab{% if active_tab == 'account' %} is-active{% endif %}" data-tab="account" role="tab"><i class="fas fa-user-circle"></i> Account</a>
    <a href="?tab=security" class="set-tab{% if active_tab == 'security' %} is-active{% endif %}" data-tab="security" role="tab"><i class="fas fa-lock"></i> Security</a>
    {% if has_profile_tab %}
    <a href="?tab=profile" class="set-tab{% if active_tab == 'profile' %} is-active{% endif %}" data-tab="profile" role="tab">
      {% if seeker_form %}<i class="fas fa-id-card"></i> My profile{% else %}<i class="fas fa-building"></i> Company profile{% endif %}
    </a>
    {% endif %}
  </nav>

  {# ───────── ACCOUNT ───────── #}
  <section class="set-panel{% if active_tab == 'account' %} is-active{% endif %}" data-panel="account" role="tabpanel">
    <form method="post" enctype="multipart/form-data" class="set-form">
      {% csrf_token %}
      <input type="hidden" name="action" value="profile">
      {% if profile_form.errors %}<div class="set-alert"><i class="fas fa-circle-exclamation"></i> Please fix the highlighted fields below.</div>{% endif %}

      <div class="set-card">
        <div class="set-card-head"><i class="fas fa-image"></i><div><h2>Profile photo</h2>
          <p>{% if request.user.is_company %}This is also your company logo on job cards and your public page.{% elif request.user.is_seeker %}Shown on your account, public profile and carousel cards.{% else %}Shown on your account and in the sidebar.{% endif %}</p></div></div>
        <div class="set-photo">
          <div class="set-photo-preview">
            {{ request.user.first_name|slice:":1"|upper }}{{ request.user.last_name|slice:":1"|upper }}
            {% if request.user.avatar %}<img src="{{ request.user.avatar.url }}" alt="" onerror="this.remove()">{% endif %}
          </div>
          <div class="set-photo-controls">
            {{ profile_form.avatar }}
            <small>PNG or JPG, square works best.</small>
            {% if profile_form.avatar.errors %}<div class="set-error">{{ profile_form.avatar.errors.0 }}</div>{% endif %}
            {% if request.user.avatar %}<label class="set-check"><span class="set-check-box">{{ profile_form.clear_avatar }}</span> Remove current photo</label>{% endif %}
          </div>
        </div>
      </div>

      <div class="set-card">
        <div class="set-card-head"><i class="fas fa-address-card"></i><div><h2>Personal details</h2><p>Used to sign in and to contact you.</p></div></div>
        <div class="set-grid">
          {% include 'accounts/partials/set_field.html' with field=profile_form.first_name %}
          {% include 'accounts/partials/set_field.html' with field=profile_form.last_name %}
          {% include 'accounts/partials/set_field.html' with field=profile_form.email %}
          {% include 'accounts/partials/set_field.html' with field=profile_form.phone %}
          <div class="set-field set-full">
            <label for="{{ profile_form.username.id_for_label }}">Username<em>*</em></label>
            {{ profile_form.username }}
            <small>Letters, digits and @/./+/-/_ only.</small>
            {% for error in profile_form.username.errors %}<div class="set-error">{{ error }}</div>{% endfor %}
          </div>
        </div>
      </div>

      {% if request.user.is_platform_admin and profile_form.cover_image %}
      <div class="set-card">
        <div class="set-card-head"><i class="fas fa-panorama"></i><div><h2>Cover photo</h2><p>Banner for your admin account.</p></div></div>
        {% if request.user.cover_image %}
          {% include 'accounts/partials/cover_image_fields.html' with cover_field=profile_form.cover_image clear_field=profile_form.clear_cover_image preview_url=request.user.cover_image.url has_uploaded_cover=True %}
        {% else %}
          {% include 'accounts/partials/cover_image_fields.html' with cover_field=profile_form.cover_image clear_field=profile_form.clear_cover_image preview_url='' has_uploaded_cover=False %}
        {% endif %}
      </div>
      {% endif %}

      <div class="set-savebar"><button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk"></i> Save account</button></div>
    </form>
  </section>

  {# ───────── SECURITY ───────── #}
  <section class="set-panel{% if active_tab == 'security' %} is-active{% endif %}" data-panel="security" role="tabpanel">
    <div class="set-two">
      <form method="post" class="set-form">
        {% csrf_token %}
        <input type="hidden" name="action" value="password">
        <div class="set-card">
          <div class="set-card-head"><i class="fas fa-key"></i><div><h2>Change password</h2><p>Use at least 8 characters that are not common or easy to guess.</p></div></div>
          <div class="set-grid set-grid-1">
            {% for field in password_form %}{% include 'accounts/partials/set_field.html' with field=field %}{% endfor %}
          </div>
          {% if password_form.non_field_errors %}<div class="set-error">{{ password_form.non_field_errors.0 }}</div>{% endif %}
        </div>
        <div class="set-savebar"><button type="submit" class="btn btn-primary"><i class="fas fa-lock"></i> Update password</button></div>
      </form>

      <div class="set-card set-info">
        <div class="set-card-head"><i class="fas fa-circle-info"></i><div><h2>Account information</h2><p>For your reference.</p></div></div>
        <dl class="set-dl">
          <div><dt>Email</dt><dd>{{ request.user.email|default:"—" }}</dd></div>
          <div><dt>Username</dt><dd>@{{ request.user.username }}</dd></div>
          <div><dt>Account type</dt><dd>{{ request.user.get_role_display }}</dd></div>
          <div><dt>Member since</dt><dd>{{ request.user.date_joined|date:"j F Y" }}</dd></div>
          <div><dt>Last sign-in</dt><dd>{{ request.user.last_login|date:"j F Y, H:i"|default:"—" }}</dd></div>
        </dl>
      </div>
    </div>
  </section>

  {# ───────── SEEKER PROFILE ───────── #}
  {% if seeker_form %}
  <section class="set-panel{% if active_tab == 'profile' %} is-active{% endif %}" data-panel="profile" role="tabpanel">
    <form method="post" enctype="multipart/form-data" class="set-form">
      {% csrf_token %}
      <input type="hidden" name="action" value="seeker">
      <div class="set-alert" style="background:var(--ds-tint-action);color:var(--brand-navy);"><i class="fas fa-id-card"></i> Your full professional profile (experience, education, skills, preferences and more) is edited from <a href="{% url 'seekers:edit_profile' %}" class="set-link">Professional Profile</a>.</div>
      {% if seeker_form.errors %}<div class="set-alert"><i class="fas fa-circle-exclamation"></i> Please fix the highlighted fields below.</div>{% endif %}

      <div class="set-card">
        <div class="set-card-head"><i class="fas fa-panorama"></i><div><h2>Cover photo</h2><p>Banner shown on your public profile and carousel card. Your profile photo is changed under <a href="?tab=account" class="set-link" data-tab-link="account">Account</a>.</p></div></div>
        {% if seeker_profile %}
          {% include 'accounts/partials/cover_image_fields.html' with cover_field=seeker_form.cover_image clear_field=seeker_form.clear_cover_image preview_url=seeker_profile.uploaded_cover_url has_uploaded_cover=seeker_profile.uploaded_cover_url %}
        {% else %}
          {% include 'accounts/partials/cover_image_fields.html' with cover_field=seeker_form.cover_image clear_field=seeker_form.clear_cover_image preview_url='' has_uploaded_cover=False %}
        {% endif %}
      </div>

      {% for section in seeker_sections %}
      <div class="set-card">
        <div class="set-card-head"><i class="fas {{ section.icon }}"></i><div><h2>{{ section.title }}</h2></div></div>
        {% if section.title == 'Your CV' and seeker_profile and seeker_profile.cv_file %}
        <p class="set-note"><i class="fas fa-paperclip"></i> Current CV: <a href="{{ seeker_profile.cv_file.url }}" target="_blank" rel="noopener" class="set-link">{{ seeker_profile.cv_file.name|slice:"-40:" }}</a>. Upload a new file to replace it.</p>
        {% endif %}
        <div class="set-grid">{% for field in section.fields %}{% include 'accounts/partials/set_field.html' with field=field %}{% endfor %}</div>
      </div>
      {% endfor %}

      <div class="set-savebar"><button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk"></i> Save profile</button></div>
    </form>
  </section>
  {% endif %}

  {# ───────── COMPANY PROFILE ───────── #}
  {% if company_form %}
  <section class="set-panel{% if active_tab == 'profile' %} is-active{% endif %}" data-panel="profile" role="tabpanel">
    <form method="post" enctype="multipart/form-data" class="set-form">
      {% csrf_token %}
      <input type="hidden" name="action" value="company">
      <div class="set-alert" style="background:var(--ds-tint-action);color:var(--brand-navy);"><i class="fas fa-building"></i> Your full company profile (about, products, careers, gallery and more) is edited from <a href="{% url 'employers:edit_company' %}" class="set-link">Company Profile</a>.</div>
      {% if company_form.errors %}<div class="set-alert"><i class="fas fa-circle-exclamation"></i> Please fix the highlighted fields below.</div>{% endif %}

      <div class="set-card">
        <div class="set-card-head"><i class="fas fa-panorama"></i><div><h2>Cover photo</h2><p>Banner for your company page. Your logo is your profile photo, changed under <a href="?tab=account" class="set-link" data-tab-link="account">Account</a>.</p></div></div>
        {% include 'accounts/partials/cover_image_fields.html' with cover_field=company_form.cover_image clear_field=company_form.clear_cover_image preview_url=company.uploaded_cover_url has_uploaded_cover=company.uploaded_cover_url %}
      </div>

      {% for section in company_sections %}
      <div class="set-card">
        <div class="set-card-head"><i class="fas {{ section.icon }}"></i><div><h2>{{ section.title }}</h2></div></div>
        <div class="set-grid">{% for field in section.fields %}{% include 'accounts/partials/set_field.html' with field=field %}{% endfor %}</div>
      </div>
      {% endfor %}

      <div class="set-savebar"><button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk"></i> Save company profile</button></div>
    </form>
  </section>
  {% elif request.user.is_company %}
  <section class="set-panel{% if active_tab == 'profile' %} is-active{% endif %}" data-panel="profile">
    <div class="set-card"><p class="set-note">No company profile is linked to this account yet. Contact support if you need one created.</p></div>
  </section>
  {% endif %}

</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  var tabs = document.querySelectorAll('.set-tab'), panels = document.querySelectorAll('.set-panel');
  function show(name) {
    tabs.forEach(function (t) { t.classList.toggle('is-active', t.dataset.tab === name); });
    panels.forEach(function (p) { p.classList.toggle('is-active', p.dataset.panel === name); });
    if (window.history && history.replaceState) history.replaceState(null, '', '?tab=' + name);
  }
  document.querySelectorAll('.set-tab, [data-tab-link]').forEach(function (a) {
    a.addEventListener('click', function (e) {
      var name = a.dataset.tab || a.dataset.tabLink;
      if (!name) return;
      e.preventDefault();
      show(name);
    });
  });
})();
</script>
{% endblock %}