@extends('backend.layout.exposcale')

@section('page_title', 'Affiliates')

@section('topbar_actions')
  <input class="sinput" placeholder="🔍 Search referrer…" oninput="filterAffiliates(this.value)" style="width:170px;font-size:10px;padding:5px 9px;"/>
@endsection

@section('content')
<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;padding:14px 18px;gap:11px;height:calc(100vh - 49px);">

  <!-- Summary stats -->
  <div class="aff-summary-grid">
    <div class="aff-stat">
      <div class="aff-stat-lbl">Total Referrers</div>
      <div class="aff-stat-val">2</div>
      <div class="aff-stat-sub">Clients with active referrals</div>
    </div>
    <div class="aff-stat">
      <div class="aff-stat-lbl">Total Referred Clients</div>
      <div class="aff-stat-val">3</div>
      <div class="aff-stat-sub">Lars, Sofia, batistajoyeria</div>
    </div>
    <div class="aff-stat">
      <div class="aff-stat-lbl">Pending Payouts</div>
      <div class="aff-stat-val" style="color:var(--amber);" id="aff-stat-pending">€ 170.00</div>
      <div class="aff-stat-sub" id="aff-stat-pending-sub">Apr 2026 · 2 referrers</div>
    </div>
    <div class="aff-stat">
      <div class="aff-stat-lbl">Paid This Year</div>
      <div class="aff-stat-val" style="color:var(--green);" id="aff-stat-paid">€ 240.00</div>
      <div class="aff-stat-sub" id="aff-stat-paid-sub">6 payments made</div>
    </div>
  </div>

  <!-- Commission tiers + milestones info bar -->
  <div style="background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;">
    <span style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Commission Tiers:</span>
    <span style="font-size:10px;background:rgba(205,127,50,0.15);color:#cd7f32;border:1px solid rgba(205,127,50,0.3);padding:2px 9px;border-radius:20px;font-weight:700;">Bronze 0–14 · 0.25%</span>
    <span style="font-size:10px;background:rgba(192,192,192,0.12);color:#c0c0c0;border:1px solid rgba(192,192,192,0.25);padding:2px 9px;border-radius:20px;font-weight:700;">Silver 15–29 · 0.30%</span>
    <span style="font-size:10px;background:rgba(255,215,0,0.12);color:#ffd700;border:1px solid rgba(255,215,0,0.25);padding:2px 9px;border-radius:20px;font-weight:700;">Gold 30–49 · 0.40%</span>
    <span style="font-size:10px;background:rgba(0,209,255,0.1);color:#00d1ff;border:1px solid rgba(0,209,255,0.2);padding:2px 9px;border-radius:20px;font-weight:700;">Diamond 50+ · 0.50%</span>
    <div style="width:1px;height:18px;background:var(--border);margin:0 4px;"></div>
    <span style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Plan Bonus:</span>
    <span style="font-size:10px;background:var(--bbg);color:var(--blue);border:1px solid rgba(59,130,246,0.3);padding:2px 9px;border-radius:20px;font-weight:700;">Starter €50 once</span>
    <span style="font-size:10px;background:var(--gbg);color:var(--green);border:1px solid rgba(16,185,129,0.3);padding:2px 9px;border-radius:20px;font-weight:700;">Growth €50/mo</span>
    <span style="font-size:10px;background:var(--pbg);color:var(--pl);border:1px solid rgba(124,58,237,0.3);padding:2px 9px;border-radius:20px;font-weight:700;">Enterprise €70/mo</span>
    <div style="width:1px;height:18px;background:var(--border);margin:0 4px;"></div>
    <button onclick="openModal('aff-earn-modal')" style="font-size:10px;font-weight:700;color:var(--pl);background:var(--pbg);border:1px solid rgba(124,58,237,0.3);padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;">How You Earn ↗</button>
    <button onclick="openModal('aff-milestones-modal')" style="font-size:10px;font-weight:700;color:var(--amber);background:var(--abg);border:1px solid rgba(245,158,11,0.3);padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;">Spend Milestones ↗</button>
  </div>

  <!-- Main content: referrer list LEFT + payment history RIGHT -->
  <div style="flex:1;display:grid;grid-template-columns:300px 1fr;gap:11px;min-height:0;">

    <!-- LEFT: Referrer list -->
    <div class="aff-card" style="display:flex;flex-direction:column;overflow:hidden;">
      <div class="aff-card-hdr">
        <span style="font-size:12px;font-weight:700;">Referrers</span>
        <span style="font-size:10px;color:var(--muted);">Click to view payments</span>
      </div>
      <div id="aff-referrer-list" style="flex:1;overflow-y:auto;"></div>
    </div>

    <!-- RIGHT: Payment history for selected referrer -->
    <div class="aff-card" style="display:flex;flex-direction:column;overflow:hidden;">
      <div class="aff-card-hdr" id="aff-detail-hdr">
        <span style="font-size:12px;font-weight:700;">Monthly Payments</span>
        <span style="font-size:10px;color:var(--muted);" id="aff-detail-sub">Select a referrer to view payments</span>
      </div>
      <!-- Sub-header: referred clients list -->
      <div id="aff-referred-bar" style="padding:9px 14px;border-bottom:1px solid var(--border);display:none;flex-shrink:0;">
        <div style="font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">Referred Clients</div>
        <div id="aff-referred-chips" style="display:flex;gap:6px;flex-wrap:wrap;"></div>
      </div>
      <div id="aff-payment-list" style="flex:1;overflow-y:auto;">
        <div style="padding:32px;text-align:center;color:var(--muted);font-size:11px;">
          Select a referrer on the left to see their monthly affiliate payments
        </div>
      </div>
      <!-- Totals footer -->
      <div id="aff-totals-footer" style="display:none;padding:10px 14px;border-top:1px solid var(--border);background:var(--card2);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;">
        <span style="font-size:11px;color:var(--muted);">Total paid out</span>
        <span id="aff-total-paid" style="font-size:13px;font-weight:700;color:var(--green);"></span>
      </div>
    </div>

  </div>
</div>
@endsection

@section('page_scripts')
<script>
let currentAffiliate = null;
const planColors = {Starter:'#3b82f6',Growth:'#10b981',Enterprise:'#a855f7'};
const planBgs = {Starter:'var(--bbg)',Growth:'var(--gbg)',Enterprise:'var(--pbg)'};

function renderAffiliateList(q='') {
  const list = document.getElementById('aff-referrer-list');
  const ql = q.toLowerCase();
  let html = '';
  Object.keys(affiliateData).forEach(id => {
    const c = customerData[id];
    if (!c || (ql && !c.name.toLowerCase().includes(ql))) return;
    const d = affiliateData[id];
    const pending = d.monthlyPayments.find(p => p.status === 'pending');
    let pendingAmt = 0;
    if (pending) pendingAmt = affPaymentTotal(pending);
    const badge = pending ? `<span class="badge bpend" style="font-size:8px;">€ ${pendingAmt.toFixed(2)} due</span>` : '';
    html += `<div class="aff-referrer-row ${currentAffiliate===id?'active':''}" onclick="selectAffiliate('${id}')">
      <div style="width:26px;height:26px;border-radius:50%;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text);">${c.initials}</div>
      <div style="flex:1;"><div style="font-size:11px;font-weight:600;">${c.name}</div><div style="font-size:9px;color:var(--muted);">${d.referrals.length} referred</div></div>
      ${badge}
    </div>`;
  });
  list.innerHTML = html || '<div style="padding:14px;text-align:center;color:var(--muted);font-size:11px;">No referrers found.</div>';
}

function selectAffiliate(id) {
  currentAffiliate = id;
  renderAffiliateList();
  const c = customerData[id];
  const d = affiliateData[id];
  if (!c || !d) return;

  document.getElementById('aff-detail-hdr').innerHTML = `
    <span style="font-size:12px;font-weight:700;">${c.name} — Payments</span>
    <span style="font-size:10px;color:var(--pl);cursor:pointer;" onclick="window.location.href='{{ url('/backend/customers/') }}/${id}'">View Profile →</span>`;

  // Referred chips
  const rbar = document.getElementById('aff-referred-bar');
  const chips = document.getElementById('aff-referred-chips');
  rbar.style.display = 'block';
  chips.innerHTML = d.referrals.map(rid => {
    const rc = customerData[rid]; if (!rc) return '';
    return `<a href="{{ url('/backend/customers/') }}/${rid}" style="text-decoration:none;"><div class="aff-plan-pill" style="background:${planBgs[rc.plan]||'var(--card2)'};color:${planColors[rc.plan]||'var(--muted2)'};">${rc.name}</div></a>`;
  }).join('');

  // Payments list
  const list = document.getElementById('aff-payment-list');
  let totalPaid = 0;
  list.innerHTML = d.monthlyPayments.map((p, idx) => {
    const total = affPaymentTotal(p);
    if (p.status === 'paid') totalPaid += total;
    const isPending = p.status === 'pending';
    const statusHtml = isPending
      ? `<button class="aff-pay-btn" onclick="openAffPayModal('${id}',${idx})" style="font-size:9px;padding:4px 8px;">💳 Pay €${total.toFixed(2)}</button>`
      : `<span class="badge ba" style="font-size:9px;">Paid</span>`;

    return `<div class="aff-pay-row">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
        <span style="font-size:11px;font-weight:700;">${p.month}</span>
        ${statusHtml}
      </div>
      <div class="aff-pay-breakdown">
        ${p.breakdown.map(b => `<div class="aff-pay-b-item"><span>${b.client} (Comm.)</span><span>€ ${b.commission.toFixed(2)}</span></div>`).join('')}
        ${p.bonus > 0 ? `<div class="aff-pay-b-item"><span>Plan Bonuses</span><span>€ ${p.bonus.toFixed(2)}</span></div>` : ''}
      </div>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);">
        <span style="font-size:10px;font-weight:700;color:var(--text);">Total</span>
        <span style="font-size:11px;font-weight:700;color:${isPending?'var(--amber)':'var(--green)'};">€ ${total.toFixed(2)}</span>
      </div>
    </div>`;
  }).join('');

  document.getElementById('aff-totals-footer').style.display = 'flex';
  document.getElementById('aff-total-paid').textContent = '€ ' + totalPaid.toFixed(2);
}

function filterAffiliates(q) { renderAffiliateList(q); }

// init
renderAffiliateList();
</script>
@endsection