<?php
/**
 * Subscription Payment View — Helmyx Auth Page
 * Shown when an org's 7-day trial has expired. Payment itself happens on
 * Flutterwave's hosted checkout page — this view only shows the amount due
 * and starts that redirect; no card details are collected here.
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Your Subscription — Helmyx</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/brand/favicon/helmyx-icon-32.png">
    <link rel="stylesheet" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/css/hx-tokens.css">
    <link rel="stylesheet" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/css/style.css">
    <link rel="stylesheet" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/css/auth.css">
    <style>
        .price-card { text-align: center; padding: 28px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(10,58,107,0.08), rgba(18,194,206,0.06)); border: 1px solid rgba(10,58,107,0.15); margin: 20px 0 28px; }
        .price-amount { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; font-family: var(--font-family-display); }
        .price-plan { font-size: 0.85rem; color: var(--text-muted); margin-top: 6px; }
        .trial-expired-note { display: flex; align-items: center; gap: 10px; background: var(--hx-off-course-tint); border: 1px solid rgba(214,69,59,0.3); color: var(--hx-off-course-text); border-radius: 8px; padding: 12px 16px; font-size: 0.85rem; font-weight: 600; margin-bottom: 20px; }
    </style>
</head>
<body class="auth-body">

<div class="auth-wrapper">
    <div class="auth-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
    </div>

    <div class="auth-card" style="max-width:480px;">
        <div class="auth-logo">
            <img src="<?= APP_URL ?>/assets/brand/logo/helmyx-horizontal.svg" alt="Helmyx — Steer. Plan. Deliver." style="height:46px;">
        </div>

        <div class="trial-expired-note">
            <span>⏳</span>
            <span>Your free trial has ended for <?= htmlspecialchars($org['name'] ?? 'your organization') ?>.</span>
        </div>

        <h1 class="auth-title">Complete your subscription</h1>
        <p class="auth-subtitle">Subscribe to keep using Helmyx — pick up right where you left off.</p>

        <?php if (!empty($_SESSION['flash'])): ?>
            <?php foreach ($_SESSION['flash'] as $type => $message): ?>
                <div class="alert alert-<?= htmlspecialchars($type) ?>" style="margin-bottom:16px;">
                    <span><?= htmlspecialchars($message) ?></span>
                    <button class="alert-dismiss" onclick="this.parentElement.remove()">&times;</button>
                </div>
            <?php endforeach; unset($_SESSION['flash']); ?>
        <?php endif; ?>

        <?php if ($pricing): ?>
            <div class="price-card">
                <div class="price-amount"><?= htmlspecialchars(formatCurrency((float)$pricing['amount'], $pricing['currency'])) ?></div>
                <div class="price-plan"><?= htmlspecialchars($pricing['plan']['name']) ?> plan · billed <?= htmlspecialchars($pricing['plan']['billing_type']) ?></div>
            </div>

            <?php if ($flwReady): ?>
                <form method="POST" action="<?= APP_URL ?>/billing/pay/initiate">
                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
                    <button type="submit" class="btn btn-primary w-full btn-lg" style="justify-content:center;">
                        Pay with Flutterwave
                    </button>
                </form>
                <p class="field-hint" style="text-align:center;margin-top:12px;">You'll be redirected to Flutterwave's secure checkout. We never see or store your card details.</p>
            <?php else: ?>
                <div class="alert alert-warning" style="margin-bottom:0;">
                    <span>Online payment isn't set up yet. Please contact support to complete your subscription.</span>
                </div>
            <?php endif; ?>
        <?php else: ?>
            <div class="alert alert-warning" style="margin-bottom:0;">
                <span>No subscription plan is configured yet. Please contact support.</span>
            </div>
        <?php endif; ?>

        <p style="text-align:center;margin-top:24px;font-size:0.85rem;">
            Not you? <a href="<?= APP_URL ?>/login" style="color:var(--primary);text-decoration:none;font-weight:600;">Go to login</a>
        </p>
    </div>
</div>
</body>
</html>
