# Agent Registration Page - CSS After Fix

## What You Should See

### Layout
```
┌─────────────────────────────────────────────┐
│        Agent Registration Page              │
├────────────────┬──────────────────────────┤
│                │                          │
│  LEFT SIDE     │    RIGHT SIDE            │
│  (Red/Branding)│   (Form - White)        │
│                │                          │
│  • FWG Logo    │  Create Your Account     │
│  • Referred by │                          │
│  • Why Join FWG│  Form Fields:            │
│  • Features    │  • Referral Code         │
│                │  • Full Name             │
│  Why Join FWG: │  • Email                 │
│  ✓ Professional│  • Phone                 │
│  ✓ Real-time   │  • Date of Birth         │
│  ✓ Withdrawals │  • IC Number             │
│  ✓ 24/7        │  • Gender                │
│                │  • Address (3 lines)     │
│                │  • Country/State/City    │
│                │  • Password              │
│                │  • Confirm Password      │
│                │  • Terms Checkbox        │
│                │                          │
│                │  [Register as Agent]     │
│                │                          │
│                │  Already have account?   │
│                │  → Login here            │
└────────────────┴──────────────────────────┘
```

### Color Scheme
- **Background**: Red gradient (#8b2e3b → #a81c2e)
- **Form**: White background
- **Text**: Dark gray
- **Buttons**: Red gradient with hover effect
- **Links**: Purple (#9333ea)
- **Focus**: Blue ring around inputs

### Elements

#### LEFT SIDE (Red Gradient Background)
- FWG Logo (image, 32x32)
- "Referred by" section (if referral code provided)
  - Shows referrer name and code
  - Has white background with transparency
- "Why Join FWG" section
  - ✓ Professional Agent Support
  - ✓ Real-time Dashboard
  - ✓ Easy Withdrawals
  - ✓ 24/7 Support
- Each bullet has white checkmark icon

#### RIGHT SIDE (White Form)
- Title: "Create Your Account"
- Subtitle: "Complete your registration to become a FWG Agent"

**Form Fields** (in order):
1. Referral Code (optional - hidden if provided via URL)
2. Full Name
3. Email Address
4. Phone Number
5. **3-Column Row**:
   - Date of Birth (with calendar picker)
   - IC Number (12 digits, auto-fills DOB)
   - Gender (dropdown)
6. **Address Section** (gray divider line above):
   - Address Line 1
   - Address Line 2
   - Country (dropdown, defaults to Malaysia)
   - State (auto-populated based on country)
   - City (auto-populated based on state)
7. **2-Column Row**:
   - Password (with eye toggle)
   - Confirm Password (with eye toggle)
8. Terms Checkbox
   - "I agree to Terms of Service and Privacy Policy..."
9. Submit Button
   - Text: "Register as Agent"
   - Icon: Plus sign
   - Gradient red background
   - Hover effect: slides up slightly
10. Login Link
    - "Already have an account? Login here"

### Styling Details

#### Form Fields
- White background
- 1px gray border (#d1d5db)
- 0.5rem border radius
- Padding: 0.75rem 1rem
- Font: Inter, 1rem
- Focus: Purple border (#9333ea) + soft shadow
- On input: Shows icon on left (user, envelope, phone, etc.)

#### Buttons
- Full width (100%)
- Padding: 1rem
- Font weight: 600
- Red gradient background
- Box shadow with hover lift effect
- Hover: Slightly darker red, raised 2px
- Border radius: 0.5rem

#### Checkboxes
- 1.25rem square
- Purple accent color (#9333ea)
- Vertically aligned with text

#### Icons
- Font Awesome 6.4.0
- Colors: gray by default, colored in labels (blue, green, pink, etc.)
- Size: 1rem (16px)

### Responsive Design

**Mobile (< 1024px)**:
- Two-column layout becomes single column
- Left sidebar moves above form
- Same width for all elements
- Buttons remain full width

**Tablet (1024px)**:
- Two-column layout applies
- Left: 40% width
- Right: 60% width

**Desktop (1280px+)**:
- Full layout with padding
- Max width: 1280px (centered)
- Comfortable spacing

### Animations
- Smooth transitions on all interactive elements (0.3s)
- Button hover: translateY(-2px) with shadow increase
- Focus states: Ring animation on inputs

### User Experience Features
1. **Auto-fill DOB**: When user enters 12-digit IC number, date of birth auto-fills
2. **Cascading Dropdowns**: State updates based on country, city updates based on state
3. **Password Visibility**: Eye icon toggle to show/hide password
4. **Auto-hide Alerts**: Success/error messages disappear after 5 seconds
5. **Form Persistence**: Old form values persist on validation error
6. **Icons with Fields**: Visual cues for each input type

---

## JavaScript Features

1. **Location Dropdowns**:
   - Malaysia: 14 states + major cities
   - Singapore: Central, East, North, Northeast, West
   - Indonesia: Jakarta, Bali with cities
   - Thailand: Bangkok, Chiang Mai
   - Philippines: Metro Manila, Cebu

2. **IC Number to DOB Conversion**:
   - Takes 12-digit Malaysian IC
   - Extracts YYMMDD from first 6 digits
   - Converts to full date (YYYY-MM-DD)
   - Populates date of birth field

3. **Password Toggle**:
   - Shows/hides password with eye icon
   - Works on both password fields

4. **Form Validation**:
   - IC must be 12 digits
   - Password minimum 8 characters
   - Email format validation
   - Terms checkbox must be checked

---

## Current Issue (Before CSS Fix)
- No background color
- No form styling
- No borders
- No spacing
- Only plain text visible
- Form unusable

## After CSS Fix
- Professional, modern appearance
- Complete two-column layout
- Proper spacing and alignment
- All interactive elements styled
- Icons display correctly
- Responsive design works
- Form is fully functional and styled