@php
    $id_popup_result = 'popup_challenge_result';
    $id_receipt_pending_result = 'popup_upload_receipt_pending';
@endphp

@section('script')
    {{--    <script src="{{ mix('js/enterprise/challenges.js') }}"></script>--}}
    <script>
        window.nel_urls = {
            huawei : '{{ asset ("/assets/images/stampcard/Huawei_App_Store.svg") }}',
            ios : '{{ asset ("/assets/images/stampcard/Apple_App_Store.svg") }}',
            play : '{{ asset ("/assets/images/stampcard/Google_Play_Store.svg") }}',
            facebook : '{{ asset ("assets/images/ar/token_icons/Icon_FB.png") }}',
            twitter : '{{ asset ("assets/images/ar/token_icons/Icon_FB.png") }}',
            tiktok : '{{ asset ("assets/images/ar/token_icons/Icon_FB.png") }}',
        };
        $(function () {
            $('#{{$id_popup_result}}-submit-address').on('click', function () {
                loadPopup('popup_attempt_reward_need_address', 'default');
                window.listenAddressSubmission(
                    '#popup_reward-submit-address',
                    function (response) {
                        hide_popup();
                    },
                    function (res) {
                        res !== null && hide_popup();
                    },
                    {{ boolToInt($validate_postal ?? false) }}
                );
            });

            // Countdown
            $(document)
                .on('shown.bs.modal', '.modal', function(){
                    var $modal = $(this),
                        $timer = $modal.find('.countdown-timer'),
                        timeLeft = 60;

                    $timer.text(timeLeft + 's');
                    clearInterval($modal.data('countdown'));

                    // tick every second
                    var interval = setInterval(function(){
                        timeLeft--;
                        $timer.text(timeLeft + 's');

                        if (timeLeft <= 0) {
                            clearInterval(interval);
                        }
                    }, 1000);

                    $modal.data('countdown', interval);
                })
                .on('hide.bs.modal', '.modal', function(){
                    clearInterval($(this).data('countdown'));
                });
        });
    </script>
@append

@component(getPopupLayout(), ['id'=> $id_popup_result])


    <div class="status_item my-4"  status_id="default">
        <h5 class="title">{!! session('qr_route_result')['message']['main'] ?? __('enterprise.titleReward') !!}</h5>
        <p class="subtitle">{!! session('qr_route_result')['message']['sub'] ?? __('enterprise.labelRewardDescription') !!}</p>
        <div class="align-items-center bold d-flex justify-content-center my-4 reward-single">
            <span class="reward-qty h1 bold d-inline mr-2"></span>
            <span class="reward-type d-inline"></span>
        </div>
        @include('components.main.multi_reward')

        <div class="align-items-center bold justify-content-center my-4 d-none">
            <span class="item-name d-inline"></span>
        </div>
        <div class="align-items-center d-flex justify-content-center my-2 reward-remark force-hide">
        </div>

        <div class="align-items-center d-flex justify-content-center my-2 reward-disclaimer force-hide">
        </div>

        @if(!app()->isProduction() && auth()->check() && auth()->user()->hasRole('super-admin'))
            <div class="align-items-center d-flex justify-content-center my-2 reward-debug force-hide flex-column"
                 style="border: 1px solid; border-radius: 10px; padding: 10px; background-color: grey; color: #fff;">
            </div>
        @endif

        <button class='btn btn-primary mt-3' id="{{$id_popup_result}}-okay" data-dismiss="modal">{{ __('heading.btn_challenge_result_okay') }}</button>
        <button class='btn btn-primary mt-3 d-none' id="{{$id_popup_result}}-submit-address">Okay</button>

    </div>

@endcomponent

@component(getPopupLayout(), ['id'=> $id_receipt_pending_result])


    <div class="status_item my-4"  status_id="default">
        <h5 class="title">{!! session('qr_route_result')['message']['main'] ?? __('enterprise.titleReward') !!}</h5>
        <p class="subtitle" style="color: white">{!! session('qr_route_result')['message']['sub'] ?? __('enterprise.labelRewardDescription') !!}</p>
        <div class="text-center my-3">
            <img src="/file/images/yakult_gif.webp" alt="Reward animation" class="img-fluid" style="width: 70%; height: auto;">
        </div>

        <div class="countdown-timer text-center my-2 h4 font-weight-bold"></div>

        <div class="align-items-center bold d-flex justify-content-center my-4 reward-single">
            <span class="reward-qty h1 bold d-inline mr-2"></span>
            <span class="reward-type d-inline"></span>
        </div>
        @include('components.main.multi_reward')

        <div class="align-items-center bold justify-content-center my-4 d-none">
            <span class="item-name d-inline"></span>
        </div>
        <div class="align-items-center d-flex justify-content-center my-2 reward-remark force-hide">
        </div>

        <div class="align-items-center d-flex justify-content-center my-2 reward-disclaimer force-hide">
        </div>

        @if(!app()->isProduction() && auth()->check() && auth()->user()->hasRole('super-admin'))
            <div class="align-items-center d-flex justify-content-center my-2 reward-debug force-hide flex-column"
                 style="border: 1px solid; border-radius: 10px; padding: 10px; background-color: grey; color: #fff;">
            </div>
        @endif
    </div>

@endcomponent