@extends('auth.layout.app')

@section('title', config('app.name') . ' - ' . __('auth.register.title'))

@section('content')

@php
    use Laravel\Fortify\Features;
@endphp

<div class="kt-card max-w-md w-full">
    <div class="kt-card-content flex flex-col gap-5 p-10">

        <div class="text-center mb-2.5">
            <h3 class="text-lg font-medium text-mono leading-none mb-2.5">
                {{ __('auth.register.title') }}
            </h3>

            <div class="flex items-center justify-center font-medium">
                <span class="text-sm text-secondary-foreground me-1.5">
                    {{ __('auth.register.already_have_account') }}
                </span>
                <a class="text-sm link" href="{{ route('login') }}">
                    {{ __('auth.login.title') }}
                </a>
            </div>
        </div>

        {{-- Validation errors (comme login) --}}
        @if ($errors->any())
            <div class="kt-alert kt-alert-destructive kt-alert-light text-destructive">
                <ul class="list-disc ms-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Session status --}}
        @if (session('status'))
            <div class="kt-alert kt-alert-light kt-alert-success">
                {{ session('status') }}
            </div>
        @endif

        {{-- Social buttons (si tu veux les afficher aussi sur register) --}}
        <x-auth.social-login-buttons />

        {{-- Separator --}}
        <div class="flex items-center gap-2">
            <span class="border-t border-border w-full"></span>
            <span class="text-xs text-secondary-foreground uppercase">{{ __('ui.common.or') }}</span>
            <span class="border-t border-border w-full"></span>
        </div>

        {{-- Register form --}}
        <form
            method="POST"
            action="{{ route('register.store') }}"
            class="flex flex-col gap-5"
            id="sign_up_form"
        >
            @csrf

            {{-- Name --}}
            {{-- <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg">
                    <i class="ki-outline ki-user text-gray-500"></i>
                    <input
                        id="name"
                        name="name"
                        type="text"
                        class="kt-input"
                        placeholder="{{ __('auth.name_placeholder') }}"
                        value="{{ old('name') }}"
                        required
                        autofocus
                        autocomplete="name"
                    >
                </div>

                @error('name')
                    <span class="text-xs text-red-600">{{ $message }}</span>
                @enderror
            </div> --}}

                        {{-- Lastname --}}
            <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg">
                    <i class="ki-outline ki-user text-gray-500"></i>
                    <input
                        id="lastname"
                        name="lastname"
                        type="text"
                        class="kt-input"
                        placeholder="{{ __('auth.placeholders.lastname') }}"
                        value="{{ old('lastname') }}"
                        required
                        autocomplete="family-name"
                    >
                </div>

                @error('lastname')
                    <span class="text-xs text-red-600">{{ $message }}</span>
                @enderror
            </div>


            <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg">
                    <i class="ki-outline ki-user text-gray-500"></i>
                    <input
                        id="firstname"
                        name="firstname"
                        type="text"
                        class="kt-input"
                        placeholder="{{ __('auth.placeholders.firstname') }}"
                        value="{{ old('firstname') }}"
                        required
                        autofocus
                        autocomplete="given-name"
                    >
                </div>

                @error('firstname')
                    <span class="text-xs text-red-600">{{ $message }}</span>
                @enderror
            </div>


            {{-- Email --}}
            <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg">
                    <i class="ki-outline ki-sms text-gray-500"></i>
                    <input
                        id="email"
                        name="email"
                        type="email"
                        class="kt-input"
                        placeholder="{{ __('auth.placeholders.email') }}"
                        value="{{ old('email') }}"
                        required
                        autocomplete="email"
                    >
                </div>

                @error('email')
                    <span class="text-xs text-red-600">{{ $message }}</span>
                @enderror
            </div>

            {{-- Password --}}
            <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg" data-kt-toggle-password="true">
                    <i class="ki-outline ki-lock-2 text-gray-500"></i>

                    <input
                        id="password"
                        name="password"
                        type="password"
                        class="kt-input"
                        placeholder="{{ __('auth.placeholders.password') }}"
                        required
                        autocomplete="new-password"
                    >

                    <button
                        class="kt-btn kt-btn-sm kt-btn-ghost kt-btn-icon bg-transparent! -me-1.5"
                        data-kt-toggle-password-trigger="true"
                        type="button"
                        aria-label="{{ __('auth.toggle_password') }}"
                    >
                        <span class="kt-toggle-password-active:hidden">
                            <i class="ki-outline ki-eye text-muted-foreground"></i>
                        </span>
                        <span class="hidden kt-toggle-password-active:block">
                            <i class="ki-outline ki-eye-slash text-muted-foreground"></i>
                        </span>
                    </button>
                </div>

                @error('password')
                    <span class="text-xs text-red-600">{{ $message }}</span>
                @enderror
            </div>

            {{-- Confirm Password --}}
            <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg" data-kt-toggle-password="true">
                    <i class="ki-outline ki-lock-2 text-gray-500"></i>

                    <input
                        id="password_confirmation"
                        name="password_confirmation"
                        type="password"
                        class="kt-input"
                        placeholder="{{ __('auth.placeholders.password_confirmation') }}"
                        required
                        autocomplete="new-password"
                    >

                    <button
                        class="kt-btn kt-btn-sm kt-btn-ghost kt-btn-icon bg-transparent! -me-1.5"
                        data-kt-toggle-password-trigger="true"
                        type="button"
                        aria-label="{{ __('auth.toggle_password') }}"
                    >
                        <span class="kt-toggle-password-active:hidden">
                            <i class="ki-outline ki-eye text-muted-foreground"></i>
                        </span>
                        <span class="hidden kt-toggle-password-active:block">
                            <i class="ki-outline ki-eye-slash text-muted-foreground"></i>
                        </span>
                    </button>
                </div>

                {{-- NB: confirmed remonte sur "password" (souvent), mais on affiche aussi ici au besoin --}}
                @error('password_confirmation')
                    <span class="text-xs text-red-600">{{ $message }}</span>
                @enderror
            </div>

            {{-- Terms (optionnel) --}}
            <label class="kt-label">
                <input class="kt-checkbox kt-checkbox-sm" name="terms" type="checkbox" value="1" {{ old('terms') ? 'checked' : '' }}>
                <span class="kt-checkbox-label text-sm">
                    {!! __('auth.register.accept_terms_html', ['url' => '#']) !!}
                </span>
            </label>

            @error('terms')
                <span class="text-xs text-red-600">{{ $message }}</span>
            @enderror

            <button type="submit" class="kt-btn kt-btn-primary flex justify-center grow">
                {{ __('auth.register.action') }}
            </button>
        </form>

    </div>
</div>

@endsection