@php
    use App\Models\PopupModal;
    $now = \Carbon\Carbon::now();

    // Get active modals with their associated pages
    $activeModals = PopupModal::with('pages')
        ->where(function($query) use ($now) {
            $query->where('start_date', '<', $now->format('Y-m-d'))
                  ->orWhere(function($q) use ($now) {
                      $q->where('start_date', '=', $now->format('Y-m-d'))
                        ->where('start_time', '<=', $now->format('H:i:s'));
                  });
        })
        ->where(function($query) use ($now) {
            $query->where('end_date', '>', $now->format('Y-m-d'))
                  ->orWhere(function($q) use ($now) {
                      $q->where('end_date', '=', $now->format('Y-m-d'))
                        ->where('end_time', '>=', $now->format('H:i:s'));
                  });
        })
        ->where('status', '=', '1')
        ->get();

        // dd($activeModals);
@endphp

@foreach ($activeModals as $modal)
    @php
    $shouldShow = false;

    foreach ($modal->pages as $page) {
        // Home page check (exact match)
        if ($page->page_url === '/' && request()->is('/')) {
            $shouldShow = true;
            break;
        }
        // Category/page check (matches URL pattern)
        elseif (request()->is($page->page_url)) {
            $shouldShow = true;
            break;
        }
    }
    @endphp

    @php
    // dd($currentPath);
    // dd($shouldShow);
    @endphp

    @if ($shouldShow)
        <!-- Desktop Modal -->
        <div class="modal fade" id="popupModalDesktop-{{ $modal->id }}">
            <div class="modal-dialog" style="max-width: 620px">
                <div class="modal-content">
                    <div class="modal-body p-2">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; right: 2px; top:0; width: .05em; height: 0.5em;"></button>
                        <a href="{{ $modal->slug }}">
                            <img src="{{ asset('storage/popup/'.$modal->desktop_image) }}" alt="{{ $modal->name }}" class="img-fluid w-100">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mobile Modal -->
        <div class="modal fade" id="popupModalMobile-{{ $modal->id }}">
            <div class="modal-dialog modal-sm" style="max-width: 320px; margin: 0 auto">
                <div class="modal-content">
                    <div class="modal-body p-1">
                        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; right: 0; top:0; width: 2px; height: 2px;"></button>
                        <a href="{{ $modal->slug }}">
                            <img src="{{ asset('storage/popup/'.$modal->mobile_image) }}" alt="{{ $modal->name }}" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endforeach

<script>
    $(document).ready(function () {
        // Function to check screen size and show/hide the modals accordingly
        function checkScreenSize() {
            @foreach ($activeModals as $modal)
                if ($(window).width() < 768) {
                    // Small screens (e.g., mobile)
                    $('#popupModalMobile-{{ $modal->id }}').modal('show');
                    $('#popupModalDesktop-{{ $modal->id }}').modal('hide');
                } else {
                    // Larger screens
                    $('#popupModalMobile-{{ $modal->id }}').modal('hide');
                    $('#popupModalDesktop-{{ $modal->id }}').modal('show');
                }
            @endforeach
        }

        // Initial check on page load
        checkScreenSize();

        // Check on window resize
        $(window).resize(function() {
            checkScreenSize();
        });
    });
</script>