@php
    $campaign_status = getCampaignStatus();
    $notice_message = getDisplayedMessage($page??null);
@endphp
{{ $nav }}
@if($campaign_status['pre_campaign'] && !$campaign_status['pre_live_campaign'])
    @once
        @push('script')
            <script>$(function(){ $('.toast').toast('show') })</script>
        @endpush
    @endonce
    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast bg-danger" data-autohide="false"
         style="max-width: unset; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index:99999">
        <div class="toast-body text-center py-1 align-items-center d-flex flex-row-reverse justify-content-between text-center toast-body">
            <button type="button" class="ml-2 close default-font-color" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <small><i class="fas fa-exclamation-triangle"></i> <strong class="mr-auto">Campaign not started yet.</strong> Share this URL with caution</small>
        </div>
    </div>
@endif

<div class="container-fluid container-lg p-0 h-auto d-block">

    <div class="w-100 h-auto position-relative" style="padding-bottom: {{$bottom_ui? '8' : '1'}}rem">
        {{ $masthead }}
        @if($top_right_ui)
            <section class="top_right_section z-1">
                {{ $top_right_ui }}
            </section>
        @endif
        <div class="main-section position-relative mx-auto"
            @if(($page ?? '') === 'login' || ($page ?? '') === 'register' || ($page ?? '') === 'voucher_use')
                @php $popup_bg = getActiveTheme('popup_bg_image'); @endphp
                @if($popup_bg) style="background-image: url('{{ $popup_bg }}');" @endif
            @endif
        >
            @if($notice_message)
                <div class="bold px-3 py-3 text-center mx-auto mt-4 mb-4">
                    {!! $notice_message !!}
                </div>
            @endif

            @if($campaign_status['campaign_active'])
                {{ $slot }}
            @elseif( ($page=='login' || $page=='register') && $campaign_status['pre_live_campaign'])
                {{ $slot }}
            @elseif( $page!=='gamification' && $campaign_status['redeem_active'] )
                {{ $slot }}
            @endif
        </div>

        {{-- store limit counter - outside main-section container --}}
        @php
            $storeLimitData = getStoreLimitData();
        @endphp
        @if($storeLimitData && count($storeLimitData) > 0 && ($page ?? '') !== 'voucher_use')
            <div class="store-limit-counter-inline">
                @foreach($storeLimitData as $storeLimit)
                    <div class="store-limit-card">
                        <div class="store-counter-badge">
                            <span class="counter-current {{ $storeLimit['current'] >= $storeLimit['limit'] ? 'limit-reached' : '' }}">
                                {{ $storeLimit['current'] }}
                            </span>
                            <span class="counter-separator">/</span>
                            <span class="counter-limit">{{ $storeLimit['limit'] }}</span>
                        </div>
                        @if(!empty($storeLimit['logo']))
                            <img src="{{ asset('assets/images/stores/' . $storeLimit['logo']) }}" alt="{{ $storeLimit['name'] }}" class="store-logo-large">
                        @else
                            <div class="store-logo-placeholder">{{ substr($storeLimit['name'], 0, 1) }}</div>
                        @endif
                        @if(isset($storeLimit['spend']))
                            <div class="store-spend-counter">
                                $ {{ number_format($storeLimit['spend'], 2) }}
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif

        {{-- image below counters --}}
        <div class="text-center my-3">
            <img src="{{ asset('assets/images/PM-FootballFever-Logos.png') }}" alt="Campaign Info" class="campaign-logos-image">
        </div>

        <style>
            .campaign-logos-image {
                max-width: 600px;
                width: 100%;
                height: auto;
            }

            .store-spend-counter {
                margin-top: 4px;
                font-size: 0.85rem;
                font-weight: 600;
                color: #fff;
                text-align: center;
            }

            .masthead-main {
                height: 200px !important;
            }
            .main-masthead {
                margin-bottom: -6.5rem !important;
            }
            .main-section {
                padding-top: 6.5rem !important;
            }

            @media (max-width: 768px) {
                .campaign-logos-image {
                    max-width: 100%;
                    width: 100%;
                }
                .masthead-main {
                    height: 150px !important;
                }
                .main-masthead {
                    margin-bottom: -5.0rem !important;
                }
                .main-section {
                    padding-top: 5.0rem !important;
                }
            }
        </style>

    </div>
</div>



@if($bottom_ui)
    <section class="bottom_section bottom-gradient position-fixed w-100 z-1" style="bottom:0;">
        {{ $bottom_ui }}
    </section>
@endif


{{$footer}}

@include('components.main.popup.team_pick')
@include('components.main.popup.custom')
@include('components.main.popup.message')