{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% block page_title %}BTM Hub{% endblock %}
{% block admin_content %}
<div data-plugin="btm-custom" class="mx-auto w-full max-w-7xl px-4 py-5 text-foreground sm:px-6 lg:py-8">
  <header class="mb-6">
    <p class="text-sm font-semibold uppercase tracking-wide text-brand">Big Tech Market</p>
    <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Operator hub</h1>
    <p class="mt-2 max-w-3xl text-sm text-muted">Manage connected services, role requirements and user enrollment from one workspace.</p>
  </header>
  <p id="btm-admin-status" class="mb-4 hidden rounded-lg border border-divider bg-canvas px-4 py-3 text-sm text-muted" role="status" aria-live="polite"></p>

  <nav class="blocks-section-tabs mb-6" role="tablist" aria-label="BTM hub sections">
    <a id="btm-tab-hub" href="#tab-hub" role="tab" aria-selected="true" aria-controls="tab-hub" tabindex="0" class="blocks-section-tab active" data-target="#tab-hub">Integrations</a>
    <a id="btm-tab-roles" href="#tab-roles" role="tab" aria-selected="false" aria-controls="tab-roles" tabindex="-1" class="blocks-section-tab" data-target="#tab-roles">Role definitions</a>
    <a id="btm-tab-enrollment" href="#tab-enrollment" role="tab" aria-selected="false" aria-controls="tab-enrollment" tabindex="-1" class="blocks-section-tab" data-target="#tab-enrollment">User enrollment</a>
  </nav>

  <div class="btm-tab-panel" role="tabpanel" id="tab-hub" aria-labelledby="btm-tab-hub" tabindex="0">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
      <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
        <h2 class="font-semibold">Learning</h2>
        <p class="my-2 text-sm text-muted">Manage course enrollment and qualification progress.</p>
        <a href="{{ links.talentlms }}" class="blocks-button blocks-button-secondary">Open TalentLMS</a>
      </section>
      <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
        <h2 class="font-semibold">Agreements</h2>
        <p class="my-2 text-sm text-muted">Configure agreement templates and their onboarding fields.</p>
        <div class="flex flex-wrap gap-2">
          <a href="{{ links.docusign }}" class="blocks-button blocks-button-secondary">Open DocuSign</a>
          <button type="button" class="blocks-button blocks-button-secondary" id="btm-sync-fields-btn"><i class="fas fa-satellite-dish" aria-hidden="true"></i> Sync fields</button>
          <button type="button" class="blocks-button blocks-icon-button-danger" id="btm-erase-fields-btn"><i class="fas fa-trash-alt" aria-hidden="true"></i><span>Erase fields</span></button>
        </div>
        <p id="btm-fields-sync-status" class="mt-3 text-sm text-muted" role="status" aria-live="polite"></p>
      </section>
      <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
        <h2 class="font-semibold">Promotion and CRM</h2>
        <p class="my-2 text-sm text-muted">Connect storefront promotion with customer relationship workflows.</p>
        <a href="{{ links.shopify_hubspot }}" class="blocks-button blocks-button-secondary">Shopify–HubSpot sync</a>
      </section>
      <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
        <h2 class="font-semibold">Settlements</h2>
        <p class="my-2 text-sm text-muted">Open the tenant’s wallet and payout administration.</p>
        <div class="flex flex-wrap gap-2">
          <a href="{{ links.wallet }}" class="blocks-button blocks-button-secondary">Wallet</a>
          <a href="{{ links.payout }}" class="blocks-button blocks-button-secondary">Payouts</a>
        </div>
      </section>
    </div>
  </div>

  <div class="btm-tab-panel hidden" role="tabpanel" id="tab-roles" aria-labelledby="btm-tab-roles" tabindex="0">
    {{ crud::shell_open(config_url="/plugins/btm-custom/assets/admin/roles_list.json", mount_id="btm-roles-list", custom_mount=true) }}
    <div class="blocks-table-scroll">
      <table class="blocks-admin-table w-full"><thead></thead><tbody>
        <tr><td colspan="6" class="p-5 text-center text-sm text-muted">Loading roles…</td></tr>
      </tbody></table>
    </div>
    {{ crud::shell_close() }}
  </div>

  <div class="btm-tab-panel hidden" role="tabpanel" id="tab-enrollment" aria-labelledby="btm-tab-enrollment" tabindex="0">
    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p class="text-sm text-muted">Invite new users by email or assign roles to existing accounts below.</p>
      <button type="button" class="blocks-button blocks-button-primary" id="btm-invite-user-btn">
        <i class="fas fa-envelope" aria-hidden="true"></i> Invite user
      </button>
    </div>
    {{ crud::shell_open(config_url="/plugins/btm-custom/assets/admin/enrollment_invites_list.json", mount_id="btm-enrollment-invites-list", custom_mount=true) }}
    <div class="blocks-table-scroll mb-6">
      <table class="blocks-admin-table w-full"><thead></thead><tbody>
        <tr><td colspan="5" class="p-5 text-center text-sm text-muted">Loading invites…</td></tr>
      </tbody></table>
    </div>
    {{ crud::shell_close() }}
    {{ crud::shell_open(config_url="/plugins/btm-custom/assets/admin/enrollment_list.json", mount_id="btm-enrollment-list", custom_mount=true) }}
    <div class="blocks-table-scroll">
      <table class="blocks-admin-table w-full"><thead></thead><tbody>
        <tr><td colspan="4" class="p-5 text-center text-sm text-muted">Loading enrollment…</td></tr>
      </tbody></table>
    </div>
    {{ crud::shell_close() }}
  </div>

  <script type="application/json" id="btm-courses-data">{{ courses | json_encode | safe }}</script>
  <script type="application/json" id="btm-docusign-templates-data">{{ docusign_templates | json_encode | safe }}</script>
  <script type="application/json" id="btm-roles-data">{{ roles | json_encode | safe }}</script>
</div>

<div id="btm-role-modal" class="crud-modal" aria-hidden="true">
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="btm-role-modal-title">Add role</h2>
      <button type="button" class="close-modal" aria-label="Close">&times;</button>
    </div>
    <div class="modal-body">
      <div id="btm-role-form-fields"></div>
    </div>
  </div>
</div>

<div id="btm-invite-modal" class="crud-modal" aria-hidden="true">
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="btm-invite-modal-title">Invite user</h2>
      <button type="button" class="close-modal" aria-label="Close">&times;</button>
    </div>
    <div class="modal-body">
      <div id="btm-invite-form-fields"></div>
    </div>
  </div>
</div>
{% endblock %}