{% extends "base.html" %}
{% block page_title %}BTM Vendor{% endblock %}
{% block content %}
<main class="mx-auto w-full max-w-6xl px-4 py-6 text-foreground sm:px-6 lg:py-10" data-plugin="btm-custom" data-portal="vendor">
  <header class="mb-8 flex flex-col gap-4 border-b border-divider pb-6 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">Vendor portal</h1>
      <p class="mt-2 text-sm text-muted">Wallet balance: <strong class="text-foreground">{{ currency_symbol | default(value='₹') }} {{ wallet_balance | default(value=0) | price }}</strong></p>
    </div>
    <nav class="flex flex-wrap gap-3" aria-label="Vendor shortcuts">
      <a href="/plugins/wallet/index" class="blocks-button blocks-button-primary">Recharge wallet</a>
      <a href="/plugins/talentlms-connect/index" class="blocks-button blocks-button-secondary">My courses</a>
    </nav>
  </header>

  {% if not agreements_signed %}
  <aside class="mb-8 rounded-xl border border-warning bg-warning/10 p-4 text-sm text-foreground" role="status">
    Sign the required <a class="font-semibold text-brand underline underline-offset-2" href="/plugins/docusign-connect/index?context_plugin=btm-custom">agreements</a> before inviting consultants.
  </aside>
  {% endif %}

  <section class="mb-8 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7">
    <div class="mb-5">
      <h2 class="text-lg font-semibold">Invite a consultant</h2>
      <p class="mt-1 text-sm text-muted">Choose their role and any optional course sponsorship.</p>
    </div>
    <form id="btm-vendor-invite-form" class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <div class="blocks-form-field">
        <label for="btm-vendor-email">Email</label>
        <input id="btm-vendor-email" type="email" class="blocks-input" name="email" autocomplete="email" required>
      </div>
      <div class="blocks-form-field">
        <label for="btm-vendor-role">Consultant role</label>
        <select id="btm-vendor-role" class="blocks-input" name="target_role_id" required>
          <option value="">Select a role</option>
          {% for r in consultant_roles %}
          <option value="{{ r.id }}">{{ r.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="blocks-form-field">
        <label for="btm-vendor-credit">Sponsor credits</label>
        <input id="btm-vendor-credit" type="number" class="blocks-input" name="credit_cost" min="0" step="1" value="0" inputmode="decimal">
      </div>
      <div class="flex items-end">
        <button type="submit" class="blocks-button blocks-button-primary w-full" {% if not agreements_signed %}disabled{% endif %}>Send invitation</button>
      </div>
      <div class="blocks-form-field sm:col-span-2 xl:col-span-4">
        <label for="btm-vendor-courses">Sponsored courses <span class="font-normal text-muted">(optional; select more than one)</span></label>
        <select id="btm-vendor-courses" class="blocks-input min-h-32" name="course_ids" multiple size="5" aria-describedby="btm-vendor-courses-help">
          {% for c in courses %}
          <option value="{{ c.course_id }}">{{ c.name }}</option>
          {% endfor %}
        </select>
        <p id="btm-vendor-courses-help" class="text-xs text-muted">Use Ctrl (Windows/Linux) or Command (Mac) to select multiple courses.</p>
      </div>
      <p id="btm-vendor-invite-status" class="hidden sm:col-span-2 xl:col-span-4" role="status" aria-live="polite"></p>
    </form>
  </section>

  <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7">
    <div class="mb-5">
      <h2 class="text-lg font-semibold">Invited team</h2>
      <p class="mt-1 text-sm text-muted">Track signup and course progress for your consultants.</p>
      <div class="mt-3 flex flex-wrap items-center gap-3">
        <button type="button" class="blocks-button blocks-button-secondary" id="btm-refresh-team">Refresh progress</button>
        <p id="btm-team-status" class="text-sm text-muted" role="status" aria-live="polite"></p>
      </div>
    </div>
    <div class="blocks-table-scroll">
      <table class="blocks-admin-table responsive-table min-w-[40rem]" id="btm-vendor-team-table">
        <thead><tr><th>Email</th><th>Role</th><th>Status</th><th>Progress</th></tr></thead>
        <tbody>
          {% for row in team %}
          <tr>
            <td data-label="Email">{{ row.invite_email }}</td>
            <td data-label="Role">{{ row.target_role }}</td>
            <td data-label="Status">{{ row.status }}</td>
            <td data-label="Progress" class="btm-team-progress" data-email="{{ row.invite_email }}">Loading progress…</td>
          </tr>
          {% else %}
          <tr><td colspan="4" class="p-6 text-center text-sm text-muted">No invitations yet. Your invited consultants will appear here.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
</main>
{% endblock %}