{% extends "base.html" %}
{% block page_title %}BTM Onboarding — {{ role_name | default(value='Big Tech Market') }}{% endblock %}
{% block content %}
<main class="mx-auto w-full max-w-4xl px-4 py-6 text-foreground sm:px-6 lg:py-10" data-plugin="btm-custom" data-portal="onboarding">
  <header class="mb-7">
    <p class="text-sm font-semibold uppercase tracking-wide text-brand">{{ role_name | default(value='Your role') }}</p>
    <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Your onboarding</h1>
    <p class="mt-2 max-w-2xl text-sm text-muted">Complete each step below to qualify for your assigned role. Your progress is saved as you go.</p>
  </header>

  <nav class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-2" id="btm-milestone-track" aria-label="Onboarding progress" aria-live="polite"></nav>

  <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7" id="btm-panel-profile">
    <h2 class="btm-panel-title text-lg font-semibold">Provide your information</h2>
    <p class="btm-panel-lead mb-6 mt-1 text-sm text-muted">Share your contact and payout details to set up your profile.</p>
    <form id="btm-profile-form" class="blocks-responsive-form-grid">
      <div class="blocks-form-field">
        <label for="btm-name">Full name</label>
        <input type="text" class="blocks-input" id="btm-name" name="name" autocomplete="name" required>
      </div>
      <div class="blocks-form-field">
        <label for="btm-dob">Date of birth</label>
        <input type="date" class="blocks-input" id="btm-dob" name="date_of_birth" autocomplete="bday" required>
      </div>
      <div class="blocks-form-field">
        <label for="btm-gender">Gender</label>
        <select class="blocks-input" id="btm-gender" name="gender" required>
          <option value="">Select an option</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="other">Other</option>
          <option value="prefer_not">Prefer not to say</option>
        </select>
      </div>
      <div class="blocks-form-field">
        <label for="btm-phone">Phone</label>
        <input type="tel" class="blocks-input" id="btm-phone" name="phone" autocomplete="tel" required>
      </div>
      <div class="blocks-form-field sm:col-span-2">
        <label for="btm-address">Contact address</label>
        <textarea class="blocks-input min-h-24 resize-y" id="btm-address" name="contact_address" rows="3" autocomplete="street-address" required></textarea>
      </div>
      <div class="sm:col-span-2">
        <h3 class="border-b border-divider pb-2 font-semibold">Bank payout details</h3>
        <p class="mt-1 text-sm text-muted">Used to configure your payout method. Access is limited to authorized tenant staff.</p>
      </div>
      <div class="blocks-form-field">
        <label for="btm-bank-holder">Account holder name</label>
        <input type="text" class="blocks-input" id="btm-bank-holder" name="bank_account_holder" autocomplete="name" required>
      </div>
      <div class="blocks-form-field">
        <label for="btm-bank-name">Bank name</label>
        <input type="text" class="blocks-input" id="btm-bank-name" name="bank_name" autocomplete="organization" required>
      </div>
      <div class="blocks-form-field">
        <label for="btm-bank-ifsc">IFSC code</label>
        <input type="text" class="blocks-input" id="btm-bank-ifsc" name="bank_ifsc" autocomplete="off" required>
      </div>
      <div class="blocks-form-field">
        <label for="btm-bank-account">Account number</label>
        <input type="text" class="blocks-input" id="btm-bank-account" name="bank_account_number" inputmode="numeric" autocomplete="off" required>
      </div>
      <div class="flex flex-col gap-3 pt-2 sm:col-span-2 sm:flex-row sm:items-center">
        <button type="submit" class="blocks-button blocks-button-primary" id="btm-profile-submit">Save and continue</button>
        <p id="btm-profile-status" class="text-sm text-muted" role="status" aria-live="polite"></p>
        <button type="button" class="blocks-button blocks-button-secondary hidden" id="btm-retry-status">Retry loading</button>
      </div>
    </form>
  </section>

  <section class="hidden rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7" id="btm-panel-agreements">
    <h2 class="btm-panel-title text-lg font-semibold">Agreement signing</h2>
    <p class="btm-panel-lead mb-5 mt-1 text-sm text-muted">Sign each agreement required for your role.</p>
    <ul class="mb-6 divide-y divide-divider rounded-xl border border-divider" id="btm-agreements-list"></ul>
    <div class="flex flex-col gap-3 sm:flex-row">
      <a href="/plugins/docusign-connect/index?context_plugin=btm-custom" class="blocks-button blocks-button-primary">Open agreements</a>
      <button type="button" class="blocks-button blocks-button-secondary" id="btm-refresh-status">Refresh status</button>
    </div>
  </section>

  <section class="hidden rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7" id="btm-panel-courses">
    <h2 class="btm-panel-title text-lg font-semibold">Courses and assessments</h2>
    <p class="btm-panel-lead mb-5 mt-1 text-sm text-muted">Complete each required course and reach its qualification score.</p>
    <div class="blocks-table-scroll mb-5">
      <table class="blocks-admin-table min-w-[38rem]" id="btm-courses-table">
        <thead><tr><th>Course</th><th>Progress</th><th>Required</th><th>Status</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="flex flex-col gap-3 sm:flex-row">
      <a href="/plugins/talentlms-connect/index" class="blocks-button blocks-button-primary">Open courses</a>
      <button type="button" class="blocks-button blocks-button-secondary" id="btm-refresh-courses">Refresh status</button>
    </div>
  </section>

  <section class="hidden rounded-2xl border border-success/40 bg-surface p-8 text-center shadow-sm sm:p-12" id="btm-panel-qualified">
    <div class="mx-auto mb-4 grid size-14 place-items-center rounded-full bg-success/10 text-2xl text-success" aria-hidden="true"><i class="fas fa-check"></i></div>
    <h2 class="btm-panel-title text-xl font-bold">You’re qualified</h2>
    <p class="btm-panel-lead mx-auto mb-6 mt-2 max-w-xl text-sm text-muted">You have completed onboarding for <strong id="btm-qualified-role" class="text-foreground"></strong>.</p>
    <a href="#" class="blocks-button blocks-button-primary" id="btm-portal-link">Go to your portal</a>
  </section>
</main>
{% endblock %}