╔══════════════════════════════════════════════════════════════════════════════╗
║                    ADMIN PANEL - SUBSCRIPTION PLANS PAGE                     ║
╚══════════════════════════════════════════════════════════════════════════════╝

┌─────────────────────────────────────────────────────────────────────────────┐
│ SIDEBAR (Fixed - 280px)     │ MAIN CONTENT                                  │
├─────────────────────────────┼───────────────────────────────────────────────┤
│                             │                                               │
│ 📊 Admin Panel              │  💳 Subscription Plans        [+ New Plan]   │
│                             │                                               │
│ 🏠 Dashboard                │  ┌─────────────────────────────────────────┐  │
│ 📦 Manage Plans ✓ (active)  │  │ Stats Cards:                            │  │
│ 👥 Add to User              │  ├─────────────────────────────────────────┤  │
│ 📊 Payment Reports          │  │ Total Plans: 3  │ Active Subs: 5       │  │
│ 👫 Users                    │  │ Users on Trial: 2 │ Revenue: ₹5,000    │  │
│                             │  └─────────────────────────────────────────┘  │
│ ─────────────────────       │                                               │
│ 🚪 Logout                   │  All Plans Table:                           │
│                             │  ┌─────────────────────────────────────────┐  │
└─────────────────────────────┤  │ Plan Name │ Duration │ Search │ Price  │  │
                              │  ├─────────────────────────────────────────┤  │
                              │  │ Basic     │ 30 days  │ 100    │ ₹99.99 │  │
                              │  │ Pro       │ 90 days  │ 500    │ ₹299.99│  │
                              │  │ Premium   │ 365 days │ 2000   │ ₹999.99│  │
                              │  │                                         │  │
                              │  │ [Edit] [Delete] | [Edit] [Delete] ...  │  │
                              │  └─────────────────────────────────────────┘  │
                              │                                               │
                              │  Success Message:                             │
                              │  ┌─────────────────────────────────────────┐  │
                              │  │ ✅ Plan created successfully! [X]       │  │
                              │  └─────────────────────────────────────────┘  │
                              │                                               │
                              └───────────────────────────────────────────────┘

╔══════════════════════════════════════════════════════════════════════════════╗
║                            CREATE PLAN MODAL                                 ║
╠══════════════════════════════════════════════════════════════════════════════╣
║                                                                              ║
║  Create New Plan                                                        [X]  ║
║  ────────────────────────────────────────────────────────────────────────  ║
║                                                                              ║
║  Plan Name *        [________________________]                              ║
║                                                                              ║
║  Duration (Days) *  [_________]    Search Limit * [_________]              ║
║                                                                              ║
║  Price (₹) *        [_________]                                             ║
║                                                                              ║
║  Description        [_________________________]                             ║
║                     [_________________________]                             ║
║                                                                              ║
║  ────────────────────────────────────────────────────────────────────────  ║
║                                [Cancel]  [Create Plan]                      ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

═══════════════════════════════════════════════════════════════════════════════

STEP-BY-STEP USER FLOW:

1️⃣  ADMIN VISITS MANAGE PLANS PAGE
    └─ URL: /admin/subscription_plans.php
    └─ Sidebar appears on left (does NOT navigate)
    └─ Main content shows all current plans

2️⃣  ADMIN CLICKS "NEW PLAN" BUTTON
    └─ Modal popup appears
    └─ Form fields ready for input
    └─ Page content darkens behind modal (modal is focused)

3️⃣  ADMIN FILLS FORM AND SUBMITS
    └─ Plan Name: "Business Plan"
    └─ Duration: 180 days
    └─ Search Limit: 1000
    └─ Price: ₹499.99
    └─ Description: "For teams"
    └─ Clicks "Create Plan"

4️⃣  AJAX REQUEST SENT (NO PAGE RELOAD)
    └─ JavaScript submits form via AJAX
    └─ Server validates data
    └─ Database inserts new plan
    └─ Server returns JSON response

5️⃣  SUCCESS RESPONSE RECEIVED
    └─ Green alert shows: "✅ Plan created successfully!"
    └─ Modal closes automatically
    └─ Alert auto-dismisses after 4 seconds

6️⃣  PLANS TABLE RELOADS
    └─ JavaScript fetches all plans
    └─ New "Business Plan" appears in table
    └─ Total Plans stat updates: 3 → 4
    └─ User stays on same page

7️⃣  ADMIN CAN NOW:
    └─ Click "Edit" to modify the plan
    └─ Click "Delete" to remove the plan
    └─ Create more plans without leaving page
    └─ Navigate to other admin sections via sidebar

═══════════════════════════════════════════════════════════════════════════════

KEY IMPROVEMENTS:

✅ NO PAGE NAVIGATION
   - Sidebar stays fixed on left
   - Clicking menu items doesn't reload page
   - User stays in same layout structure

✅ IMMEDIATE FEEDBACK
   - Success message appears instantly
   - New plan visible in table immediately
   - No need to refresh browser

✅ SMOOTH UX
   - Modal closes automatically on success
   - Alert auto-dismisses after 4 seconds
   - No interruption to workflow

✅ AJAX REQUESTS
   - Forms submit without page reload
   - Background processing
   - Instant response to user actions

═══════════════════════════════════════════════════════════════════════════════

RESPONSIVE DESIGN:

Desktop (>768px):
  └─ Sidebar fixed on left (280px)
  └─ Main content beside sidebar
  └─ Full width utilization

Tablet/Mobile (<768px):
  └─ Sidebar collapses to top
  └─ Full width for content
  └─ Hamburger menu for navigation

═══════════════════════════════════════════════════════════════════════════════
