{{-- resources/views/auth/register.blade.php --}}
@extends('layouts.app')

@section('title', 'Register - Proktiti Shop Networking System')

@push('head')
<style>
    :root {
        /* Modern Color Palette */
        --color-primary: #6366f1;
        --color-primary-dark: #4f46e5;
        --color-primary-light: #8b5cf6;
        --color-secondary: #64748b;
        --color-success: #10b981;
        --color-success-dark: #059669;
        --color-danger: #ef4444;
        --color-warning: #f59e0b;
        --color-background: #ffffff;
        --color-surface: #f8fafc;
        --color-surface-elevated: #ffffff;
        --color-border: #e2e8f0;
        --color-border-hover: #cbd5e1;
        --color-text: #1e293b;
        --color-text-light: #64748b;
        
        /* Gradient Colors */
        --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
        
        /* 3D Depth Shadows */
        --shadow-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-elevation-2: 
            0 4px 6px -1px rgb(0 0 0 / 0.1),
            0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-elevation-3: 
            0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
        --shadow-elevation-4: 
            0 20px 25px -5px rgb(0 0 0 / 0.1),
            0 8px 10px -6px rgb(0 0 0 / 0.1);
        --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
        --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);
        
        /* Glass Morphism */
        --glass-background: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(255, 255, 255, 0.2);
        --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        
        /* Typography */
        --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
        --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
        
        /* Spacing */
        --space-3xs: 0.125rem;  /* 2px */
        --space-2xs: 0.25rem;   /* 4px */
        --space-xs: 0.5rem;     /* 8px */
        --space-sm: 0.75rem;    /* 12px */
        --space-md: 1rem;       /* 16px */
        --space-lg: 1.5rem;     /* 24px */
        --space-xl: 2rem;       /* 32px */
        --space-2xl: 2.5rem;    /* 40px */
        --space-3xl: 3rem;      /* 48px */
        
        /* Transitions */
        --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --transition-fast: all 0.15s ease-out;
        
        /* Border Radius */
        --radius-sm: 0.375rem;  /* 6px */
        --radius-md: 0.75rem;   /* 12px */
        --radius-lg: 1rem;      /* 16px */
        --radius-xl: 1.5rem;    /* 24px */
        --radius-full: 9999px;
        
        /* Step Indicator */
        --step-size: 3.5rem;
        --step-gap: 1.25rem;
        --step-line-width: 4px;
        --progress-width: 0%;
    }

    /* Modern Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: var(--font-sans);
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
    }

    /* Landing Page Modern Design */
    .landing-card {
        background: var(--glass-background);
        backdrop-filter: blur(20px);
        border-radius: var(--radius-xl);
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
        overflow: hidden;
        transition: var(--transition-bounce);
    }

    .landing-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-elevation-4);
    }

    .info-panel {
        background: var(--gradient-primary);
        color: white;
        padding: var(--space-3xl);
        position: relative;
        overflow: hidden;
    }

    .info-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" opacity="0.1"><circle cx="20" cy="20" r="15" fill="white"/><circle cx="80" cy="80" r="20" fill="white"/></svg>');
        pointer-events: none;
    }

    .info-panel h2 {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: var(--space-lg);
        position: relative;
        z-index: 2;
    }

    .info-panel ul li {
        padding: var(--space-sm) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 2;
    }

    .info-panel ul li:last-child {
        border-bottom: none;
    }

    .info-panel ul li i {
        background: rgba(255, 255, 255, 0.2);
        padding: var(--space-xs);
        border-radius: var(--radius-full);
        margin-right: var(--space-sm);
    }

    .registration-panel {
        padding: var(--space-3xl);
        background: var(--color-surface-elevated);
    }

    .btn-join {
        background: var(--gradient-primary);
        color: white;
        padding: var(--space-lg) var(--space-3xl);
        border-radius: var(--radius-xl);
        font-size: 1.25rem;
        font-weight: 700;
        border: none;
        transition: var(--transition-bounce);
        box-shadow: var(--shadow-elevation-3);
        position: relative;
        overflow: hidden;
    }

    .btn-join::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.7s ease;
    }

    .btn-join:hover::before {
        left: 100%;
    }

    .btn-join:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: var(--shadow-elevation-4), var(--shadow-glow);
    }

    .sponsor-badge {
        background: rgba(99, 102, 241, 0.1);
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-full);
        padding: var(--space-sm) var(--space-lg);
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        font-weight: 600;
        color: var(--color-primary);
        margin: var(--space-lg) 0;
    }

    /* Step Indicator - Futuristic Design */
    .step-indicator {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: var(--space-xl);
        padding: var(--space-3xl) 0;
        background: var(--glass-background);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-xl);
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
    }

    .step-indicator::before {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(var(--step-size) / 2 + var(--step-gap));
        right: calc(var(--step-size) / 2 + var(--step-gap));
        height: var(--step-line-width);
        background: var(--color-border);
        border-radius: var(--radius-full);
        transform: translateY(-50%);
        z-index: 1;
        transition: var(--transition-smooth);
    }

    .step-indicator::after {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(var(--step-size) / 2 + var(--step-gap));
        width: var(--progress-width);
        height: var(--step-line-width);
        background: var(--gradient-primary);
        border-radius: var(--radius-full);
        transform: translateY(-50%);
        z-index: 2;
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .step-list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 var(--space-xl);
        margin: 0;
        list-style: none;
        z-index: 3;
    }

    .step-item {
        position: relative;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    .step-item.completed ~ .step-item .step-number {
        background: var(--color-surface);
        color: var(--color-text-light);
        border-color: var(--color-border);
    }

    /* Step Number - 3D Card Effect */
    .step-number {
        width: var(--step-size);
        height: var(--step-size);
        border-radius: var(--radius-xl);
        background: var(--color-surface-elevated);
        color: var(--color-text-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.25rem;
        border: 3px solid var(--color-border);
        position: relative;
        transition: var(--transition-bounce);
        box-shadow: var(--shadow-elevation-2);
        cursor: pointer;
        overflow: hidden;
    }

    .step-number::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: inherit;
    }

    .step-number::after {
        content: '';
        position: absolute;
        inset: -2px;
        background: var(--gradient-primary);
        border-radius: inherit;
        z-index: -1;
        opacity: 0;
        filter: blur(10px);
        transition: opacity 0.3s ease;
    }

    .step-item.active .step-number {
        transform: translateY(-8px) scale(1.1);
        border-color: transparent;
        box-shadow: var(--shadow-elevation-4), var(--shadow-glow);
        color: white;
    }

    .step-item.active .step-number::before {
        opacity: 1;
    }

    .step-item.active .step-number::after {
        opacity: 0.5;
    }

    .step-item.completed .step-number {
        background: var(--gradient-success);
        border-color: transparent;
        color: white;
        transform: translateY(-4px);
        box-shadow: var(--shadow-elevation-3);
    }

    .step-item.completed .step-number::after {
        background: var(--gradient-success);
    }

    /* Step Label */
    .step-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-text-light);
        text-align: center;
        transition: var(--transition-smooth);
        position: absolute;
        top: calc(100% + var(--space-sm));
        white-space: nowrap;
    }

    .step-item.active .step-label {
        color: var(--color-primary);
        font-weight: 700;
        transform: translateY(4px);
    }

    .step-item.completed .step-label {
        color: var(--color-success);
    }

    /* Step Progress Animation */
    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: var(--shadow-elevation-4), var(--shadow-glow);
        }
        50% {
            box-shadow: var(--shadow-elevation-4), 0 0 30px rgba(99, 102, 241, 0.4);
        }
    }

    .step-item.active .step-number {
        animation: pulse-glow 2s infinite;
    }

    /* Modal Step Styles */
    .modal-step {
        display: none;
        opacity: 0;
        transform: translateY(20px);
        transition: var(--transition-bounce);
    }

    .modal-step.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
        animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Sponsor Code Display - Modern Card */
    .sponsor-code-display {
        background: var(--gradient-primary);
        border-radius: var(--radius-lg);
        padding: var(--space-lg) var(--space-sm);
        margin-bottom: var(--space-xl);
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-elevation-3);
    }

    .sponsor-code-display::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" opacity="0.1"><path d="M0,0 L100,0 L100,100 Z" fill="white"/></svg>');
        pointer-events: none;
    }

    .sponsor-code-display strong {
        font-family: var(--font-mono);
        font-size: 1.5rem;
        letter-spacing: 2px;
        background: rgba(255, 255, 255, 0.2);
        padding: var(--space-xs) var(--space-md);
        border-radius: var(--radius-md);
        backdrop-filter: blur(4px);
    }

    /* Change Button - Modern Style */
    #changeSponsorBtn {
        background: rgba(255, 255, 255, 0.9);
        color: var(--color-primary);
        border: none;
        padding: var(--space-xs) var(--space-md);
        border-radius: var(--radius-full);
        font-weight: 600;
        font-size: 0.875rem;
        transition: var(--transition-smooth);
        backdrop-filter: blur(4px);
        box-shadow: var(--shadow-elevation-1);
    }

    #changeSponsorBtn:hover {
        background: white;
        transform: translateY(-2px);
        box-shadow: var(--shadow-elevation-2);
    }

    /* Form Inputs - Modern Design */
    .form-label {
        display: block;
        margin-bottom: var(--space-xs);
        font-weight: 600;
        color: var(--color-text);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-control {
        width: 100%;
        padding: var(--space-md) var(--space-lg);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-lg);
        font-size: 1rem;
        transition: var(--transition-smooth);
        background: var(--color-surface-elevated);
        box-shadow: var(--shadow-inner);
    }

    .form-control:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        transform: translateY(-2px);
    }

    .form-control::placeholder {
        color: var(--color-text-light);
        opacity: 0.6;
    }

    /* Buttons - Modern 3D Style */
    .btn {
        padding: var(--space-md) var(--space-xl);
        border: none;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition-bounce);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-elevation-2);
    }

    .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .btn:hover::before {
        left: 100%;
    }

    .btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-elevation-3);
    }

    .btn:active {
        transform: translateY(-1px);
        box-shadow: var(--shadow-elevation-1);
    }

    .btn-primary {
        background: var(--gradient-primary);
        color: white;
    }

    .btn-outline-secondary {
        background: transparent;
        color: var(--color-text);
        border: 2px solid var(--color-border);
    }

    .btn-outline-secondary:hover {
        background: var(--color-surface);
        border-color: var(--color-border-hover);
    }

    /* Form Group Animation */
    .mb-3 {
        position: relative;
        margin-bottom: var(--space-xl);
    }

    .mb-3::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--color-border);
        opacity: 0.5;
        border-radius: var(--radius-full);
    }

    /* Modal Body Enhancement */
    .modal-body {
        background: var(--color-surface);
        border-radius: var(--radius-xl);
        padding: var(--space-3xl);
        position: relative;
        overflow: hidden;
    }

    .modal-body::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    /* Steps Container */
    .steps-container {
        position: relative;
        min-height: 400px;
        padding: var(--space-xl);
        background: var(--color-surface-elevated);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-elevation-1);
    }

    /* Position Selection Cards */
    .position-card {
        border: 3px solid transparent;
        border-radius: var(--radius-lg);
        padding: var(--space-xl);
        text-align: center;
        cursor: pointer;
        transition: var(--transition-bounce);
        background: var(--color-surface);
        position: relative;
        overflow: hidden;
    }

    .position-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-danger);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .btn-check:checked + .position-card {
        border-color: var(--color-primary);
        transform: translateY(-8px);
        box-shadow: var(--shadow-elevation-3);
    }

    .btn-check:checked + .position-card::before {
        transform: scaleX(1);
    }

    .btn-check:checked + .position-card.left-card {
        border-color: var(--color-danger);
    }

    .btn-check:checked + .position-card.right-card {
        border-color: var(--color-primary);
    }

    /* Review Card */
    .review-card {
        background: var(--glass-background);
        backdrop-filter: blur(10px);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        padding: var(--space-xl);
        box-shadow: var(--glass-shadow);
    }

    .review-item {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .review-item:last-child {
        border-bottom: none;
    }

    /* Success Modal */
    .success-icon {
        width: 80px;
        height: 80px;
        background: var(--gradient-success);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--space-xl);
        animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes scaleIn {
        from {
            transform: scale(0);
        }
        to {
            transform: scale(1);
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .step-indicator {
            padding: var(--space-lg) 0;
        }
        
        .step-number {
            width: 3rem;
            height: 3rem;
            font-size: 1rem;
        }
        
        .step-label {
            font-size: 0.75rem;
        }
        
        .modal-body {
            padding: var(--space-xl);
        }
        
        .info-panel,
        .registration-panel {
            padding: var(--space-xl);
        }
    }

    @media (max-width: 480px) {
        .step-indicator::before,
        .step-indicator::after {
            left: 2rem;
            right: 2rem;
        }
        
        .step-list {
            padding: 0 var(--space-md);
        }
        
        .step-label {
            display: none;
        }
        
        .btn-join {
            padding: var(--space-md) var(--space-xl);
            font-size: 1rem;
        }
    }

    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        :root {
            --color-background: #0f172a;
            --color-surface: #1e293b;
            --color-surface-elevated: #334155;
            --color-border: #475569;
            --color-border-hover: #64748b;
            --color-text: #f1f5f9;
            --color-text-light: #94a3b8;
            --glass-background: rgba(30, 41, 59, 0.8);
            --glass-border: rgba(255, 255, 255, 0.1);
        }
        
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }
        
        .form-control {
            background: var(--color-surface);
            color: var(--color-text);
        }
        
        .sponsor-code-display strong {
            background: rgba(255, 255, 255, 0.1);
        }
    }

    /* Loading Animation */
    .loading-dots {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .loading-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-primary);
        animation: bounce 1.4s infinite ease-in-out both;
    }

    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }

    @keyframes bounce {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1); }
    }

    /* Custom Checkbox */
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .form-check-input:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Tooltip */
    .info-tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
    }

    .info-tooltip:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-text);
        color: white;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
        font-size: 0.875rem;
        white-space: nowrap;
        z-index: 900;
    }
</style>
@endpush

@section('content')
<div class="min-vh-100 d-flex align-items-center justify-content-center py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">
                <div class="landing-card">
                    <div class="row g-0">
                        <!-- Information Panel -->
                        <div class="col-md-5 info-panel">
                            <div class="w-100 h-100 d-flex flex-column justify-content-between">
                                <div>
                                    <h2 class="display-4 fw-bold mb-4">🚀 Join The Network</h2>
                                    
                                    <p class="lead mb-4 opacity-90">
                                        Build your financial future with our proven binary networking system.
                                    </p>
                                    <ul class="list-unstyled">
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="fas fa-bolt"></i>
                                            <span>Instant earning on every purchase</span>
                                        </li>
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="fas fa-chart-line"></i>
                                            <span>Weekly sponsor & matching bonuses</span>
                                        </li>
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="fas fa-users"></i>
                                            <span>Grow your network exponentially</span>
                                        </li>
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="fas fa-trophy"></i>
                                            <span>Achieve elite ranks & unlimited income</span>
                                        </li>
                                        <li class="mb-3 d-flex align-items-center">
                                            <i class="fas fa-shield-alt"></i>
                                            <span>Secure & transparent payment system</span>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div class="mt-4">
                                    <a href="{{ route('login') }}" class="btn btn-outline-light btn-lg fw-bold w-100 py-3">
                                        <i class="fas fa-sign-in-alt me-2"></i> Already a Member?
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Registration Panel -->
                        <div class="col-md-7 registration-panel">
                            <div class="text-center w-100">
                                <div class="mb-4">
                                    <h3 class="text-primary fw-bold mb-3">Start Your Journey Today</h3>
                                    <p class="text-muted">Join thousands of successful networkers</p>
                                </div>
                                
                                <!-- Sponsor Info if coming from link -->
                                @if(request('sponsor') || request('ref'))
                                <div class="sponsor-badge">
                                    <i class="fas fa-user-tie"></i>
                                    <span>Joining under: <strong>{{ request('sponsor') ?? request('ref') }}</strong></span>
                                </div>
                                @endif
                                
                                <div class="mb-5">
                                    <button type="button" class="btn-join" 
                                            data-bs-toggle="modal" data-bs-target="#registrationModal">
                                        <i class="fas fa-rocket me-2"></i> Begin Registration
                                    </button>
                                </div>
                                
                                <div class="row text-start">
                                    <div class="col-md-6 mb-3">
                                        <div class="d-flex align-items-center">
                                            <div class="bg-primary bg-opacity-10 p-2 rounded-circle me-3">
                                                <i class="fas fa-clock text-primary"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted">Duration</small>
                                                <p class="mb-0 fw-semibold">3-5 Minutes</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="d-flex align-items-center">
                                            <div class="bg-success bg-opacity-10 p-2 rounded-circle me-3">
                                                <i class="fas fa-shield-alt text-success"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted">Security</small>
                                                <p class="mb-0 fw-semibold">SSL Encrypted</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-4">
                                    <p class="text-muted small">
                                        <i class="fas fa-lock me-1"></i>
                                        Your information is protected and secure
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Registration Modal -->
<div class="modal fade" id="registrationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header border-0 pb-0">
                <div class="w-100">
                    <h5 class="modal-title text-primary fw-bold fs-3 mb-2">
                        <i class="fas fa-user-plus me-2"></i> Complete Your Registration
                    </h5>
                    <p class="text-muted mb-0">Follow these 5 simple steps to join our network</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-4 p-lg-5">
                
                <!-- Modern Step Indicators -->
                <div class="step-indicator">
                    <ol class="step-list" aria-label="Registration steps">
                        <li class="step-item active" data-step="1">
                            <div class="step-number">1</div>
                            <span class="step-label">Contact Info </span>
                        </li>
                        <li class="step-item" data-step="2">
                            <div class="step-number">2</div>
                            <span class="step-label">Personal Info</span>
                        </li>
                        <li class="step-item" data-step="3">
                            <div class="step-number">3</div>
                            <span class="step-label">Position</span>
                        </li>
                        <li class="step-item" data-step="4">
                            <div class="step-number">4</div>
                            <span class="step-label">Security</span>
                        </li>
                        <li class="step-item" data-step="5">
                            <div class="step-number">5</div>
                            <span class="step-label">Complete</span>
                        </li>
                    </ol>
                </div>

                <!-- Steps Container -->
                <div class="steps-container">
                    <!-- Step 1: Sponsor & Contact -->
                    <div id="step1" class="modal-step active">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h6 class="fw-bold mb-0 text-primary">
                                <i class="fas fa-user-tag me-2"></i>
                                Step 1: Sponsor & Contact
                            </h6>
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill">
                                Required
                            </span>
                        </div>
                        
                        <!-- Modern Sponsor Card -->
                        <div class="sponsor-code-display ">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="mb-1 opacity-75">Your Sponsor Code</p>
                                    <div class="d-flex align-items-center gap-1">
                                        <strong id="modalSponsorCode">{{ request('sponsor') ?? request('ref') ?? 'O58ZQI' }}</strong>
                                        <br/>
                                         <button type="button" class="btn btn-light btn-sm fw-semibold px-3 py-2" 
                                            id="changeSponsorBtn" title="Change sponsor code">
                                             <i class="fas fa-rotate me-1"></i> Change
                                        </button>

                                    </div>
                                </div>
                               
                            </div>
                        </div>
                        
                        <div id="sponsorChangeSection" class="d-none mb-3">
                            <label class="form-label">Enter New Sponsor Code</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="newSponsorCode" 
                                       placeholder="Enter sponsor code" autocomplete="off">
                                <button class="btn btn-primary" type="button" id="confirmSponsorBtn"
                                        title="Confirm new sponsor code">
                                    <i class="fas fa-check me-1"></i> Confirm
                                </button>
                            </div>
                        </div>
                        
                        <form id="step1Form">
                            <div class="mb-4">
                                <label class="form-label d-flex align-items-center justify-content-between" for="step1Phone">
                                    <span><i class="fas fa-mobile-alt me-1"></i> Phone Number</span>
                                    <small class="text-muted">Bangladeshi Format</small>
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-end-0">
                                        <i class="fas fa-phone text-primary"></i>
                                    </span>
                                    <input type="tel" name="phone" id="step1Phone" class="form-control border-start-0 ps-0" 
                                           pattern="01[3-9][0-9]{8}" required placeholder="01XXXXXXXXX"
                                           autocomplete="tel" aria-required="true">
                                </div>
                                <div class="form-text d-flex align-items-center mt-2">
                                    <i class="fas fa-info-circle me-1 text-primary"></i>
                                    Must be a valid Bangladesh mobile number starting with 01
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label" for="step1Email">
                                    <i class="fas fa-envelope me-1"></i> Email Address
                                </label>
                                <div class="input-group input-group-lg">
                                   
                                    <input type="email" name="email" id="step1Email" class="form-control border-start-0 ps-0" 
                                           required placeholder="you@example.com" autocomplete="email" aria-required="true">
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top gap-2">
                                <button type="button" class="btn btn-outline-secondary px-4 py-3 rounded-pill" 
                                        data-bs-dismiss="modal" title="Cancel registration">
                                    <i class="fas fa-times me-2 "></i> Cancel
                                </button>
                                <button type="button" class="btn btn-primary px-5 py-3 rounded-pill shadow-sm" 
                                        id="nextToStep2" title="Go to next step">
                                    Continue <i class="fas fa-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Step 2: Personal Information -->
                    <div id="step2" class="modal-step">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h6 class="fw-bold mb-0 text-primary">
                                <i class="fas fa-user-circle me-2"></i>
                                Step 2: Personal Information
                            </h6>
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill">
                                Required
                            </span>
                        </div>
                        
                        <form id="step2Form">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label class="form-label" for="step2Name">
                                        <i class="fas fa-user me-1"></i> Full Name
                                    </label>
                                    <div class="input-group input-group-lg">
                                        
                                        <input type="text" name="name" id="step2Name" class="form-control border-start-0 ps-0" 
                                               required autocomplete="name" aria-required="true" placeholder="John Doe">
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label class="form-label" for="step2Dob">
                                        <i class="fas fa-birthday-cake me-1"></i> Date of Birth
                                    </label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-calendar text-primary"></i>
                                        </span>
                                        <input type="date" name="dob" id="step2Dob" class="form-control border-start-0 ps-0"
                                               autocomplete="bday">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label" for="step2Address">
                                    <i class="fas fa-home me-1"></i> Present Address
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-end-0 align-items-start pt-3">
                                        <i class="fas fa-map-marker-alt text-primary"></i>
                                    </span>
                                    <textarea name="address" id="step2Address" class="form-control border-start-0 ps-0" 
                                              rows="2" required autocomplete="street-address" aria-required="true"
                                              placeholder="Your complete address"></textarea>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label" for="step2Nid">
                                    <i class="fas fa-id-card-alt me-1"></i> NID Number
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-end-0">
                                        <i class="fas fa-fingerprint text-primary"></i>
                                    </span>
                                    <input type="text" name="nid_number" id="step2Nid" class="form-control border-start-0 ps-0" 
                                           pattern="[0-9]{10,17}" required placeholder="10-17 digits"
                                           autocomplete="off" aria-required="true">
                                </div>
                                <div class="form-text d-flex align-items-center mt-2">
                                    <i class="fas fa-lock me-1 text-primary"></i>
                                    Your NID information is securely encrypted
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                                <button type="button" class="btn btn-outline-secondary px-4 py-3 rounded-pill" id="backToStep1"
                                        title="Go back to previous step">
                                    <i class="fas fa-arrow-left me-2"></i> Back
                                </button>
                                <button type="button" class="btn btn-primary px-5 py-3 rounded-pill shadow-sm" id="nextToStep3"
                                        title="Go to next step">
                                    Continue <i class="fas fa-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Step 3: Choose Position -->
                    <div id="step3" class="modal-step">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h6 class="fw-bold mb-0 text-primary">
                                <i class="fas fa-sitemap me-2"></i>
                                Step 3: Choose Your Position
                            </h6>
                            <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-2 rounded-pill">
                                Important
                            </span>
                        </div>
                        
                        <div class="alert alert-info mb-4 border-0 bg-primary bg-opacity-10">
                            <div class="d-flex">
                                <i class="fas fa-info-circle me-3 mt-1 text-primary"></i>
                                <div>
                                    <h6 class="fw-bold text-primary mb-2">Network Placement</h6>
                                    <p class="mb-0">Select where you want to be placed in your sponsor's binary tree. This choice cannot be changed later.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row g-4">
                            <div class="col-md-6">
                                <input type="radio" name="position" value="left" id="positionLeft" class="btn-check" required
                                       aria-required="true">
                                <label class="position-card left-card" for="positionLeft">
                                    <div class="display-4 text-danger mb-3">
                                        <i class="fas fa-arrow-left"></i>
                                    </div>
                                    <h5 class="fw-bold mb-2">LEFT LEG</h5>
                                    <p class="text-muted mb-3">Build your network on the left side</p>
                                    <div class="badge bg-danger bg-opacity-10 text-danger px-3 py-2">
                                        <i class="fas fa-users me-1"></i> Network Size: Variable
                                    </div>
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" name="position" value="right" id="positionRight" class="btn-check" required
                                       aria-required="true">
                                <label class="position-card right-card" for="positionRight">
                                    <div class="display-4 text-primary mb-3">
                                        <i class="fas fa-arrow-right"></i>
                                    </div>
                                    <h5 class="fw-bold mb-2">RIGHT LEG</h5>
                                    <p class="text-muted mb-3">Build your network on the right side</p>
                                    <div class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">
                                        <i class="fas fa-users me-1"></i> Network Size: Variable
                                    </div>
                                </label>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <div class="alert alert-warning border-0 bg-warning bg-opacity-10">
                                <i class="fas fa-exclamation-triangle me-2 text-warning"></i>
                                <small>Please consult with your sponsor before selecting your position.</small>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                            <button type="button" class="btn btn-outline-secondary px-4 py-3 rounded-pill" id="backToStep2"
                                    title="Go back to previous step">
                                <i class="fas fa-arrow-left me-2"></i> Back
                            </button>
                            <button type="button" class="btn btn-primary px-5 py-3 rounded-pill shadow-sm" id="nextToStep4"
                                    title="Go to next step">
                                Continue <i class="fas fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Step 4: Password -->
                    <div id="step4" class="modal-step">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h6 class="fw-bold mb-0 text-primary">
                                <i class="fas fa-lock me-2"></i>
                                Step 4: Security & Password
                            </h6>
                            <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill">
                                Security
                            </span>
                        </div>
                        
                        <form id="step4Form">
                            <div class="mb-4">
                                <label class="form-label" for="step4Password">
                                    <i class="fas fa-key me-1"></i> Create Password
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-end-0">
                                        <i class="fas fa-lock text-primary"></i>
                                    </span>
                                    <input type="password" name="password" id="step4Password" class="form-control border-start-0 ps-0" 
                                           required minlength="8" autocomplete="new-password" aria-required="true"
                                           placeholder="Create a strong password">
                                    <button class="btn btn-outline-secondary border-start-0" type="button" id="toggleStep4Password"
                                            title="Show or hide password">
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                                <div class="form-text d-flex align-items-center mt-2">
                                    <i class="fas fa-shield-alt me-1 text-primary"></i>
                                    Minimum 8 characters with letters, numbers, and symbols
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label" for="step4PasswordConfirm">
                                    <i class="fas fa-key me-1"></i> Confirm Password
                                </label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-end-0">
                                        <i class="fas fa-lock text-primary"></i>
                                    </span>
                                    <input type="password" name="password_confirmation" id="step4PasswordConfirm" 
                                           class="form-control border-start-0 ps-0" required autocomplete="new-password"
                                           aria-required="true" placeholder="Re-enter your password">
                                </div>
                            </div>
                            
                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" id="step4Terms" required
                                       aria-required="true">
                                <label class="form-check-label" for="step4Terms">
                                    I agree to the <a href="#" class="text-primary fw-semibold" title="Read terms and conditions">Terms & Conditions</a> and 
                                    <a href="#" class="text-primary fw-semibold" title="Read privacy policy">Privacy Policy</a>
                                </label>
                            </div>
                            
                            <div class="alert alert-info border-0 bg-primary bg-opacity-10 mb-4">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-check-circle me-3 text-primary"></i>
                                    <div>
                                        <small>By continuing, you acknowledge that you have read and agree to our policies.</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                                <button type="button" class="btn btn-outline-secondary px-4 py-3 rounded-pill" id="backToStep3"
                                        title="Go back to previous step">
                                    <i class="fas fa-arrow-left me-2"></i> Back
                                </button>
                                <button type="button" class="btn btn-primary px-5 py-3 rounded-pill shadow-sm" id="nextToStep5"
                                        title="Go to review step">
                                    Review <i class="fas fa-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Step 5: Complete -->
                    <div id="step5" class="modal-step">
                        <div class="text-center mb-4">
                            <div class="success-icon">
                                <i class="fas fa-clipboard-check fa-2x text-white"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Review Your Information</h5>
                            <p class="text-muted">Please verify all details before submission</p>
                        </div>
                        
                        <div class="review-card mb-4">
                            <div class="review-item">
                                <span class="text-muted">Sponsor Code:</span>
                                <span id="reviewSponsorCode" class="fw-semibold"></span>
                            </div>
                            <div class="review-item">
                                <span class="text-muted">Phone Number:</span>
                                <span id="reviewPhone" class="fw-semibold"></span>
                            </div>
                            <div class="review-item">
                                <span class="text-muted">Email Address:</span>
                                <span id="reviewEmail" class="fw-semibold"></span>
                            </div>
                            <div class="review-item">
                                <span class="text-muted">Full Name:</span>
                                <span id="reviewName" class="fw-semibold"></span>
                            </div>
                            <div class="review-item">
                                <span class="text-muted">Position:</span>
                                <span id="reviewPosition" class="fw-semibold"></span>
                            </div>
                        </div>
                        
                        <div class="alert alert-success border-0 bg-success bg-opacity-10 mb-4">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-check-circle me-3 text-success"></i>
                                <div>
                                    <p class="mb-0"><strong>Ready to join!</strong> All information looks good.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                            <button type="button" class="btn btn-outline-secondary px-4 py-3 rounded-pill" id="backToStep4"
                                    title="Go back to previous step">
                                <i class="fas fa-arrow-left me-2"></i> Back
                            </button>
                            <button type="button" class="btn btn-success px-5 py-3 rounded-pill shadow-sm" id="submitRegistration"
                                    title="Submit registration">
                                <i class="fas fa-paper-plane me-2"></i> Complete Registration
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Hidden Final Form -->
                <form id="finalRegistrationForm" method="POST" action="{{ url('/register') }}" class="d-none">
                    @csrf
                    <input type="hidden" name="sponsor_code" id="finalSponsorCode">
                    <input type="hidden" name="phone" id="finalPhone">
                    <input type="hidden" name="email" id="finalEmail">
                    <input type="hidden" name="name" id="finalName">
                    <input type="hidden" name="address" id="finalAddress">
                    <input type="hidden" name="dob" id="finalDob">
                    <input type="hidden" name="nid_number" id="finalNidNumber">
                    <input type="hidden" name="position" id="finalPosition">
                    <input type="hidden" name="password" id="finalPassword">
                    <input type="hidden" name="password_confirmation" id="finalPasswordConfirm">
                </form>

            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content border-0">
            <div class="modal-body text-center p-5">
                <div class="success-icon mb-4">
                    <i class="fas fa-check fa-2x text-white"></i>
                </div>
                <h5 class="fw-bold mb-3">Registration Successful!</h5>
                <p class="text-muted mb-4">Welcome to our network. You will be redirected to your dashboard.</p>
                <div class="loading-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentStep = 1;
    const registrationData = {};
    
    // Get sponsor code from URL or set empty
    const urlParams = new URLSearchParams(window.location.search);
    const sponsorFromUrl = urlParams.get('sponsor') || urlParams.get('ref') || 'O58ZQI';
    
    // Initialize sponsor code
    if (sponsorFromUrl) {
        registrationData.sponsor_code = sponsorFromUrl;
        document.getElementById('modalSponsorCode').textContent = sponsorFromUrl;
    }
    
    // Step navigation function with progress update
    function showStep(step) {
        // Update progress line
        const progress = ((step - 1) / 4) * 100;
        document.documentElement.style.setProperty('--progress-width', `${progress}%`);
        
        // Hide all steps
        document.querySelectorAll('.modal-step').forEach(el => {
            el.classList.remove('active');
            el.style.display = 'none';
            el.style.opacity = '0';
            el.setAttribute('hidden', 'hidden');
        });
        
        // Show current step with animation
        const currentStepEl = document.getElementById(`step${step}`);
        if (currentStepEl) {
            currentStepEl.removeAttribute('hidden');
            currentStepEl.style.display = 'block';
            
            // Force reflow
            currentStepEl.offsetHeight;
            
            // Fade in
            setTimeout(() => {
                currentStepEl.style.opacity = '1';
                currentStepEl.classList.add('active');
            }, 10);
        }
        
        // Update step indicators
        document.querySelectorAll('.step-item').forEach(el => {
            const stepNumber = parseInt(el.getAttribute('data-step'));
            el.classList.remove('active', 'completed');
            
            if (stepNumber < step) {
                el.classList.add('completed');
            } else if (stepNumber === step) {
                el.classList.add('active');
            }
        });
        
        currentStep = step;
        
        // Focus on first input in current step
        setTimeout(() => {
            const firstInput = currentStepEl.querySelector('input, button, textarea, select');
            if (firstInput) {
                firstInput.focus();
            }
        }, 300);
    }
    
    // Initialize step 1
    showStep(1);
    
    // Show error message
    function showError(message) {
        // Create a modern toast notification
        const toast = document.createElement('div');
        toast.className = 'position-fixed top-0 end-0 p-3';
        toast.style.zIndex = '9999';
        toast.innerHTML = `
            <div class="toast show" role="alert">
                <div class="toast-header bg-danger text-white">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong class="me-auto">Error</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    ${message}
                </div>
            </div>
        `;
        document.body.appendChild(toast);
        
        // Remove toast after 5 seconds
        setTimeout(() => {
            toast.remove();
        }, 5000);
    }
    
    // Validate Step 1
    function validateStep1() {
        const phone = document.getElementById('step1Phone').value.trim();
        const email = document.getElementById('step1Email').value.trim();
        const sponsorCode = registrationData.sponsor_code || '';
        
        if (!sponsorCode) {
            showError('Please enter a sponsor code');
            return false;
        }
        
        if (!phone || !/^01[3-9][0-9]{8}$/.test(phone)) {
            showError('Please enter a valid Bangladesh mobile number (01XXXXXXXXX)');
            return false;
        }
        
        if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showError('Please enter a valid email address');
            return false;
        }
        
        // Save data
        registrationData.phone = phone;
        registrationData.email = email;
        
        return true;
    }
    
    // Validate Step 2
    function validateStep2() {
        const name = document.getElementById('step2Name').value.trim();
        const address = document.getElementById('step2Address').value.trim();
        const nid = document.getElementById('step2Nid').value.trim();
        
        if (!name) {
            showError('Please enter your full name');
            return false;
        }
        
        if (!address) {
            showError('Please enter your address');
            return false;
        }
        
        if (!nid || !/^[0-9]{10,17}$/.test(nid)) {
            showError('Please enter a valid NID number (10-17 digits)');
            return false;
        }
        
        // Save data
        registrationData.name = name;
        registrationData.address = address;
        registrationData.nid_number = nid;
        registrationData.dob = document.getElementById('step2Dob').value;
        
        return true;
    }
    
    // Validate Step 3
    function validateStep3() {
        const position = document.querySelector('input[name="position"]:checked');
        
        if (!position) {
            showError('Please select a position (Left or Right)');
            return false;
        }
        
        registrationData.position = position.value;
        return true;
    }
    
    // Validate Step 4
    function validateStep4() {
        const password = document.getElementById('step4Password').value;
        const confirmPassword = document.getElementById('step4PasswordConfirm').value;
        const terms = document.getElementById('step4Terms').checked;
        
        if (password.length < 8) {
            showError('Password must be at least 8 characters');
            return false;
        }
        
        // Check password strength
        const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/;
        if (!strongRegex.test(password)) {
            showError('Password must contain uppercase, lowercase, number, and special character');
            return false;
        }
        
        if (password !== confirmPassword) {
            showError('Passwords do not match');
            return false;
        }
        
        if (!terms) {
            showError('Please agree to the Terms & Conditions');
            return false;
        }
        
        registrationData.password = password;
        registrationData.password_confirmation = confirmPassword;
        
        return true;
    }
    
    // Populate review step
    function populateReviewStep() {
        document.getElementById('reviewSponsorCode').textContent = registrationData.sponsor_code || 'Not set';
        document.getElementById('reviewPhone').textContent = registrationData.phone || 'Not set';
        document.getElementById('reviewEmail').textContent = registrationData.email || 'Not set';
        document.getElementById('reviewName').textContent = registrationData.name || 'Not set';
        document.getElementById('reviewPosition').textContent = 
            registrationData.position === 'left' ? 'Left Leg' : 
            registrationData.position === 'right' ? 'Right Leg' : 'Not selected';
    }
    
    // ========== EVENT LISTENERS ==========
    
    // Step 1: Next button
    document.getElementById('nextToStep2').addEventListener('click', function() {
        if (validateStep1()) {
            showStep(2);
        }
    });
    
    // Step 2: Back button
    document.getElementById('backToStep1').addEventListener('click', function() {
        showStep(1);
    });
    
    // Step 2: Next button
    document.getElementById('nextToStep3').addEventListener('click', function() {
        if (validateStep2()) {
            showStep(3);
        }
    });
    
    // Step 3: Back button
    document.getElementById('backToStep2').addEventListener('click', function() {
        showStep(2);
    });
    
    // Step 3: Next button
    document.getElementById('nextToStep4').addEventListener('click', function() {
        if (validateStep3()) {
            showStep(4);
        }
    });
    
    // Step 4: Back button
    document.getElementById('backToStep3').addEventListener('click', function() {
        showStep(3);
    });
    
    // Step 4: Next button
    document.getElementById('nextToStep5').addEventListener('click', function() {
        if (validateStep4()) {
            populateReviewStep();
            showStep(5);
        }
    });
    
    // Step 5: Back button
    document.getElementById('backToStep4').addEventListener('click', function() {
        showStep(4);
    });
    
    // Step 5: Submit registration
    document.getElementById('submitRegistration').addEventListener('click', function() {
        // Add loading state
        const btn = this;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Processing...';
        btn.disabled = true;
        
        // Populate final form
        document.getElementById('finalSponsorCode').value = registrationData.sponsor_code || '';
        document.getElementById('finalPhone').value = registrationData.phone || '';
        document.getElementById('finalEmail').value = registrationData.email || '';
        document.getElementById('finalName').value = registrationData.name || '';
        document.getElementById('finalAddress').value = registrationData.address || '';
        document.getElementById('finalDob').value = registrationData.dob || '';
        document.getElementById('finalNidNumber').value = registrationData.nid_number || '';
        document.getElementById('finalPosition').value = registrationData.position || '';
        document.getElementById('finalPassword').value = registrationData.password || '';
        document.getElementById('finalPasswordConfirm').value = registrationData.password_confirmation || '';
        
        // Show success modal after delay
        setTimeout(() => {
            const registrationModal = bootstrap.Modal.getInstance(document.getElementById('registrationModal'));
            if (registrationModal) {
                registrationModal.hide();
            }
            
            const successModal = new bootstrap.Modal(document.getElementById('successModal'));
            successModal.show();
            
            // Reset button
            btn.innerHTML = originalText;
            btn.disabled = false;
            
            // Submit form after delay
            setTimeout(() => {
                document.getElementById('finalRegistrationForm').submit();
            }, 3000);
        }, 1500);
    });
    
    // Change sponsor button
    document.getElementById('changeSponsorBtn').addEventListener('click', function() {
        document.getElementById('sponsorChangeSection').classList.remove('d-none');
        document.getElementById('newSponsorCode').focus();
    });
    
    // Confirm new sponsor
    document.getElementById('confirmSponsorBtn').addEventListener('click', function() {
        const newCode = document.getElementById('newSponsorCode').value.trim();
        if (newCode) {
            registrationData.sponsor_code = newCode;
            document.getElementById('modalSponsorCode').textContent = newCode;
            document.getElementById('sponsorChangeSection').classList.add('d-none');
            document.getElementById('step1Phone').focus();
        }
    });
    
    // Toggle password visibility
    document.getElementById('toggleStep4Password').addEventListener('click', function() {
        const passwordInput = document.getElementById('step4Password');
        const icon = this.querySelector('i');
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    });
    
    // Reset modal when closed
    document.getElementById('registrationModal').addEventListener('hidden.bs.modal', function() {
        showStep(1);
        
        // Reset progress line
        document.documentElement.style.setProperty('--progress-width', '0%');
        
        // Reset forms
        document.getElementById('step1Form').reset();
        document.getElementById('step2Form').reset();
        document.getElementById('step4Form').reset();
        document.querySelectorAll('input[name="position"]').forEach(radio => {
            radio.checked = false;
        });
        
        // Reset registration data except sponsor code
        const sponsorCode = registrationData.sponsor_code;
        Object.keys(registrationData).forEach(key => {
            if (key !== 'sponsor_code') {
                delete registrationData[key];
            }
        });
        
        // Re-apply sponsor code from URL
        if (sponsorFromUrl) {
            registrationData.sponsor_code = sponsorFromUrl;
            document.getElementById('modalSponsorCode').textContent = sponsorFromUrl;
        }
        
        // Hide sponsor change section
        document.getElementById('sponsorChangeSection').classList.add('d-none');
    });
    
    // Add input validation feedback
    document.querySelectorAll('.form-control').forEach(input => {
        input.addEventListener('blur', function() {
            if (this.checkValidity()) {
                this.classList.add('is-valid');
                this.classList.remove('is-invalid');
            } else {
                this.classList.add('is-invalid');
                this.classList.remove('is-valid');
            }
        });
    });
    
    // Add keyboard navigation
    document.addEventListener('keydown', function(e) {
        const modal = document.getElementById('registrationModal');
        if (!modal.classList.contains('show')) return;
        
        // Enter key to navigate forward (except in textarea)
        if (e.key === 'Enter' && e.target.type !== 'textarea') {
            e.preventDefault();
            
            if (currentStep === 1) document.getElementById('nextToStep2').click();
            else if (currentStep === 2) document.getElementById('nextToStep3').click();
            else if (currentStep === 3) document.getElementById('nextToStep4').click();
            else if (currentStep === 4) document.getElementById('nextToStep5').click();
            else if (currentStep === 5) document.getElementById('submitRegistration').click();
        }
        
        // Escape key to go back
        if (e.key === 'Escape' && currentStep > 1) {
            document.getElementById(`backToStep${currentStep - 1}`).click();
        }
    });
});
</script>
@endpush
@endsection