<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Plan - <?= APP_NAME ?></title>
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/app.css">
    <style>
        body { background: var(--bg-base); padding: 40px 20px;}
        .onboarding-wrap { max-width: 900px; margin: 0 auto; }
        .steps { display: flex; gap: 10px; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto;}
        .step { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-raised); transition: background 0.3s; }
        .step.active { background: var(--primary); }
        .step.done { background: var(--success); }
        
        .plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .plan-card {
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 24px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .plan-card:hover { border-color: rgba(99,102,241,0.5); transform: translateY(-3px); }
        .plan-card.selected { border-color: var(--primary); background: var(--primary-glass); box-shadow: 0 4px 20px rgba(99,102,241,0.2); }
        .plan-card.selected::before {
            content: '✓'; position: absolute; top: 16px; right: 16px;
            width: 24px; height: 24px; background: var(--primary); color: white;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: bold;
        }
    </style>
</head>
<body>

    <div class="onboarding-wrap">
        <div class="steps">
            <div class="step done"></div>
            <div class="step active"></div>
            <div class="step"></div>
        </div>

        <div class="text-center mb-6">
            <h2>Select your plan</h2>
            <p class="text-muted">You are currently on a <?= TRIAL_DAYS ?>-day free trial. Select the plan you'd like to use.</p>
        </div>

        <?php if ($error = getFlash('error')): ?>
            <div class="alert alert-error max-w-md mx-auto mb-4"><?= e($error) ?></div>
        <?php endif; ?>

        <form action="<?= APP_URL ?>/onboarding/plan" method="POST" id="planForm">
            <?= Security::csrfField() ?>
            <input type="hidden" name="plan_id" id="planIdInput" value="<?= $current['plan_id'] ?? '' ?>">
            <input type="hidden" name="billing_cycle" value="monthly"> <!-- default -->
            
            <div class="plan-cards mb-6">
                <?php foreach ($plans as $plan): ?>
                    <div class="plan-card <?= ($current['plan_id'] ?? 0) == $plan['id'] ? 'selected' : '' ?>" onclick="selectPlan(<?= $plan['id'] ?>, this)">
                        <h3 style="color: var(--primary-light); margin-bottom:10px;"><?= e($plan['name']) ?></h3>
                        <div style="font-size: 2rem; font-weight: 800; margin-bottom: 5px;">
                            <?= setting('currency_symbol', 'GH₵') ?><?= number_format($plan['price_monthly']) ?>
                        </div>
                        <div class="text-muted text-sm mb-4">per month</div>
                        
                        <ul style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.8;">
                            <li>• <?= $plan['max_products'] === -1 ? 'Unlimited' : $plan['max_products'] ?> Products</li>
                            <li>• <?= $plan['max_users'] === -1 ? 'Unlimited' : $plan['max_users'] ?> Users</li>
                            <li>• <?= $plan['max_locations'] === -1 ? 'Unlimited' : $plan['max_locations'] ?> Location(s)</li>
                        </ul>
                    </div>
                <?php endforeach; ?>
            </div>

            <div class="flex justify-center mt-6">
                <button type="submit" class="btn btn-primary btn-lg" id="submitBtn" <?= empty($current) ? 'disabled' : '' ?>>
                    Complete Signup
                </button>
            </div>
        </form>
    </div>

    <script>
        function selectPlan(id, element) {
            document.getElementById('planIdInput').value = id;
            document.querySelectorAll('.plan-card').forEach(el => el.classList.remove('selected'));
            element.classList.add('selected');
            document.getElementById('submitBtn').disabled = false;
        }
    </script>
</body>
</html>
