<?php
    $theme = config('lcrh.theme');
    $privacyUrl = config('lcrh.privacy.url');
    $retention = config('lcrh.privacy.retention');
    $maxCvMb = config('lcrh.cv.max_mb');
?>



<?php $__env->startSection('content'); ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet">

    <style>
        .lcrh-careers{
            --paper:<?php echo e($theme['paper']); ?>; --ink:<?php echo e($theme['ink']); ?>; --muted:<?php echo e($theme['muted']); ?>;
            --line:<?php echo e($theme['line']); ?>; --card:<?php echo e($theme['card']); ?>; --accent:<?php echo e($theme['accent']); ?>;
            --accent2:<?php echo e($theme['accent2']); ?>; --radius:<?php echo e($theme['radius']); ?>;
            --display:'Fraunces',Georgia,serif; --body:'Instrument Sans',system-ui,sans-serif;
            font-family:var(--body); color:var(--ink);
            -webkit-font-smoothing:antialiased; line-height:1.55; box-sizing:border-box;
            width:100%;
            max-width:1400px;
            margin:0 auto;
        }
        .lcrh-careers *,.lcrh-careers *::before,.lcrh-careers *::after{box-sizing:border-box;}
        .lcrh-head{margin-bottom:clamp(24px,3vw,36px);padding-bottom:clamp(20px,3vw,30px);border-bottom:1px solid var(--line);}
        .lcrh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
        .lcrh-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);}
        .lcrh-title{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 14px;}
        .lcrh-title em{font-style:italic;color:var(--accent);}
        .lcrh-sub{font-size:clamp(1rem,2vw,1.12rem);color:var(--muted);max-width:54ch;margin:0;}
        .lcrh-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:clamp(24px,3vw,36px) 0 8px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(22,32,46,.04);}
        .lcrh-search{flex:1 1 240px;position:relative;}
        .lcrh-search svg,.lcrh-loc-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);}
        .lcrh-loc-wrap{flex:0 1 210px;position:relative;}
        .lcrh-suggestions{position:absolute;z-index:50;top:calc(100% + 6px);left:0;right:0;display:none;max-height:260px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 45px -25px rgba(0,0,0,.45);}
        .lcrh-suggestion{width:100%;display:block;padding:10px 12px;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;color:var(--ink);}
        .lcrh-suggestion:hover,.lcrh-suggestion.is-active{background:color-mix(in srgb,var(--accent) 8%,transparent);}
        .lcrh-suggestion strong{display:block;font-weight:600;}
        .lcrh-suggestion small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px;}
        .lcrh-input,.lcrh-select{width:100%;font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s;}
        .lcrh-input{padding-left:42px;}
        .lcrh-select{flex:0 1 200px;cursor:pointer;appearance:none;background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
        .lcrh-input:focus,.lcrh-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);}
        .lcrh-count{font-size:.9rem;color:var(--muted);margin:18px 2px 22px;}
        .lcrh-count b{color:var(--ink);font-weight:600;}
        .lcrh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;}
        .lcrh-card{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s;}
        .lcrh-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(22,32,46,.28);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}
        .lcrh-card::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--accent);opacity:0;transition:opacity .22s;}
        .lcrh-card:hover::after{opacity:1;}
        .lcrh-card-title{font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.22;letter-spacing:-.01em;margin:0;}
        .lcrh-badges{display:flex;flex-wrap:wrap;gap:8px;}
        .lcrh-badge{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:color-mix(in srgb,var(--accent) 92%,black);}
        .lcrh-badge.alt{background:color-mix(in srgb,var(--accent2) 13%,transparent);color:color-mix(in srgb,var(--accent2) 88%,black);}
        .lcrh-more{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
        .lcrh-empty{text-align:center;padding:64px 20px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);background:var(--card);}
        .lcrh-empty h3{font-family:var(--display);color:var(--ink);font-size:1.3rem;margin:0 0 6px;}
        .lcrh-modal{position:fixed;inset:0;z-index:9999;display:none;}
        .lcrh-modal.open{display:block;}
        .lcrh-overlay{position:absolute;inset:0;background:rgba(16,24,36,.55);backdrop-filter:blur(3px);}
        .lcrh-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(660px,calc(100vw - 32px));max-height:88vh;overflow:auto;background:var(--paper);border-radius:calc(var(--radius) + 4px);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);}
        .lcrh-dialog-head{position:sticky;top:0;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);padding:26px 30px 18px;border-bottom:1px solid var(--line);}
        .lcrh-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;}
        .lcrh-dialog-title{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.18;letter-spacing:-.01em;margin:0 44px 14px 0;}
        .lcrh-dialog-body{padding:22px 30px 30px;}
        .lcrh-desc{white-space:pre-line;font-size:.97rem;color:var(--ink);line-height:1.7;min-height:60px;}
        .lcrh-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem;padding:10px 0;}
        .lcrh-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 22px;}
        .lcrh-meta{padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;}
        .lcrh-meta span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:3px;}
        .lcrh-meta b{font-weight:600;font-size:.92rem;}
        .lcrh-cta{position:sticky;bottom:0;display:flex;gap:12px;padding:18px 30px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);}
        .lcrh-btn{font:inherit;font-weight:600;font-size:.96rem;border-radius:12px;padding:14px 22px;cursor:pointer;border:1px solid transparent;transition:transform .15s,filter .15s,background .15s;}
        .lcrh-btn-primary{background:var(--accent);color:#fff;flex:1;}
        .lcrh-btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
        .lcrh-form{display:none;}
        .lcrh-form.show{display:block;}
        .lcrh-field{margin-bottom:16px;}
        .lcrh-field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;}
        .lcrh-field .req{color:var(--accent2);}
        .lcrh-field input[type=text],.lcrh-field input[type=email],.lcrh-field input[type=tel],.lcrh-field textarea{width:100%;font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px;outline:none;}
        .lcrh-field textarea{min-height:96px;resize:vertical;}
        .lcrh-file{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px dashed var(--line);border-radius:11px;background:var(--card);cursor:pointer;}
        .lcrh-file input{display:none;}
        .lcrh-file-label{font-size:.9rem;color:var(--muted);}
        .lcrh-file-label b{color:var(--accent);font-weight:600;}
        .lcrh-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
        .lcrh-consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);margin:4px 0 20px;}
        .lcrh-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--accent);}
        .lcrh-consent a{color:var(--accent);}
        .lcrh-form-msg{font-size:.9rem;padding:11px 14px;border-radius:10px;margin-bottom:14px;display:none;}
        .lcrh-form-msg.err{display:block;background:#FCEDEA;color:#A3361F;}
        .lcrh-form-msg.ok{display:block;background:#EAF7EF;color:#14573E;}
        .lcrh-success{text-align:center;padding:30px 10px;display:none;}
        .lcrh-success.show{display:block;}
        .lcrh-success h3{font-family:var(--display);font-size:1.5rem;margin:0 0 8px;}
        .lcrh-success p{color:var(--muted);margin:0;}
        @media(max-width:560px){.lcrh-grid{grid-template-columns:1fr;}.lcrh-select{flex:1 1 100%;}.lcrh-dialog-head,.lcrh-dialog-body,.lcrh-cta{padding-left:20px;padding-right:20px;}}
        .container {
            padding: 0 !important;
        }
        @media(max-width:1450px) {
            .container {
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
        }
    </style>

    <div class="page-content">
        <section class="lcrh-careers container" id="lcrh-careers">
            <div class="flex flex-col gap-6">
                <h1 class="bordered text-black">Rejoignez les entreprises<br>qui <em>recrutent avec nous</em></h1>

                <div class="flex flex-col gap-3 md:text-xl">
                    <p>Découvrez les opportunités que nous accompagnons partout en France. <br/>Une offre vous correspond ? Postulez en quelques clics.</p>
                </div>
            </div>
            <div class="lcrh-filters">
                <div class="lcrh-search">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                    <input class="lcrh-input" id="lcrh-q" type="text" placeholder="Titre de poste, mot-clé…" autocomplete="off">
                </div>
                <div class="lcrh-loc-wrap">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                    <input class="lcrh-input" id="lcrh-loc" type="text" placeholder="Ville ou code postal" autocomplete="off">
                    <div class="lcrh-suggestions" id="lcrh-loc-suggestions"></div>
                </div>
                <select class="lcrh-select" id="lcrh-rad" title="Rayon autour de la ville" style="flex:0 1 120px;">
                    <option value="10">10 km</option>
                    <option value="25" selected>25 km</option>
                    <option value="50">50 km</option>
                    <option value="100">100 km</option>
                    <option value="200">200 km</option>
                </select>
                <select class="lcrh-select" id="lcrh-sal" title="Rémunération minimale" style="flex:0 1 150px;">
                    <option value="">Salaire min.</option>
                    <option value="25000">25 000 € +</option>
                    <option value="30000">30 000 € +</option>
                    <option value="35000">35 000 € +</option>
                    <option value="40000">40 000 € +</option>
                    <option value="45000">45 000 € +</option>
                </select>
            </div>

            <p class="lcrh-count"><b id="lcrh-n">0</b> offre<span id="lcrh-plural">s</span> en ligne</p>

            <div class="lcrh-grid" id="lcrh-grid">
                <div class="lcrh-empty" style="grid-column:1/-1;">
                    <h3>Chargement des offres…</h3>
                    <p>Les offres sont récupérées automatiquement.</p>
                </div>
            </div>

            <div class="lcrh-empty" id="lcrh-empty" style="display:none;">
                <h3>Aucune offre ne correspond</h3>
                <p>Essayez d'élargir votre recherche ou revenez bientôt — nos offres évoluent régulièrement.</p>
            </div>
        </section>
    </div>


    <div class="lcrh-modal" id="lcrh-modal">
        <div class="lcrh-overlay" data-close></div>
        <div class="lcrh-dialog lcrh-careers" role="dialog" aria-modal="true">
            <div class="lcrh-dialog-head">
                <button class="lcrh-close" data-close aria-label="Fermer">×</button>
                <h2 class="lcrh-dialog-title" id="lcrh-m-title"></h2>
                <div class="lcrh-badges" id="lcrh-m-badges"></div>
            </div>
            <div class="lcrh-dialog-body">
                <div id="lcrh-view-detail">
                    <div class="lcrh-meta-grid" id="lcrh-m-meta"></div>
                    <div class="lcrh-desc" id="lcrh-m-desc"></div>
                </div>
                <form class="lcrh-form" id="lcrh-form" enctype="multipart/form-data">
                    <?php echo csrf_field(); ?>
                    <div class="lcrh-form-msg" id="lcrh-msg"></div>
                    <input type="hidden" name="offer_title" id="lcrh-f-offer">
                    <input type="hidden" name="offer_location" id="lcrh-f-location">
                    <div class="lcrh-hp"><label>Ne pas remplir<input type="text" name="nice_field" tabindex="-1" autocomplete="off"></label></div>
                    <div class="lcrh-field"><label>Nom complet <span class="req">*</span></label><input type="text" name="fullname" required></div>
                    <div class="lcrh-field"><label>Email <span class="req">*</span></label><input type="email" name="email" required></div>
                    <div class="lcrh-field"><label>Téléphone</label><input type="tel" name="phone"></div>
                    <div class="lcrh-field"><label>CV <span class="req">*</span></label>
                        <label class="lcrh-file"><input type="file" name="cv" id="lcrh-cv" accept=".pdf,.doc,.docx" required>
                            <span class="lcrh-file-label" id="lcrh-cv-label"><b>Choisir un fichier</b> — PDF ou Word, max <?php echo e($maxCvMb); ?> Mo</span>
                        </label>
                    </div>
                    <div class="lcrh-field"><label>Message facultatif</label><textarea name="message" placeholder="Quelques mots sur votre motivation…"></textarea></div>
                    <label class="lcrh-consent"><input type="checkbox" name="accept" required>
                        <span>J'accepte que mes données et mon CV soient transmis à Le Cabinet RH pour le traitement de ma candidature, conservés <?php echo e($retention); ?> puis supprimés. <a href="<?php echo e($privacyUrl); ?>" target="_blank" rel="noopener">Politique de confidentialité</a>.</span>
                    </label>
                </form>
                <div class="lcrh-success" id="lcrh-success">
                    <h3>Candidature envoyée</h3>
                    <p>Merci ! Votre candidature a bien été transmise à notre équipe.</p>
                </div>
            </div>
            <div class="lcrh-cta" id="lcrh-cta"><button class="lcrh-btn lcrh-btn-primary" id="lcrh-apply-btn" type="button">Postuler à cette offre</button></div>
            <div class="lcrh-cta" id="lcrh-cta-form" style="display:none;">
                <button class="lcrh-btn lcrh-btn-ghost" id="lcrh-back-btn" type="button">Retour</button>
                <button class="lcrh-btn lcrh-btn-primary" id="lcrh-send-btn" type="submit" form="lcrh-form">Envoyer ma candidature</button>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const endpoints = {
                offers: <?php echo json_encode(route('careers.offers'), 15, 512) ?>,
                detail: <?php echo json_encode(route('careers.detail', ['id' => '__ID__']), 512) ?>,
                apply: <?php echo json_encode(route('careers.apply'), 15, 512) ?>,
            };

            console.log('[LCRH endpoints]', endpoints);

            const csrfToken = <?php echo json_encode(csrf_token(), 15, 512) ?>;
            const q = document.getElementById('lcrh-q');
            const locI = document.getElementById('lcrh-loc');
            const locSuggestions = document.getElementById('lcrh-loc-suggestions');
            const rad = document.getElementById('lcrh-rad');
            const sal = document.getElementById('lcrh-sal');
            const grid = document.getElementById('lcrh-grid');
            const empty = document.getElementById('lcrh-empty');
            const nEl = document.getElementById('lcrh-n');
            const pluralEl = document.getElementById('lcrh-plural');
            let cards = [];
            let userGeo = null;
            let geoToken = 0;
            let geoTimer;
            const descCache = {};

            function esc(value) {
                const div = document.createElement('div');
                div.textContent = value || '';
                return div.innerHTML;
            }

            function haversine(la1, lo1, la2, lo2) {
                const R = 6371;
                const p = Math.PI / 180;
                const a = Math.sin((la2 - la1) * p / 2) ** 2
                    + Math.cos(la1 * p) * Math.cos(la2 * p) * Math.sin((lo2 - lo1) * p / 2) ** 2;

                return 2 * R * Math.asin(Math.sqrt(a));
            }

            function badge(text, alt = false) {
                return text ? '<span class="lcrh-badge' + (alt ? ' alt' : '') + '">' + esc(text) + '</span>' : '';
            }

            function metaCell(label, value) {
                return value ? '<div class="lcrh-meta"><span>' + esc(label) + '</span><b>' + esc(value) + '</b></div>' : '';
            }

            function renderOffers(offers) {
                grid.innerHTML = '';

                offers.forEach((offer) => {
                    const card = document.createElement('button');
                    card.type = 'button';
                    card.className = 'lcrh-card';
                    card.dataset.id = offer.id || '';
                    card.dataset.title = (offer.title || '').toLowerCase();
                    card.dataset.lat = offer.lat || '';
                    card.dataset.lng = offer.lng || '';
                    card.dataset.salmax = offer.salmax || 0;
                    card.dataset.dTitle = offer.title || '';
                    card.dataset.dLocation = offer.location || '';
                    card.dataset.dContract = offer.contract || '';
                    card.dataset.dSalary = offer.salary || '';
                    card.dataset.dTime = offer.time || '';
                    card.dataset.dRemote = offer.remote ? '1' : '';

                    card.innerHTML =
                        '<h2 class="lcrh-card-title">' + esc(offer.title) + '</h2>' +
                        '<div class="lcrh-badges">' +
                        badge(offer.location) +
                        badge(offer.contract, true) +
                        badge(offer.salary_short || offer.salary) +
                        (offer.remote ? badge('Télétravail') : '') +
                        '</div>' +
                        '<span class="lcrh-more">Voir l\'offre →</span>';

                    card.addEventListener('click', () => openOffer(card));
                    grid.appendChild(card);
                });

                cards = Array.from(grid.querySelectorAll('.lcrh-card'));
                filter();
            }

            function filter() {
                const term = q.value.trim().toLowerCase();
                const radiusKm = parseFloat(rad.value) || 25;
                const salMin = parseInt(sal.value, 10) || 0;
                const locActive = locI.value.trim() !== '' && userGeo;
                let count = 0;

                cards.forEach((card) => {
                    const d = card.dataset;
                    const okText = !term || d.title.indexOf(term) > -1;
                    const okSal = !salMin || ((parseInt(d.salmax, 10) || 0) >= salMin);
                    let okLoc = true;

                    if (locActive) {
                        okLoc = d.lat && d.lng && haversine(userGeo.lat, userGeo.lng, parseFloat(d.lat), parseFloat(d.lng)) <= radiusKm;
                    }

                    const ok = okText && okSal && okLoc;
                    card.style.display = ok ? '' : 'none';
                    if (ok) count++;
                });

                nEl.textContent = count;
                pluralEl.style.display = count > 1 ? '' : 'none';
                empty.style.display = count ? 'none' : 'block';
            }

            function hideLocSuggestions() {
                if (!locSuggestions) return;
                locSuggestions.style.display = 'none';
                locSuggestions.innerHTML = '';
            }

            function searchCommunes(value) {
                const isPostalCode = /^\d{2,5}$/.test(value);
                const params = new URLSearchParams({
                    fields: 'nom,codesPostaux,centre,code,codeDepartement',
                    limit: '8',
                });

                if (isPostalCode) {
                    params.set('codePostal', value);
                } else {
                    params.set('nom', value);
                    params.set('boost', 'population');
                }

                return fetch('https://geo.api.gouv.fr/communes?' + params.toString(), {
                    headers: {'Accept': 'application/json'},
                })
                    .then((response) => {
                        if (!response.ok) throw new Error('Erreur API communes');
                        return response.json();
                    });
            }

            function formatCommuneLabel(commune) {
                const postalCodes = commune.codesPostaux || [];
                const dept = commune.codeDepartement || (postalCodes[0] ? postalCodes[0].slice(0, 2) : '');

                return dept ? commune.nom + ' (' + dept + ')' : commune.nom;
            }

            function renderLocSuggestions(communes) {
                if (!locSuggestions) return;

                locSuggestions.innerHTML = '';

                if (!communes.length) {
                    hideLocSuggestions();
                    return;
                }

                communes.forEach((commune) => {
                    const postalCodes = commune.codesPostaux || [];
                    const postalLabel = postalCodes.length ? postalCodes.join(', ') : 'Code postal non renseigné';
                    const label = formatCommuneLabel(commune);

                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'lcrh-suggestion';
                    button.innerHTML = '<strong>' + esc(label) + '</strong><small>' + esc(postalLabel) + '</small>';

                    button.addEventListener('click', () => {
                        locI.value = label;

                        if (commune.centre && commune.centre.coordinates) {
                            userGeo = {
                                lat: commune.centre.coordinates[1],
                                lng: commune.centre.coordinates[0],
                            };
                        } else {
                            userGeo = null;
                        }

                        hideLocSuggestions();
                        filter();
                    });

                    locSuggestions.appendChild(button);
                });

                locSuggestions.style.display = 'block';
            }

            function onLoc() {
                clearTimeout(geoTimer);
                const value = locI.value.trim();

                if (value === '') {
                    userGeo = null;
                    hideLocSuggestions();
                    filter();
                    return;
                }

                if (value.length < 2) {
                    userGeo = null;
                    hideLocSuggestions();
                    filter();
                    return;
                }

                geoTimer = setTimeout(() => {
                    const token = ++geoToken;

                    searchCommunes(value)
                        .then((communes) => {
                            if (token !== geoToken) return;

                            communes = communes || [];
                            renderLocSuggestions(communes);

                            const first = communes[0];

                            if (first && first.centre && first.centre.coordinates) {
                                userGeo = {
                                    lat: first.centre.coordinates[1],
                                    lng: first.centre.coordinates[0],
                                };
                            } else {
                                userGeo = null;
                            }

                            filter();
                        })
                        .catch((error) => {
                            console.error('[LCRH] Erreur autocomplétion commune', error);
                            userGeo = null;
                            hideLocSuggestions();
                            filter();
                        });
                }, 300);
            }

            q.addEventListener('input', filter);
            sal.addEventListener('change', filter);
            rad.addEventListener('change', filter);
            locI.addEventListener('input', onLoc);
            locI.addEventListener('focus', () => {
                const value = locI.value.trim();
                if (value.length >= 2) onLoc();
            });

            document.addEventListener('click', (event) => {
                if (!event.target.closest('.lcrh-loc-wrap')) {
                    hideLocSuggestions();
                }
            });

            const modal = document.getElementById('lcrh-modal');
            const mTitle = document.getElementById('lcrh-m-title');
            const mBadges = document.getElementById('lcrh-m-badges');
            const mMeta = document.getElementById('lcrh-m-meta');
            const mDesc = document.getElementById('lcrh-m-desc');
            const viewDetail = document.getElementById('lcrh-view-detail');
            const form = document.getElementById('lcrh-form');
            const success = document.getElementById('lcrh-success');
            const cta = document.getElementById('lcrh-cta');
            const ctaForm = document.getElementById('lcrh-cta-form');
            const msg = document.getElementById('lcrh-msg');

            function openOffer(card) {
                const d = card.dataset;
                mTitle.textContent = d.dTitle;
                mBadges.innerHTML = badge(d.dLocation) + badge(d.dContract, true) + badge(d.dSalary) + (d.dRemote ? badge('Télétravail') : '');
                mMeta.innerHTML = metaCell('Contrat', d.dContract) + metaCell('Lieu', d.dLocation) + metaCell('Salaire', d.dSalary) + metaCell('Temps de travail', d.dTime);
                document.getElementById('lcrh-f-offer').value = d.dTitle;
                document.getElementById('lcrh-f-location').value = d.dLocation;
                showDetail();
                modal.classList.add('open');
                document.body.style.overflow = 'hidden';

                if (descCache[d.id]) {
                    mDesc.textContent = descCache[d.id];
                    return;
                }

                mDesc.innerHTML = '<div class="lcrh-loading">Chargement de la description…</div>';

                fetch(endpoints.detail.replace('__ID__', encodeURIComponent(d.id)), {
                    headers: {'Accept': 'application/json'},
                })
                    .then(async (response) => {
                        const data = await response.json().catch(() => ({}));

                        if (!response.ok || !data.ok) {
                            console.error('[LCRH] Erreur détail offre', data);
                        }

                        return data;
                    })
                    .then((res) => {
                        const text = res && res.description ? res.description : 'Description indisponible.';
                        descCache[d.id] = text;
                        mDesc.textContent = text;
                    })
                    .catch((error) => {
                        console.error('[LCRH] Erreur réseau détail offre', error);
                        mDesc.textContent = 'Description momentanément indisponible.';
                    });
            }

            function close() {
                modal.classList.remove('open');
                document.body.style.overflow = '';
            }

            function showDetail() {
                viewDetail.style.display = '';
                form.classList.remove('show');
                success.classList.remove('show');
                cta.style.display = 'flex';
                ctaForm.style.display = 'none';
                msg.className = 'lcrh-form-msg';
                modal.querySelector('.lcrh-dialog').scrollTop = 0;
            }

            function showForm() {
                viewDetail.style.display = 'none';
                form.classList.add('show');
                cta.style.display = 'none';
                ctaForm.style.display = 'flex';
                msg.className = 'lcrh-form-msg';
                modal.querySelector('.lcrh-dialog').scrollTop = 0;
            }

            modal.querySelectorAll('[data-close]').forEach((el) => el.addEventListener('click', close));
            document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
            document.getElementById('lcrh-apply-btn').addEventListener('click', showForm);
            document.getElementById('lcrh-back-btn').addEventListener('click', showDetail);

            const cv = document.getElementById('lcrh-cv');
            const cvLabel = document.getElementById('lcrh-cv-label');
            cv.addEventListener('change', () => {
                if (cv.files.length) cvLabel.innerHTML = '<b>' + esc(cv.files[0].name) + '</b>';
            });

            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const btn = document.getElementById('lcrh-send-btn');
                btn.disabled = true;
                btn.textContent = 'Envoi…';
                msg.className = 'lcrh-form-msg';

                fetch(endpoints.apply, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: new FormData(form),
                })
                    .then(async (response) => {
                        const data = await response.json().catch(() => ({}));
                        if (!response.ok || !data.ok) throw data;
                        return data;
                    })
                    .then(() => {
                        form.classList.remove('show');
                        ctaForm.style.display = 'none';
                        success.classList.add('show');
                    })
                    .catch((error) => {
                        msg.className = 'lcrh-form-msg err';
                        msg.innerHTML = error.message || 'Une erreur est survenue.';
                    })
                    .finally(() => {
                        btn.disabled = false;
                        btn.textContent = 'Envoyer ma candidature';
                    });
            });

            fetch(endpoints.offers, {headers: {'Accept': 'application/json'}})
                .then((response) => response.json())
                .then((data) => renderOffers(data.offers || []))
                .catch(() => {
                    grid.innerHTML = '<div class="lcrh-empty" style="grid-column:1/-1;"><h3>Impossible de charger les offres</h3><p>Merci de réessayer ultérieurement.</p></div>';
                });
        })();
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/lcrh_v2/resources/views/careers.blade.php ENDPATH**/ ?>