{% extends "cms/base.html" %}
{% block title %}CRM{% endblock %}
{% block page_title %}CRM{% endblock %}

{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<style>
.crm-kpi {
    background: var(--cms-card); border-radius: 12px; border: 1px solid var(--cms-border);
    padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between;
    transition: transform .2s, box-shadow .2s;
}
.crm-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.crm-kpi-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.crm-kpi-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-muted); }
.crm-kpi-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--cms-text); }
.crm-kpi-sub   { font-size: .72rem; color: var(--cms-muted); }

.pipeline-status {
  display: inline-block; font-size: .68rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .06em;
}
.ps-new      { background: #eff6ff; color: #1d4ed8; }
.ps-reviewed { background: #fffbeb; color: #92400e; }
.ps-quoted   { background: #faf5ff; color: #6d28d9; }
.ps-won      { background: #f0fdf4; color: #15803d; }
.ps-lost     { background: #fef2f2; color: #dc2626; }

.funnel-bar { height: 26px; border-radius: 6px; transition: width .4s; display: flex; align-items: center; padding: 0 .6rem; margin-bottom: .3rem; }
.funnel-bar span { font-size: .7rem; color: #fff; font-weight: 600; }

.crm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.crm-tab  { padding: .3rem .85rem; border-radius: 20px; font-size: .78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--cms-border); background: var(--cms-card); color: var(--cms-muted); transition: all .15s; }
.crm-tab.active { background: #033152; color: #fff; border-color: #033152; }

.txn-status { display:inline-block; border-radius:20px; padding:.18rem .6rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.txn-paid     { background:#f0fdf4; color:#15803d; }
.txn-deposit  { background:#fffbeb; color:#92400e; }
.txn-pending  { background:#f1f5f9; color:#64748b; }
.txn-refunded { background:#fef2f2; color:#dc2626; }
.txn-completed{ background:#eff6ff; color:#1d4ed8; }

.period-btn { border:1px solid var(--cms-border); background:var(--cms-card); color:var(--cms-muted); border-radius:6px; padding:.2rem .55rem; font-size:.72rem; font-weight:600; cursor:pointer; transition:all .15s; line-height:1.6; }
.period-btn:hover { background:#f0f4f8; color:var(--cms-text); }
.period-btn-active { background:#033152 !important; color:#fff !important; border-color:#033152 !important; }
</style>
{% endblock %}

{% block cms_content %}

<div class="cms-section-header">
  <div>
    <h1 style="font-size:1.4rem;font-weight:800;color:var(--cms-text);margin:0">CRM</h1>
    {% if stripe_status.ok %}
    <p style="margin:.2rem 0 0;font-size:.82rem;color:var(--cms-muted)"><span style="color:#15803d;font-weight:600"><i class="fa-solid fa-circle" style="font-size:.45rem;vertical-align:middle"></i> Stripe connected</span>{% if stripe_payment_errors %} &nbsp;<span style="color:#d97706;font-weight:600"><i class="fa-solid fa-circle" style="font-size:.45rem;vertical-align:middle"></i> {{ stripe_payment_errors|length }} recent payment error{{ stripe_payment_errors|length|pluralize }}</span>{% endif %}</p>
    {% else %}
    <p style="margin:.2rem 0 0;font-size:.82rem;color:var(--cms-muted)"><span style="color:#dc2626;font-weight:600"><i class="fa-solid fa-circle" style="font-size:.45rem;vertical-align:middle"></i> Stripe error: {{ stripe_status.error }}</span></p>
    {% endif %}
  </div>
  <div style="display:flex;gap:.5rem">
    <a href="{% url 'cms_assessments' %}" class="btn-cms-ghost" style="font-size:.78rem">
      <i class="fa-solid fa-clipboard-list me-1"></i>Assessments
    </a>
    <a href="{% url 'cms_orders' %}" class="btn-cms-ghost" style="font-size:.78rem">
      <i class="fa-solid fa-receipt me-1"></i>Orders
    </a>
    <a href="{% url 'cms_subscriptions' %}" class="btn-cms-ghost" style="font-size:.78rem">
      <i class="fa-solid fa-rotate me-1"></i>Subscriptions
    </a>
  </div>
</div>

<div class="row g-3 mb-3">
  <div class="col-6 col-md-2">
    <div class="crm-kpi">
      <div><div class="crm-kpi-label">Total Leads</div><div class="crm-kpi-value">{{ total_leads }}</div><div class="crm-kpi-sub">All assessments</div></div>
      <div class="crm-kpi-icon" style="background:#eff6ff;color:#1d4ed8"><i class="fa-solid fa-users"></i></div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="crm-kpi">
      <div><div class="crm-kpi-label">New</div><div class="crm-kpi-value">{{ new_leads }}</div><div class="crm-kpi-sub">Unreviewed</div></div>
      <div class="crm-kpi-icon" style="background:#fef9c3;color:#92400e"><i class="fa-solid fa-star"></i></div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="crm-kpi">
      <div><div class="crm-kpi-label">Quoted</div><div class="crm-kpi-value">{{ quoted }}</div><div class="crm-kpi-sub">£{{ pipeline_value|floatformat:0 }}</div></div>
      <div class="crm-kpi-icon" style="background:#faf5ff;color:#6d28d9"><i class="fa-solid fa-file-invoice-dollar"></i></div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="crm-kpi">
      <div><div class="crm-kpi-label">Won</div><div class="crm-kpi-value">{{ won }}</div><div class="crm-kpi-sub">£{{ won_revenue|floatformat:0 }}</div></div>
      <div class="crm-kpi-icon" style="background:#f0fdf4;color:#15803d"><i class="fa-solid fa-trophy"></i></div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="crm-kpi">
      <div><div class="crm-kpi-label">Lost</div><div class="crm-kpi-value">{{ lost }}</div><div class="crm-kpi-sub">Closed lost</div></div>
      <div class="crm-kpi-icon" style="background:#fef2f2;color:#dc2626"><i class="fa-solid fa-xmark"></i></div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="crm-kpi">
      <div><div class="crm-kpi-label">Win Rate</div><div class="crm-kpi-value">{{ win_rate }}</div><div class="crm-kpi-sub">Leads to wins</div></div>
      <div class="crm-kpi-icon" style="background:#ecfdf5;color:#059669"><i class="fa-solid fa-percent"></i></div>
    </div>
  </div>
</div>


<div class="row g-3 mb-4">
    <div class="col-6 col-md">
      <div style="border-left:3px solid #033152;padding:.9rem 1rem 1rem;background:#dbeafe;border-radius:0 8px 8px 0">
        <div style="font-size:.68rem;font-weight:700;color:#033152;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem">
          <i class="fa-solid fa-box" style="font-size:.65rem"></i>Products Sales
        </div>
        <div style="font-size:1.6rem;font-weight:800;color:var(--cms-text);letter-spacing:-.02em;line-height:1">£{{ crm_product_revenue|floatformat:0 }}</div>
        <div style="font-size:.7rem;color:var(--cms-muted);margin-top:.35rem">Products &amp; Domains</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div style="border-left:3px solid #ff404b;padding:.9rem 1rem 1rem;background:#fff5f5;border-radius:0 8px 8px 0">
        <div style="font-size:.68rem;font-weight:700;color:#ff404b;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem">
          <i class="fa-solid fa-wand-magic-sparkles" style="font-size:.65rem"></i>Services Sales
        </div>
        <div style="font-size:1.6rem;font-weight:800;color:#ff404b;letter-spacing:-.02em;line-height:1">£{{ crm_service_revenue|floatformat:0 }}</div>
        <div style="font-size:.7rem;color:var(--cms-muted);margin-top:.35rem">Agency &amp; Projects</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div style="border-left:3px solid #6d28d9;padding:.9rem 1rem 1rem;background:#ede9fe;border-radius:0 8px 8px 0">
        <div style="font-size:.68rem;font-weight:700;color:#6d28d9;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem">
          <i class="fa-solid fa-rotate" style="font-size:.65rem"></i>Subscriptions
        </div>
        <div style="font-size:1.6rem;font-weight:800;color:#6d28d9;letter-spacing:-.02em;line-height:1">£{{ crm_sub_revenue|floatformat:0 }}</div>
        <div style="font-size:.7rem;color:var(--cms-muted);margin-top:.35rem">{{ crm_sub_count }} Recurring Client{{ crm_sub_count|pluralize }}</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div style="border-left:3px solid #0891b2;padding:.9rem 1rem 1rem;background:#ecfeff;border-radius:0 8px 8px 0">
        <div style="font-size:.68rem;font-weight:700;color:#0891b2;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem">
          <i class="fa-solid fa-sterling-sign" style="font-size:.65rem"></i>Total Revenue
        </div>
        <div style="font-size:1.6rem;font-weight:800;color:#0891b2;letter-spacing:-.02em;line-height:1">£{{ crm_total_revenue|floatformat:0 }}</div>
        <div style="font-size:.7rem;color:var(--cms-muted);margin-top:.35rem">Products &amp; Services</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div style="border-left:3px solid #d97706;padding:.9rem 1rem 1rem;background:#fffbeb;border-radius:0 8px 8px 0">
        <div style="font-size:.68rem;font-weight:700;color:#d97706;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem">
          <i class="fa-solid fa-boxes-stacked" style="font-size:.65rem"></i>Expenses
        </div>
        <div style="font-size:1.6rem;font-weight:800;color:#d97706;letter-spacing:-.02em;line-height:1">£{{ crm_total_costs|floatformat:2 }}</div>
        <div style="font-size:.7rem;color:var(--cms-muted);margin-top:.35rem">Costs &amp; Stripe Charges</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div style="border-left:3px solid {% if crm_net_profit >= 0 %}#16a34a{% else %}#dc2626{% endif %};padding:.9rem 1rem 1rem;background:{% if crm_net_profit >= 0 %}#f0fdf4{% else %}#fff5f5{% endif %};border-radius:0 8px 8px 0">
        <div style="font-size:.68rem;font-weight:700;color:{% if crm_net_profit >= 0 %}#16a34a{% else %}#dc2626{% endif %};margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem">
          <i class="fa-solid fa-wallet" style="font-size:.65rem"></i>Net Profit
        </div>
        <div style="font-size:1.6rem;font-weight:800;color:{% if crm_net_profit >= 0 %}#15803d{% else %}#dc2626{% endif %};letter-spacing:-.02em;line-height:1">
          {% if crm_net_profit < 0 %}−£{{ crm_net_profit|floatformat:2|slice:"1:" }}{% else %}£{{ crm_net_profit|floatformat:2 }}{% endif %}
        </div>
        <div style="font-size:.7rem;color:var(--cms-muted);margin-top:.35rem">After Expenses</div>
      </div>
    </div>
</div>

<div class="row g-3 mb-4 align-items-stretch">
  <div class="col-md-4 d-flex">
    <div class="cms-card d-flex flex-column" style="padding:1.25rem 1.5rem;width:100%;min-height:320px">
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Sales Forecast</div>
      <div style="font-size:.9rem;font-weight:600;color:var(--cms-text);margin-bottom:.75rem">Leads by Stage</div>
      <div style="flex:1;min-height:200px"><canvas id="salesForecastChart"></canvas></div>
    </div>
  </div>
  <div class="col-md-4 d-flex">
    <div class="cms-card d-flex flex-column" style="padding:1.25rem 1.5rem;width:100%;min-height:320px">
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Deal Type</div>
      <div style="font-size:.9rem;font-weight:600;color:var(--cms-text);margin-bottom:.5rem">Won / Pending / Lost by Source</div>
      <div style="flex:1;min-height:200px;display:flex;align-items:center;justify-content:center"><canvas id="radarChart"></canvas></div>
    </div>
  </div>
  <div class="col-md-4 d-flex">
    <div class="cms-card d-flex flex-column" style="padding:1.25rem 1.5rem;width:100%;min-height:320px">
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Sales Pipeline</div>
      <div style="font-size:.9rem;font-weight:600;color:var(--cms-text);margin-bottom:.9rem">Conversion Funnel</div>
      {% if total_leads > 0 %}
      <div id="conversionFunnel" style="flex:1;display:flex;flex-direction:column;justify-content:center;padding:.25rem 0;gap:3px"></div>
      {% else %}
      <div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--cms-muted);font-size:.85rem">No leads yet</div>
      {% endif %}
    </div>
  </div>
</div>

<div class="cms-card mb-4">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem">
    <div>
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Finance</div>
      <div style="font-size:.9rem;font-weight:600;color:var(--cms-text)">Balance Overview</div>
    </div>
    <a href="{% url 'cms_assessments' %}" class="btn-cms-ghost" style="font-size:.78rem">View Assessments</a>
  </div>

  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1.1rem">
    <div style="border-left:3px solid #033152;background:#f8fafc;border-radius:8px;padding:.7rem .9rem">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted)">Total Cleared</div>
      <div style="font-size:1.25rem;font-weight:700;color:var(--cms-text);margin-top:.15rem">&pound;{{ pay_cleared|floatformat:0 }}</div>
      <div style="font-size:.68rem;color:var(--cms-muted)">All time revenue received</div>
    </div>
    <div style="border-left:3px solid #16a34a;background:#f8fafc;border-radius:8px;padding:.7rem .9rem">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted)">This Month</div>
      <div style="font-size:1.25rem;font-weight:700;color:#16a34a;margin-top:.15rem">&pound;{{ pay_month_revenue|floatformat:0 }}</div>
      <div style="font-size:.68rem;color:var(--cms-muted)">Revenue this calendar month</div>
    </div>
    <div style="border-left:3px solid #d97706;background:#f8fafc;border-radius:8px;padding:.7rem .9rem">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted)">Deposits</div>
      <div style="font-size:1.25rem;font-weight:700;color:#d97706;margin-top:.15rem">&pound;{{ pay_deposits_collected|floatformat:0 }}</div>
      <div style="font-size:.68rem;color:var(--cms-muted)">Collected, balance outstanding</div>
    </div>
    <div style="border-left:3px solid #dc2626;background:#f8fafc;border-radius:8px;padding:.7rem .9rem">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted)">Outstanding</div>
      <div style="font-size:1.25rem;font-weight:700;color:#dc2626;margin-top:.15rem">&pound;{{ pay_balance_outstanding|floatformat:0 }}</div>
      <div style="font-size:.68rem;color:var(--cms-muted)">Balance due from clients</div>
    </div>
    <div style="border-left:3px solid #b45309;background:#f8fafc;border-radius:8px;padding:.7rem .9rem">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted)">Instalments</div>
      <div style="font-size:1.25rem;font-weight:700;color:var(--cms-text);margin-top:.15rem">{{ pay_instalment_count }}</div>
      <div style="font-size:.68rem;color:var(--cms-muted)">plan{{ pay_instalment_count|pluralize }} with balance owed</div>
    </div>
  </div>

  <div style="height:200px"><canvas id="balanceChart"></canvas></div>
</div>

{% comment %}
<div class="cms-card mb-4">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem">
    <div>
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Forecast</div>
      <div style="font-size:.9rem;font-weight:600;color:var(--cms-text)">Monthly Revenue vs Expenses</div>
    </div>
    <div style="display:flex;gap:1.2rem;font-size:.73rem;color:var(--cms-muted)">
      <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#033152;margin-right:.3rem"></span>Net Profit</span>
      <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#d97706;margin-right:.3rem"></span>Expenses</span>
    </div>
  </div>
  <div style="height:220px"><canvas id="forecastStackedChart"></canvas></div>
</div>
{% endcomment %}

<div class="row g-3 mb-4">

  <div class="col-lg-8 d-flex">
    <div class="cms-card" style="width:100%;display:flex;flex-direction:column">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;flex-shrink:0;gap:.75rem;flex-wrap:wrap">
        <div>
          <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Ecommerce</div>
          <div style="font-size:.88rem;font-weight:600;color:var(--cms-text)">Latest Transactions</div>
        </div>
        <div style="display:flex;align-items:center;gap:1rem">
          <div style="text-align:right">
            <div style="font-size:.95rem;font-weight:800;color:#033152">£{{ total_revenue|floatformat:0 }}</div>
            <div style="font-size:.65rem;color:var(--cms-muted);white-space:nowrap">{{ total_clients }} paid client{{ total_clients|pluralize }} &middot; received via Stripe</div>
          </div>
          <a href="{% url 'cms_orders' %}" class="btn-cms-ghost" style="font-size:.72rem;padding:.25rem .65rem">All</a>
        </div>
      </div>
      <div style="flex:1">
        {% if recent_transactions %}
        <table class="cms-table" style="font-size:.78rem">
          <thead><tr><th style="text-align:left">ID</th><th style="text-align:left">Client</th><th>Date</th><th style="text-align:center">Amount</th></tr></thead>
          <tbody>
          {% for o in recent_transactions|slice:":8" %}
          <tr>
            <td style="text-align:left;font-family:monospace;color:var(--cms-muted);font-size:.72rem">{{ o.order_number }}</td>
            <td style="text-align:left;font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ o.customer_name }}</td>
            <td style="font-size:.72rem;color:var(--cms-muted);white-space:nowrap">{{ o.created_at|date:"d M Y" }}</td>
            <td style="text-align:center;font-weight:700;color:{% if o.status == 'refunded' %}#dc2626{% elif o.status == 'paid' or o.status == 'completed' or o.status == 'processing' or o.status == 'deposit_paid' %}#16a34a{% else %}var(--cms-text){% endif %}"
                title="{{ o.get_status_display }}">£{{ o.total }}</td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:280px;color:var(--cms-muted);font-size:.82rem">
          <i class="fa-solid fa-receipt" style="font-size:2rem;opacity:.15;margin-bottom:.6rem"></i>No transactions yet
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-lg-4 d-flex">
    <div class="cms-card" style="width:100%;display:flex;flex-direction:column">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;flex-shrink:0">
        <div>
          <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cms-muted)">Subscriptions</div>
          <div style="font-size:.88rem;font-weight:600;color:var(--cms-text)">Active Clients</div>
        </div>
        <a href="{% url 'cms_subscriptions' %}" class="btn-cms-ghost" style="font-size:.72rem;padding:.25rem .65rem">All</a>
      </div>
      <div style="font-size:.73rem;color:var(--cms-muted);margin-bottom:.5rem;flex-shrink:0">{{ crm_sub_count }} plan{{ crm_sub_count|pluralize }} · £{{ crm_sub_revenue|floatformat:0 }} collected</div>
      <div style="flex:1;overflow-y:auto;max-height:380px">
        {% if crm_recent_subscriptions %}
        <table class="cms-table" style="font-size:.78rem">
          <thead><tr><th>Customer</th><th>#</th><th style="text-align:right">Amt</th><th>Date</th></tr></thead>
          <tbody>
          {% for o in crm_recent_subscriptions|slice:":10" %}
          <tr>
            <td>
              <div style="display:flex;align-items:center;gap:.4rem">
                <div style="width:22px;height:22px;border-radius:50%;background:#f5f3ff;color:#6d28d9;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0">{{ o.customer_name|slice:":1"|upper }}</div>
                <span style="font-weight:600;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block">{{ o.customer_name }}</span>
              </div>
            </td>
            <td style="font-family:monospace;font-size:.7rem;color:var(--cms-muted)">{{ o.order_number }}</td>
            <td style="text-align:right;font-weight:700;color:#6d28d9">£{{ o.amount_paid }}</td>
            <td style="color:var(--cms-muted);white-space:nowrap;font-size:.7rem">{{ o.created_at|date:"d M" }}</td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:280px;color:var(--cms-muted);font-size:.82rem">
          <i class="fa-solid fa-rotate" style="font-size:2rem;opacity:.15;margin-bottom:.6rem"></i>No subscriptions yet
        </div>
        {% endif %}
      </div>
    </div>
  </div>

</div>

<div style="margin-top:2rem;background:var(--cms-card);border-radius:12px;border:1px solid var(--cms-border);padding:1.25rem 1.5rem">
  <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem">
    <i class="fa-brands fa-stripe" style="font-size:1.3rem;color:#635bff"></i>
    <h2 style="font-size:1rem;font-weight:700;margin:0;color:var(--cms-text)">Stripe Status</h2>
  </div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem">
    <div style="background:var(--cms-bg);border-radius:10px;padding:.85rem 1rem;border:1px solid var(--cms-border)">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted);margin-bottom:.3rem">Connection</div>
      {% if stripe_status.ok %}
      <div style="font-weight:700;font-size:.9rem;color:#15803d"><i class="fa-solid fa-circle-check me-1"></i>Connected</div>
      <div style="font-size:.75rem;color:var(--cms-muted);margin-top:.25rem">{{ stripe_status.account }}</div>
      {% else %}
      <div style="font-weight:700;font-size:.9rem;color:#dc2626"><i class="fa-solid fa-circle-xmark me-1"></i>Error</div>
      <div style="font-size:.75rem;color:#dc2626;margin-top:.25rem">{{ stripe_status.error }}</div>
      {% endif %}
    </div>
    <div style="background:var(--cms-bg);border-radius:10px;padding:.85rem 1rem;border:1px solid var(--cms-border)">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted);margin-bottom:.3rem">Mode</div>
      <div style="font-weight:700;font-size:.9rem;color:var(--cms-text)">
        {% if stripe_status.live_mode %}
        <span style="color:#15803d"><i class="fa-solid fa-bolt me-1"></i>Live</span>
        {% else %}
        <span style="color:#d97706"><i class="fa-solid fa-flask me-1"></i>Test</span>
        {% endif %}
      </div>
    </div>
    <div style="background:var(--cms-bg);border-radius:10px;padding:.85rem 1rem;border:1px solid var(--cms-border)">
      <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted);margin-bottom:.3rem">Secret Key</div>
      <div style="font-size:.85rem;color:var(--cms-text);font-family:monospace">{{ stripe_status.key_hint }}</div>
    </div>
  </div>
  {% if stripe_payment_errors %}
  <div style="margin-top:.85rem;border-top:1px solid var(--cms-border);padding-top:.85rem">
    <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted);margin-bottom:.5rem">Recent Payment Errors</div>
    {% for err in stripe_payment_errors %}
    <p style="margin:.2rem 0;font-size:.82rem;color:var(--cms-muted)"><span style="color:#dc2626;font-weight:600"><i class="fa-solid fa-circle" style="font-size:.45rem;vertical-align:middle"></i> {{ err.at }}:</span> {{ err.msg }}</p>
    {% endfor %}
  </div>
  {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script>
var CC = ['#033152','#0891b2','#7c3aed','#be185d','#15803d','#c2410c','#d97706','#0e7490'];
var scOpts = {
  x:{grid:{display:false},ticks:{color:'#5f7a94',font:{size:10}},border:{display:false}},
  y:{grid:{color:'#f1f5f9'},ticks:{color:'#5f7a94',font:{size:10},precision:0,stepSize:1},border:{display:false},beginAtZero:true}
};

// Conversion Funnel
(function(){
  var el = document.getElementById('conversionFunnel');
  if (!el) return;
  var stages = [
    { label:'All Leads', value:{{ total_leads }}, color:'#033152' },
    { label:'Reviewed',  value:{{ reviewed }},    color:'#0891b2' },
    { label:'Quoted',    value:{{ quoted }},       color:'#7c3aed' },
    { label:'Won',       value:{{ won }},          color:'#15803d' },
    { label:'Lost',      value:{{ lost }},         color:'#dc2626' }
  ];
  var total = stages[0].value || 1;
  stages.forEach(function(st, i) {
    var pct = Math.max(38, Math.round(st.value / total * 100));
    var conv = i > 0 ? Math.round(st.value / (stages[i-1].value || 1) * 100) : null;
    if (conv !== null) {
      var arrow = document.createElement('div');
      arrow.style.cssText = 'text-align:center;font-size:.62rem;font-weight:600;color:#94a3b8;line-height:1.4';
      arrow.textContent = '↓ ' + conv + '%';
      el.appendChild(arrow);
    }
    var bar = document.createElement('div');
    bar.style.cssText = [
      'width:' + pct + '%',
      'min-width:38%',
      'margin:0 auto',
      'background:' + st.color,
      'border-radius:7px',
      'height:40px',
      'display:flex',
      'align-items:center',
      'justify-content:space-between',
      'padding:0 .9rem',
      'color:#fff',
      'box-sizing:border-box',
      'transition:width .4s'
    ].join(';');
    var lbl = document.createElement('span');
    lbl.style.cssText = 'font-size:.71rem;font-weight:600;white-space:nowrap';
    lbl.textContent = st.label;
    var num = document.createElement('span');
    num.style.cssText = 'font-size:.9rem;font-weight:800';
    num.textContent = st.value;
    bar.appendChild(lbl);
    bar.appendChild(num);
    el.appendChild(bar);
  });
})();

// Sales Forecast bar chart
new Chart(document.getElementById('salesForecastChart').getContext('2d'), {
  type: 'bar',
  data: {
    labels: ['Total Leads','Quoted','Won'],
    datasets: [{
      label: 'Leads',
      data: [{{ total_leads }}, {{ quoted }}, {{ won }}],
      backgroundColor: ['rgba(3,49,82,.8)','rgba(109,40,217,.8)','rgba(21,128,61,.8)'],
      borderRadius: 6
    }]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: scOpts
  }
});

// Deal Type Radar
{% if radar_labels != '[]' %}
new Chart(document.getElementById('radarChart').getContext('2d'), {
  type: 'radar',
  data: {
    labels: {{ radar_labels|safe }},
    datasets: [
      { label:'Won',     data:{{ radar_won|safe }},  borderColor:'#15803d', backgroundColor:'rgba(21,128,61,.15)', pointBackgroundColor:'#15803d', borderWidth:2 },
      { label:'Pending', data:{{ radar_pend|safe }}, borderColor:'#0891b2', backgroundColor:'rgba(8,145,178,.12)', pointBackgroundColor:'#0891b2', borderWidth:2 },
      { label:'Lost',    data:{{ radar_lost|safe }}, borderColor:'#dc2626', backgroundColor:'rgba(220,38,38,.1)',  pointBackgroundColor:'#dc2626', borderWidth:2 },
    ]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { position:'bottom', labels:{ font:{size:10}, color:'#5f7a94', padding:8, boxWidth:10, boxHeight:10 } } },
    scales: { r: { ticks:{ display:false }, grid:{ color:'rgba(0,0,0,.07)' }, pointLabels:{ font:{size:9}, color:'#5f7a94' } } }
  }
});
{% else %}
document.getElementById('radarChart').parentElement.innerHTML='<div style="text-align:center;color:#5f7a94;font-size:.82rem;padding-top:3rem">No deal data yet</div>';
{% endif %}

// Forecast stacked area chart — hidden until 1yr of data available
/* (function(){
  var rev = {{ crm_rev_series|safe }};
  var exp = {{ crm_exp_series|safe }};
  var net = rev.map(function(r, i){ return Math.max(0, r - (exp[i] || 0)); });
  new Chart(document.getElementById('forecastStackedChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: {{ crm_months_labels|safe }},
      datasets: [
        {
          label: 'Expenses',
          data: exp,
          fill: true,
          backgroundColor: 'rgba(217,119,6,.18)',
          borderColor: '#d97706',
          borderWidth: 2,
          tension: .4,
          pointRadius: 3,
          pointBackgroundColor: '#d97706',
          stack: 'forecast'
        },
        {
          label: 'Net Profit',
          data: net,
          fill: true,
          backgroundColor: 'rgba(3,49,82,.22)',
          borderColor: '#033152',
          borderWidth: 2,
          tension: .4,
          pointRadius: 3,
          pointBackgroundColor: '#033152',
          stack: 'forecast'
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: function(ctx) {
              return ' ' + ctx.dataset.label + ': £' + ctx.parsed.y.toLocaleString();
            },
            footer: function(items) {
              var total = items.reduce(function(s, i){ return s + i.parsed.y; }, 0);
              return 'Revenue: £' + total.toLocaleString();
            }
          }
        }
      },
      scales: {
        x: { stacked: true, grid: { display: false }, ticks: { color: '#5f7a94', font: { size: 10 } }, border: { display: false } },
        y: { stacked: true, grid: { color: '#f1f5f9' }, ticks: { color: '#5f7a94', font: { size: 10 }, callback: function(v){ return '£' + v.toLocaleString(); } }, border: { display: false }, beginAtZero: true }
      }
    }
  });
}); */

// Balance Overview line chart
new Chart(document.getElementById('balanceChart').getContext('2d'), {
  type: 'line',
  data: {
    labels: {{ crm_months_labels|safe }},
    datasets: [
      { label:'Revenue', data:{{ crm_rev_series|safe }}, borderColor:'#033152', backgroundColor:'rgba(3,49,82,.06)', fill:true, tension:.35, borderWidth:2, pointRadius:3, pointBackgroundColor:'#033152' },
      { label:'Expenses', data:{{ crm_exp_series|safe }}, borderColor:'#d97706', backgroundColor:'rgba(217,119,6,.06)', fill:true, tension:.35, borderWidth:2, pointRadius:3, pointBackgroundColor:'#d97706', borderDash:[4,3] },
    ]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend:{ position:'top', align:'end', labels:{ font:{size:11}, color:'#5f7a94', boxWidth:12, boxHeight:12, padding:10 } } },
    scales: {
      x:{ grid:{display:false}, ticks:{color:'#5f7a94',font:{size:10}}, border:{display:false} },
      y:{ grid:{color:'#f1f5f9'}, ticks:{color:'#5f7a94',font:{size:10},callback:v=>'£'+v.toLocaleString()}, border:{display:false}, beginAtZero:true }
    }
  }
});
</script>
{% endblock %}