{{--
    Page Offres (liste) — portage fidele de maquettes/Offres.dc.html.

    Donnees dynamiques (fournies par OffreEmploiController@index) :
    - $offres : Collection des offres actives, triees par ordre desc puis date

    Tri / compteur : la maquette propose un select "Trier par : Plus recentes
    / Ordre alphabetique" pilote en JS cote client (pas de rechargement).
    Conformement a la consigne "pas de JS pour la logique metier hors modale",
    ce tri est porte en JS vanilla LEGER, purement cosmetique (reordonne les
    lignes deja presentes dans le DOM, aucune requete serveur, aucune donnee
    chargee dynamiquement) : comportement equivalent a la maquette sans
    dependance a un endpoint supplementaire. Voir data-tri-offres ci-dessous.

    Badge "Nouveau" : $offre->nouveau (bool).

    Modale de candidature : partagee via x-modale-candidature, sans
    offre_emploi_id (candidature spontanee, ouverte depuis le bloc lateral et
    la bande basse de page).
--}}
@extends('layouts.site', ['active' => 'emplois'])

@section('titre', "Offres d'emploi - Biome Constructions")

@section('contenu')
    <x-sticky-actions emplois />

    <x-modale-candidature />

    {{-- HERO --}}
    <section style="position:relative;background:var(--couleur-bleu-fonce);overflow:hidden;">
        @php $imgHero = \App\Support\MediaSite::url($contenu->contenu('hero.image')); @endphp
        @if ($imgHero)
            <img src="{{ $imgHero }}" alt="L'equipe Biome" style="position:absolute;right:0;top:0;width:58%;height:100%;object-fit:cover;display:block;">
        @else
            <div style="position:absolute;right:0;top:0;width:58%;height:100%;display:flex;align-items:center;justify-content:center;background:#16335A;color:#7E92AE;font-size:14px;">L'&eacute;quipe Biome sur chantier</div>
        @endif
        <div style="position:absolute;inset:0;background:linear-gradient(90deg,#0E2440 38%,rgba(14,36,64,.6) 58%,rgba(14,36,64,.1) 100%);"></div>
        <div class="biome-conteneur" style="position:relative;max-width:var(--largeur-conteneur);margin:0 auto;padding:34px 32px 56px;">
            <div style="display:flex;align-items:center;gap:9px;font-size:13.5px;color:#9FC2EE;font-weight:600;margin-bottom:26px;">
                <a href="{{ route('accueil') }}" style="color:#9FC2EE;text-decoration:none;">Accueil</a><span>&rsaquo;</span>
                <a href="{{ route('recrutement') }}" style="color:#9FC2EE;text-decoration:none;">Emploi</a><span>&rsaquo;</span>
                <span style="color:#fff;">Nos offres</span>
            </div>
            <div style="max-width:520px;">
                <h1 class="biome-titre-hero" style="font-family:var(--police-titres);font-size:48px;font-weight:800;color:#fff;margin:0 0 16px;letter-spacing:-1px;line-height:1.05;">Nos offres d'emploi</h1>
                <p style="font-size:17px;line-height:1.6;color:#C3D2E6;margin:0;">Rejoignez Biome Constructions et contribuez &agrave; la r&eacute;alisation de projets r&eacute;sidentiels de qualit&eacute; partout en Wallonie.</p>
            </div>
        </div>
    </section>

    {{-- BODY --}}
    <section class="biome-conteneur biome-offres-grille-body" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:40px 32px 56px;display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start;">
        <div>
            <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;">
                <span style="font-family:var(--police-titres);font-size:16px;font-weight:700;color:var(--couleur-texte-fonce);">{{ $offres->count() }} offre(s) disponible(s)</span>
                <div style="display:flex;align-items:center;gap:10px;">
                    <label for="tri-offres" style="font-size:13.5px;color:var(--couleur-texte-fonce);font-weight:600;">Trier par :</label>
                    <select id="tri-offres" data-tri-offres class="biome-offres-select-tri" style="height:42px;border:1.5px solid #DCE3EC;border-radius:9px;padding:0 12px;font-family:var(--police-texte);font-size:14px;color:var(--couleur-texte-fonce);background:#fff;cursor:pointer;outline:none;">
                        <option value="recent">Plus r&eacute;centes</option>
                        <option value="title">Ordre alphab&eacute;tique</option>
                    </select>
                </div>
            </div>

            <div data-liste-offres style="display:flex;flex-direction:column;gap:18px;">
                @forelse ($offres as $offre)
                    <div data-offre-titre="{{ $offre->titre }}" data-offre-ordre="{{ $offre->ordre }}" class="biome-offres-carte" style="background:#fff;border:1px solid var(--couleur-bordure-carte);border-radius:var(--rayon-carte);padding:24px;display:flex;align-items:center;gap:22px;box-shadow:var(--ombre-carte);">
                        <div style="width:84px;height:84px;flex:none;border-radius:50%;background:#EAF1FB;display:flex;align-items:center;justify-content:center;color:var(--couleur-bleu-principal);font-family:var(--police-titres);font-weight:800;font-size:22px;">{{ mb_substr($offre->titre, 0, 1) }}</div>
                        <div class="biome-offres-carte__infos" style="flex:1;min-width:0;">
                            <div style="display:flex;align-items:center;gap:11px;margin-bottom:9px;flex-wrap:wrap;">
                                <h3 style="font-family:var(--police-titres);font-size:19px;font-weight:700;color:var(--couleur-texte-fonce);margin:0;">{{ $offre->titre }}</h3>
                                @if ($offre->nouveau)
                                    <span style="font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--couleur-bleu-principal);border:1.5px solid var(--couleur-bleu-principal);padding:3px 8px;border-radius:var(--rayon-badge);">Nouveau</span>
                                @endif
                            </div>
                            <div style="display:flex;align-items:center;gap:16px;color:var(--couleur-texte-fonce);font-size:13px;margin-bottom:9px;flex-wrap:wrap;">
                                <span style="display:flex;align-items:center;gap:6px;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2" aria-hidden="true"><path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z"/><circle cx="12" cy="10" r="2.2"/></svg>{{ $offre->lieu }}</span>
                                <span style="width:1px;height:13px;background:#D6DEE8;"></span>
                                <span style="display:flex;align-items:center;gap:6px;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="2" aria-hidden="true"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>{{ $offre->type_contrat }} &mdash; {{ $offre->temps_travail }}</span>
                            </div>
                            <p style="font-size:14px;line-height:1.55;color:var(--couleur-texte-fonce);margin:0;max-width:480px;">{{ $offre->description }}</p>
                        </div>
                        <div class="biome-offres-carte__action" style="display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none;">
                            <a href="{{ route('offre.show', ['id' => $offre->slug]) }}" style="display:inline-flex;align-items:center;gap:8px;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:9px;padding:12px 22px;font-family:var(--police-titres);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;">
                                Voir l'offre
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                            </a>
                        </div>
                    </div>
                @empty
                    <p style="font-size:15px;color:#5C6B7E;">Aucune offre disponible pour le moment.</p>
                @endforelse
            </div>
        </div>

        {{-- SIDE CARD --}}
        <aside class="biome-desactiver-sticky-mobile" style="position:sticky;top:130px;">
            <div style="background:var(--couleur-fond-survol-bleu-clair);border-radius:var(--rayon-carte-grande);padding:30px;text-align:center;">
                <span style="width:72px;height:72px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 8px 20px rgba(18,42,74,.1);">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.9" aria-hidden="true"><path d="m4 12 16-8-6 16-2.5-6.5L4 12Z"/></svg>
                </span>
                <h3 style="font-family:var(--police-titres);font-size:19px;font-weight:700;color:var(--couleur-texte-fonce);margin:0 0 10px;line-height:1.3;">Aucune offre ne correspond &agrave; votre profil ?</h3>
                <p style="font-size:14px;color:var(--couleur-texte-fonce);margin:0 0 20px;line-height:1.6;">Envoyez-nous votre candidature spontan&eacute;e. Nous sommes toujours &agrave; la recherche de talents motiv&eacute;s !</p>
                <button type="button" data-ouvre-candidature style="width:100%;background:var(--couleur-bleu-principal);color:#fff;border:none;border-radius:10px;height:50px;font-family:var(--police-titres);font-size:15px;font-weight:600;cursor:pointer;">Candidature spontan&eacute;e</button>
            </div>
        </aside>
    </section>

    {{-- BOTTOM BAND --}}
    <section class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:0 32px 64px;">
        <div style="background:var(--couleur-fond-survol-bleu-clair);border-radius:var(--rayon-carte-tres-grande);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:20px;">
                <span style="width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 20px rgba(18,42,74,.08);">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.9" aria-hidden="true"><path d="M14.5 9.5 12 12l-2.5-2.5a2.1 2.1 0 0 1 3-3l.5.5.5-.5a2.1 2.1 0 0 1 3 3L14.5 12M7 13l-3 3 4 4 3-3"/></svg>
                </span>
                <div>
                    <h2 style="font-family:var(--police-titres);font-size:24px;font-weight:800;color:var(--couleur-texte-fonce);margin:0 0 5px;letter-spacing:-.5px;">Vous souhaitez rejoindre Biome ?</h2>
                    <p style="font-size:15px;color:var(--couleur-texte-fonce);margin:0;">Consultez nos offres et postulez en ligne en quelques clics.</p>
                </div>
            </div>
            <div style="display:flex;gap:13px;flex-wrap:wrap;">
                <a href="{{ route('recrutement') }}" style="display:inline-flex;align-items:center;gap:9px;background:var(--couleur-bleu-principal);color:#fff;font-family:var(--police-titres);font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--rayon-bouton-grand);text-decoration:none;">
                    Voir toutes les offres
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
                <button type="button" data-ouvre-candidature style="display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--couleur-texte-fonce);border:1.5px solid var(--couleur-bordure-bouton-secondaire);font-family:var(--police-titres);font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--rayon-bouton-grand);cursor:pointer;">
                    Candidature spontan&eacute;e
                    <svg width="17" height="17" 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>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        // Tri cosmetique de la liste des offres (Plus recentes / Ordre alphabetique).
        // Pas de rechargement de page, pas de requete serveur : reordonne les
        // blocs deja presents dans le DOM, a l'identique de la maquette (state
        // local "sort" dans DCLogic). Reste minimal et isole dans cette page.
        (function () {
            var selecteur = document.querySelector('[data-tri-offres]');
            var conteneur = document.querySelector('[data-liste-offres]');

            if (!selecteur || !conteneur) {
                return;
            }

            selecteur.addEventListener('change', function () {
                var lignes = Array.prototype.slice.call(conteneur.children);

                lignes.sort(function (a, b) {
                    if (selecteur.value === 'title') {
                        return a.getAttribute('data-offre-titre').localeCompare(b.getAttribute('data-offre-titre'));
                    }

                    return Number(b.getAttribute('data-offre-ordre')) - Number(a.getAttribute('data-offre-ordre'));
                });

                lignes.forEach(function (ligne) {
                    conteneur.appendChild(ligne);
                });
            });
        })();
    </script>
@endpush