@php
    $ads = \App\Models\Advertisement::where('status','active')->latest()->with('media')->get();
@endphp

<div class="suggestion-card ad-card mt-4 p-0 shadow-lg rounded" style="border: 2px solid #3e94e7; overflow: hidden;">

    <div class="d-flex justify-content-between align-items-center p-3"
         style="background: linear-gradient(90deg, #3e94e7 0%, #3e94e7 50%, #3e94e7 100%); color: #fff;">

        <a href="{{ route('addInfo') }}" style="color: white; font-size: 20px; margin: 0; display: flex; align-items: center;">
            <i class="fas fa-info-circle" style="margin-right: 8px;"></i> Advertisement Information
        </a>

{{--        <div class="d-flex align-items-end" style="padding: 0!important;">--}}
{{--            <button class="btn btn-warning btn-sm mr-2" onclick="openAdvertiseModal()">--}}
{{--                <i class="fas fa-info-circle"></i> AD Rates--}}
{{--            </button>--}}

{{--            <div class="dropdown">--}}
{{--                <button class="btn btn-light btn-sm dropdown-toggle" type="button" id="dropdownMenuButton"--}}
{{--                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                    <i class="fas fa-ellipsis-v"></i>--}}
{{--                </button>--}}
{{--                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">--}}
{{--                    <a class="dropdown-item" href="#">Manage Ads</a>--}}
{{--                    <a class="dropdown-item" href="#" onclick="openAdvertiseModal()">Advertise Now</a>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

    <div class="ad-wrap text-center p-4" style="position: relative; min-height: 220px; background: #f9f9f9;">
        @if($ads->count())
            @foreach($ads as $index => $ad)
                <div class="single-ad" style="display: {{ $index === 0 ? 'block' : 'none' }};">

                    <h4 style="font-weight: bold; color: #333;">{{ $ad->ad_name }}</h4>
                    <p style="margin-bottom: 5px; color: #777;"><i class="fas fa-tag"></i> {{ $ad->ad_category }}</p>
                    <p style="font-size: 14px; color: #555;">{{ Str::limit($ad->ad_description, 100) }}</p>

                    @php
                        $media = $ad->getFirstMedia('advertisement_media');
                    @endphp

                    @if($media)
                        <div class="mt-3">
                            @if(Str::contains($media->mime_type, 'video'))
                                <video class="ad-video" muted autoplay playsinline
                                       style="max-width: 100%; max-height: 160px; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.2);">
                                    <source src="{{ $media->getUrl() }}" type="{{ $media->mime_type }}">
                                    Your browser does not support the video tag.
                                </video>
                            @else
                                <img class="ad-image" src="{{ $media->getUrl() }}" alt="Ad Media"
                                     style="max-width: 100%; max-height: 160px; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.2);">
                            @endif
                        </div>
                    @endif


                </div>
            @endforeach
        @else
            <h3 class="text-muted">No Active Advertisements</h3>
        @endif
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let ads = document.querySelectorAll('.single-ad');
        let current = 0;

        function showNextAd() {
            ads[current].style.display = 'none';
            current = (current + 1) % ads.length;
            ads[current].style.display = 'block';
            setupRotation();
        }

        function setupRotation() {
            let currentAd = ads[current];
            let video = currentAd.querySelector('.ad-video');

            if (video) {
                video.currentTime = 0;
                video.play();
                video.onended = showNextAd;
            } else {
                setTimeout(showNextAd, 5000); // 5 seconds for images
            }
        }

        if (ads.length > 1) {
            setupRotation();  // Only rotates if more than 1 ad
        } else if (ads.length === 1) {
            displaySingleAd(ads[0]);  // Show the single ad without rotation
        }

        function displaySingleAd(ad) {
            const container = document.getElementById('adContainer');
            container.innerHTML = ad.html;  // Replace with your own render logic
        }

        if (ads.length >= 1) {
            setupRotation();
        }
    });
</script>