@extends('layouts.app')

@section('content')
<section class="section">
    <div class="container container-sm">
        <div class="center" style="margin-bottom:26px">
            <h1>Créer un compte CityMag</h1>
            <p class="lead" style="margin-top:8px">Gratuit, sans engagement. Deux minutes suffisent.</p>
        </div>

        <div class="panel" style="padding:32px">
            <form method="post" action="{{ url('/inscription') }}" class="stack">
                @csrf

                <div>
                    <label class="label" style="display:block;margin-bottom:10px">Vous êtes</label>
                    <div class="radio-cards grid-2" style="display:grid;gap:10px;margin-bottom:8px">
                        <label class="radio-card">
                            <input type="radio" name="profil" value="particulier" @checked(old('profil', 'particulier') === 'particulier')>
                            <span><strong style="display:block;color:var(--ink-900)">Particulier</strong>
                            <span class="small muted">Vendre, acheter, échanger et sortir près de chez vous.</span></span>
                        </label>
                        <label class="radio-card">
                            <input type="radio" name="profil" value="pro" @checked(old('profil') === 'pro')>
                            <span><strong style="display:block;color:var(--ink-900)">Professionnel</strong>
                            <span class="small muted">Fiche établissement, annonces illimitées, statistiques.</span></span>
                        </label>
                    </div>
                    @error('profil')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="grid grid-2" style="gap:14px">
                    <div class="field-group">
                        <label class="label" for="prenom">Prénom</label>
                        <input class="input @error('prenom') is-invalid @enderror" id="prenom" name="prenom"
                               value="{{ old('prenom') }}" required autocomplete="given-name">
                        @error('prenom')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field-group">
                        <label class="label" for="nom">Nom</label>
                        <input class="input @error('nom') is-invalid @enderror" id="nom" name="nom"
                               value="{{ old('nom') }}" required autocomplete="family-name">
                        @error('nom')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="field-group">
                    <label class="label" for="email">Adresse e-mail</label>
                    <div class="input-icon">
                        <x-icon name="mail"/>
                        <input class="input @error('email') is-invalid @enderror" id="email" type="email" name="email"
                               value="{{ old('email') }}" required autocomplete="email">
                    </div>
                    @error('email')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="grid grid-2" style="gap:14px">
                    <div class="field-group">
                        <label class="label" for="ville">Ville</label>
                        <div class="input-icon">
                            <x-icon name="pin"/>
                            <input class="input @error('ville') is-invalid @enderror" id="ville" name="ville"
                                   list="liste-villes" value="{{ old('ville') }}" placeholder="Lille">
                        </div>
                        <datalist id="liste-villes">
                            @foreach(\App\Support\Content::villes() as [$v, $c])<option value="{{ $v }}">{{ $c }}</option>@endforeach
                        </datalist>
                        @error('ville')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field-group">
                        <label class="label" for="cp">Code postal</label>
                        <input class="input @error('cp') is-invalid @enderror" id="cp" name="cp"
                               value="{{ old('cp') }}" placeholder="59000" maxlength="12">
                        @error('cp')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <x-pays-select :value="old('pays')" />
                </div>

                <div class="field-group">
                    <label class="label" for="password">Mot de passe</label>
                    <div class="input-icon">
                        <x-icon name="lock"/>
                        <input class="input @error('password') is-invalid @enderror" id="password" type="password"
                               name="password" required autocomplete="new-password">
                    </div>
                    <span class="hint">8 caractères minimum, dont un chiffre, une minuscule et une majuscule.</span>
                    @error('password')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="field-group">
                    <label class="label" for="password_confirmation">Confirmer le mot de passe</label>
                    <div class="input-icon">
                        <x-icon name="lock"/>
                        <input class="input" id="password_confirmation" type="password"
                               name="password_confirmation" required autocomplete="new-password">
                    </div>
                </div>

                <label class="check"><input type="checkbox" name="cgu" value="1" @checked(old('cgu'))> J'accepte les <a href="{{ url('/cgu') }}" style="color:var(--orange-700)">conditions générales</a> et la <a href="{{ url('/confidentialite') }}" style="color:var(--orange-700)">politique de confidentialité</a>.</label>
                @error('cgu')<span class="field-error">{{ $message }}</span>@enderror

                <label class="check"><input type="checkbox" name="newsletter" value="1" @checked(old('newsletter', true))> Je souhaite recevoir la newsletter hebdomadaire.</label>

                <button class="btn btn-primary btn-lg btn-block" type="submit">Créer mon compte</button>
            </form>

            <p class="small center muted" style="margin-top:20px">
                Déjà inscrit ? <a href="{{ url('/connexion') }}" style="color:var(--orange-700);font-weight:600">Se connecter</a>
            </p>
        </div>
    </div>
</section>
@endsection