@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')

            @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="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/> --}}

            @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="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


    {{-- 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',
        ];
    @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