Ultra File Manager

Edit: /home/u523034047/domains/psassociate.org/public_html/phonepe/select-plan.php

<?php
/**
 * phonepe/select-plan.php
 * Plan selection page - user chooses ₹600 (3 months) or ₹1000 (lifetime)
 */
session_start();

// Ensure session has career data from form
if (!isset($_SESSION['career']) || empty($_SESSION['career']['name'])) {
    header("Location: ../post-resume.php");
    exit;
}

$career = $_SESSION['career'];

// Handle plan selection
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['selected_plan'])) {
    $plan = $_POST['selected_plan'];
    if ($plan === '600') {
        $_SESSION['career']['plan_type'] = '3 Months';
        $_SESSION['career']['plan_amount'] = 600;
    } elseif ($plan === '1000') {
        $_SESSION['career']['plan_type'] = 'Lifetime';
        $_SESSION['career']['plan_amount'] = 1000;
    } else {
        $_SESSION['career']['error'] = 'Please select a valid plan.';
        header("Location: select-plan.php");
        exit;
    }
    header("Location: pay.php");
    exit;
}

$error = $_SESSION['career']['error'] ?? '';
unset($_SESSION['career']['error']);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
    <title>Select Plan - PS Associate</title>
    <link rel="shortcut icon" href="../ico-images/u.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../templates-images/12577/common/catalog_new.css" />
    <link rel="stylesheet" href="../templates-images/12577/12583/catalog.css" />
    <style>
        .plan-wrapper {
            max-width: 800px;
            margin: 30px auto;
            padding: 0 15px;
        }

.plan-greeting {
            text-align: center;
            margin-bottom: 30px;
        }

.plan-greeting h1 {
            font-size: 26px;
            color: #222;
            margin: 0 0 8px;
        }

.plan-greeting p {
            color: #666;
            font-size: 15px;
            margin: 0;
        }

.plan-greeting .user-name {
            color: #333;
            font-weight: 700;
        }

/* Error Banner */
        .error-banner {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 14px 20px;
            margin-bottom: 20px;
            color: #dc2626;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

.error-banner .icon {
            font-size: 20px;
        }

/* Plan Cards */
        .plan-cards {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
        }

.plan-card {
            flex: 1;
            background: #fff;
            border: 2px solid #e5e7eb;
            border-radius: 16px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.plan-card:hover {
            border-color: #333;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

.plan-card.selected {
            border-color: #333;
            background: #fafafa;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

.plan-card.selected::before {
            content: '✓';
            position: absolute;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            background: #333;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
        }

.plan-card .badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
        }

.plan-card.basic .badge {
            background: #dbeafe;
            color: #1e40af;
        }

.plan-card.premium .badge {
            background: #fef3c7;
            color: #92400e;
        }

.plan-card .price {
            font-size: 48px;
            font-weight: 800;
            color: #222;
            line-height: 1;
            margin-bottom: 5px;
        }

.plan-card .price span {
            font-size: 22px;
            font-weight: 600;
            vertical-align: top;
        }

.plan-card .duration {
            font-size: 15px;
            color: #666;
            margin-bottom: 20px;
            font-weight: 500;
        }

.plan-card .features {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left;
        }

.plan-card .features li {
            padding: 7px 0;
            font-size: 14px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.plan-card .features li .tick {
            color: #22c55e;
            font-weight: 700;
            font-size: 16px;
        }

.plan-card.premium {
            border-color: #333;
        }

.plan-card.premium .popular-tag {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #fff;
            padding: 4px 16px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 0 0 8px 8px;
        }

/* User Info Summary */
        .user-summary {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
        }

.user-summary h3 {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #888;
            margin: 0 0 12px;
        }

.user-summary .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

.user-summary .info-item {
            font-size: 14px;
        }

.user-summary .info-item .lbl {
            color: #888;
        }

.user-summary .info-item .val {
            color: #222;
            font-weight: 600;
        }

/* Proceed Button */
        .proceed-btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: #333;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            opacity: 0.4;
            pointer-events: none;
        }

.proceed-btn.active {
            opacity: 1;
            pointer-events: auto;
        }

.proceed-btn.active:hover {
            background: #111;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

.secure-note {
            text-align: center;
            margin-top: 12px;
            font-size: 13px;
            color: #999;
        }

.secure-note span {
            color: #22c55e;
        }

/* Mobile */
        @media (max-width: 600px) {
            .plan-cards {
                flex-direction: column;
            }

.plan-card .price {
                font-size: 38px;
            }

.user-summary .info-grid {
                grid-template-columns: 1fr;
            }

.plan-greeting h1 {
                font-size: 22px;
            }
        }
    </style>
</head>

<div class="plan-greeting">
                <h1>Choose Your Plan</h1>
                <p>Welcome, <span class="user-name">
                        <?php echo htmlspecialchars($career['name']); ?>
                    </span>! Select a registration plan to continue.</p>
            </div>

<?php if ($error): ?>
                <div class="error-banner">
                    <span class="icon">⚠️</span>
                    <?php echo htmlspecialchars($error); ?>
                </div>
            <?php endif; ?>

<div class="user-summary">
                <h3>Your Submitted Details</h3>
                <div class="info-grid">
                    <div class="info-item"><span class="lbl">Name: </span><span class="val">
                            <?php echo htmlspecialchars($career['name']); ?>
                        </span></div>
                    <div class="info-item"><span class="lbl">Email: </span><span class="val">
                            <?php echo htmlspecialchars($career['email']); ?>
                        </span></div>
                    <div class="info-item"><span class="lbl">Mobile: </span><span class="val">
                            <?php echo htmlspecialchars($career['mobile']); ?>
                        </span></div>
                    <div class="info-item"><span class="lbl">Qualification: </span><span class="val">
                            <?php echo htmlspecialchars($career['studying']); ?>
                        </span></div>
                </div>
            </div>

<div class="plan-card basic" onclick="selectPlan('600', this)">
                        <span class="badge">Basic</span>
                        <div class="price"><span>₹</span>600</div>
                        <div class="duration">Valid for 3 Months</div>
                    </div>

<div class="plan-card premium" onclick="selectPlan('1000', this)">
                        <span class="popular-tag">⭐ Most Popular</span>
                        <span class="badge">Premium</span>
                        <div class="price"><span>₹</span>1,000</div>
                        <div class="duration">Lifetime Access</div>
                    </div>

</div>

<input type="hidden" name="selected_plan" id="selectedPlan" value="">
                <button type="submit" class="proceed-btn" id="proceedBtn">
                    Select a plan to continue →
                </button>
                <div class="secure-note"><span>🔒</span> Secure payment via PhonePe</div>
            </form>

</div>

// Enable button
            var btn = document.getElementById('proceedBtn');
            btn.classList.add('active');
            if (amount === '600') {
                btn.textContent = 'Proceed to Pay ₹600 (3 Months) →';
            } else {
                btn.textContent = 'Proceed to Pay ₹1,000 (Lifetime) →';
            }
        }

// Form validation
        document.getElementById('planForm').addEventListener('submit', function (e) {
            if (document.getElementById('selectedPlan').value === '') {
                e.preventDefault();
                // Show inline error
                var existing = document.querySelector('.error-banner');
                if (!existing) {
                    var banner = document.createElement('div');
                    banner.className = 'error-banner';
                    banner.innerHTML = '<span class="icon">⚠️</span> Please select a plan before proceeding.';
                    document.querySelector('.plan-greeting').after(banner);
                }
            }
        });
    </script>
</body>

</html>

Ukuran: 12.2 KB