@extends('layouts.'.getAppLayout())

@section('style')
    @parent
@endsection

@php
    $campaign_status = getCampaignStatus();
    $modules = getModuleActivationStatus();
    $uiConfigs = $uiConfigs ?? [];
    $clsShowHideAct = data_get($campaign_status, 'campaign_active') ? '' : 'd-none';
@endphp
@section('script')
    @parent
    <script>
        window.CAMPAIGN_STATUS = @json($campaign_status);
        window.QR_POPUP_RESPONSE = @json(request()->session()->get('qr_route_result'));

        @if(config('sys.show_voucher_result'))
        const SHOW_VOUCHER_RESULT = true;
        @else
        const SHOW_VOUCHER_RESULT = false;
        @endif
    </script>
    <script src="{{ mix('js/enterprise/main-page.js') }}"></script>
@append

@section('content')
    @include('components.utility.tutorial_popup_sequence')
    <!--if its a stampcard campaign-->
    @if($modules['dsc'])
        @include('components.utility.tutorial', ['is_home' => true])

        @component('components.main.main_ui', ['page'=>'gamification'])
            @slot('nav')
                @component('components.main._nav')
                    @slot('extra_btn')
                        <button class="navbar-toggler border-0 default-font-color" type="button" id="notification_btn" load_popup="popup_notifications">
                            <i class="fas fa-bell"></i>
                        </button>
                    @endslot
                @endcomponent
            @endslot

            @slot('top_right_ui')
                <div style="display: none" class="check_in_ui top_layer_ui {{!$campaign_status['campaign_active']?'d-none':''}}" id="check_in_btn" load_popup="popup_daily_check_in" function_hook="showDailyCheckIn">
                    <i class="fas fa-calendar" style=""></i>
                    <div id="check-status"></div>
                </div>
            @endslot

            @if (config('sys.show_dsc_masthead'))
            @slot('masthead') <x-main._masthead-main/> @endslot
            @endif

            @include('components.main.main_game_layout')

            <div class="voucher_single-disclaimer default-font-color text-center small mb-2">
                <div class="d-flex flex-column align-items-center justify-content-center mb-2">
                    <span>If you drink, don't drive</span>
                    <img src="{{ asset('assets/images/carlsberg/disclaimer-icon.png') }}" alt="" style="height: 20px; width: auto; margin-top: 6px;">
                </div>
                <p class="mb-1">Please share this site only with individuals aged 21+ and those who are non-Muslims.</p>
                <p class="mb-0">Carlsberg Marketing Sdn Bhd 198501008089 (140534-M)<br>
                    55, Persiaran Selangor, Seksyen 15, 40200 Shah Alam, Selangor, Malaysia.</p>
            </div>

            @slot('bottom_ui')
                <x-main.install-toast/>
                @if(data_get($uiConfigs, 'showFooter', true))
                    <div class="buttons container-fluid p-0">
                        <div class="bottom_ui_wrapper pt-3">
                            <div class="bottom_ui top_layer_ui" id="daily_challenge_btn" load_popup="popup_challenge_list">
                                <i class="fas fa-gamepad"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="notification_btn" load_popup="popup_notifications">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="how_to_participate_btn" load_popup="popup_how_to_participate">
                                <i class="fas fa-question-circle"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="share_btn" load_popup="popup_share">
                                <i class="fas fa-share-alt"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="reward_redemption_btn" load_popup="popup_rewards">
                                <i class="fas fa-gift"></i>
                            </div>
                        </div>
                    </div>
                @endif

                <x-main._footer/>
            @endslot

        @endcomponent
    @else
        @component('components.main.main_ui', ['page'=>'gamification'])
            @slot('nav')
                @component('components.main._nav', ['uiConfigs' => $uiConfigs])
                @endcomponent
            @endslot

            @slot('top_right_ui')
                <div style="display: none" class="check_in_ui top_layer_ui {{$clsShowHideAct}}" id="check_in_btn" load_popup="popup_daily_check_in" function_hook="showDailyCheckIn">
                    <i class="fas fa-calendar" style=""></i>
                    <div id="check-status"></div>
                </div>
            @endslot

            @slot('masthead') <x-main._masthead-main/> @endslot

            @include('components.main.main_game_layout', ['uiConfigs' => $uiConfigs])

            {{-- <x-main.main_game_layout/> --}}

            <div class="voucher_single-disclaimer default-font-color text-center small mb-2">
                <div class="d-flex flex-column align-items-center justify-content-center mb-2">
                    <span>If you drink, don't drive</span>
                    <img src="{{ asset('assets/images/carlsberg/disclaimer-icon.png') }}" alt="" style="height: 20px; width: auto; margin-top: 6px;">
                </div>
                <p class="mb-1">Please share this site only with individuals aged 21+ and those who are non-Muslims.</p>
                <p class="mb-0">Carlsberg Marketing Sdn Bhd 198501008089 (140534-M)<br>
                    55, Persiaran Selangor, Seksyen 15, 40200 Shah Alam, Selangor, Malaysia.</p>
            </div>

            @slot('bottom_ui')
                <x-main.install-toast/>
                @if(data_get($uiConfigs, 'showFooter', true))
                    <div class="buttons container-fluid p-0">
                        <div class="bottom_ui_wrapper pt-3">
                            <div class="bottom_ui top_layer_ui" id="daily_challenge_btn" load_popup="popup_challenge_list">
                                <i class="fas fa-gamepad"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="notification_btn" load_popup="popup_notifications">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="how_to_participate_btn" load_popup="popup_how_to_participate">
                                <i class="fas fa-question-circle"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="share_btn" load_popup="popup_share">
                                <i class="fas fa-share-alt"></i>
                            </div>
                            <div class="bottom_ui top_layer_ui" id="reward_redemption_btn" load_popup="popup_rewards">
                                <i class="fas fa-gift"></i>
                            </div>
                        </div>
                    </div>
                @endif

                <x-main._footer/>
            @endslot

        @endcomponent
    @endif

    <button type="button" id="scroll-to-bottom-btn" class="rounded-circle position-fixed d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; padding: 0; border: none; background-color: {{ config('sys.theme.default.button_bg') ?? '#08633B' }}; color: {{ config('sys.theme.default.button_color') ?? '#FFFFFF' }}; right: 1rem; bottom: 6.5rem; z-index: 20;">
        <i class="fas fa-chevron-down"></i>
    </button>
    <script>
        $(function () {
            $('#scroll-to-bottom-btn').on('click', function () {
                $('html, body').animate({ scrollTop: $(document).height() }, 500);
            });
        });
    </script>

    {{-- standard popups ui --}}
    @php
        $popups = [
            'notifications',
            'daily_checkin',
            'challenge_list',
            'rewards',
            'error',
            'share',
            'upload_image',
            'upload_receipt',
            'offline_eng',
            'challenge_result',
            'update_profile',
            'singpost_qr_success',
            'singpost_reward_voucher',
            'how_to_participate',
        ];
    @endphp
    @foreach($popups as $popup)
        @include('components.main.popup.'.$popup)
    @endforeach
    @include('components.plant.popup_ar_game')

    <div id="notify-toast" class="bg-toast overflow-hidden border-0 toast hide flex-row slide-in-down ml-2"
         role="alert" data-delay="6000"
         style="top: 0; z-index: 1; left: 50%; position: fixed; transform: translate(-50%, 0px);">

        <div class="d-flex justify-content-between" style="background-color: rgba(12,12,12,0.75);">
            <div class="toast-body p-2 w-100 d-flex justify-content-between align-items-center">
                <div class="toast-text overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;">
                </div>
            </div>
            <div class="toast-footer bg-transparent pr-1 d-flex align-item-center">
                <button type="button" class="m-0 mb-1 close text-white" aria-label="Close">
                    <span aria-hidden="true" class="mb-1">&times;</span>
                </button>
            </div>
        </div>
    </div>



@endsection