{{-- code needs recheck--}}
<div class="game-container scratchcard">
    <div class="row no-gutters scratchcard-wrap">
            @if(config('sys.scratchcard_show_confetti'))
                <canvas id="confetti"></canvas>
            @endif
        <div class="scratch-container d-block position-relative mx-auto" style="width: 250px"></div>

        <template class="d-none">
            <div class="scratch-result"></div>
            <div id="scratch-result-text-template" class="text-center d-none">
                <h5 class="title"></h5>
                <input class="reward-code text-center" value="" disabled/>
            </div>
        </template>
    </div>

    {{--
    <div class="show-on-redeem mt-3 d-none">
        <div class="btn-wrap">
            <button id="submit-address" class='btn btn-primary' onclick="loadPopup('popup_completed', 'address');">
                {{ __('label.btn_submit_delivery_address') }}
            </button>
        </div>
    </div>
    --}}

    {!! $bottom !!}
</div>

@section('script')
    @parent
    <script>
        {{-- temp workaround for scratch img --}}
        window.SCRATCH_IMAGE = @json(config('sys.themes.default.scratchcard.image'));
    </script>
    <script src="{{ mix('js/main/scratch.js') }}" defer></script>
@endsection

@section('style')
    @parent
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="{{ mix('css/games/scratch-card.css') }}" rel="preload" />
@endsection