@extends('layouts.auth')

@section('title', 'Join ALGA ARENA')

@section('content')
{{-- Logo --}}
<a href="{{ route('home') }}" class="auth-logo">
    <div class="auth-logo__mark">
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
            <path d="M12 2L5 10H9L7 18H11L12 14L13 18H17L15 10H19L12 2Z" fill="#00D4FF"/>
        </svg>
    </div>
    <span class="auth-logo__name">ALGA ARENA</span>
</a>

{{-- Heading --}}
<h1 class="auth-heading">Create Account</h1>
<p class="auth-subheading">Join 18,000+ competitors on ALGA ARENA</p>

@if ($errors->any())
    <div class="auth-alert auth-alert--error">
        @foreach ($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
    </div>
@endif

{{-- Form --}}
<form action="{{ route('register') }}" method="POST">
    @csrf

    <div class="auth-field">
        <label class="auth-label" for="display_name">Display Name</label>
        <input type="text" id="display_name" name="display_name" value="{{ old('display_name') }}" class="auth-input @error('display_name') is-invalid @enderror" placeholder="e.g. Night Falcon" autocomplete="name" required>
        @error('display_name')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="username">Username</label>
        <input type="text" id="username" name="username" value="{{ old('username') }}" class="auth-input @error('username') is-invalid @enderror" placeholder="e.g. NightFalcon" autocomplete="username" required>
        @error('username')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="email">Email Address</label>
        <input type="email" id="email" name="email" value="{{ old('email') }}" class="auth-input @error('email') is-invalid @enderror" placeholder="player@algaarena.gg" autocomplete="email" required>
        @error('email')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="password">Password</label>
        <input type="password" id="password" name="password" class="auth-input @error('password') is-invalid @enderror" placeholder="Min. 8 characters" autocomplete="new-password" required>
        @error('password')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="password_confirmation">Confirm Password</label>
        <input type="password" id="password_confirmation" name="password_confirmation" class="auth-input" placeholder="Repeat password" autocomplete="new-password" required>
    </div>

    <div class="auth-field">
        <label class="auth-label" for="country_code">Country</label>
        <select id="country_code" name="country_code" class="auth-input @error('country_code') is-invalid @enderror" required>
            <option value="" disabled @selected(! old('country_code'))>Select country</option>
            <option value="EG" @selected(old('country_code') === 'EG')>Egypt</option>
            <option value="SA" @selected(old('country_code') === 'SA')>Saudi Arabia</option>
            <option value="AE" @selected(old('country_code') === 'AE')>United Arab Emirates</option>
            <option value="US" @selected(old('country_code') === 'US')>United States</option>
            <option value="GB" @selected(old('country_code') === 'GB')>United Kingdom</option>
        </select>
        @error('country_code')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="phone">Phone <span style="opacity:0.6;font-weight:400;text-transform:none;">(optional)</span></label>
        <div style="display:grid;grid-template-columns:88px 1fr;gap:8px;">
            <select id="phone_country_code" name="phone_country_code" class="auth-input @error('phone_country_code') is-invalid @enderror">
                <option value="">Code</option>
                <option value="20" @selected(old('phone_country_code') === '20')>+20</option>
                <option value="966" @selected(old('phone_country_code') === '966')>+966</option>
                <option value="971" @selected(old('phone_country_code') === '971')>+971</option>
                <option value="1" @selected(old('phone_country_code') === '1')>+1</option>
                <option value="44" @selected(old('phone_country_code') === '44')>+44</option>
            </select>
            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" class="auth-input @error('phone') is-invalid @enderror" placeholder="Local number" autocomplete="tel">
        </div>
        @error('phone_country_code')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
        @error('phone')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="preferred_locale">Language</label>
        <select id="preferred_locale" name="preferred_locale" class="auth-input @error('preferred_locale') is-invalid @enderror" required>
            @foreach (config('esports.supported_locales', ['en', 'ar']) as $locale)
                <option value="{{ $locale }}" @selected(old('preferred_locale', config('esports.default_locale', 'en')) === $locale)>
                    {{ strtoupper($locale) }}
                </option>
            @endforeach
        </select>
        @error('preferred_locale')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <input type="hidden" name="timezone" value="{{ old('timezone', config('app.timezone', 'UTC')) }}">

    <div class="auth-check-row" style="margin-bottom:4px;">
        <input type="checkbox" id="terms" name="terms" value="1" @checked(old('terms')) required>
        <label for="terms">I agree to the <a href="#" style="color:#00d4ff;">Terms of Service</a> &amp; <a href="#" style="color:#00d4ff;">Privacy Policy</a></label>
    </div>
    @error('terms')
        <span class="auth-field-error">{{ $message }}</span>
    @enderror

    <button type="submit" class="auth-btn-primary">Join Free →</button>

</form>

{{-- Divider --}}
<div class="auth-divider"><span>or sign up with</span></div>

{{-- Social --}}
<button class="auth-social-btn" type="button">
    <svg width="18" height="18" viewBox="0 0 256 256" fill="none"><path d="M256 128c0-70.69-57.31-128-128-128S0 57.31 0 128c0 53.85 33.19 99.96 80.12 118.96V165.6H56V128h24.12v-29.2c0-23.84 14.19-37 35.9-37 10.4 0 21.3 1.86 21.3 1.86v23.44h-12c-11.8 0-15.48 7.33-15.48 14.84V128H137l-4.35 37.6h-28.05v81.36C183.08 228.58 256 184.06 256 128z" fill="#1877F2"/></svg>
    Continue with Discord
</button>
<button class="auth-social-btn" type="button">
    <svg width="18" height="18" viewBox="0 0 488 512" fill="none"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" fill="#EA4335"/></svg>
    Continue with Google
</button>

{{-- Footer --}}
<p class="auth-footer-link">
    Already have an account? <a href="{{ route('login') }}">Sign In</a>
</p>
@endsection
