@extends('layouts.app')
@section('title', 'Register')
@section('page-title', 'Create Account')
@section('content')
<div style="max-width:540px;margin:20px auto;">
    <div class="card">
        <div class="card-body" style="padding:40px;">
            <h2 style="margin-bottom:8px;">Create Your Account</h2>
            <p class="text-muted text-sm" style="margin-bottom:32px;">Join ExamPlatform as a Tester or Candidate</p>

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

                <!-- Role Selection -->
                <div class="form-group">
                    <label class="form-label">I am registering as</label>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <label style="cursor:pointer;">
                            <input type="radio" name="role" value="tester" {{ old('role','tester')==='tester'?'checked':'' }} style="display:none;" id="role_tester">
                            <div class="role-card" id="rc_tester" onclick="selectRole('tester')"
                                 style="border:2px solid var(--accent);border-radius:12px;padding:16px;text-align:center;background:rgba(79,124,255,.08);">
                                <i class="bi bi-person-workspace" style="font-size:1.8rem;color:var(--accent);display:block;margin-bottom:6px;"></i>
                                <strong>Tester</strong>
                                <div class="text-xs text-muted">Create & manage exams</div>
                            </div>
                        </label>
                        <label style="cursor:pointer;">
                            <input type="radio" name="role" value="candidate" {{ old('role')==='candidate'?'checked':'' }} style="display:none;" id="role_candidate">
                            <div class="role-card" id="rc_candidate" onclick="selectRole('candidate')"
                                 style="border:2px solid var(--border);border-radius:12px;padding:16px;text-align:center;">
                                <i class="bi bi-person-check" style="font-size:1.8rem;color:var(--muted);display:block;margin-bottom:6px;"></i>
                                <strong>Candidate</strong>
                                <div class="text-xs text-muted">Take exams & tests</div>
                            </div>
                        </label>
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Full Name</label>
                        <input type="text" name="name" class="form-control" value="{{ old('name') }}" required placeholder="John Doe">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Country</label>
                        <select name="country" class="form-control" required>
                            <option value="">Select country</option>
                            <option value="Ghana" {{ old('country')==='Ghana'?'selected':'' }}>Ghana</option>
                            <option value="Nigeria" {{ old('country')==='Nigeria'?'selected':'' }}>Nigeria</option>
                            <option value="Kenya" {{ old('country')==='Kenya'?'selected':'' }}>Kenya</option>
                            <option value="South Africa" {{ old('country')==='South Africa'?'selected':'' }}>South Africa</option>
                            <option value="United States" {{ old('country')==='United States'?'selected':'' }}>United States</option>
                            <option value="United Kingdom" {{ old('country')==='United Kingdom'?'selected':'' }}>United Kingdom</option>
                            <option value="Other" {{ old('country')==='Other'?'selected':'' }}>Other</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" required placeholder="you@example.com">
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Phone (Optional)</label>
                        <input type="tel" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="+1 555 0000">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Organization (Optional)</label>
                        <input type="text" name="organization" class="form-control" value="{{ old('organization') }}" placeholder="University / Company">
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" required placeholder="Min 8 characters">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control" required placeholder="Repeat password">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary w-full" style="margin-top:8px;">
                    <i class="bi bi-person-plus"></i> Create Account
                </button>
            </form>

            <p class="text-sm text-muted" style="text-align:center;margin-top:24px;">
                Already have an account? <a href="{{ route('login') }}">Sign in</a>
            </p>
        </div>
    </div>
</div>

<script>
function selectRole(role) {
    document.getElementById('role_tester').checked   = (role === 'tester');
    document.getElementById('role_candidate').checked = (role === 'candidate');
    const t = document.getElementById('rc_tester');
    const c = document.getElementById('rc_candidate');
    if (role === 'tester') {
        t.style.borderColor = 'var(--accent)'; t.style.background = 'rgba(79,124,255,.08)';
        c.style.borderColor = 'var(--border)';  c.style.background = 'transparent';
        t.querySelector('i').style.color = 'var(--accent)';
        c.querySelector('i').style.color = 'var(--muted)';
    } else {
        c.style.borderColor = 'var(--accent)'; c.style.background = 'rgba(79,124,255,.08)';
        t.style.borderColor = 'var(--border)';  t.style.background = 'transparent';
        c.querySelector('i').style.color = 'var(--accent)';
        t.querySelector('i').style.color = 'var(--muted)';
    }
}
// Init
selectRole('{{ old("role", "tester") }}');
</script>
@endsection