{% extends 'base.html.twig' %}

{% block title %}Bienvenue — Scan Inventaire{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4 py-10">
    <div class="mb-6 flex items-center gap-2.5">
        <div class="w-8 h-8 bg-red-brand rounded-lg flex items-center justify-center">
            <svg viewBox="0 0 24 24" fill="none" class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg">
                <rect x="2" y="6" width="20" height="12" rx="2" stroke="currentColor" stroke-width="2" />
                <path d="M6 12h2M10 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            </svg>
        </div>
        <p class="font-display font-bold text-lg text-gray-900">Scan Inventaire</p>
    </div>

    <div class="w-full max-w-lg bg-white rounded-2xl border border-gray-200 shadow-lg p-8">
        <h1 class="text-xl font-bold text-gray-900 mb-1">Bienvenue {{ app.user.userIdentifier }}</h1>
        <p class="text-gray-500 text-sm mb-6">Choisissez votre groupe et vos concessions. Votre demande sera transmise pour validation.</p>

        {% for type, messages in app.flashes %}
            {% for message in messages %}
                <div class="mb-4 rounded-xl px-4 py-3 text-sm {{ type == 'error' ? 'bg-red-50 text-red-700 border border-red-200' : 'bg-green-50 text-green-700 border border-green-200' }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        <form method="post" action="{{ path('app_onboarding') }}" class="space-y-6" data-controller="onboarding">
            <input type="hidden" name="_token" value="{{ csrf_token('onboarding') }}">

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Groupe</label>
                <div class="space-y-2">
                    {% for g in groups %}
                        <label class="flex items-center gap-3 px-3 py-2.5 border border-gray-200 rounded-xl cursor-pointer hover:bg-gray-50 has-[:checked]:bg-red-50 has-[:checked]:border-red-200">
                            <input type="radio" name="group" value="{{ g }}" required class="accent-red-brand">
                            <span class="text-sm font-medium text-gray-800">{{ groupLabels[g] }}</span>
                        </label>
                    {% endfor %}
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-sm font-medium text-gray-700">Concessions</label>
                    <span class="text-xs text-gray-500" data-onboarding-target="count"></span>
                </div>
                <input type="text" placeholder="Rechercher une concession…"
                       data-onboarding-target="search" data-action="input->onboarding#filter"
                       class="w-full mb-2 px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-brand">
                <div class="h-56 overflow-y-auto rounded-lg border border-gray-200 divide-y divide-gray-100">
                    {% for id, name in concessions %}
                        <label data-onboarding-target="item" data-name="{{ name|lower }}"
                               class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 has-[:checked]:bg-blue-50">
                            <input type="checkbox" name="concessions[]" value="{{ id }}" class="accent-red-brand"
                                   data-onboarding-target="checkbox" data-action="change->onboarding#updateCount">
                            <span class="text-sm text-gray-700">{{ name }}</span>
                        </label>
                    {% else %}
                        <div class="flex items-center justify-center text-gray-400 text-sm p-8 text-center">
                            Référentiel des concessions non importé. Contactez un administrateur.
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="flex items-center justify-between pt-2">
                <a href="{{ path('app_logout') }}" class="text-sm text-gray-500 hover:text-gray-900">Se déconnecter</a>
                <button type="submit" class="px-5 py-2.5 bg-red-brand text-white text-sm font-semibold rounded-xl hover:bg-red-brand-dark transition-colors">
                    Envoyer la demande
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}
