{{--
    Composant ModaleCandidature — porte de la modale "candidature" presente
    dans maquettes/Offres.dc.html, maquettes/Offre.dc.html et
    maquettes/Recrutement.dc.html (structure identique dans les 3 pages).

    Formulaire en 2 etapes cote visuel (JS vanilla, public/js/site.js gere le
    show/hide), mais soumission classique unique en POST vers
    route('leads.candidature.store') : tous les champs des 2 etapes sont
    presents dans le DOM en permanence, seule leur visibilite change. Ainsi
    aucune donnee n'est perdue et la validation Laravel s'applique a l'unique
    soumission.

    Champs alignes sur app/Http/Requests/StoreCandidatureRequest.php :
    offre_emploi_id (nullable), nom_prenom, telephone, email, poste_souhaite,
    cv (fichier requis), lettre_motivation (fichier optionnel), disponibilite,
    annees_experience, message, consentement_rgpd.

    Props :
    - offreEmploiId (int|null, defaut null) : pre-remplit le champ cache
      offre_emploi_id pour une candidature liee a une offre precise (page
      Offre.dc.html). Laisse a null pour une candidature spontanee
      (Offres.dc.html liste, Recrutement.dc.html).
    - posteSouhaite (string|null, defaut null) : pre-remplit le champ texte
      "poste souhaite" (ex: titre de l'offre consultee).

    Ouverture :
    - au clic sur tout element portant l'attribut data-ouvre-candidature
      (voir public/js/site.js) ;
    - automatiquement si la page est rechargee avec des erreurs de validation
      portant sur les champs de ce formulaire (voir $errors plus bas), pour
      ne pas perdre l'utilisateur apres un POST invalide ;
    - automatiquement si l'ancre #postuler est presente dans l'URL au
      chargement (equivalent du on-apply de la maquette).
--}}
@props([
    'offreEmploiId' => null,
    'posteSouhaite' => null,
])

@php
    // Champs proteges par ce formulaire (voir StoreCandidatureRequest) : sert
    // a determiner si la modale doit se rouvrir automatiquement apres un POST
    // invalide (evite de rouvrir la modale pour une erreur d'un AUTRE
    // formulaire de la page, ex: rappel ou contact).
    $champsEtape1 = ['nom_prenom', 'telephone', 'email', 'poste_souhaite'];
    $champsEtape2 = ['cv', 'lettre_motivation', 'disponibilite', 'annees_experience', 'message', 'consentement_rgpd'];
    // Rouvre la modale automatiquement soit apres une erreur de validation
    // portant sur un de ses champs, soit juste apres un envoi reussi (pour
    // afficher l'ecran de confirmation "Candidature envoyee !", $doitRouvrir
    // vaut alors true grace a session('succes')).
    $doitRouvrir = $errors->hasAny([...$champsEtape1, ...$champsEtape2]) || session()->has('succes');
    $etapeAvecErreur = $errors->hasAny($champsEtape2) ? 2 : 1;
@endphp

<div
    id="modale-candidature"
    data-modale-candidature
    data-rouvrir="{{ $doitRouvrir ? '1' : '0' }}"
    data-etape-erreur="{{ $etapeAvecErreur }}"
    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;"
>
    <div 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;">

        {{-- Ecran de confirmation (flash session apres succes), reproduit tel quel --}}
        @if (session('succes'))
            <div data-etape-confirmation style="text-align:center;padding:14px 0 4px;">
                <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:var(--couleur-texte-fonce);margin:0 0 8px;">Candidature envoy&eacute;e !</h3>
                <p style="font-size:15px;color:#52617A;margin:0 0 22px;line-height:1.55;">{{ session('succes') }}</p>
                <button type="button" data-ferme-candidature 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>
            </div>
        @else
            <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-candidature aria-label="Fermer la fenetre de candidature" 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>

            <form
                action="{{ route('leads.candidature.store') }}"
                method="POST"
                enctype="multipart/form-data"
                novalidate
            >
                @csrf
                        <x-anti-spam />
                <input type="hidden" name="offre_emploi_id" value="{{ old('offre_emploi_id', $offreEmploiId) }}">

                {{-- ETAPE 1 : coordonnees --}}
                <div data-etape="1">
                    <h3 style="font-family:var(--police-titres);font-size:23px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 10px;letter-spacing:-.4px;">Postulez en moins de 30 secondes</h3>
                    <p style="font-size:14.5px;color:#52617A;margin:0 0 20px;line-height:1.6;">Laissez-nous vos coordonn&eacute;es. Vous pourrez ensuite ajouter votre CV et quelques informations sur votre profil.</p>

                    <div style="display:flex;flex-direction:column;gap:14px;">
                        <div>
                            <label for="candidature-nom" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Nom et pr&eacute;nom *</label>
                            <input type="text" id="candidature-nom" name="nom_prenom" value="{{ old('nom_prenom') }}" placeholder="Votre nom et pr&eacute;nom" required style="width:100%;box-sizing:border-box;height:48px;border:1.5px solid {{ $errors->has('nom_prenom') ? '#D64545' : '#DCE3EC' }};border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;">
                            @error('nom_prenom')
                                <span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label for="candidature-telephone" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">T&eacute;l&eacute;phone *</label>
                            <input type="tel" id="candidature-telephone" name="telephone" value="{{ old('telephone') }}" placeholder="Votre num&eacute;ro de t&eacute;l&eacute;phone" required style="width:100%;box-sizing:border-box;height:48px;border:1.5px solid {{ $errors->has('telephone') ? '#D64545' : '#DCE3EC' }};border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;">
                            @error('telephone')
                                <span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label for="candidature-email" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">E-mail *</label>
                            <input type="email" id="candidature-email" name="email" value="{{ old('email') }}" placeholder="exemple@email.com" required style="width:100%;box-sizing:border-box;height:48px;border:1.5px solid {{ $errors->has('email') ? '#D64545' : '#DCE3EC' }};border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;">
                            @error('email')
                                <span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label for="candidature-poste" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Poste souhait&eacute; *</label>
                            <input type="text" id="candidature-poste" name="poste_souhaite" value="{{ old('poste_souhaite', $posteSouhaite) }}" placeholder="Intitul&eacute; du poste souhait&eacute;" required style="width:100%;box-sizing:border-box;height:48px;border:1.5px solid {{ $errors->has('poste_souhaite') ? '#D64545' : '#DCE3EC' }};border-radius:9px;padding:0 14px;font-family:var(--police-texte);font-size:15px;outline:none;">
                            @error('poste_souhaite')
                                <span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <button type="button" data-etape-suivante style="margin-top:20px;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:52px;font-family:var(--police-titres);font-size:16px;font-weight:600;cursor:pointer;">
                        Continuer ma candidature
                        <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 style="display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:#9AA6B6;font-size:12.5px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9AA6B6" stroke-width="2" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
                        Vos informations sont enregistr&eacute;es automatiquement.
                    </div>
                </div>

                {{-- ETAPE 2 : profil, fichiers, message --}}
                <div data-etape="2" style="display:none;">
                    <div style="font-size:12.5px;font-weight:700;color:var(--couleur-bleu-principal);margin-bottom:6px;">&Eacute;tape 2 &mdash; Parlez-nous de vous</div>
                    <h3 style="font-family:var(--police-titres);font-size:23px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 10px;letter-spacing:-.4px;">Finalisez votre candidature</h3>
                    <p style="font-size:14.5px;color:#52617A;margin:0 0 20px;line-height:1.6;">Quelques informations suppl&eacute;mentaires nous permettront d'&eacute;tudier votre candidature plus rapidement.</p>

                    <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;">
                        <div>
                            <label for="candidature-cv" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">D&eacute;posez votre CV *</label>
                            <input type="file" id="candidature-cv" name="cv" accept=".pdf,.doc,.docx" required style="width:100%;box-sizing:border-box;border-radius:10px;border:1.5px dashed {{ $errors->has('cv') ? '#D64545' : '#CBD8E8' }};padding:11px;font-family:var(--police-texte);font-size:13px;">
                            <div style="font-size:11px;color:#9AA6B6;margin-top:5px;">Formats accept&eacute;s : PDF, DOC, DOCX (5 Mo max)</div>
                            @error('cv')
                                <span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>
                            @enderror
                        </div>
                        <div>
                            <label for="candidature-lettre" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Lettre de motivation <span style="color:#9AA6B6;font-weight:500;">(optionnel)</span></label>
                            <input type="file" id="candidature-lettre" name="lettre_motivation" accept=".pdf,.doc,.docx" style="width:100%;box-sizing:border-box;border-radius:10px;border:1.5px dashed {{ $errors->has('lettre_motivation') ? '#D64545' : '#CBD8E8' }};padding:11px;font-family:var(--police-texte);font-size:13px;">
                            @error('lettre_motivation')
                                <span style="display:block;color:#D64545;font-size:12.5px;margin-top:5px;">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="biome-grille-2" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;">
                        <div>
                            <label for="candidature-dispo" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Disponibilit&eacute;</label>
                            <select id="candidature-dispo" name="disponibilite" style="width:100%;box-sizing:border-box;height:48px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;font-family:var(--police-texte);font-size:15px;outline:none;background:#fff;color:var(--couleur-texte-fonce);cursor:pointer;">
                                <option value="" @selected(old('disponibilite') === null)>S&eacute;lectionnez</option>
                                <option @selected(old('disponibilite') === 'Immediatement')>Immediatement</option>
                                <option @selected(old('disponibilite') === "Dans moins d'un mois")>Dans moins d'un mois</option>
                                <option @selected(old('disponibilite') === 'Dans 1 a 3 mois')>Dans 1 a 3 mois</option>
                                <option @selected(old('disponibilite') === 'A convenir')>A convenir</option>
                            </select>
                        </div>
                        <div>
                            <label for="candidature-experience" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Ann&eacute;es d'exp&eacute;rience</label>
                            <select id="candidature-experience" name="annees_experience" style="width:100%;box-sizing:border-box;height:48px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;font-family:var(--police-texte);font-size:15px;outline:none;background:#fff;color:var(--couleur-texte-fonce);cursor:pointer;">
                                <option value="" @selected(old('annees_experience') === null)>S&eacute;lectionnez</option>
                                <option @selected(old('annees_experience') === 'Debutant')>Debutant</option>
                                <option @selected(old('annees_experience') === '1 a 3 ans')>1 a 3 ans</option>
                                <option @selected(old('annees_experience') === '3 a 5 ans')>3 a 5 ans</option>
                                <option @selected(old('annees_experience') === 'Plus de 5 ans')>Plus de 5 ans</option>
                            </select>
                        </div>
                    </div>

                    <div style="margin-bottom:16px;">
                        <label for="candidature-message" style="display:block;font-size:13px;color:var(--couleur-texte-fonce);font-weight:700;margin-bottom:6px;">Pourquoi souhaitez-vous rejoindre Biome ? <span style="color:#9AA6B6;font-weight:500;">(optionnel)</span></label>
                        <textarea id="candidature-message" name="message" placeholder="Quelques lignes suffisent pour nous expliquer votre motivation." style="width:100%;box-sizing:border-box;height:84px;border:1.5px solid #DCE3EC;border-radius:9px;padding:11px 13px;font-family:var(--police-texte);font-size:15px;outline:none;resize:none;">{{ old('message') }}</textarea>
                    </div>

                    <label for="candidature-consentement" style="display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#3D5573;cursor:pointer;margin-bottom:18px;">
                        <input type="checkbox" id="candidature-consentement" name="consentement_rgpd" value="1" @checked(old('consentement_rgpd')) required style="width:18px;height:18px;flex:none;margin-top:1px;">
                        J'accepte que Biome Constructions traite mes donn&eacute;es dans le cadre de ma candidature.
                    </label>
                    @error('consentement_rgpd')
                        <span style="display:block;color:#D64545;font-size:12.5px;margin:-12px 0 16px;">{{ $message }}</span>
                    @enderror

                    <div style="display:flex;gap:12px;">
                        <button type="button" data-etape-precedente style="background:#F1F5FA;color:var(--couleur-texte-fonce);border:none;border-radius:10px;height:52px;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:52px;font-family:var(--police-titres);font-size:16px;font-weight:600;cursor:pointer;">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m4 12 16-8-6 16-2.5-6.5L4 12Z"/></svg>
                            Envoyer ma candidature
                        </button>
                    </div>
                </div>
            </form>
        @endif
    </div>
</div>