@extends('layouts.app')

@section('title', 'Choisir mes formations — Concept X Formation')

@section('content')
<div class="breadcrumb">
    <div class="container">
        <a href="{{ route('accueil') }}">Accueil</a><span class="sep">/</span><span class="current">Inscription</span>
    </div>
</div>

<section class="page-hero">
    <div class="container">
        <div class="page-hero-eyebrow">Étape 1 sur 3</div>
        <h1>Ajoutez vos <em>formations</em><br>à votre sélection.</h1>
        <p class="lead">Comme dans un panier, vous choisissez d’abord les parcours qui vous intéressent. Vous choisirez les sessions à l’étape suivante.</p>
    </div>
</section>

<section class="block">
    <div class="container">
        @if($errors->any())<div class="form-alert">Sélectionnez au moins une formation.</div>@endif
        <form method="POST" action="{{ route('inscription.select') }}">
            @csrf
            <div class="shop-grid">
                @foreach($formations as $formation)
                    <label class="shop-card">
                        <input type="checkbox" name="formations[]" value="{{ $formation->id }}" @checked(in_array((string) $formation->id, array_map('strval', old('formations', session('inscription.formations', []))), true))>
                        <span class="shop-card-check">Ajouter</span>
                        <span class="cat-card-cat">{{ $formation->univers?->libelle }}</span>
                        <strong>{{ $formation->titre }}</strong>
                        <em>{{ $formation->accroche }}</em>
                        <span class="shop-card-meta">{{ $formation->duree_libelle ?: $formation->duree_heures . ' h' }} · {{ ucfirst($formation->format) }}</span>
                    </label>
                @endforeach
            </div>
            <div class="shop-footer">
                <a href="{{ route('catalogue') }}" class="btn-secondary">Retour au catalogue</a>
                <button class="btn-primary" type="submit">Continuer vers les sessions &rarr;</button>
            </div>
        </form>
    </div>
</section>
@endsection