{{--
    Frontend Renderer for Global Sections (Builder V2)
    Used for headers and footers
--}}

<!-- GLOBAL SECTIONS RENDER-V2 -->
@php
    \Log::info('==================== GLOBAL SECTIONS RENDER-V2 START ====================');

    // Global sections use $section variable
    $builderData = $section->builder_data ?? [];
    $rootNode = $builderData['ROOT'] ?? null;

    if ($rootNode) {
        \Log::info('ROOT Node', ['type' => $rootNode['type']['resolvedName'] ?? 'unknown', 'childNodes' => $rootNode['nodes'] ?? []]);
    }

    // Get website and its settings
    $currentWebsite = $section->website ?? null;
    $currentWebsiteId = $section->website_id ?? null;
    $currencySymbol = $currentWebsite ? $currentWebsite->getCurrencySymbol() : 'RM';
    $websiteSubdomain = $currentWebsite ? $currentWebsite->subdomain : null;
@endphp

{{-- Include shared render functions --}}
@include('builder-v2.render-functions')

{{-- Render the section content --}}
@if($rootNode && isset($builderData))
    @php
        $rootType = $rootNode['type']['resolvedName'] ?? null;
        $rootProps = $rootNode['props'] ?? [];
        $rootChildren = $rootNode['nodes'] ?? [];
    @endphp

    @if($rootType === 'Container')
        @php
            $width = $rootProps['width'] ?? 'fluid';
            $customWidth = $rootProps['customWidth'] ?? '1140px';
            $padding = $rootProps['padding'] ?? '20px';
            $margin = $rootProps['margin'] ?? '0px';
            $backgroundColor = $rootProps['backgroundColor'] ?? 'transparent';
            $containerClass = $width === 'fluid' ? 'container-fluid' : 'container';

            $styles = [];
            $styles[] = 'padding: ' . htmlspecialchars($padding);

            if ($width === 'fixed') {
                $margins = explode(' ', trim($margin));
                if (count($margins) === 1) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
                } else if (count($margins) === 2) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
                } else if (count($margins) === 4) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto ' . htmlspecialchars($margins[2]) . ' auto';
                } else {
                    $styles[] = 'margin-left: auto';
                    $styles[] = 'margin-right: auto';
                }
                $styles[] = 'max-width: ' . htmlspecialchars($customWidth);
            } else {
                $styles[] = 'margin: ' . htmlspecialchars($margin);
            }

            if ($backgroundColor && $backgroundColor !== 'transparent') {
                $styles[] = 'background-color: ' . htmlspecialchars($backgroundColor);
            }

            $styleAttr = implode('; ', $styles);
        @endphp

        <div class="{{ $containerClass }}" style="{{ $styleAttr }}">
            @foreach($rootChildren as $nodeId)
                {!! renderNode($nodeId, $builderData, $currentWebsiteId, $currencySymbol, $websiteSubdomain) !!}
            @endforeach
        </div>
    @else
        @foreach($rootChildren as $nodeId)
            {!! renderNode($nodeId, $builderData, $currentWebsiteId, $currencySymbol, $websiteSubdomain) !!}
        @endforeach
    @endif
@else
    <div class="container py-5">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i>
            This section is empty.
        </div>
    </div>
@endif