{{--
    Renders a canvas-mode page's elements as plain, absolutely-positioned
    HTML/CSS — this IS the "code" a freeform drag/drop design turns into.
    No JS library is needed to display it; the tiny inline script below only
    handles scaling the fixed-width design to whatever screen it's on.

    Expects: $elements (Collection of PageCanvasElement), $designWidth (int).
    $adminEditable (bool, optional) is intentionally NOT read here — this
    partial is public-facing output only. The admin canvas editor has its
    own richer markup (drag handles, resize grips, style panel) and does not
    reuse this partial.
--}}
@php
    $canvasHeight = max(400, (int) ($elements->map(fn ($e) => $e->y + $e->h)->max() ?? 0) + 60);

    $styleString = function (array $s) {
        $out = [];
        if (!empty($s['color'])) $out[] = 'color:'.$s['color'];
        if (!empty($s['background_color'])) $out[] = 'background-color:'.$s['background_color'];
        if (!empty($s['font_size'])) $out[] = 'font-size:'.((int) $s['font_size']).'px';
        if (!empty($s['font_weight'])) $out[] = 'font-weight:'.($s['font_weight'] === 'bold' ? '700' : '400');
        if (!empty($s['text_align'])) $out[] = 'text-align:'.$s['text_align'];
        if (isset($s['border_radius'])) $out[] = 'border-radius:'.((int) $s['border_radius']).'px';
        if (isset($s['padding'])) $out[] = 'padding:'.((int) $s['padding']).'px';
        if (isset($s['opacity'])) $out[] = 'opacity:'.(max(0, min(100, (int) $s['opacity'])) / 100);
        return implode(';', $out);
    };
@endphp
<div class="jetour-canvas-viewport" style="position:relative; width:100%; overflow:hidden;">
    <div class="jetour-canvas-scale" data-design-width="{{ $designWidth }}" data-design-height="{{ $canvasHeight }}"
         style="position:relative; width:{{ $designWidth }}px; height:{{ $canvasHeight }}px; transform-origin:top left; font-family:inherit;">
        @foreach ($elements as $el)
            @php($s = $el->style ?? [])
            @php($base = "position:absolute; left:{$el->x}px; top:{$el->y}px; width:{$el->w}px; height:{$el->h}px; z-index:{$el->z_index}; box-sizing:border-box;")
            @switch($el->type)
                @case('image')
                    <div style="{{ $base }} {{ $styleString($s) }} overflow:hidden;">
                        @if (!empty($el->image_url))
                            <img src="{{ $el->image_url }}" alt="" style="width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;">
                        @endif
                    </div>
                    @break

                @case('button')
                    <a href="{{ $el->url ?: '#' }}" style="{{ $base }} {{ $styleString($s) }} display:flex; align-items:center; justify-content:{{ ($s['text_align'] ?? 'center') === 'left' ? 'flex-start' : (($s['text_align'] ?? 'center') === 'right' ? 'flex-end' : 'center') }}; text-decoration:none; line-height:1.2;">
                        {{ $el->content }}
                    </a>
                    @break

                @case('shape')
                    <div style="{{ $base }} {{ $styleString($s) }}"></div>
                    @break

                @case('spacer')
                    <div style="{{ $base }} {{ $styleString($s) }}"></div>
                    @break

                @default {{-- heading / text --}}
                    <div style="{{ $base }} {{ $styleString($s) }} white-space:pre-line; line-height:1.4;">
                        {{ $el->content }}
                    </div>
            @endswitch
        @endforeach
    </div>
</div>
<script>
(function () {
    var scripts = document.currentScript;
    var viewport = scripts.previousElementSibling;
    var canvas = viewport.querySelector('.jetour-canvas-scale');
    var designWidth = parseInt(canvas.dataset.designWidth, 10);
    var designHeight = parseInt(canvas.dataset.designHeight, 10);

    function fit() {
        var scale = viewport.clientWidth / designWidth;
        canvas.style.transform = 'scale(' + scale + ')';
        viewport.style.height = (designHeight * scale) + 'px';
    }

    fit();
    window.addEventListener('resize', fit);
})();
</script>