@php
$config = getModuleActivationStatus();
$component_maps = [
    'dstw' => [
        'name' => 'spinandwin',
        'btn' => 'heading.btn_spin',
    ],
    'spinandwin' => [
        'name' => 'spinandwin',
        'btn' => 'heading.btn_spin',
    ],
    'scratchcard' => [
        'name' => 'scratchcard',
        'btn' => 'heading.btn_scratch_again',
    ],
    'riddle' => [
        'name' => 'riddle',
        'btn' => 'heading.btn_start',
    ],
    'clicktowin' => [
        'name' => 'clicktowin',
        'btn' => 'heading.btn_start',
    ],
    'dsc' => [
        'name' => 'stampcard',
        'btn' => 'heading.btn_start',
    ],
    'slotmachine' => [
        'name' => 'slotmachine',
        'btn' => 'heading.btn_start',
    ],
];

$proj = config('sys.config');
$campaign_name = getCampaignName();
@endphp

<div class="main-game-wrapper h-100">
    @include('components.stampcard.popup.entries_list')
    <div class="text-center">
        <h5 class="campaign-title">{!! trans_or('heading.campaign_title', config('sys.campaign_name') ?? 'campaign title') !!}</h5>
        @if ($is_show_point ?? true)
            @if (config('sys.has_bg_points'))
                <div class="text-bold-container">
                    <div class="text-bold">
                        {{ __('heading.title_points') }}:
                        <span name="reward_point"></span>
                    </div>
                </div>
            @else
            <div class="text-bold">
                {{ __('heading.title_points') }}:
                <span name="reward_point"></span>
            </div>
            @endif
        @endif
{{--        @if ($is_show_chance || !filter_var($config['dsc']) )--}}
{{--        @endif--}}
        <div class="text-center">
            <div class="text-bold text-center">
                {{ __('heading.title_tries_left') }}:
                <span name="chance_balance"></span>
            </div>
        </div>
        {!! $slot !!}
    </div>

    {{-- main stuff put here --}}

    {{-- main game --}}
{{--    <div class="main-game-component my-4">--}}
    <div class="main-game-component">

        @foreach ($component_maps as $key => $attr)
            @if ($config[$key])
                @php $name = 'main.games.' . $attr['name']; @endphp
                <x-dynamic-component :component="$name">
                    @slot('bottom')
                        <div class="main-game-component-cta d-none my-4">
                            <button class="btn btn-primary">{{ __($attr['btn']) }}</button>
                        </div>
                    @endslot
                </x-dynamic-component>
            @endif
        @endforeach

        {{-- input promo code button --}}
        {{-- 
        <button type="button" class="btn btn-primary btn-main-game-promo">
            {{ __('heading.btn_redeem_promo_code') }}
        </button> 
        --}}

        {{-- scan QR button --}}
        <button type="button" class="btn btn-primary btn-main-game-scan-qr">
            {!! __('heading.btn_scan_qr') !!}
        </button>

        @if(config('sys.whatsapp.link'))
            <a href="{{ config('sys.whatsapp.link') }}" class="btn btn-primary btn-whatsapp" target="_blank">
                Upload more receipts on WhatsApp
                <span class="btn-text-new-line">to get more chances</span>
            </a>
        @endif

        <x-utility.loading/>

        <div class="main-game-component-err-msg d-none">
            {{ __('label.msg_no_main_game') }}
        </div>
    </div>

    {{-- challenge shortcut --}}
    <h6 class="mb-3 text-center">{{ config($proj.'.game_footer_message') }}</h6>
    <div class="challenge-shortcut my-3 text-center d-none">
        <div class="challenge-shortcut-content d-flex justify-content-center align-items-start flex-wrap"></div>
    </div>

    @if($permit_copy = getCustomizeViewPath('permit_copy'))
        @component("components.main.customizes.{$permit_copy}")
        @endcomponent
    @endif
</div>

{{-- promo code input popup --}}
{{--
@component(getPopupLayout(),  ['id' => 'popup_promo_code'])
    <div class="status_item" status_id="default">
        <div class="promo-code-step-1 text-center">
            <div class="form-group text-left">
                <label for="main-game-promo-code-input">
                    {{ __('heading.form_promocode_title') }}
                </label>
                <div id="promo-weekly-limit-msg" class="mb-2" style="font-size: 0.9em; font-weight: bold; display: none;"></div>
                <input type="text" class="form-control" id="main-game-promo-code-input" placeholder="{{ __('label.placeholder_promocode_input') }}">
            </div>

            <button type="button" class="btn btn-primary btn-block" id="main-game-promo-submit">
                {{ __('label.promocode_popup_btn_next_page') }}
            </button>

            <div class="text-center mt-2">
                <span id="main-game-promo-msg" class="message text-dark bg-warning d-none" style="display:none;"></span>
            </div>
        </div>
    </div>

    <!-- promo code submission verification message -->
    <div class="status_item d-none" status_id="success">
        <div class="promo-code-step-2 text-center">
            <div class="card bg-transparent border-0">
                <div class="card-body">
                    <h5 class="mb-3">
                        {{!!  __('messages.promocode_popup_desc_one') !!}}
                    </h5>
                    <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">
                        {{ __('label.promocode_popup_btn_okay') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- weekly chance limit reached message -->
    <div class="status_item d-none" status_id="limit_reached">
        <div class="promo-code-limit-reached text-center">
            <div class="card bg-transparent border-0">
                <div class="card-body">
                    <h4 class="mb-3">
                        You have met the maximum redemption for the week, please try again next week.
                    </h4>
                    <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">
                        {{ __('label.promocode_popup_btn_okay') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endcomponent
--}}

{{-- QR scan popup --}}
@component(getPopupLayout(), ['id' => 'popup_qr_scan'])
    {{-- default = "tap to start", shown when we cannot open the camera without a gesture --}}
    <div class="status_item" status_id="default">
        <div class="text-center">
            <h5 class="mb-2">{!! __('heading.btn_scan_qr') !!}</h5>
            <p class="mb-3">{!! __('label.qr_scan_hint') !!}</p>

            <button type="button" class="btn btn-primary btn-block btn-qr-start-camera">
                {!! __('label.btn_tap_to_start_camera') !!}
            </button>
            <button type="button" class="btn btn-link btn-block" data-dismiss="modal">
                {{ __('label.btn_cancel') }}
            </button>
        </div>
    </div>

    {{-- live scanner --}}
    <div class="status_item d-none" status_id="scanning">
        <div class="text-center">
            <h5 class="mb-2">{!! __('heading.btn_scan_qr') !!}</h5>
            <p class="mb-2">{!! __('label.qr_scan_hint') !!}</p>

            <div class="qr-scanner-viewport mx-auto mb-2">
                <video id="qr-scanner-video" playsinline autoplay muted></video>
                <div class="qr-scanner-reticle"></div>
            </div>

            {{-- offscreen frame buffer used by the decoder --}}
            <canvas id="qr-scanner-canvas" class="d-none"></canvas>

            <p id="qr-scanner-hint" class="small mb-2" style="min-height:1.2em"></p>
            <img src="/file/images/CDCNewwithQRSticker3.webp" class="img-fluid d-block mx-auto mb-2" alt="">

            <button type="button" class="btn btn-outline-primary btn-block btn-qr-torch d-none">
                <i class="fas fa-bolt"></i> Light
            </button>
            <button type="button" class="btn btn-link btn-block" data-dismiss="modal">
                {{ __('label.btn_cancel') }}
            </button>
        </div>
    </div>

    <div class="status_item d-none" status_id="processing">
        <div class="my-5 text-center">
            <div class="spinner-border" role="status"><span class="sr-only">{{ __('label.loading') }}...</span></div>
            <p class="mt-3 mb-0">{{ __('label.loading') }}...</p>
        </div>
    </div>

    <div class="status_item d-none" status_id="success">
        <div class="card bg-transparent border-0 text-center">
            <div class="card-body">
                <h4 class="mb-3">{{ __('messages.promocode_popup_desc_one') }}</h4>
                <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">
                    {{ __('label.promocode_popup_btn_okay') }}
                </button>
            </div>
        </div>
    </div>

    {{-- camera blocked / unsupported / in-app webview --}}
    <div class="status_item d-none" status_id="denied">
        <div class="card bg-transparent border-0 text-center">
            <div class="card-body">
                <h5 class="mb-2" id="qr-denied-title">{{ __('label.camera_unavailable') }}</h5>
                <p class="mb-3" id="qr-denied-subtitle"></p>

                <a href="{{ url()->current() }}" id="qr-open-in-browser"
                   class="btn btn-primary btn-block d-none" target="_blank" rel="noopener">
                    {{ __('label.btn_open_in_browser') }}
                </a>
                <button type="button" class="btn btn-primary btn-block btn-qr-start-camera">
                    {!! __('label.btn_tap_to_start_camera') !!}
                </button>
                <button type="button" class="btn btn-link btn-block" data-dismiss="modal">
                    {{ __('label.btn_cancel') }}
                </button>
            </div>
        </div>
    </div>

    <div class="status_item d-none" status_id="error">
        <div class="card bg-transparent border-0 text-center">
            <div class="card-body">
                <h5 class="mb-2" id="qr-error-title">{{ __('messages.invalid_qr_code_title') }}</h5>
                <p class="mb-3" id="qr-error-subtitle"></p>
                <button type="button" class="btn btn-primary btn-block btn-qr-start-camera">
                    {{ __('label.btn_scan_qr_again') }}
                </button>
                <button type="button" class="btn btn-link btn-block" data-dismiss="modal">
                    {{ __('label.promocode_popup_btn_okay') }}
                </button>
            </div>
        </div>
    </div>
@endcomponent

@section('style')
    <style>
        .text-bold-container {
            display: inline-block;
            padding: 10px 50px;
            background-color: #2c003e;
            border-radius: 20px;
            border: 2px solid white;
            background-image: linear-gradient(#2c003e, #2c003e), linear-gradient(to right, #fff, #fff);
            background-origin: border-box;
            background-clip: border-box;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        @media (max-width: 760px) {
            .campaign-title {
                font-size: 1rem;
                line-height: 1.2;
            }
        }

        /* ── live QR scanner ── */
        .qr-scanner-viewport {
            position: relative;
            width: 100%;
            max-width: 320px;
            aspect-ratio: 1 / 1;
            border-radius: 16px;
            overflow: hidden;
            background: #000;
        }

        /* aspect-ratio fallback for older WebKit */
        @supports not (aspect-ratio: 1 / 1) {
            .qr-scanner-viewport { height: 0; padding-bottom: 100%; }
        }

        .qr-scanner-viewport video {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* iOS shows a black frame for a beat before the first frame paints */
            background: #000;
        }

        .qr-scanner-reticle {
            position: absolute;
            top: 12%; left: 12%;
            width: 76%; height: 76%;
            border: 3px solid rgba(255, 255, 255, .9);
            border-radius: 12px;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
            pointer-events: none;
        }

        #qr-scanner-hint { color: #ffc107; }
    </style>
@endsection

@section('script')
    @parent
    <script type="text/javascript">
        window.whatsappLink = "{{ config('sys.whatsapp.link') }}";
        window.SUPPORT_EMAIL = "{{ config('sys.support_email', 'support@skale.today') }}";
        window.REWARD_CODE_PATH = "rw";
        // jsQR is only fetched on browsers without native BarcodeDetector (iOS Safari)
        // Self-host by dropping jsQR.js into resources/js/vendor/ and pointing this at "{{ asset('js/vendor/jsQR.js') }}"
        window.QR_DECODER_URL = "{{ asset('js/jsQR.js') }}";
        window.QR_DECODER_URL_FALLBACK = "https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js";
        // Hosts the scanner will POST for server-side redirect resolution
        window.QR_SHORTENER_HOSTS = @json(config('sys.qr_shortener_hosts', []));
    </script>
    <script src="{{ mix('js/enterprise/main_games.js') }}" defer></script>
@endsection