<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Payment Process Flowchart</title>
    <!-- Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Use Inter font family -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f7f9;
        }
        .flow-card {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease-in-out;
        }
        .flow-card:hover {
            transform: translateY(-2px);
        }
        .toggle-btn {
            transition: transform 0.3s;
        }
        .rotate-90 {
            transform: rotate(90deg);
        }
    </style>
</head>
<body class="p-4 sm:p-8">

<div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-extrabold text-gray-900 mb-6 text-center">
        Student Course Enrollment & Payment Process
    </h1>
    <p class="text-center text-gray-600 mb-10">
        A hierarchical system tree visualization of the user journey from course discovery to payment completion.
    </p>

    <!-- Main Container for the Flowchart -->
    <div id="flowchart" class="space-y-6">

        <!-- Stage 1: Discovery & Selection -->
        <div class="flow-card bg-white rounded-xl overflow-hidden border border-indigo-200">
            <button class="w-full text-left p-4 flex justify-between items-center bg-indigo-600 text-white hover:bg-indigo-700 transition duration-150 rounded-t-xl" onclick="toggleStage('stage1')">
                <span class="text-xl font-semibold flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2 1.343 2 3 2V8z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l3 9v6h12v-6l-3-9H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2v-10a2 2 0 00-2-2H5a2 2 0 00-2 2z"></path></svg>
                    1. Course Discovery & Selection
                </span>
                <span id="icon-stage1" class="toggle-btn rotate-90 text-2xl font-bold">&gt;</span>
            </button>
            <div id="stage1" class="p-6 bg-indigo-50 transition-all duration-300">
                <ol class="space-y-3 list-decimal list-inside text-gray-700">
                    <li>Browse Courses on Home Page.</li>
                    <li>Select Course and click **"Add to Cart"**.</li>
                    <li>Click **"View Cart"** to review items.</li>
                    <li>Click **"Proceed to Checkout"**.</li>
                </ol>
            </div>
        </div>

        <!-- Stage 2: User Authentication -->
        <div class="flow-card bg-white rounded-xl overflow-hidden border border-yellow-200">
            <button class="w-full text-left p-4 flex justify-between items-center bg-yellow-600 text-white hover:bg-yellow-700 transition duration-150" onclick="toggleStage('stage2')">
                <span class="text-xl font-semibold flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
                    2. User Authentication (Checkpoint)
                </span>
                <span id="icon-stage2" class="toggle-btn text-2xl font-bold">&gt;</span>
            </button>
            <div id="stage2" class="hidden p-6 bg-yellow-50 transition-all duration-300">
                <div class="space-y-4 text-gray-700">
                    <p class="font-medium text-lg mb-2">Based on User Status:</p>
                    
                    <!-- Existing User -->
                    <div class="bg-yellow-100 p-3 rounded-lg border-l-4 border-yellow-500">
                        <span class="font-semibold block mb-1">2.1. Existing User</span>
                        <ul class="list-disc list-inside ml-4 text-sm">
                            <li>Click **"Login"**.</li>
                            <li>Enter Credentials.</li>
                            <li>*Proceed to Student Dashboard*.</li>
                        </ul>
                    </div>
                    
                    <!-- New User -->
                    <div class="bg-yellow-100 p-3 rounded-lg border-l-4 border-yellow-500">
                        <span class="font-semibold block mb-1">2.2. New User</span>
                        <ul class="list-disc list-inside ml-4 text-sm">
                            <li>Click **"Register"** (New Account).</li>
                            <li>Complete Registration Process.</li>
                            <li>*Proceed to Student Dashboard*.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stage 3: Checkout & Payment -->
        <div class="flow-card bg-white rounded-xl overflow-hidden border border-green-200">
            <button class="w-full text-left p-4 flex justify-between items-center bg-green-600 text-white hover:bg-green-700 transition duration-150" onclick="toggleStage('stage3')">
                <span class="text-xl font-semibold flex items-center">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                    3. Checkout & Payment
                </span>
                <span id="icon-stage3" class="toggle-btn text-2xl font-bold">&gt;</span>
            </button>
            <div id="stage3" class="hidden p-6 bg-green-50 transition-all duration-300">
                <ol class="space-y-3 list-decimal list-inside text-gray-700">
                    <li>Arrive at Student Dashboard/Checkout.</li>
                    <li>View **Order Summary** (Confirm items and total).</li>
                    <li>Click **"Make Payment"**.</li>
                    <li>Select Payment Method and complete transaction.</li>
                    <li>**Payment Outcome:** Receive Confirmation or Error Message.</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<script>
    // Simple JavaScript to handle collapsing/expanding the flowchart stages
    function toggleStage(stageId) {
        const stage = document.getElementById(stageId);
        const icon = document.getElementById('icon-' + stageId);

        if (stage.classList.contains('hidden')) {
            // Expand the stage
            stage.classList.remove('hidden');
            icon.classList.add('rotate-90');
        } else {
            // Collapse the stage
            stage.classList.add('hidden');
            icon.classList.remove('rotate-90');
        }
    }

    // Initialize the first stage as open on load
    document.addEventListener('DOMContentLoaded', () => {
        // Since stage1 is not hidden initially in HTML, we just ensure its icon is correct
        document.getElementById('icon-stage1').classList.add('rotate-90');
    });
</script>

</body>
</html>