@php
    function renderStructure($structure, $level = 0)
    {
        $paddingLeft = 20 * $level;
        $isArtigo = ($structure->structureType->abrev ?? '') === 'Art.';
        $isCentered = $structure->structureType && $structure->structureType->center;
        $showAbrev = $structure->structureType && $structure->structureType->show_abrev;

        echo '<li class="structure_line" style="margin-bottom: 15px; padding: 12px; border-radius: 6px; transition: background 0.2s;" onmouseover="this.style.background=\'#f8f9fa\'" onmouseout="this.style.background=\'transparent\'">';

        if ($isCentered) {
            echo '<div style="text-align:center; width:100%;">';
            if ($showAbrev) {
                echo '<strong style="white-space: nowrap; font-size: 1.05rem; color: #2c3e50; display:block; margin-bottom:6px; font-weight: 600;">';
                echo $structure->structureType->abrev . ' ' . $structure->order_label;
                echo '</strong>';
            } else {
                echo '<strong style="white-space: nowrap; font-size: 1.05rem; color: #2c3e50; display:block; margin-bottom:6px; font-weight: 600;">';
                echo $structure->order_label;
                echo '</strong>';
            }

            if (!empty(trim($structure->content ?? ''))) {
                echo '<div style="font-size: 1.05rem; line-height: 1.6; color: #000; font-family: \"Arial Unicode MS\", sans-serif; text-align:center; display:block; width:100%; margin-top:6px;">';
                echo $structure->content;
                echo '</div>';
            }
            echo '</div>';
        } else {
            echo '<div style="text-align:left; display: flex; align-items: flex-start;">';
            if ($showAbrev) {
                if ($isArtigo) {
                    echo '<span class="badge-artigo" style="background: #2c3e50; color: white; padding: 4px 12px; border-radius: 14px; font-size: 0.9rem; font-weight: 600; margin-right: 12px; white-space: nowrap; border: 1px solid #1a2530; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">';
                    echo $structure->structureType->abrev . ' ' . $structure->order_label;
                    echo '</span>';
                } else {
                    echo '<strong style="white-space:nowrap; margin-right:8px; color: #2c3e50; font-size: 1.05rem;">';
                    echo $structure->structureType->abrev . ' ' . $structure->order_label . ' -';
                    echo '</strong>';
                }
            } else {
                echo '<strong style="white-space:nowrap; margin-right:8px; color: #2c3e50; font-size: 1.05rem;">';
                echo $structure->order_label . ' -';
                echo '</strong>';
            }

            if (!empty(trim($structure->content ?? ''))) {
                echo '<span style="font-size: 1.05rem; line-height: 1.6; color: #000; font-family: \"Arial Unicode MS\", sans-serif;">';
                echo $structure->content;
                echo '</span>';
            }
            echo '</div>';
        }

        echo '</li>';

        // Renderiza children recursivamente ORDENADOS
        if ($structure->children->count() > 0) {
            $sortedChildren = $structure->children->sortBy('sort_order');

            echo '<ul style="list-style: none; padding-left: ' .
                ($paddingLeft + 25) .
                'px; margin-top: 12px; border-left: 2px solid #e9ecef;">';
            foreach ($sortedChildren as $child) {
                renderStructure($child, $level + 1);
            }
            echo '</ul>';
        }
    }

    // Ordena as estruturas principais pelo sort_order
    $sortedStructures = $law->structures->sortBy('sort_order');
@endphp

<div
    style="position: fixed; top: 20px; right: 20px; z-index: 1000; background: white; padding: 12px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.15); border: 1px solid #e9ecef; display: flex; align-items: center; gap: 8px;">
    <input type="text" id="lawSearch" placeholder="🔍 Buscar na lei..."
        style="padding: 10px 14px; border: 1px solid #ddd; border-radius: 20px; width: 260px; font-size: 0.92rem; outline: none; transition: all 0.3s;"
        onkeyup="searchArticles(this.value)" onfocus="this.style.borderColor='#2c3e50'"
        onblur="this.style.borderColor='#ddd'">
    <button onclick="clearSearchAndScrollToTop()"
        style="background: #6c757d; color: white; border: none; padding: 10px 14px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.3s; white-space: nowrap;"
        onmouseover="this.style.background='#5a6268'" onmouseout="this.style.background='#6c757d'">
        🗙 Limpar
    </button>
</div>

<div id="lawIndex"
    style="position: fixed; left: 20px; top: 20px; z-index: 1000; background: white; padding: 16px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.15); max-height: 80vh; overflow-y: auto; width: 280px; border: 1px solid #e9ecef;">
    <div
        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e9ecef;">
        <h5 style="margin: 0; font-size: 1.05rem; color: #2c3e50; font-weight: 600;">📋 Índice da Lei</h5>
        <button onclick="toggleIndex()"
            style="background: #6c757d; color: white; border: none; padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; cursor: pointer; transition: background 0.2s;"
            onmouseover="this.style.background='#5a6268'" onmouseout="this.style.background='#6c757d'">X</button>
    </div>
    <div class="law-index">
        @foreach ($sortedStructures as $index => $structure)
            <div class="index-item" style="margin: 5px 0;">
                                <a href="javascript:void(0)"
                    style="text-decoration: none; color: #495057; font-size: 0.88rem; padding: 6px 10px; display: block; border-radius: 5px; transition: all 0.2s; border-left: 3px solid #2c3e50;"
                    onmouseover="this.style.background='#f8f9fa'; this.style.color='#2c3e50'"
                    onmouseout="this.style.background='transparent'; this.style.color='#495057'"
                    onclick="highlightArticle('art-1')">
                    <strong>{{ $structure->structureType->abrev ?? '' }}</strong> {{ $structure->order_label }}
                </a>
            </div>
        @endforeach
    </div>
</div>

<button id="showIndexBtn" onclick="showIndex()"
    style="position: fixed; left: 20px; top: 20px; z-index: 999; background: #2c3e50; color: white; border: none; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s;"
    onmouseover="this.style.background='#1a2530'; this.style.transform='translateY(-1px)'"
    onmouseout="this.style.background='#2c3e50'; this.style.transform='translateY(0)'">
    📋 Mostrar Índice
</button>

<div style="margin: 20px 0 0 auto; padding: 20px 40px; min-height: 100vh;">
    <ul style="list-style: none; padding: 0; margin: 0;">
        @foreach ($sortedStructures as $structure)
            @php renderStructure($structure); @endphp
        @endforeach
    </ul>
</div>

<link rel="stylesheet" href="{{ asset('assets/css/tabelas.css') }}">
@include('maker.scripts.search')
@include('maker.scripts.tabelas')