@extends('layouts.guest')

@section('page_title', 'Register')
@section('page_subtitle', 'Create a new system user account')

@section('content')
        <form method="POST" action="{{ route('register') }}" class="form-grid">
            @csrf
            <div class="grid grid-2">
                <label>
                    <span>Name</span>
                    <input class="@error('name') field-invalid @enderror" type="text" name="name" value="{{ old('name') }}" required autofocus>
                    @error('name')<small class="muted">{{ $message }}</small>@enderror
                </label>
                <label>
                    <span>Email</span>
                    <input class="@error('email') field-invalid @enderror" type="email" name="email" value="{{ old('email') }}" required>
                    @error('email')<small class="muted">{{ $message }}</small>@enderror
                </label>
            </div>

            <div class="grid grid-2">
                <label>
                    <span>Phone</span>
                    <input class="@error('phone') field-invalid @enderror" type="text" name="phone" value="{{ old('phone') }}">
                </label>
                <label>
                    <span>Role</span>
                    <select name="role">
                        @foreach (['user' => 'User', 'manager' => 'Manager', 'admin' => 'Admin'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('role', 'user') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
            </div>

            <div class="grid grid-2">
                <label>
                    <span>Password</span>
                    <input type="password" name="password" required>
                </label>
                <label>
                    <span>Confirm Password</span>
                    <input type="password" name="password_confirmation" required>
                </label>
            </div>

            <div class="toolbar">
                <button class="btn btn-primary" type="submit">Create Account</button>
                <a class="btn" href="{{ route('login') }}">Back to login</a>
            </div>
        </form>
@endsection