@extends('layouts.app', ['wrapperClass' => 'gamepage'])
@section('content')
    <article class="position-relative">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12 text-center">
                <div class="splash2">
                    <input type="hidden" id="set_prize_won" name="set_prize_won" value="{{ session('gamePrize') }}" />
                    <input type="hidden" id="set_key" name="set_key" value="{{ config('app.key') }}" />
                </div>
            </div>
        </div>
    </article>
@endsection

@section('modals')
    <div class="mainpopup" id="winPopup">
        <div class="modal fade-in" data-bs-keyboard="false" data-bs-backdrop="static" id="winPopupFreeSpinModal"
            aria-labelledby="winPopupFreeSpinLabel" aria-hidden="true" data-aos="fade-up">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><img
                                src="{{ asset('images/close.png') }}" alt="" class="img-fluid"></button>
                    </div>
                    <div class="modal-body">
                        <div class="popup-content">
                            <div class="up-content mt-0">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="up-content-left">
                                            <img src="{{ asset('images/free-spin-icon.png') }}" alt=""
                                                class="img-fluid">
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="up-content-right">
                                            <h1 class="mt-1">spin to win</h1>
                                            <h2>FREE SPIN!</h2>
                                            <p>You get<span id="Title">another chance to win a prize.</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom-content">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 bottom-left">
                                        <div class="btn1 mt-1 text-center"> <a
                                                href="{{ route('player.game', $uuid) }}">Go</a> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade-in" data-bs-keyboard="false" data-bs-backdrop="static" id="winPopupModal"
            aria-labelledby="winPopupLabel" aria-hidden="true" data-aos="fade-up">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button id="CloseBtn" type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"><img src="{{ asset('images/close.png') }}" alt=""
                                class="img-fluid"></button>
                    </div>
                    <div class="modal-body">
                        <div class="popup-content">
                            <div class="up-content mt-0">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="up-content-left" id="ProImg"></div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="up-content-right">
                                            <h1>spin to win</h1>
                                            <h2>Congratulations!</h2>
                                            <p>You win a <span class="winTitle" id="Title"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom-content">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 bottom-left" id="ProDesc"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/phaser.min.js') }}"></script>
    <script src="{{ asset('js/game.js') }}"></script>
    <script src="{{ asset('js/crypto-js/crypto-js.js') }}"></script>
    <script src="{{ asset('js/crypto-js/enc-base64.js') }}"></script>
    <script src="{{ asset('js/crypto-js/enc-utf8.js') }}"></script>
    <script src="{{ asset('js/php-unserialize.js') }}"></script>
    <script type="text/javascript">
        AOS.init({
            easing: 'ease-out-back',
            duration: 10000
        });

        gameOptions.uuid = '{{ $uuid }}';
        gameOptions.api = '{{ route('player.game.prize') }}';
        gameOptions.thank = '{{ route('player.game.thank') }}';
        $(document).ready(function() {
            $('.btn-close').click(function() {
                $("#winPopup").hide();
                $('#winPopupModal').hide();
                $('#winPopupFreeSpinModal').hide();
                window.location.href = {{ session('freeSpin') }} == 1 ? window.location.href : gameOptions.thank;
            });
        });

//        console.log(localStorage);

    </script>
@endsection