@extends('layouts.app')

@section('title', 'Create account')

@section('content')
<div style="min-height:80vh; display:flex; align-items:center; justify-content:center; padding:40px 18px;">
    <div style="width:100%; max-width:480px;">

        <div style="text-align:center; margin-bottom:28px;">
            <a href="{{ url('/') }}" style="display:inline-flex; align-items:center; gap:10px; justify-content:center;">
                <span class="nx-logo"></span>
                <span style="font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px;">Nexus Intelligence</span>
            </a>
            <p class="nx-muted" style="margin:10px 0 0;">Create your account to get started</p>
        </div>

        <div class="nx-card">

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

                {{-- Account type --}}
                <label class="nx-label">I am a</label>
                <select class="nx-select" name="role" required>
                    <option value="advertiser" {{ old('role') == 'advertiser' ? 'selected' : '' }}>
                        Advertiser — I want to book OOH/DOOH media
                    </option>
                    <option value="media_owner" {{ old('role') == 'media_owner' ? 'selected' : '' }}>
                        Media Owner — I want to list my inventory
                    </option>
                    <option value="agency" {{ old('role') == 'agency' ? 'selected' : '' }}>
                        Agency — I book on behalf of clients
                    </option>
                </select>

                <div class="nx-divider"></div>

                {{-- Name --}}
                <label class="nx-label">Full name</label>
                <input class="nx-input @error('name') is-invalid @enderror"
                       type="text" name="name"
                       value="{{ old('name') }}"
                       placeholder="Your full name"
                       required autofocus autocomplete="name"/>
                @error('name')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                {{-- Company --}}
                <label class="nx-label" style="margin-top:14px;">Company / Organisation</label>
                <input class="nx-input @error('company') is-invalid @enderror"
                       type="text" name="company"
                       value="{{ old('company') }}"
                       placeholder="Company or organisation name"/>
                @error('company')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                {{-- Email --}}
                <label class="nx-label" style="margin-top:14px;">Email address</label>
                <input class="nx-input @error('email') is-invalid @enderror"
                       type="email" name="email"
                       value="{{ old('email') }}"
                       placeholder="name@company.com"
                       required autocomplete="username"/>
                @error('email')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                {{-- Phone --}}
                <label class="nx-label" style="margin-top:14px;">Phone number</label>
                <input class="nx-input @error('phone') is-invalid @enderror"
                       type="tel" name="phone"
                       value="{{ old('phone') }}"
                       placeholder="+254..."/>
                @error('phone')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                {{-- Password --}}
                <label class="nx-label" style="margin-top:14px;">Password</label>
                <input class="nx-input @error('password') is-invalid @enderror"
                       type="password" name="password"
                       placeholder="Min. 8 characters"
                       required autocomplete="new-password"/>
                @error('password')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                {{-- Confirm password --}}
                <label class="nx-label" style="margin-top:14px;">Confirm password</label>
                <input class="nx-input"
                       type="password" name="password_confirmation"
                       placeholder="Repeat password"
                       required autocomplete="new-password"/>

                <div class="nx-divider"></div>

                <button type="submit" class="nx-btn nx-btn-primary nx-btn-lg" style="width:100%;">
                    Create account
                </button>

                <p style="text-align:center; margin-top:16px; font-size:13px; color:var(--nx-muted);">
                    Already have an account?
                    <a href="{{ route('login') }}" style="color:var(--nx-accent);">Sign in</a>
                </p>

            </form>
        </div>

    </div>
</div>
@endsection