@extends('layouts.app')
@section('title', 'Create Account')

@push('styles')
<style>
.auth-wrap { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 40px; width: 100%; max-width: 460px; }
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-icon { width: 56px; height: 56px; background: rgba(108,99,255,0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--accent); margin: 0 auto 14px; }
.auth-header h1 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.auth-header p { color: var(--muted); font-size: 0.88rem; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.form-group input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.88rem; outline: none; transition: border-color .2s; }
.form-group input:focus { border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.error-msg { color: #f87171; font-size: 0.75rem; margin-top: 3px; }
.submit-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 6px; transition: background .2s; }
.submit-btn:hover { background: #7c72ff; }
.auth-footer { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--muted); }
.auth-footer a { color: var(--accent); text-decoration: none; }
</style>
@endpush

@section('content')
<div class="auth-wrap">
    <div class="auth-card">
        <div class="auth-header">
            <div class="auth-icon"><i class="fa fa-user-plus"></i></div>
            <h1>Create Account</h1>
            <p>Start managing your server licenses today</p>
        </div>

        @if($errors->any())
        <div class="alert alert-error"><i class="fa fa-exclamation-circle"></i> {{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('register') }}">
            @csrf
            <div class="form-group">
                <label>Full Name *</label>
                <input type="text" name="name" value="{{ old('name') }}" placeholder="John Smith" required>
            </div>
            <div class="form-group">
                <label>Email Address *</label>
                <input type="email" name="email" value="{{ old('email') }}" placeholder="you@example.com" required>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Phone</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" placeholder="+1 234 567 8900">
                </div>
                <div class="form-group">
                    <label>Company</label>
                    <input type="text" name="company" value="{{ old('company') }}" placeholder="Your Company">
                </div>
            </div>
            <div class="form-group">
                <label>Password *</label>
                <input type="password" name="password" placeholder="Min. 8 characters" required>
            </div>
            <div class="form-group">
                <label>Confirm Password *</label>
                <input type="password" name="password_confirmation" placeholder="Repeat password" required>
            </div>
            <button type="submit" class="submit-btn"><i class="fa fa-user-plus"></i> Create Account</button>
        </form>

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