{{--
    Composant FormulaireTerrain — formulaire "vendre mon terrain" en 2 etapes
    (JS vanilla, meme technique que modale-candidature.blade.php : tous les
    champs des 2 etapes restent dans le DOM, seule leur visibilite change,
    une seule soumission POST finale vers route('leads.terrain.store')).

    Reutilise a 4 endroits de la maquette (memes champs, presentations
    differentes) :
    - Vendre-mon-terrain.dc.html : modale "PROPOSER MON TERRAIN"    (origine=terrain_modale)
    - Vendre-mon-terrain.dc.html : section #form-terrain, fond sombre (origine=terrain_section)
    - Contact.dc.html            : modale "openTerrain" du hero      (origine=contact_modale)
    - Contact.dc.html            : branche "terrain" du form contact (origine=contact_section)

    Champs alignes sur app/Http/Requests/StoreLeadTerrainRequest.php :
    origine, nom, prenom, telephone, email, commune (etape 1), adresse,
    reference_cadastrale, surface, largeur_facade, message, photos[] (etape 2).

    Props :
    - origine  (string, requis) : contact_section|contact_modale|terrain_section|terrain_modale.
    - variante (string, defaut 'modale') : 'modale' | 'section-claire' | 'section-sombre'.
                Pilote uniquement l'habillage visuel (fidele a chaque bloc de
                la maquette), pas la logique.
    - idInstance (string, defaut = origine) : suffixe d'id pour distinguer
                plusieurs instances du meme formulaire sur une page (ex: page
                Vendre-mon-terrain qui a la fois la modale et la section).

    Reouverture apres erreur / affichage de la bonne instance :
    Plusieurs instances de ce formulaire peuvent coexister sur une meme page
    (section + modale). Apres un POST invalide, on determine quelle instance
    est concernee via old('origine') (pose par StoreLeadTerrainRequest, donc
    fiable : absent => aucune instance ne se considere concernee, evite une
    reouverture au hasard).

    Affichage de la confirmation apres succes :
    LeadTerrainController flashe desormais session('succes_origine') avec
    l'origine reelle du lead cree (contact_section|contact_modale|
    terrain_section|terrain_modale), en plus de session('succes'). C'est la
    source PRIORITAIRE pour determiner quelle instance doit afficher la
    confirmation ($succesOrigineCorrespond, base sur session('succes_origine'),
    distinct de $origineCorrespond qui sert uniquement au cas d'erreur via
    old('origine')). La prop succesParDefaut reste un repli de robustesse
    (ex: ancienne session, appel direct sans passer par le controleur) si
    jamais session('succes_origine') est absent malgre session('succes')
    present.
--}}
@props([
    'origine',
    'variante' => 'modale',
    'idInstance' => null,
    'succesParDefaut' => false,
])

@php
    $idInstance = $idInstance ?? $origine;
    $estModale = $variante === 'modale';
    $estSombre = $variante === 'section-sombre';

    // Couleurs de champs selon la variante (fidele aux 2 jeux de styles de
    // la maquette : champs blancs bordures grises en modale/section claire,
    // champs "flat" blancs sans bordure sur fond bleu fonce en section sombre).
    $styleChamp = $estSombre
        ? 'width:100%;box-sizing:border-box;height:48px;border:none;border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;'
        : 'width:100%;box-sizing:border-box;height:'.($estModale ? '46px' : '48px').';border:1.5px solid #DCE3EC;border-radius:9px;padding:0 '.($estModale ? '13px' : '14px').';font-family:var(--police-texte);font-size:'.($estModale ? '14.5px' : '15px').';outline:none;';
    $styleLabel = $estSombre
        ? 'display:block;font-size:13px;color:#9FB3CC;font-weight:600;margin-bottom:6px;'
        : 'display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;';
    $couleurTexteOptionnel = $estSombre ? '#6E84A3' : '#9AA6B6';

    // Cette instance doit-elle se rouvrir (modale) / se rafficher sur la
    // bonne etape apres une erreur de validation la concernant ?
    $champsTerrain = ['origine', 'nom', 'prenom', 'telephone', 'email', 'commune', 'adresse', 'reference_cadastrale', 'surface', 'largeur_facade', 'message', 'photos'];
    $origineCorrespond = old('origine') === $origine;
    $doitRouvrir = $origineCorrespond && $errors->hasAny($champsTerrain);
    $champsEtape1 = ['nom', 'prenom', 'telephone', 'email', 'commune'];
    $champsEtape2 = ['adresse', 'reference_cadastrale', 'surface', 'largeur_facade', 'message', 'photos'];
    // Etape affichee a la (re)ouverture : etape 2 UNIQUEMENT si CETTE instance
    // (meme origine) a une erreur de validation sur un champ de l'etape 2 sans
    // erreur a l'etape 1. Sinon etape 1 -> c'est le cas normal, y compris au
    // premier affichage sans aucune erreur (corrige le bug ou le formulaire
    // s'ouvrait directement sur l'etape 2).
    $etapeAvecErreur = ($origineCorrespond && $errors->hasAny($champsEtape2) && ! $errors->hasAny($champsEtape1)) ? 2 : 1;

    // Succes : source PRIORITAIRE = session('succes_origine'), flashee par
    // LeadTerrainController avec l'origine reelle du lead cree (fiable, ne
    // depend pas de old() qui n'a de sens qu'apres une erreur). A defaut
    // (session absente, ex: appel direct ou ancienne session), repli sur la
    // prop succesParDefaut pour rester robuste.
    $succesOrigineCorrespond = session('succes_origine') === $origine;
    $doitAfficherSucces = session('succes')
        && (session('succes_origine') !== null ? $succesOrigineCorrespond : (bool) $succesParDefaut);
@endphp

<div
    id="formulaire-terrain-{{ $idInstance }}"
    data-etape-erreur="{{ $etapeAvecErreur }}"
    @if ($estModale)
        data-modale-lead
        data-type-modale="terrain-{{ $idInstance }}"
        data-rouvrir="{{ $doitRouvrir || $doitAfficherSucces ? '1' : '0' }}"
        class="biome-modale-lead"
        style="position:fixed;inset:0;z-index:70;background:rgba(14,36,64,.55);display:none;align-items:center;justify-content:center;padding:24px;"
    @endif
>
    <div @if ($estModale) class="biome-modale-lead__boite" style="background:#fff;border-radius:18px;max-width:560px;width:100%;padding:32px;box-shadow:0 30px 70px rgba(14,36,64,.4);max-height:90vh;overflow-y:auto;" @endif>

        @if ($doitAfficherSucces)
            {{-- Ecran de confirmation, fidele au bloc "submitted"/"terrainSent" de la maquette --}}
            <div style="text-align:center;padding:14px 0 4px;{{ $estSombre ? 'background:rgba(46,123,228,.16);border:1px solid rgba(127,176,238,.4);border-radius:14px;padding:32px;' : ($estModale ? '' : 'background:#EAF1FB;border:1px solid #C9DBF3;border-radius:14px;padding:36px;') }}">
                <span style="width:62px;height:62px;border-radius:50%;background:var(--couleur-bleu-principal);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;">
                    <svg width="30" height="30" 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>
                <h3 style="font-family:var(--police-titres);font-size:21px;font-weight:700;color:{{ $estSombre ? '#fff' : 'var(--couleur-texte-fonce)' }};margin:0 0 8px;">Demande envoy&eacute;e !</h3>
                <p style="font-size:15px;color:{{ $estSombre ? '#C3D2E6' : '#52617A' }};margin:0 0 22px;line-height:1.55;">{{ session('succes') }}</p>
                @if ($estModale)
                    <button type="button" data-ferme-modale-lead style="background:var(--couleur-texte-fonce);color:#fff;border:none;border-radius:var(--rayon-bouton-grand);height:48px;padding:0 28px;font-family:var(--police-titres);font-size:15px;font-weight:600;cursor:pointer;">Fermer</button>
                @endif
            </div>
        @else
            @if ($estModale)
                <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;">
                    <div style="display:flex;align-items:center;gap:10px;flex:1;">
                        <span data-libelle-etape style="font-size:13px;font-weight:700;color:#7A8699;">&Eacute;tape 1 sur 2</span>
                        <div style="flex:1;height:5px;background:#EAEFF5;border-radius:3px;overflow:hidden;max-width:160px;">
                            <div data-barre-progression style="height:100%;width:50%;background:var(--couleur-bleu-principal);transition:width var(--transition-lente);"></div>
                        </div>
                    </div>
                    <button type="button" data-ferme-modale-lead aria-label="Fermer la fenetre" style="border:none;background:#F1F5FA;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:20px;color:#52617A;line-height:1;flex:none;">&times;</button>
                </div>
            @elseif ($estSombre)
                <h2 style="font-family:var(--police-titres);font-size:28px;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-.5px;">Parlez-nous de votre terrain</h2>
                <p style="font-size:15.5px;color:#B3C2D6;margin:0 0 24px;">Recevez une premi&egrave;re analyse gratuite et confidentielle.</p>
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
                    <span data-libelle-etape style="font-size:13px;font-weight:700;color:#7FB0EE;">&Eacute;tape 1 sur 2</span>
                    <div style="flex:1;height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;">
                        <div data-barre-progression style="height:100%;width:50%;background:var(--couleur-bleu-principal);transition:width var(--transition-lente);"></div>
                    </div>
                </div>
            @endif

            <form
                data-formulaire-terrain-etapes
                action="{{ route('leads.terrain.store') }}"
                data-url-partiel="{{ route('leads.terrain.partiel') }}"
                method="POST"
                enctype="multipart/form-data"
                novalidate
            >
                @csrf
                        <x-anti-spam />
                <input type="hidden" name="origine" value="{{ $origine }}">
                {{-- Rempli en JS avec l'id du lead cree a l'etape 1 (enregistrement
                     partiel) : la soumission finale complete alors la meme ligne.
                     old() conserve le lien apres une erreur de validation du POST final. --}}
                <input type="hidden" name="lead_partiel_id" value="{{ old('lead_partiel_id') }}">


                {{-- ETAPE 1 : coordonnees --}}
                <div data-etape="1">
                    @if (! $estModale && ! $estSombre)
                        <p style="font-size:14.5px;color:#52617A;margin:0 0 16px;line-height:1.6;"><strong style="color:var(--couleur-texte-fonce);">&Eacute;tape 1 / 2 &mdash;</strong> Compl&eacute;tez vos coordonn&eacute;es. Un membre de notre &eacute;quipe vous recontactera rapidement, sans engagement.</p>
                    @elseif ($estModale)
                        <h3 style="font-family:var(--police-titres);font-size:22px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 10px;letter-spacing:-.4px;">&#127793; Faites analyser votre terrain gratuitement</h3>
                        <p style="font-size:14.5px;color:#52617A;margin:0 0 20px;line-height:1.6;">Vous poss&eacute;dez un terrain et vous souhaitez savoir s'il pourrait int&eacute;resser Biome ? Compl&eacute;tez simplement vos coordonn&eacute;es. Un membre de notre &eacute;quipe vous recontactera rapidement, sans engagement.</p>
                    @endif

                    <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:{{ $estModale ? '13px' : '14px' }};">
                        <div>
                            <label for="{{ $idInstance }}-nom" style="{{ $styleLabel }}">Nom *</label>
                            <input type="text" id="{{ $idInstance }}-nom" name="nom" value="{{ old('nom') }}" placeholder="Votre nom" required style="{{ $styleChamp }}{{ $origineCorrespond && $errors->has('nom') ? 'border-color:#D64545;' : '' }}">
                            @if ($origineCorrespond)
                                @error('nom')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                        <div>
                            <label for="{{ $idInstance }}-prenom" style="{{ $styleLabel }}">Pr&eacute;nom *</label>
                            <input type="text" id="{{ $idInstance }}-prenom" name="prenom" value="{{ old('prenom') }}" placeholder="Votre pr&eacute;nom" required style="{{ $styleChamp }}{{ $origineCorrespond && $errors->has('prenom') ? 'border-color:#D64545;' : '' }}">
                            @if ($origineCorrespond)
                                @error('prenom')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                        <div>
                            <label for="{{ $idInstance }}-telephone" style="{{ $styleLabel }}">T&eacute;l&eacute;phone *</label>
                            <input type="tel" id="{{ $idInstance }}-telephone" name="telephone" value="{{ old('telephone') }}" placeholder="Votre t&eacute;l&eacute;phone" required style="{{ $styleChamp }}{{ $origineCorrespond && $errors->has('telephone') ? 'border-color:#D64545;' : '' }}">
                            @if ($origineCorrespond)
                                @error('telephone')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                        <div>
                            <label for="{{ $idInstance }}-email" style="{{ $styleLabel }}">Adresse e-mail *</label>
                            <input type="email" id="{{ $idInstance }}-email" name="email" value="{{ old('email') }}" placeholder="Votre e-mail" required style="{{ $styleChamp }}{{ $origineCorrespond && $errors->has('email') ? 'border-color:#D64545;' : '' }}">
                            @if ($origineCorrespond)
                                @error('email')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                        <div style="grid-column:1/-1;">
                            <label for="{{ $idInstance }}-commune" style="{{ $styleLabel }}">Commune o&ugrave; se situe le terrain *</label>
                            <input type="text" id="{{ $idInstance }}-commune" name="commune" value="{{ old('commune') }}" placeholder="Ville ou commune" required style="{{ $styleChamp }}{{ $origineCorrespond && $errors->has('commune') ? 'border-color:#D64545;' : '' }}">
                            @if ($origineCorrespond)
                                @error('commune')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                    </div>

                    <button type="button" data-etape-suivante style="margin-top:{{ $estModale ? '20px' : '18px' }};width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;height:{{ $estModale ? '52px' : '54px' }};font-family:var(--police-titres);font-size:16px;font-weight:600;cursor:pointer;">
                        Faire analyser mon terrain
                        <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>
                </div>

                {{-- ETAPE 2 : details du terrain --}}
                <div data-etape="2" style="display:none;">
                    @if (! $estModale && ! $estSombre)
                        <p style="font-size:14.5px;color:#52617A;margin:0 0 16px;line-height:1.6;"><strong style="color:var(--couleur-texte-fonce);">&Eacute;tape 2 / 2 &mdash;</strong> Ces informations nous permettront d'&eacute;valuer plus rapidement le potentiel de votre terrain.</p>
                    @elseif ($estModale)
                        <h3 style="font-family:var(--police-titres);font-size:22px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 10px;letter-spacing:-.4px;">Parlez-nous de votre terrain</h3>
                        <p style="font-size:14.5px;color:#52617A;margin:0 0 20px;line-height:1.6;">Ces quelques informations nous permettront d'&eacute;valuer plus rapidement le potentiel de votre terrain.</p>
                    @endif

                    <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:{{ $estModale ? '13px' : '14px' }};">
                        <div style="grid-column:1/-1;">
                            <label for="{{ $idInstance }}-adresse" style="{{ $styleLabel }}">Adresse compl&egrave;te du terrain *</label>
                            <input type="text" id="{{ $idInstance }}-adresse" name="adresse" value="{{ old('adresse') }}" placeholder="Rue, num&eacute;ro, code postal, commune" required style="{{ $styleChamp }}{{ $origineCorrespond && $errors->has('adresse') ? 'border-color:#D64545;' : '' }}">
                            @if ($origineCorrespond)
                                @error('adresse')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                        <div>
                            <label for="{{ $idInstance }}-cadastre" style="{{ $styleLabel }}">R&eacute;f&eacute;rence cadastrale</label>
                            <input type="text" id="{{ $idInstance }}-cadastre" name="reference_cadastrale" value="{{ old('reference_cadastrale') }}" placeholder="Ex : Div. 1, Sect. A, n&deg; 123" style="{{ $styleChamp }}">
                        </div>
                        <div>
                            <label for="{{ $idInstance }}-surface" style="{{ $styleLabel }}">Surface approximative <span style="color:{{ $couleurTexteOptionnel }};font-weight:500;">(optionnel)</span></label>
                            <input type="text" id="{{ $idInstance }}-surface" name="surface" value="{{ old('surface') }}" placeholder="Ex : 800 m&sup2;" style="{{ $styleChamp }}">
                        </div>
                        <div style="grid-column:1/-1;">
                            <label for="{{ $idInstance }}-largeur" style="{{ $styleLabel }}">Largeur de fa&ccedil;ade <span style="color:{{ $couleurTexteOptionnel }};font-weight:500;">(optionnel)</span></label>
                            <input type="text" id="{{ $idInstance }}-largeur" name="largeur_facade" value="{{ old('largeur_facade') }}" placeholder="Ex : 18 m" style="{{ $styleChamp }}">
                        </div>
                        <div style="grid-column:1/-1;">
                            <label for="{{ $idInstance }}-message" style="{{ $styleLabel }}">Informations compl&eacute;mentaires</label>
                            <textarea id="{{ $idInstance }}-message" name="message" placeholder="Acc&egrave;s, particularit&eacute;s, contraintes &eacute;ventuelles, etc." style="{{ $styleChamp }}height:{{ $estModale ? '84px' : '90px' }};padding-top:11px;padding-bottom:11px;resize:none;">{{ old('message') }}</textarea>
                        </div>
                        <div style="grid-column:1/-1;">
                            <label for="{{ $idInstance }}-photos" style="{{ $styleLabel }}">Ajouter des photos du terrain <span style="color:{{ $couleurTexteOptionnel }};font-weight:500;">(optionnel)</span></label>
                            <input type="file" id="{{ $idInstance }}-photos" name="photos[]" accept=".jpg,.jpeg,.png" multiple style="width:100%;box-sizing:border-box;border-radius:{{ $estModale ? '10px' : '9px' }};border:1.5px dashed {{ $estSombre ? 'rgba(255,255,255,.3)' : '#CBD8E8' }};padding:11px;font-family:var(--police-texte);font-size:13px;{{ $estSombre ? 'color:#fff;background:transparent;' : '' }}">
                            <div style="font-size:11px;color:{{ $estSombre ? '#9FB3CC' : '#9AA6B6' }};margin-top:5px;">Formats accept&eacute;s : JPG, PNG (5 Mo max par photo, 10 photos max)</div>
                            @if ($origineCorrespond)
                                @error('photos')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                                @error('photos.*')<span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>@enderror
                            @endif
                        </div>
                    </div>

                    <div style="display:flex;gap:12px;margin-top:{{ $estModale ? '20px' : '18px' }};">
                        <button type="button" data-etape-precedente style="background:{{ $estSombre ? 'rgba(255,255,255,.12)' : '#F1F5FA' }};color:{{ $estSombre ? '#fff' : 'var(--couleur-texte-fonce)' }};border:none;border-radius:10px;height:{{ $estModale ? '52px' : '54px' }};padding:0 22px;font-family:var(--police-titres);font-size:15px;font-weight:600;cursor:pointer;">&larr; Retour</button>
                        <button type="submit" style="flex:1;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;height:{{ $estModale ? '52px' : '54px' }};font-family:var(--police-titres);font-size:16px;font-weight:600;cursor:pointer;">
                            Envoyer ma demande d'analyse
                        </button>
                    </div>
                </div>
            </form>
        @endif
    </div>
</div>