@if (@$widgets)
@forelse ($widges as $widget)

    {{-- ================= WIDGET ================= --}}
    @if ($widget['type'] === 'widget')

        @php
            $widget = $widget['data'];
            $viewPath = 'asian.widgets.' . $widget['file'];
        @endphp

        @if(View::exists($viewPath))
            @include($viewPath, ['widget' => $widget])
        @endif


    {{-- ================= ADS ================= --}}
    @elseif ($widget['type'] === 'ad')

        @php
            /** @var \App\Models\AdSpace $ad */
            $ad = $widget['data'];
        @endphp

        <div class="ad-container ads_{{ $ad->id ?? 'default' }}">
            @if ($ad->type == 1 && $ad->image)
                <div class="ad-image-wrapper">
                    <img
                        class="ad-image"
                        src="{{ $ad->image }}"
                        alt="{{ $ad->title }}"
                    >
                </div>
            @elseif ($ad->type == 2)
                <div class="ad-code-wrapper">
                    {!! $ad->ad_code !!}
                </div>
            @endif
        </div>

    @endif

@empty
@endforelse
@endif


@if ($widget || @$ad)
  {{-- ================= WIDGET ================= --}}
    @if ($type === 'widget')

        @php
            $viewPath = 'asian.widgets.' . $widget['type'];
        @endphp

        @if(View::exists($viewPath))
            @include($viewPath, ['widget' => $widget])
        @endif


    {{-- ================= ADS ================= --}}
    @elseif ($type === 'ad')
        <div class="ad-container ads_{{ $ad->id ?? 'default' }}">
            @if ($ad->type == 1 && $ad->image)
                <div class="ad-image-wrapper">
                    <img
                        class="ad-image"
                        src="{{ $ad->image }}"
                        alt="{{ $ad->title }}"
                    >
                </div>
            @elseif ($ad->type == 2)
                <div class="ad-code-wrapper">
                    {!! $ad->ad_code !!}
                </div>
            @endif
        </div>
    @endif
@endif

<style>
    .ad-container {
        margin: 15px 0;
        overflow: hidden;
    }

    .ad-image-wrapper {
        width: 100%;
        overflow: hidden;
        border-radius: 6px;
        background: #f8f9fa;
    }

    .ad-image {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        object-fit: contain;
    }

    .ad-code-wrapper {
        width: 100%;
        text-align: center;
    }

    @media (max-width: 768px) {
        .ad-container {
            margin: 10px 0;
        }
    }
</style>