{{--
    Organigramme intégré (sans modale).
    Tout le CSS est scopé sous #organigrammeSection pour ne pas entrer en
    conflit avec le template admin (Bootstrap .card, etc.).
--}}
<div id="organigrammeSection">
    <div class="org-scroll" id="orgScroll">
        <div class="org-canvas" id="orgCanvas">
            <svg class="links" id="orgLinks" aria-hidden="true"></svg>
            <div class="org-tree" id="orgTree">
                @php
                    use Illuminate\Support\Str;

                    if (!function_exists('org_photo_url_from_payload')) {
                        function org_photo_url_from_payload($r) {
                            if (!empty($r['avatar_url'])) {
                                $u = $r['avatar_url'];
                                if (Str::startsWith($u, ['http://', 'https://', '/'])) {
                                    return $u;
                                }
                                return asset($u);
                            }
                            if (!empty($r['image'])) {
                                $path = str_replace('\\', '/', $r['image']);
                                if (Str::startsWith($path, 'storage/')) {
                                    $path = Str::after($path, 'storage/');
                                }
                                // Miniature si elle existe (cf. commande photos:thumbs) :
                                // 51 photos plein format sur une seule page, c'etait 37 Mo.
                                return \App\Helpers\PhotoHelper::url($path);
                            }
                            return null;
                        }
                    }

                    if (!function_exists('org_render_tree')) {
                        function org_render_tree($nodes, $level = 1) {
                            static $gid = 1;
                            if (!$nodes || !is_array($nodes)) return;

                            echo '<div class="level level-' . $level . '">';
                            foreach ($nodes as $node) {
                                $currentId = 'g' . ($gid++);
                                echo '<div class="group" data-group-id="' . $currentId . '" data-level="' . $level . '">';
                                echo '<div class="people">';
                                if (!empty($node['responsables'])) {
                                    foreach ($node['responsables'] as $r) {
                                        $prenom = e($r['prenom'] ?? '');
                                        $nom    = e($r['nom'] ?? '');
                                        $poste  = e($r['poste'] ?? '');
                                        $avatar = org_photo_url_from_payload($r);
                                        echo '<div class="card">';
                                        if (!empty($avatar)) {
                                            echo '  <img class="avatar" src="' . e($avatar) . '" alt="' . trim($prenom . ' ' . $nom) . '">';
                                        }
                                        echo '  <div class="name">' . trim($prenom . ' ' . $nom) . '</div>';
                                        if (trim($poste) !== '') {
                                            echo '  <div class="role">' . $poste . '</div>';
                                        }
                                        echo '</div>';
                                    }
                                }
                                echo '</div>';
                                if (!empty($node['subordonnes'])) {
                                    echo '<div class="children" data-parent="' . $currentId . '">';
                                    org_render_tree($node['subordonnes'], $level + 1);
                                    echo '</div>';
                                }
                                echo '</div>';
                            }
                            echo '</div>';
                        }
                    }

                    org_render_tree($orgTree);
                @endphp
            </div>
        </div>
    </div>
</div>

<style>
    /* ===== Organigramme — tout est scopé sous #organigrammeSection ===== */
    #organigrammeSection {
        --box-w: 180px;
        --box-pad: 12px;
        --box-gap: 12px;
        --level-gap: 42px;
        --row-gap: 22px;
        --line: #3b3b3b;
        --box-bg: #ffffff;
        --box-bd: #d7dbe3;
        --name: #1e2a3a;
        --role: #6b7280;
        --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 12px rgba(0, 0, 0, .04);

        /* Hauteur d'une page intégrée (le graphe scrolle à l'intérieur) */
        height: calc(100vh - 230px);
        min-height: 420px;
        display: flex;
        flex-direction: column;
    }

    #organigrammeSection * { box-sizing: border-box; }

    #organigrammeSection .org-scroll {
        width: 100%;
        overflow: auto;
        padding: 18px 10px 40px;
        flex: 1;
    }
    #organigrammeSection .org-canvas { position: relative; width: max-content; min-height: 200px; }
    #organigrammeSection .org-tree {
        display: flex; flex-direction: column; align-items: center;
        gap: var(--level-gap); width: max-content;
    }
    #organigrammeSection .level {
        width: max-content; display: flex; justify-content: center; gap: 18px;
        flex-wrap: nowrap; position: relative; z-index: 1;
    }
    #organigrammeSection .level.has-rows { flex-direction: column; gap: var(--row-gap); }
    #organigrammeSection .level.has-rows > .row { display: flex; justify-content: center; gap: 18px; flex-wrap: nowrap; }
    #organigrammeSection .group {
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        position: relative; padding-bottom: 4px;
    }
    #organigrammeSection .people { display: flex; flex-wrap: nowrap; gap: var(--box-gap); justify-content: center; align-items: stretch; }
    #organigrammeSection .people.multirows { display: flex; flex-direction: column; gap: var(--row-gap); padding-left: 40px; margin-top: 28px; }
    #organigrammeSection .people-row { display: flex; justify-content: center; gap: var(--box-gap); flex-wrap: nowrap; }

    #organigrammeSection .card {
        width: var(--box-w);
        margin: 0; /* neutralise le margin-bottom:30px global de .card (NiceAdmin) */
        background: var(--box-bg);
        border: 1px solid var(--box-bd);
        border-radius: 10px;
        box-shadow: var(--shadow);
        padding: var(--box-pad);
        text-align: center;
    }
    #organigrammeSection .card .name {
        font-weight: 700; color: var(--name); line-height: 1.25; margin-bottom: 6px;
        font-size: 14px; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #organigrammeSection .card .role { color: var(--role); font-size: 12px; line-height: 1.2; text-transform: capitalize; }
    #organigrammeSection .card .avatar {
        height: 100px; object-fit: cover; display: block; margin: 0 auto 8px;
        border: 1px solid #e1e5ec; background: #f3f4f6;
    }
    #organigrammeSection .children { display: flex; justify-content: center; width: max-content; }
    #organigrammeSection .children > .level { gap: 18px; flex-wrap: nowrap; }

    #organigrammeSection svg.links { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    #organigrammeSection .links line, #organigrammeSection .links path {
        stroke: var(--line); stroke-width: 2px; shape-rendering: crispEdges;
        stroke-linecap: square; vector-effect: non-scaling-stroke;
    }

    /* Mode sombre : lignes plus claires (cartes restent blanches, lisibles) */
    .dark-mode #organigrammeSection { --line: #9aa0a6; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const ROWS_BREAK_FROM_LEVEL = 3;
    const MAX_PER_ROW = 4;

    const canvas = document.getElementById('orgCanvas');
    const tree   = document.getElementById('orgTree');
    const svg    = document.getElementById('orgLinks');
    const scroll = document.getElementById('orgScroll');
    if (!canvas || !tree || !svg) return;

    function clearLines() { while (svg.firstChild) svg.removeChild(svg.firstChild); }
    function centerTop(el, ref) { const r = el.getBoundingClientRect(), b = ref.getBoundingClientRect(); return { x: (r.left + r.width / 2) - b.left, y: r.top - b.top }; }
    function centerBottom(el, ref) { const r = el.getBoundingClientRect(), b = ref.getBoundingClientRect(); return { x: (r.left + r.width / 2) - b.left, y: r.bottom - b.top }; }
    function addLine(x1, y1, x2, y2) { const l = document.createElementNS('http://www.w3.org/2000/svg', 'line'); l.setAttribute('x1', x1); l.setAttribute('y1', y1); l.setAttribute('x2', x2); l.setAttribute('y2', y2); svg.appendChild(l); }
    function rectIn(el, ref) { const r = el.getBoundingClientRect(), b = ref.getBoundingClientRect(); return { left: r.left - b.left, right: r.right - b.left, top: r.top - b.top, bottom: r.bottom - b.top, w: r.width, h: r.height, cx: (r.left + r.width / 2) - b.left }; }

    // Bloc de subordonnés en multi-lignes : rail vertical à gauche reliant un bus
    // horizontal par rangée, chaque bus descendant vers CHAQUE carte de la rangée.
    // Montre clairement que toutes les personnes dépendent du même parent.
    function drawLeftRail(parentPeople, block) {
        const rowEls = Array.from(block.querySelectorAll('.people-row'));
        if (rowEls.length < 2) return false;

        const rows = rowEls.map(rowEl => {
            const cards = Array.from(rowEl.querySelectorAll('.card')).map(c => centerTop(c, canvas));
            const rr = rectIn(rowEl, canvas);
            return { cards, busY: Math.round(rr.top - 14), left: Math.round(rr.left) };
        });

        const railX = Math.round(Math.min(...rows.map(r => r.left)) - 22);

        // Rail vertical reliant tous les bus de rangée
        addLine(railX, rows[0].busY, railX, rows[rows.length - 1].busY);

        // Pour chaque rangée : bus horizontal (rail -> dernière carte) + descente vers chaque carte
        rows.forEach(r => {
            const lastX = Math.round(r.cards[r.cards.length - 1].x);
            addLine(railX, r.busY, lastX, r.busY);
            r.cards.forEach(c => addLine(Math.round(c.x), r.busY, Math.round(c.x), Math.round(c.y)));
        });

        // Parent : chaque carte (ex. David + Julien) descend vers un collecteur, puis
        // un trait centré rejoint le bus de la 1re rangée (rendu net et aligné).
        const topBusY = rows[0].busY;
        const pc = Array.from(parentPeople.querySelectorAll('.card')).map(c => centerBottom(c, canvas));
        if (pc.length > 1) {
            const collectorY = Math.round(pc[0].y + (topBusY - pc[0].y) * 0.45);
            const xs = pc.map(p => Math.round(p.x));
            const minX = Math.min(...xs), maxX = Math.max(...xs);
            pc.forEach(p => addLine(Math.round(p.x), Math.round(p.y), Math.round(p.x), collectorY)); // descente par carte
            addLine(minX, collectorY, maxX, collectorY);                                             // collecteur horizontal
            const midX = Math.round((minX + maxX) / 2);
            addLine(midX, collectorY, midX, topBusY);                                                // centre -> bus
        } else {
            addLine(Math.round(pc[0].x), Math.round(pc[0].y), Math.round(pc[0].x), topBusY);
        }

        return true;
    }
    function getLevelNumberFromGroup(g) { return parseInt(g.getAttribute('data-level') || '0', 10); }

    function collectChildGroups(directLevel) {
        const res = [];
        for (const node of directLevel.children) {
            if (!(node instanceof HTMLElement)) continue;
            if (node.classList.contains('group')) res.push(node);
            else if (node.classList.contains('row')) res.push(...Array.from(node.children).filter(c => c.classList && c.classList.contains('group')));
        }
        return res;
    }

    function layoutLevelRows() {
        tree.querySelectorAll('.children[data-parent]').forEach(children => {
            let directLevel = null;
            for (const el of children.children) { if (el.classList && el.classList.contains('level')) { directLevel = el; break; } }
            if (!directLevel) return;
            const cls = Array.from(directLevel.classList).find(c => c.startsWith('level-'));
            const lvlNum = cls ? parseInt(cls.replace('level-', ''), 10) : NaN;
            if (!(lvlNum >= ROWS_BREAK_FROM_LEVEL)) { if (directLevel.classList.contains('has-rows')) unwrapLevelRows(directLevel); return; }
            const groups = collectChildGroups(directLevel);
            if (groups.length <= MAX_PER_ROW) { if (directLevel.classList.contains('has-rows')) unwrapLevelRows(directLevel); return; }
            unwrapLevelRows(directLevel);
            directLevel.classList.add('has-rows');
            let row = null;
            groups.forEach((g, idx) => { if (idx % MAX_PER_ROW === 0) { row = document.createElement('div'); row.className = 'row'; directLevel.appendChild(row); } row.appendChild(g); });
        });
    }

    function unwrapLevelRows(directLevel) {
        const ordered = [];
        for (const node of Array.from(directLevel.children)) {
            if (!(node instanceof HTMLElement)) continue;
            if (node.classList.contains('group')) ordered.push(node);
            else if (node.classList.contains('row')) { for (const g of Array.from(node.children)) { if (g.classList && g.classList.contains('group')) ordered.push(g); } node.remove(); }
        }
        for (const node of Array.from(directLevel.children)) { if (node.classList.contains('group')) node.remove(); }
        ordered.forEach(g => directLevel.appendChild(g));
        directLevel.classList.remove('has-rows');
    }

    function splitGroupCardsIntoRowsIfNeeded() {
        tree.querySelectorAll('.level').forEach(levelEl => {
            const cls = Array.from(levelEl.classList).find(c => c.startsWith('level-'));
            const n = cls ? parseInt(cls.replace('level-', ''), 10) : NaN;
            if (!(n >= ROWS_BREAK_FROM_LEVEL)) return;
            const groupEls = collectChildGroups(levelEl).length ? collectChildGroups(levelEl) : Array.from(levelEl.children).filter(x => x.classList && x.classList.contains('group'));
            groupEls.forEach(group => {
                let hasChildren = false;
                for (const ch of group.children) { if (ch.classList && ch.classList.contains('children')) { hasChildren = true; break; } }
                if (hasChildren) return;
                const peopleEl = group.querySelector('.people');
                if (!peopleEl) return;
                const directCards = Array.from(peopleEl.children).filter(c => c.classList && c.classList.contains('card'));
                const existingRows = Array.from(peopleEl.children).filter(c => c.classList && c.classList.contains('people-row'));
                let cards = [];
                if (existingRows.length) existingRows.forEach(r => cards.push(...Array.from(r.children).filter(x => x.classList && x.classList.contains('card'))));
                else cards = directCards;
                if (cards.length <= MAX_PER_ROW) { if (existingRows.length) { existingRows.forEach(r => r.remove()); cards.forEach(c => peopleEl.appendChild(c)); peopleEl.classList.remove('multirows'); } return; }
                existingRows.forEach(r => r.remove());
                peopleEl.classList.add('multirows');
                let row = null;
                cards.forEach((card, idx) => { if (idx % MAX_PER_ROW === 0) { row = document.createElement('div'); row.className = 'people-row'; peopleEl.appendChild(row); } row.appendChild(card); });
            });
        });
    }

    function draw() {
        const w = Math.max(canvas.scrollWidth, canvas.getBoundingClientRect().width);
        const h = Math.max(canvas.scrollHeight, canvas.getBoundingClientRect().height);
        svg.setAttribute('width', w); svg.setAttribute('height', h); svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
        clearLines();
        tree.querySelectorAll('.children[data-parent]').forEach(children => {
            const parentId = children.getAttribute('data-parent');
            const parentGroup = tree.querySelector(`.group[data-group-id="${parentId}"]`);
            if (!parentGroup) return;
            const people = parentGroup.querySelector('.people') || parentGroup;
            const forceTargetsPerCard = (getLevelNumberFromGroup(parentGroup) === 1);
            let directLevel = null;
            for (const el of children.children) { if (el.classList && el.classList.contains('level')) { directLevel = el; break; } }
            if (!directLevel) return;
            const childGroups = collectChildGroups(directLevel);
            if (childGroups.length === 0) return;

            // Cas rail gauche : un seul groupe enfant, feuille, en multi-lignes.
            if (childGroups.length === 1) {
                const g0 = childGroups[0];
                const peopleEl0 = g0.querySelector('.people');
                let leafHasChildren = false;
                for (const ch of g0.children) { if (ch.classList && ch.classList.contains('children')) { leafHasChildren = true; break; } }
                if (peopleEl0 && peopleEl0.classList.contains('multirows') && !leafHasChildren) {
                    if (drawLeftRail(people, peopleEl0)) return;
                }
            }

            const targets = [];
            childGroups.forEach(g => {
                const peopleEl = g.querySelector('.people') || g;
                if (forceTargetsPerCard) {
                    const cards = peopleEl.querySelectorAll('.card');
                    if (cards.length) cards.forEach(card => targets.push(centerTop(card, canvas)));
                    else targets.push(centerTop(peopleEl, canvas));
                    return;
                }
                let hasChildren = false;
                for (const ch of g.children) { if (ch.classList && ch.classList.contains('children')) { hasChildren = true; break; } }
                if (!hasChildren) {
                    const cards = peopleEl.querySelectorAll('.card');
                    const isMultirows = peopleEl.classList.contains('multirows');
                    // Bloc multi-lignes (ex. 28 personnes 4/ligne) : UNE seule cible au sommet
                    // du bloc. Sinon une ligne par carte ferait croire à une hiérarchie
                    // entre les rangées (rangée 1 = supérieur de la rangée 2). Cf. bug signalé.
                    if (cards.length > 1 && !isMultirows) {
                        cards.forEach(card => targets.push(centerTop(card, canvas)));
                        return;
                    }
                }
                targets.push(centerTop(peopleEl, canvas));
            });
            const parentCards = people.querySelectorAll('.card');
            const pBottomPeople = centerBottom(people, canvas);
            if (parentCards.length > 1) {
                const cardBottoms = Array.from(parentCards).map(c => centerBottom(c, canvas));
                const xsParent = cardBottoms.map(p => p.x);
                const minCardX = Math.min(...xsParent), maxCardX = Math.max(...xsParent);
                const minTargetY = Math.min(...targets.map(t => t.y));
                const collectorY = pBottomPeople.y + (minTargetY - pBottomPeople.y) * 0.5;
                const busY = collectorY;
                cardBottoms.forEach(p => { if (p.y < collectorY - 0.5) addLine(p.x, p.y, p.x, collectorY); });
                addLine(minCardX, collectorY, maxCardX, collectorY);
                const midParentX = (minCardX + maxCardX) / 2;
                addLine(midParentX, collectorY, midParentX, busY);
                if (targets.length === 1) { const t = targets[0]; if (Math.abs(t.x - midParentX) > 0.5) addLine(midParentX, busY, t.x, busY); addLine(t.x, busY, t.x, t.y); }
                else { const xs = targets.map(t => t.x); addLine(Math.min(...xs), busY, Math.max(...xs), busY); targets.forEach(t => addLine(t.x, busY, t.x, t.y)); }
                return;
            }
            const pBottom = pBottomPeople;
            if (targets.length === 1) { const t = targets[0]; addLine(pBottom.x, pBottom.y, pBottom.x, t.y); if (Math.abs(t.x - pBottom.x) > 0.5) addLine(pBottom.x, t.y, t.x, t.y); }
            else { const xs = targets.map(t => t.x); const minYTop = Math.min(...targets.map(t => t.y)); const busY = pBottom.y + (minYTop - pBottom.y) * 0.5; addLine(pBottom.x, pBottom.y, pBottom.x, busY); addLine(Math.min(...xs), busY, Math.max(...xs), busY); targets.forEach(t => addLine(t.x, busY, t.x, t.y)); }
        });
    }

    let hasAutoCentered = false;
    function autoCenterLevel1() {
        if (hasAutoCentered) return;
        const level1 = tree.querySelector('.level.level-1');
        if (!level1 || !scroll || !canvas) return;
        const canvasRect = canvas.getBoundingClientRect();
        const r = level1.getBoundingClientRect();
        const level1CenterX = (r.left - canvasRect.left) + (r.width / 2);
        const maxScrollLeft = Math.max(0, canvas.scrollWidth - scroll.clientWidth);
        scroll.scrollLeft = Math.round(Math.max(0, Math.min(level1CenterX - scroll.clientWidth / 2, maxScrollLeft)));
        hasAutoCentered = true;
    }

    let rAF;
    function scheduleDraw() {
        cancelAnimationFrame(rAF);
        rAF = requestAnimationFrame(() => { layoutLevelRows(); splitGroupCardsIntoRowsIfNeeded(); draw(); autoCenterLevel1(); });
    }

    new MutationObserver(scheduleDraw).observe(tree, { childList: true, subtree: true, attributes: true });
    window.addEventListener('load', scheduleDraw);
    window.addEventListener('resize', scheduleDraw);
    // Redraw quand les avatars finissent de charger (change la hauteur des cartes)
    tree.querySelectorAll('img.avatar').forEach(img => {
        if (!img.complete) { img.addEventListener('load', scheduleDraw); img.addEventListener('error', scheduleDraw); }
    });

    setTimeout(scheduleDraw, 0);
    setTimeout(scheduleDraw, 150);
    setTimeout(() => { scheduleDraw(); setTimeout(() => { hasAutoCentered = false; autoCenterLevel1(); }, 50); }, 400);
});
</script>