{{--
    Questionnaire METIER d'un sous-traitant (electricien, chauffage/sanitaire).

    Rendu GENERIQUE : toute la structure vient de
    config/questionnaires-metier.php, lue via
    App\Services\Partenaires\SpecificationQuestionnaire. Ajouter un champ a la
    config l'affiche ici et le valide cote serveur, sans toucher a cette vue.

    Navigation entre etapes : reutilise le socle du formulaire partenaire
    (public/js/site.js::initFormulairePartenaireEtapes) — memes attributs
    data-*, donc NE PAS LES RENOMMER. Sans JavaScript, toutes les etapes
    restent visibles et le formulaire s'envoie d'un bloc.

    Cette page n'est pas dans la navigation du site : on y arrive par un lien
    personnalise. Elle n'est donc pas indexable (noindex pose ci-dessous).
--}}
@extends('layouts.site')

@section('titre', 'Questionnaire '.$specification->libelle().' - Biome Constructions')

@section('meta')
    {{-- Page atteinte par lien prive : jamais dans un index. --}}
    <meta name="robots" content="noindex,nofollow">
@endsection

@section('contenu')
    @php
        $etapes = $specification->etapes();
        $clesParEtape = $specification->clesParEtape();
        $champsTous = $specification->champs();

        // Valeurs a afficher : la saisie en cours (apres une erreur) prime sur
        // ce qui est deja enregistre.
        $valeur = function (string $cle) use ($reponses) {
            return old('reponses.'.$cle, $reponses[$cle] ?? null);
        };

        // Valeurs courantes de TOUS les champs, calculees une fois : elles
        // servent a evaluer les conditions d'affichage cote serveur (le JS
        // reprend le relais ensuite).
        $valeursActuelles = [];
        foreach (array_keys($champsTous) as $cleChamp) {
            $valeursActuelles[$cleChamp] = $valeur($cleChamp);
        }

        $afficherErreurs = $errors->hasAny(array_map(fn ($c) => 'reponses.'.$c, array_keys($champsTous)));
        $afficherSucces = (bool) session('succes') && ! $afficherErreurs;

        // Premiere etape en erreur, pour rouvrir le formulaire au bon endroit.
        $etapeErreur = 1;
        foreach ($clesParEtape as $numero => $cles) {
            if ($errors->hasAny(array_map(fn ($c) => 'reponses.'.$c, $cles))) {
                $etapeErreur = $numero;
                break;
            }
        }

        // Styles reprises du formulaire partenaire, pour que les deux
        // formulaires publics se ressemblent.
        $bordure = fn (string $cle): string => $errors->has('reponses.'.$cle) ? '#D64545' : '#DCE3EC';
        $styleChamp = fn (string $cle): string => 'width:100%;box-sizing:border-box;height:50px;border:1.5px solid '.$bordure($cle).';border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;color:var(--couleur-texte-titre-carte);background:#fff;';
        $styleErreur = 'display:block;color:#D64545;font-size:12px;margin-top:5px;';
        $styleLabel = 'display:block;font-family:var(--police-texte);font-size:14px;font-weight:600;color:var(--couleur-texte-titre-carte);margin-bottom:6px;';
        $styleAide = 'display:block;font-size:12.5px;color:#9AA6B6;margin-top:4px;';
        $styleFieldset = fn (string $cle): string => 'border:1.5px solid '.$bordure($cle).';border-radius:9px;padding:12px 16px 14px;margin:0;min-width:0;';
        $styleLegende = 'padding:0 6px;font-family:var(--police-texte);font-size:14px;font-weight:600;color:var(--couleur-texte-titre-carte);';
        $styleCase = 'display:flex;align-items:center;gap:9px;font-family:var(--police-texte);font-size:14.5px;color:var(--couleur-texte-titre-carte);cursor:pointer;';
        $styleInputCase = 'width:17px;height:17px;flex:none;accent-color:var(--couleur-bleu-principal);cursor:pointer;';
        $styleBoutonPrincipal = 'display:flex;align-items:center;justify-content:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;height:54px;padding:0 26px;font-family:var(--police-titres);font-size:16px;font-weight:600;cursor:pointer;';
        $styleBoutonSecondaire = 'display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--couleur-texte-titre-carte);border:1.5px solid #DCE3EC;border-radius:10px;height:54px;padding:0 22px;font-family:var(--police-titres);font-size:15px;font-weight:600;cursor:pointer;';
    @endphp

    <section style="background:var(--couleur-bleu-fonce);">
        <div class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:48px 32px;">
            <span style="font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#7FB0EE;">Partenaires &amp; sous-traitants</span>
            <h1 class="biome-titre-hero" style="font-family:var(--police-titres);font-size:36px;font-weight:800;color:#fff;margin:10px 0 12px;letter-spacing:-.5px;line-height:1.15;">Questionnaire {{ $specification->libelle() }}</h1>
            <p style="font-size:16.5px;line-height:1.6;color:#C3D2E6;margin:0;max-width:640px;">
                @if ($candidature->societe)
                    {{ $candidature->societe }} —
                @endif
                Ces informations nous permettent de vous proposer les chantiers qui correspondent
                vraiment &agrave; votre fa&ccedil;on de travailler.
            </p>
        </div>
    </section>

    <section class="biome-conteneur" style="max-width:760px;margin:0 auto;padding:48px 32px 72px;">
        @if ($afficherSucces)
            <div style="background:var(--couleur-fond-survol-bleu-clair);border:1px solid #C9DBF3;border-radius:var(--rayon-carte);padding:32px;text-align:center;">
                <span style="width:58px;height:58px;border-radius:50%;background:var(--couleur-bleu-principal);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;">
                    <svg width="29" height="29" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" aria-hidden="true"><path d="m5 12 4 4 10-10"/></svg>
                </span>
                <h2 style="font-family:var(--police-titres);font-size:21px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 8px;">Merci&nbsp;!</h2>
                <p style="font-size:15px;color:var(--couleur-texte-fonce);margin:0 0 18px;">{{ session('succes') }}</p>
                <a href="{{ route('questionnaire-metier.show', ['metier' => $specification->metier, 'uuid' => $candidature->uuid]) }}"
                   style="font-size:14px;color:var(--couleur-bleu-principal);text-decoration:underline;">Revoir mes r&eacute;ponses</a>
            </div>
        @else
            <form action="{{ route('questionnaire-metier.store', ['metier' => $specification->metier, 'uuid' => $candidature->uuid]) }}"
                  method="POST" novalidate
                  data-formulaire-partenaire-etapes
                  data-etape-erreur="{{ $etapeErreur }}"
                  style="display:flex;flex-direction:column;gap:16px;">
                @csrf
                <x-anti-spam />

                {{-- Progression --}}
                <div>
                    <div style="display:flex;justify-content:space-between;gap:6px;margin-bottom:8px;">
                        @foreach ($etapes as $etape)
                            <span data-prog-label style="font-family:var(--police-texte);font-size:12px;font-weight:600;color:var(--couleur-texte-attenue);transition:color .3s ease;">{{ $etape['titre'] ?? '' }}</span>
                        @endforeach
                    </div>
                    <div style="background:#E4EAF2;border-radius:4px;height:5px;overflow:hidden;">
                        <span data-barre-progression style="display:block;background:var(--couleur-bleu-principal);border-radius:4px;height:5px;width:{{ (int) round(100 / max(1, count($etapes))) }}%;transition:width .4s ease;"></span>
                    </div>
                    <span data-libelle-etape style="display:block;margin-top:7px;font-size:12.5px;color:var(--couleur-texte-attenue);">&Eacute;tape 1 sur {{ count($etapes) }}</span>
                </div>

                @foreach ($etapes as $index => $etape)
                    @php $numero = $index + 1; @endphp
                    <div data-etape="{{ $numero }}" style="display:{{ $numero === 1 ? 'flex' : 'none' }};flex-direction:column;gap:14px;">
                        <h2 style="font-family:var(--police-titres);font-size:20px;font-weight:700;color:var(--couleur-texte-fonce);margin:4px 0 0;">{{ $etape['titre'] ?? '' }}</h2>
                        @if (! empty($etape['aide']))
                            <p style="font-size:14px;color:var(--couleur-texte-attenue);margin:0;">{{ $etape['aide'] }}</p>
                        @endif

                        @foreach ((array) ($etape['champs'] ?? []) as $cle => $champ)
                            @php
                                $type = $champ['type'] ?? 'texte';
                                $options = App\Services\Partenaires\SpecificationQuestionnaire::options($champ);
                                $obligatoire = (bool) ($champ['obligatoire'] ?? false);
                                $conditionnel = isset($champ['si']);
                                $visible = ! $conditionnel || $specification->conditionRemplie($champ, $valeursActuelles);
                            @endphp

                            <div
                                @if ($conditionnel)
                                    data-si-champ="{{ $champ['si']['champ'] }}"
                                    data-si-valeur="{{ $champ['si']['valeur'] }}"
                                    style="display:{{ $visible ? 'block' : 'none' }};"
                                @endif
                            >
                                @if (in_array($type, ['cases', 'radio'], true))
                                    <fieldset style="{{ $styleFieldset($cle) }}">
                                        <legend style="{{ $styleLegende }}">
                                            {{ $champ['label'] ?? $cle }}@if ($obligatoire)<span style="color:#D64545;"> *</span>@endif
                                            @if ($type === 'cases')<span style="font-weight:400;color:#7A8699;"> (plusieurs choix possibles)</span>@endif
                                        </legend>
                                        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px 18px;margin-top:4px;">
                                            @foreach ($options as $valeurOption => $libelleOption)
                                                @php
                                                    $courant = $valeur($cle);
                                                    $coche = $type === 'cases'
                                                        ? in_array((string) $valeurOption, array_map('strval', (array) $courant), true)
                                                        : (string) $courant === (string) $valeurOption;
                                                @endphp
                                                <label style="{{ $styleCase }}">
                                                    <input type="{{ $type === 'cases' ? 'checkbox' : 'radio' }}"
                                                           name="reponses[{{ $cle }}]{{ $type === 'cases' ? '[]' : '' }}"
                                                           value="{{ $valeurOption }}"
                                                           @checked($coche)
                                                           style="{{ $styleInputCase }}"
                                                           @if ($type === 'cases' && $obligatoire) data-groupe-obligatoire="{{ $cle }}" @endif
                                                           data-pilote="{{ $cle }}">
                                                    <span>{{ $libelleOption }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </fieldset>
                                    @if ($type === 'cases' && $obligatoire)
                                        <span data-erreur-groupe="{{ $cle }}" style="{{ $styleErreur }}display:none;">Selectionnez au moins une option.</span>
                                    @endif
                                @else
                                    <label for="q-{{ $cle }}" style="{{ $styleLabel }}">
                                        {{ $champ['label'] ?? $cle }}@if ($obligatoire)<span style="color:#D64545;"> *</span>@endif
                                    </label>

                                    @if ($type === 'liste')
                                        <select id="q-{{ $cle }}" name="reponses[{{ $cle }}]" style="{{ $styleChamp($cle) }}" data-pilote="{{ $cle }}">
                                            <option value="">Choisissez&hellip;</option>
                                            @foreach ($options as $valeurOption => $libelleOption)
                                                <option value="{{ $valeurOption }}" @selected((string) $valeur($cle) === (string) $valeurOption)>{{ $libelleOption }}</option>
                                            @endforeach
                                        </select>
                                    @elseif ($type === 'zone')
                                        <textarea id="q-{{ $cle }}" name="reponses[{{ $cle }}]" rows="4" style="width:100%;box-sizing:border-box;min-height:96px;border:1.5px solid {{ $bordure($cle) }};border-radius:9px;padding:12px 14px;font-family:var(--police-texte);font-size:15px;outline:none;resize:vertical;">{{ $valeur($cle) }}</textarea>
                                    @elseif ($type === 'prix')
                                        <div style="position:relative;">
                                            <input type="number" step="0.01" min="0" id="q-{{ $cle }}" name="reponses[{{ $cle }}]"
                                                   value="{{ $valeur($cle) }}" placeholder="0,00"
                                                   style="{{ $styleChamp($cle) }}padding-right:46px;">
                                            <span style="position:absolute;right:14px;top:0;height:50px;display:flex;align-items:center;color:#9AA6B6;font-size:14px;">&euro;</span>
                                        </div>
                                    @elseif ($type === 'nombre')
                                        <input type="number" min="0" max="{{ $champ['max'] ?? 1000 }}" id="q-{{ $cle }}"
                                               name="reponses[{{ $cle }}]" value="{{ $valeur($cle) }}" style="{{ $styleChamp($cle) }}">
                                    @else
                                        <input type="text" id="q-{{ $cle }}" name="reponses[{{ $cle }}]"
                                               value="{{ $valeur($cle) }}" maxlength="255" style="{{ $styleChamp($cle) }}">
                                    @endif
                                @endif

                                @if (! empty($champ['aide']))
                                    <span style="{{ $styleAide }}">{{ $champ['aide'] }}</span>
                                @endif
                                @error('reponses.'.$cle)<span style="{{ $styleErreur }}">{{ $message }}</span>@enderror
                            </div>
                        @endforeach

                        <div style="display:flex;justify-content:{{ $numero === 1 ? 'flex-end' : 'space-between' }};gap:12px;">
                            @if ($numero > 1)
                                <button type="button" data-etape-precedente="{{ $numero - 1 }}" style="{{ $styleBoutonSecondaire }}">
                                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
                                    Retour
                                </button>
                            @endif

                            @if ($numero < count($etapes))
                                <button type="button" data-etape-suivante="{{ $numero + 1 }}" style="{{ $styleBoutonPrincipal }}">
                                    Suivant
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                                </button>
                            @else
                                <button type="submit" style="{{ $styleBoutonPrincipal }}">
                                    Envoyer mes r&eacute;ponses
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4 10-10"/></svg>
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach

                <div style="display:flex;align-items:center;gap:9px;color:var(--couleur-texte-fonce);font-size:13px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                    Vos prix restent confidentiels et ne sont utilis&eacute;s que par l'&eacute;quipe Biome.
                </div>
            </form>
        @endif
    </section>
@endsection