@extends('layouts.master')

@section('title')
    Ad Preview
@endsection

@section('content')
    <style>
        .ad-space {
            background-color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-weight: bold;
            margin-bottom: 10px;
            opacity: 0.5; /* Make other slots semi-transparent */
        }
        .ad-space img {
            display: none; /* Hide image in the gray slots */
        }
        .highlighted-ad {
            background-color: transparent; /* Remove gray background for the selected slot */
            opacity: 1; /* Make the selected slot fully opaque */
        }
        .highlighted-ad img {
            display: block; /* Show the image in the selected slot */
        }
    </style>

    <!-- Opening Note & Filter -->
    <div class="row mb-3 pb-1">
        <div class="col-12">
            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                <div class="flex-grow-1">
                    <h4 class="fs-16 mb-1">Ad Preview</h4>
                    <p class="text-muted mb-0">This is how your ad will appear.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Ad Spaces -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 text-center">
            <div class="ad-space {{ $ad_size == '970x90' ? 'highlighted-ad' : '' }}" style= "width:970px;height: 90px;">
                @if($ad_size == '970x90')
                    <img src="{{ $ad_image }}" alt="Ad Image" width="970px" style="width:970px;height: 90px;">
                @else
                    970x90 - Ad space available
                @endif
            </div>
        </div>
    </div>

    <!-- Row 2: 970x250 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-12 text-center">
            <div class="ad-space {{ $ad_size == '970x250' ? 'highlighted-ad' : '' }}" style="width:970px;height: 250px;">
                @if($ad_size == '970x250')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:970px;height: 250px;">
                @else
                    970x250 - Ad space available
                @endif
            </div>
        </div>
    </div>

    <!-- Row 3: 336x280 and 300x250 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '336x280' ? 'highlighted-ad' : '' }}" style="width:336px;height: 280px;">
                @if($ad_size == '336x280')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:336px;height: 280px;">
                @else
                    336x280 - Ad space available
                @endif
            </div>
        </div>
        <div class="col-11 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '300x250' ? 'highlighted-ad' : '' }}" style="width:300px;height: 250px;">
                @if($ad_size == '300x250')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:300px;height: 250px;">
                @else
                    300x250 - Ad space available
                @endif
            </div>
        </div>
        <div class="col-10 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '250x250' ? 'highlighted-ad' : '' }}" style="width:250px;height: 250px;">
                @if($ad_size == '250x250')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width: 250px; height: 250px;">
                @else
                    250x250 - Ad space available
                @endif
            </div>
        </div>
    </div>

    <!-- Row 4: 120x600, 300x600, and 160x600 -->
    <div class="row mb-3">
        <div class="col-6 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '120x600' ? 'highlighted-ad' : '' }}" style="width:120px;height: 600px;">
                @if($ad_size == '120x600')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:120px;height: 600px;">
                @else
                    120x600 - Ad space available
                @endif
            </div>
        </div>
        <div class="col-6 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '160x600' ? 'highlighted-ad' : '' }}" style="width:160px;height: 600px;">
                @if($ad_size == '160x600')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:160px;height: 600px;">
                @else
                    160x600 - Ad space available
                @endif
            </div>
        </div>
        <div class="col-6 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '300x600' ? 'highlighted-ad' : '' }}" style="width:300px;height: 600px;">
                @if($ad_size == '300x600')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:300px;height: 600px;">
                @else
                    300x600 - Ad space available
                @endif
            </div>
        </div>
    </div>

    <!-- Row 5: 320x480 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-8 text-center">
            <div class="ad-space {{ $ad_size == '320x480' ? 'highlighted-ad' : '' }}" style="width:320px;height: 480px;">
                @if($ad_size == '320x480')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:320px;height: 480px;">
                @else
                    320x480 - Ad space available
                @endif
            </div>
        </div>
    </div>

    <!-- Row 6: 320x50, 320x100 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-4 text-center">
            <div class="ad-space {{ $ad_size == '320x100' ? 'highlighted-ad' : '' }}" style="width:320px;height: 100px;">
                @if($ad_size == '320x100')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:320px;height: 100px;">
                @else
                    320x100 - Ad space available
                @endif
            </div>
            <div class="ad-space {{ $ad_size == '320x50' ? 'highlighted-ad' : '' }}" style="width:320px;height: 50px;">
                @if($ad_size == '320x50')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:320px;height: 50px;">
                @else
                    320x50 - Ad space available
                @endif
            </div>
        </div>
    </div>

    <!-- Row 7: 300x100, 300x50 -->
    <div class="row justify-content-center mb-3">
        <div class="col-8 col-md-6 text-center">
            <div class="ad-space {{ $ad_size == '300x100' ? 'highlighted-ad' : '' }}" style="width:300px;height: 100px;">
                @if($ad_size == '300x100')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:300px;height: 100px;">
                @else
                    300x100 - Ad space available
                @endif
            </div>
            <div class="ad-space {{ $ad_size == '300x50' ? 'highlighted-ad' : '' }}" style="width:300px;height: 50px;">
                @if($ad_size == '300x50')
                    <img src="{{ $ad_image }}" alt="Ad Image" style="width:300px;height: 50px;">
                @else
                    300x50 - Ad space available
                @endif
            </div>
        </div>
    </div>
@endsection