<div class="billing-page">
  <div class="billing-grid">
    <!-- Membership Status -->
    <div class="form-card billing-status-card">
      <h3><i class="bi bi-patch-check-fill"></i> Membership Status</h3>
      <% if (membership && (membership.status === 'trial' || membership.is_trial)) { %>
      <!-- Trial Status -->
      <div class="membership-status-display">
        <% const trialDays = moment(membership.trial_end).diff(moment(), 'days'); %>
        <div class="ms-badge ms-trial"><i class="bi bi-hourglass-split"></i> Free Trial Active</div>
        <div class="ms-details">
          <div class="ms-detail-row"><span>Trial Period</span><strong>30-Day Free Trial</strong></div>
          <div class="ms-detail-row"><span>Trial Started</span><strong><%= moment(membership.trial_start).format('MMMM D, YYYY') %></strong></div>
          <div class="ms-detail-row"><span>Trial Ends</span><strong class="<%= trialDays <= 3 ? 'text-danger' : trialDays <= 7 ? 'text-warning' : '' %>"><%= moment(membership.trial_end).format('MMMM D, YYYY') %></strong></div>
          <div class="ms-detail-row"><span>Days Remaining</span><strong class="<%= trialDays <= 3 ? 'text-danger' : trialDays <= 7 ? 'text-warning' : '' %>"><%= trialDays >= 0 ? trialDays + ' days' : 'Expired' %></strong></div>
        </div>
        <div style="background:#eff6ff;border-radius:10px;padding:16px;margin-top:4px">
          <p style="font-size:.875rem;color:#1e3a8a;margin-bottom:12px"><strong>Your trial includes all membership features.</strong> Activate before it expires to keep access.</p>
          <button type="button" class="btn btn-primary btn-block" id="activateBtn">
            <i class="bi bi-credit-card-fill"></i> Activate Membership — $299/year
          </button>
          <div id="paymentSection" style="display:none;margin-top:16px">
            <div id="stripe-card-element" class="stripe-card-box"></div>
            <div id="stripe-error" style="color:#dc2626;font-size:.8rem;margin-top:6px;display:none"></div>
            <button type="button" class="btn btn-primary btn-block" id="payBtn" style="margin-top:12px">
              <i class="bi bi-lock-fill"></i> Pay $299.00 Securely
            </button>
            <button type="button" class="btn btn-secondary btn-sm" id="cancelBtn" style="margin-top:8px;width:100%">Cancel</button>
          </div>
        </div>
        <% if (membership.trial_end && trialDays > 0) { %>
        <div style="margin-top:12px">
          <div class="trial-progress">
            <div class="trial-progress-bar" style="width:<%= Math.max(0, Math.min(100, 100 - (trialDays / 30 * 100))) %>%"></div>
          </div>
          <p style="font-size:.75rem;color:#9ca3af;text-align:center;margin-top:4px"><%= 30 - trialDays %> of 30 days used</p>
        </div>
        <% } %>
      </div>

      <% } else if (membership && membership.status !== 'active') { %>
      <!-- Pending / Expired -->
      <div class="membership-status-display">
        <div class="ms-badge ms-<%= membership.status %>">
          <i class="bi bi-<%= membership.status === 'pending' ? 'clock' : 'x-circle' %>-fill"></i>
          <%= membership.status.toUpperCase() %>
        </div>
        <div class="ms-details">
          <div class="ms-detail-row"><span>Plan</span><strong>Annual — $<%= parseFloat(membership.amount).toFixed(2) %>/year</strong></div>
          <% if (membership.end_date) { %><div class="ms-detail-row"><span>Expired</span><strong><%= moment(membership.end_date).format('MMMM D, YYYY') %></strong></div><% } %>
        </div>
        <button type="button" class="btn btn-primary btn-block" id="activateBtn">
          <i class="bi bi-credit-card-fill"></i> <%= membership.status === 'pending' ? 'Activate' : 'Renew' %> Membership — $299/year
        </button>
        <div id="paymentSection" style="display:none;margin-top:16px">
          <div id="stripe-card-element" class="stripe-card-box"></div>
          <div id="stripe-error" style="color:#dc2626;font-size:.8rem;margin-top:6px;display:none"></div>
          <button type="button" class="btn btn-primary btn-block" id="payBtn" style="margin-top:12px">
            <i class="bi bi-lock-fill"></i> Pay $299.00 Securely
          </button>
          <button type="button" class="btn btn-secondary btn-sm" id="cancelBtn" style="margin-top:8px;width:100%">Cancel</button>
        </div>
      </div>

      <% } else if (membership && membership.status === 'active') { %>
      <!-- Active -->
      <div class="membership-status-display">
        <div class="ms-badge ms-active"><i class="bi bi-check-circle-fill"></i> ACTIVE</div>
        <div class="ms-details">
          <div class="ms-detail-row"><span>Plan</span><strong>Annual — $<%= parseFloat(membership.amount).toFixed(2) %>/year</strong></div>
          <% if (membership.start_date) { %><div class="ms-detail-row"><span>Start Date</span><strong><%= moment(membership.start_date).format('MMMM D, YYYY') %></strong></div><% } %>
          <% if (membership.end_date) { %><div class="ms-detail-row"><span>Renewal Date</span><strong><%= moment(membership.end_date).format('MMMM D, YYYY') %></strong></div><% } %>
          <div class="ms-detail-row"><span>Auto-Renew</span><strong><%= membership.auto_renew ? 'Enabled' : 'Disabled' %></strong></div>
        </div>
        <div class="billing-features">
          <h4>Your membership includes:</h4>
          <ul>
            <li><i class="bi bi-check-circle-fill"></i> Business Directory Listing</li>
            <li><i class="bi bi-check-circle-fill"></i> Bulletin Board Access</li>
            <li><i class="bi bi-check-circle-fill"></i> Partner Perks &amp; B2B Wallet</li>
            <li><i class="bi bi-check-circle-fill"></i> Press Release Distribution</li>
            <li><i class="bi bi-check-circle-fill"></i> Event Management</li>
            <li><i class="bi bi-check-circle-fill"></i> Digital Loyalty Program</li>
            <li><i class="bi bi-check-circle-fill"></i> Agreements Platform</li>
            <li><i class="bi bi-check-circle-fill"></i> Social Media Promotion</li>
            <li><i class="bi bi-check-circle-fill"></i> Networking Community</li>
          </ul>
        </div>
      </div>

      <% } else { %>
      <!-- No membership -->
      <div class="ms-no-membership">
        <p>No membership found. Join Biz2Biz Chamber today!</p>
        <button type="button" class="btn btn-primary btn-block btn-lg" id="activateBtn">
          <i class="bi bi-credit-card-fill"></i> Join Now — $299/year
        </button>
        <div id="paymentSection" style="display:none;margin-top:16px">
          <div id="stripe-card-element" class="stripe-card-box"></div>
          <div id="stripe-error" style="color:#dc2626;font-size:.8rem;margin-top:6px;display:none"></div>
          <button type="button" class="btn btn-primary btn-block" id="payBtn" style="margin-top:12px">
            <i class="bi bi-lock-fill"></i> Pay $299.00 Securely
          </button>
          <button type="button" class="btn btn-secondary btn-sm" id="cancelBtn" style="margin-top:8px;width:100%">Cancel</button>
        </div>
      </div>
      <% } %>
    </div>

    <!-- Referral Program -->
    <div class="form-card">
      <h3><i class="bi bi-people-fill"></i> Refer a Business — Earn $25</h3>
      <p style="font-size:.875rem;color:#6b7280;margin-bottom:16px">Share your unique referral link. When a business joins and converts to a paid membership, you earn a <strong>$25 credit</strong> toward your next renewal.</p>
      <% const refLink = appUrl + '/register?ref=' + (referralCode || ''); %>
      <div style="display:flex;gap:8px;margin-bottom:20px">
        <input type="text" value="<%= refLink %>" id="refLinkInput" readonly style="flex:1;font-size:.8rem;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#f9fafb;color:#374151">
        <button onclick="navigator.clipboard.writeText('<%= refLink %>').then(()=>{this.innerHTML='<i class=\\'bi bi-check-lg\\'></i> Copied!';this.style.background='#16a34a';setTimeout(()=>{this.innerHTML='<i class=\\'bi bi-clipboard\\'></i> Copy';this.style.background=''},2000)})" class="btn btn-secondary btn-sm" style="white-space:nowrap"><i class="bi bi-clipboard"></i> Copy</button>
      </div>
      <% if (referralData && referralData.length) { %>
      <div style="font-size:.8rem;color:#6b7280;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em">Your Referrals</div>
      <div style="display:flex;flex-direction:column;gap:8px">
        <% referralData.forEach(r => { %>
        <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb">
          <div>
            <div style="font-size:.85rem;font-weight:600"><%= r.first_name %> <%= r.last_name %> <% if(r.org_name){%><span style="color:#6b7280;font-weight:400">· <%= r.org_name %></span><%}%></div>
            <div style="font-size:.72rem;color:#9ca3af"><%= moment(r.created_at).format('MMM D, YYYY') %></div>
          </div>
          <div style="text-align:right">
            <span class="badge badge-<%= r.status==='converted'?'success':r.status==='expired'?'secondary':'warning' %>"><%= r.status==='converted'?'Converted':'Pending' %></span>
            <% if(r.status==='converted'){%><div style="font-size:.75rem;color:#16a34a;font-weight:600;margin-top:2px">+$<%= parseFloat(r.referral_credit).toFixed(2) %> credit</div><%}%>
          </div>
        </div>
        <% }) %>
      </div>
      <%
        const totalCredits = referralData.filter(r=>r.status==='converted').reduce((s,r)=>s+parseFloat(r.referral_credit||0),0);
      %>
      <% if(totalCredits > 0){%>
      <div style="margin-top:14px;padding:12px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
        <span style="font-size:.875rem;font-weight:600;color:#166534">Total Referral Credits Earned</span>
        <span style="font-size:1rem;font-weight:700;color:#16a34a">$<%= totalCredits.toFixed(2) %></span>
      </div>
      <%}%>
      <% } else { %>
      <div style="text-align:center;padding:20px;color:#9ca3af;font-size:.85rem">
        <i class="bi bi-people" style="font-size:1.5rem;display:block;margin-bottom:6px"></i>
        No referrals yet. Share your link to start earning!
      </div>
      <% } %>
    </div>

    <!-- Promo Code -->
    <div class="form-card">
      <h3><i class="bi bi-ticket-perforated-fill"></i> Promo Code</h3>
      <p style="font-size:.875rem;color:#6b7280;margin-bottom:14px">Have a promo code? Enter it below to extend your trial, get a discount, or unlock a special offer.</p>
      <div style="display:flex;gap:8px">
        <input type="text" id="promoInput" placeholder="Enter promo code" style="flex:1;padding:9px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em" oninput="this.value=this.value.toUpperCase()">
        <button class="btn btn-primary" onclick="applyPromo()" id="promoBtn"><i class="bi bi-check-circle-fill"></i> Apply</button>
      </div>
      <div id="promoResult" style="display:none;margin-top:10px;padding:10px 14px;border-radius:8px;font-size:.875rem"></div>
    </div>

    <!-- Transaction History -->
    <div class="form-card">
      <h3><i class="bi bi-receipt"></i> Transaction History</h3>
      <% if (transactions && transactions.length) { %>
      <div class="transaction-list">
        <% transactions.forEach(t => { %>
        <div class="transaction-item">
          <% const isPromo = t.transaction_type === 'adjustment' && t.description && t.description.toLowerCase().startsWith('promo'); %>
          <div class="ti-icon ti-<%= t.transaction_type %>"><i class="bi bi-<%= isPromo ? 'ticket-perforated' : t.transaction_type === 'membership' ? 'patch-check' : 'receipt' %>-fill"></i></div>
          <div class="ti-body">
            <p class="ti-desc"><%= t.description || t.transaction_type %></p>
            <p class="ti-date"><%= moment(t.created_at).format('MMM D, YYYY') %></p>
          </div>
          <div class="ti-amount">
            <strong class="<%= (t.transaction_type === 'refund' || isPromo) ? 'text-success' : '' %>"><%= (t.transaction_type === 'refund' || isPromo) ? (t.amount > 0 ? '-' : '') : '' %>$<%= parseFloat(t.amount).toFixed(2) %></strong>
            <span class="badge badge-<%= t.status === 'completed' ? 'success' : t.status === 'pending' ? 'warning' : 'danger' %>"><%= t.status %></span>
          </div>
        </div>
        <% }) %>
      </div>
      <% if (txTotalPages > 1) { %>
      <div class="tx-pagination">
        <% if (txPage > 1) { %>
          <a href="/member/billing?page=<%= txPage - 1 %>" class="btn-page"><i class="bi bi-chevron-left"></i> Prev</a>
        <% } else { %>
          <span class="btn-page disabled"><i class="bi bi-chevron-left"></i> Prev</span>
        <% } %>
        <span class="tx-page-info">Page <%= txPage %> of <%= txTotalPages %></span>
        <% if (txPage < txTotalPages) { %>
          <a href="/member/billing?page=<%= txPage + 1 %>" class="btn-page">Next <i class="bi bi-chevron-right"></i></a>
        <% } else { %>
          <span class="btn-page disabled">Next <i class="bi bi-chevron-right"></i></span>
        <% } %>
      </div>
      <% } %>
      <% } else { %>
      <div class="empty-state-sm"><i class="bi bi-receipt"></i><p>No transactions yet.</p></div>
      <% } %>
    </div>
  </div>
</div>

<% if (stripePublicKey) { %>
<script src="https://js.stripe.com/v3/"></script>
<% } %>

<script>
(function () {
  const STRIPE_KEY = '<%= stripePublicKey %>';

  let _stripe = null, _card = null, _clientSecret = null;

  const el = id => document.getElementById(id);

  function setLoading(busy) {
    const payBtn = el('payBtn');
    if (payBtn) {
      payBtn.disabled = busy;
      payBtn.innerHTML = busy
        ? '<i class="bi bi-hourglass-split"></i> Processing…'
        : '<i class="bi bi-lock-fill"></i> Pay $299.00 Securely';
    }
  }

  function showError(msg) {
    const errEl = el('stripe-error');
    if (!errEl) return;
    errEl.textContent = msg;
    errEl.style.display = msg ? 'block' : 'none';
  }

  async function start() {
    if (!STRIPE_KEY) {
      alert('Payment processing is not configured yet. Please contact support.');
      return;
    }
    const activateBtn = el('activateBtn');
    activateBtn.disabled = true;
    activateBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Loading…';

    try {
      const resp = await fetch('/member/billing/create-intent', {
        method: 'POST', headers: { 'Content-Type': 'application/json' }
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Failed to initialize payment');
      _clientSecret = data.client_secret;

      _stripe = Stripe(STRIPE_KEY);
      const elements = _stripe.elements();
      _card = elements.create('card', {
        style: {
          base: { fontSize: '15px', color: '#111827', fontFamily: 'Inter, sans-serif',
            '::placeholder': { color: '#9ca3af' } },
          invalid: { color: '#dc2626' }
        }
      });
      _card.mount('#stripe-card-element');
      _card.on('change', e => showError(e.error ? e.error.message : ''));

      el('paymentSection').style.display = 'block';
      activateBtn.style.display = 'none';
    } catch (err) {
      activateBtn.disabled = false;
      activateBtn.innerHTML = '<i class="bi bi-credit-card-fill"></i> Activate Membership — $299/year';
      alert(err.message);
    }
  }

  async function confirm() {
    if (!_stripe || !_card || !_clientSecret) return;
    setLoading(true);
    showError('');
    try {
      const { error, paymentIntent } = await _stripe.confirmCardPayment(_clientSecret, {
        payment_method: { card: _card }
      });
      if (error) throw new Error(error.message);
      if (paymentIntent.status !== 'succeeded') throw new Error('Payment incomplete — please try again.');

      const resp = await fetch('/member/billing/activate', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Activation failed');

      window.location.reload();
    } catch (err) {
      showError(err.message);
      setLoading(false);
    }
  }

  function cancel() {
    el('paymentSection').style.display = 'none';
    const activateBtn = el('activateBtn');
    if (activateBtn) {
      activateBtn.style.display = '';
      activateBtn.disabled = false;
      activateBtn.innerHTML = '<i class="bi bi-credit-card-fill"></i> Activate Membership — $299/year';
    }
    if (_card) { _card.unmount(); _card = null; }
    _stripe = null;
    _clientSecret = null;
    showError('');
  }

  document.addEventListener('DOMContentLoaded', function () {
    const activateBtn = el('activateBtn');
    const payBtn      = el('payBtn');
    const cancelBtn   = el('cancelBtn');
    if (activateBtn) activateBtn.addEventListener('click', start);
    if (payBtn)      payBtn.addEventListener('click', confirm);
    if (cancelBtn)   cancelBtn.addEventListener('click', cancel);
  });
}());

async function applyPromo() {
  const code = document.getElementById('promoInput').value.trim();
  const btn  = document.getElementById('promoBtn');
  const result = document.getElementById('promoResult');
  if (!code) return;

  btn.disabled = true;
  btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Applying…';
  result.style.display = 'none';

  try {
    const res  = await fetch('/member/billing/promo', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code })
    });
    const data = await res.json();

    if (data.success) {
      result.style.cssText = 'display:block;padding:10px 14px;border-radius:8px;font-size:.875rem;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534';
      result.innerHTML = '<i class="bi bi-check-circle-fill"></i> <strong>' + data.message + '</strong>';
      document.getElementById('promoInput').value = '';
      setTimeout(() => window.location.reload(), 1800);
    } else {
      result.style.cssText = 'display:block;padding:10px 14px;border-radius:8px;font-size:.875rem;background:#fef2f2;border:1px solid #fecaca;color:#991b1b';
      result.innerHTML = '<i class="bi bi-exclamation-circle-fill"></i> ' + data.error;
    }
  } catch {
    result.style.cssText = 'display:block;padding:10px 14px;border-radius:8px;font-size:.875rem;background:#fef2f2;border:1px solid #fecaca;color:#991b1b';
    result.innerHTML = '<i class="bi bi-exclamation-circle-fill"></i> Failed to apply code. Please try again.';
  }

  btn.disabled = false;
  btn.innerHTML = '<i class="bi bi-check-circle-fill"></i> Apply';
}
</script>
