<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register - AKRSera MLM</title>
    <style>
        body { margin:0; min-height:100vh; display:grid; place-items:center; font-family:"Segoe UI",Tahoma,sans-serif; background: linear-gradient(120deg,#eff6ff,#f0fdf4); }
        .card { width:min(620px,96vw); background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:20px; box-shadow:0 14px 36px rgba(15,23,42,.12); }
        .grid { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
        label { display:block; font-size:13px; margin:8px 0 5px; font-weight:600; }
        input, select { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:10px; }
        button { margin-top:14px; border:0; border-radius:10px; padding:11px; background:#16A34A; color:#fff; font-weight:700; cursor:pointer; width:100%; }
        .error { font-size:12px; color:#b91c1c; margin-top:3px; }
        @media (max-width: 700px){ .grid { grid-template-columns:1fr; } }
    </style>
</head>
<body>
    <div class="card">
        <h1 style="margin:0;">Distributor Registration</h1>
        <p style="color:#64748b;">Create your account and start your wellness business.</p>
        <form method="post" action="{{ route('register.user.submit') }}">
            @csrf
            <div class="grid">
                <div>
                    <label>Name</label>
                    <input name="name" value="{{ old('name') }}" required>
                    @error('name')<div class="error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label>Mobile</label>
                    <input name="mobile" value="{{ old('mobile') }}" required>
                    @error('mobile')<div class="error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label>Email (optional)</label>
                    <input name="email" value="{{ old('email') }}">
                    @error('email')<div class="error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label>Sponsor Referral Code</label>
                    <input name="sponsor_code" value="{{ old('sponsor_code', request('sponsor')) }}" required>
                    @error('sponsor_code')<div class="error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label>Placement Leg</label>
                    @php $selectedLeg = old('placement_leg', request('leg')); @endphp
                    <select name="placement_leg" required>
                        <option value="left" {{ $selectedLeg === 'left' ? 'selected' : '' }}>Left</option>
                        <option value="right" {{ $selectedLeg === 'right' ? 'selected' : '' }}>Right</option>
                        <option value="auto" {{ $selectedLeg === 'auto' ? 'selected' : '' }}>Auto (Weak Leg)</option>
                    </select>
                </div>
                <div>
                    <label>Password</label>
                    <input type="password" name="password" required>
                    @error('password')<div class="error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label>Confirm Password</label>
                    <input type="password" name="password_confirmation" required>
                </div>
            </div>
            <button type="submit">Create Account</button>
        </form>
    </div>
</body>
</html>
