@php
    if (is_string($state)) {
        $state = json_decode($state, true);
    }
    $boxNumber = 1;
@endphp

@if ($state && isset($state['size'], $state['contents']))
    @php
        $actualWidth = $state['size']['width'] ?? 800;
        $actualHeight = $state['size']['height'] ?? 600;
        $maxWidth = 200;
        $scale = $maxWidth / $actualWidth;
        $scaledWidth = $actualWidth * $scale;
        $scaledHeight = $actualHeight * $scale;
    @endphp

    <div
        style="position: relative; width: {{ $scaledWidth }}px; height: {{ $scaledHeight }}px; border: 1px solid #ccc; background: white; overflow: hidden; margin: 0 auto;">
        @foreach ($state['contents'] as $content)
            @php
                $cWidth = ($content['size']['width'] ?? 0) * $scale;
                $cHeight = ($content['size']['height'] ?? 0) * $scale;
                $cX = ($content['pos']['x'] ?? 0) * $scale;
                $cY = ($content['pos']['y'] ?? 0) * $scale;
                $origin = $content['origin'] ?? 'top-left';
                $rotate = (float) ($content['rotate'] ?? 0);
                if ($origin === 'center') {
                    $cX = $cX - $cWidth / 2;
                    $cY = $cY - $cHeight / 2;
                }
                $type = $content['type'] ?? 'box';
                $src = $content['src'] ?? '';
                $text = $content['text'] ?? ($content['order'] ?? null);
            @endphp

            <div
                style="position: absolute; left: {{ $cX }}px; top: {{ $cY }}px; width: {{ $cWidth }}px; height: {{ $cHeight }}px; background-color: rgba(0,0,255,0.8); transform: rotate({{ $rotate }}deg); transform-origin: center center;">
                @if ($type === 'image' && $src)
                    <img src="{{ $src }}" style="width: 100%; height: 100%;" />
                @elseif($type === 'box')
                    <div
                        style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white;">
                        {{ $text ?? $boxNumber++ }}
                    </div>
                @endif
            </div>
        @endforeach
    </div>
@endif