@extends('layouts.guest')

@section('content')
    <h2 class="auth-title text-center">Đăng ký</h2>
    <p class="auth-subtitle text-center">Tạo tài khoản để sử dụng hệ thống </p>

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

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

        <div>
            <label class="block text-sm font-medium text-gray-700">Họ & tên</label>
            <input name="name" type="text" required class="auth-input @error('name') input-invalid @enderror" placeholder="Ví dụ: Nguyễn Văn A" value="{{ old('name') }}" />
            @error('name') <p class="field-error">{{ $message }}</p> @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Tên hiển thị (công khai)</label>
            <input name="display_name" type="text" class="auth-input" placeholder="Tên sẽ hiển thị trên profile (tùy chọn)" value="{{ old('display_name') }}" />
            <p class="text-sm text-gray-500 mt-1">Tên ngắn hoặc biệt danh — không bắt buộc.</p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Email</label>
            <input name="email" type="email" required class="auth-input @error('email') input-invalid @enderror" value="{{ old('email') }}" />
            @error('email') <p class="field-error">{{ $message }}</p> @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Mật khẩu</label>
            <input name="password" type="password" required class="auth-input @error('password') input-invalid @enderror" />
            @error('password') <p class="field-error">{{ $message }}</p> @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Xác nhận mật khẩu</label>
            <input name="password_confirmation" type="password" required class="auth-input" />
        </div>

        <div>
            <button type="submit" class="auth-btn">Đăng ký</button>
        </div>
    </form>

    <p class="mt-6 text-sm text-center text-gray-600">Đã có tài khoản? <a href="{{ route('login') }}" class="auth-link">Đăng nhập</a></p>
@endsection
