@extends('layouts.auth')

@section('title', 'Registreren - DineSync')

@section('showcase-title', 'Bouw je restaurantomgeving op jouw manier.')
@section('showcase-description', 'Start met één account en breid uit naar meerdere restaurants, teams, rollen en operationele workflows.')

@section('header-icon', 'ri-user-add-line')
@section('header-eyebrow', 'Nieuw account')
@section('header-title', 'Start met DineSync')
@section('header-description', 'Maak je account aan en bouw je restaurantomgeving stap voor stap op.')

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

    <div class="auth-field">
        <label for="name">Volledige naam</label>

        <div class="auth-input">
            <i class="ri-user-3-line auth-input__icon"></i>

            <input
                id="name"
                type="text"
                name="name"
                value="{{ old('name') }}"
                placeholder="Jouw naam"
                autocomplete="name"
                required
                autofocus
            >
        </div>

        @error('name')
            <small class="auth-field__error">{{ $message }}</small>
        @enderror
    </div>

    <div class="auth-field">
        <label for="email">E-mailadres</label>

        <div class="auth-input">
            <i class="ri-mail-line auth-input__icon"></i>

            <input
                id="email"
                type="email"
                name="email"
                value="{{ old('email') }}"
                placeholder="jij@restaurant.be"
                autocomplete="email"
                required
            >
        </div>

        @error('email')
            <small class="auth-field__error">{{ $message }}</small>
        @enderror
    </div>

    <div class="auth-field">
        <label for="password">Wachtwoord</label>

        <div class="auth-input">
            <i class="ri-lock-password-line auth-input__icon"></i>

            <input
                id="password"
                type="password"
                name="password"
                placeholder="Minimaal 8 tekens"
                autocomplete="new-password"
                required
            >

            <button
                type="button"
                class="auth-password-toggle"
                data-password-toggle="password"
                aria-label="Wachtwoord tonen"
            >
                <i class="ri-eye-line"></i>
            </button>
        </div>

        @error('password')
            <small class="auth-field__error">{{ $message }}</small>
        @enderror
    </div>

    <div class="auth-field">
        <label for="password_confirmation">Wachtwoord bevestigen</label>

        <div class="auth-input">
            <i class="ri-lock-password-line auth-input__icon"></i>

            <input
                id="password_confirmation"
                type="password"
                name="password_confirmation"
                placeholder="Herhaal je wachtwoord"
                autocomplete="new-password"
                required
            >

            <button
                type="button"
                class="auth-password-toggle"
                data-password-toggle="password_confirmation"
                aria-label="Wachtwoord tonen"
            >
                <i class="ri-eye-line"></i>
            </button>
        </div>
    </div>

    <label class="auth-checkbox auth-checkbox--terms">
        <input
            type="checkbox"
            name="terms"
            value="1"
            required
        >

        <span>
            Ik ga akkoord met de voorwaarden en privacyverklaring.
        </span>
    </label>

    <button type="submit" class="auth-submit">
        <span>Account aanmaken</span>
        <i class="ri-arrow-right-line"></i>
    </button>
</form>

<div class="auth-card__footer">
    <span>Heb je al een account?</span>

    <a href="{{ route('login') }}">
        Log hier in
    </a>
</div>

<div class="auth-security">
    <i class="ri-shield-check-line"></i>
    <span>Je verbinding en accountgegevens worden veilig verwerkt.</span>
</div>
@endsection