@extends('layouts.master')
@section('title', config("app.name") . " | " . __("wheel.WheelName"))
@section('background-image', asset("assets/images/donate.jpg"))
@section('css')
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/wheel/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/wheel/css/custom.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/wheel/css/spin-wheel.css') }}">
    <style type="text/css">
        body {font-family: 'Lato', sans-serif;}
        h1, h4 {font-family: inherit;}
        .modal {font-family: 'Lato', sans-serif;}
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="nk-gap-2"></div>
        <div class="row">
            <div class="col-12">
                <div class="nk-info-box nk-info-box-sm bg-main-1 rounded">
                    <div class="nk-info-box-icon">
                        <i class="fal fa-fw fa-exclamation-circle"></i>
                    </div>
                    {{ __("wheel.WheelUpdate") }} <strong> {{ __("wheel.WheelUpdate2") }}  </strong>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 default-theme">
                <div>
                    <input type="hidden" id="jackpot_current_amount" value="0" />
                    <input type="hidden" id="jackpot_next_amount" value="0" />
                    <input type="hidden" id="spins_left_hidden" value="0" />
                    <input type="hidden" id="weapon_position_to_select" value="8" />
                    <input type="hidden" id="weapon_to_select" value="8" />
                    <input type="hidden" id="user_current_balance_zp" value="0" />
                    <input type="hidden" id="selected_spin_item_id" value="1" />
                    <input type="hidden" id="next_jackpot_detail_id" value="" />
                    <input type="hidden" id="shuffle_item_id" value="0" />
                    <input type="hidden" id="shuffle_zp" value="0" />
                </div>
                <div class="outer-wrap">
                    <div class="row">
                        <div class="col-lg-8 col-12">
                            <div class="row no-gutters">
                                <div id="wrapper" class="wheel block-border block-shadow">
                                    <div class="top"></div>
                                    <div class="py-5">
                                        <div id="wheel">
                                            <div id="inner-wheel">
                                                <div class="sec weapon-1">
                                                    <div class="weapons" id="weapon-1-box"> </div>
                                                </div>
                                                <div class="sec weapon-2">
                                                    <div class="weapons" id="weapon-2-box"> </div>
                                                </div>
                                                <div class="sec weapon-3">
                                                    <div class="weapons" id="weapon-3-box"> </div>
                                                </div>
                                                <div class="sec weapon-4">
                                                    <div class="weapons" id="weapon-4-box"> </div>
                                                </div>
                                                <div class="sec weapon-5">
                                                    <div class="weapons" id="weapon-5-box"> </div>
                                                </div>
                                                <div class="sec weapon-6">
                                                    <div class="weapons" id="weapon-6-box"> </div>
                                                </div>
                                                <div class="sec weapon-7">
                                                    <div class="weapons" id="weapon-7-box"> </div>
                                                </div>
                                                <div class="sec weapon-8">
                                                    <div class="weapons" id="weapon-8-box"> </div>
                                                </div>
                                                <div class="sec weapon-9">
                                                    <div class="weapons" id="weapon-9-box"> </div>
                                                </div>
                                                <div class="sec weapon-10">
                                                    <div class="weapons" id="weapon-10-box"> </div>
                                                </div>
                                                <div class="sec weapon-11">
                                                    <div class="weapons" id="weapon-11-box"> </div>
                                                </div>
                                                <div class="sec weapon_primary weapon-12">
                                                    <div class="weapons" id="weapon-primary-box"> </div>
                                                </div>
                                            </div>
                                            <div id="spin">
                                                <div id="inner-spin">
                                                    <h4 data-lang-en="SPIN">{{ __("wheel.WheelRotate") }}</h4>
                                                    <h1 id="spins_left">...</h1>
                                                    <div id="con-toogle">
                                                        <div class="Switch Off">
                                                            <div class="Toggle">
                                                                <i class="fa fa-bars" aria-hidden="true"></i>
                                                            </div>
                                                            <span class="On">&nbsp;</span>
                                                            <span class="Off">&nbsp;</span>
                                                            <input type="hidden" value="0" id="auto_spin_hidden" />
                                                        </div>
                                                    </div>
                                                    <h6 id="auto_spin_title" data-lang-en="Auto Spin: Off">{{ __("wheel.WheelRotateAutoOff") }}</h6>
                                                </div>
                                                <div class="inner-spin-hover-effect"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bottom"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-12">
                            <div class="main-web">
                                <div class="sidebar-web block-border block-shadow rounded">
                                    <div class="first_row">
                                        <p class="text-center">{{ __("wheel.WheelHello") }} <span id="current_ign_span"></span></p>
                                        <p class="text-center">
                                            {{ __("wheel.WheelDescription") }}
                                        </p>
                                    </div>
                                    <div class="jackpot" id="jackpot_board" dir="ltr">
                                        <span>{{ __("wheel.WheelJackpot") }}</span>
                                        ... <small>ZP</small>
                                    </div>
                                    <div class="grey text-center" dir="{{ __("wheel.WheelLanguageIndex") }}">
                                        <p style="margin: 0; font-size: .8rem; font-weight: bold;">{{ __("wheel.WheelLastWinner") }}</p>
                                    </div>
                                    <div class="white_l text-center">
                                        <span id="previous_winner_ign_span" class="sub" dir="ltr"></span>
                                        <br> <span style="font-size: 1rem; color: #ff0000; line-height: 2;" dir="ltr">... ZP</span>
                                    </div>
                                    <hr>
                                    <div style="text-align: center;">
                                        {{ __("wheel.WheelEventEnd") }}<br>
                                        <div class="timer" style="color:#fff; font-size: 1.5rem; font-weight: bold;">
                                            <span>D</span> 00
                                            <span>H</span> 00
                                            <span>M</span> 00
                                            <span>S</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row no-gutters mt-10">
                        <div class="icons w-100">
                            <div class="top"></div>
                            <ul class="d-flex flex-row justify-content-around p-10">
                                <li class="list">
                                    <a href="javascript:void(0);" data-toggle="modal" data-target="#WheelEarnSpin">
                                        <i class="icon icon-earn"></i>{{ __("wheel.WheelSpinsWin") }}
                                    </a>
                                </li>
                                <li class="list">
                                    <a href="javascript:void(0);" id="buy_spin_menu_1">
                                        <i class="icon icon-cart"></i>{{ __("wheel.WheelSpinsBuy") }}
                                    </a>
                                </li>
                                <li class="list">
                                    <a href="javascript:void(0);" id="available_rewards_link">
                                        <i class="icon icon-rewards"></i>{{ __("wheel.WheelRewards") }}
                                    </a>
                                </li>
                                <li class="list">
                                    <a href="javascript:void(0);" data-toggle="modal" id="myrewards_link">
                                        <i class="icon icon-myrewards"><span id="myrewards_count_span"></span></i>{{ __("wheel.WheelMyRewards") }}
                                    </a>
                                </li>
                                <li class="list">
                                    <a href="javascript:void(0);" data-toggle="modal" data-target="#WheelHowplay">
                                        <i class="icon icon-howtoplay"></i>{{ __("wheel.WheelHowToPlay") }}
                                    </a>
                                </li>
                                <li class="list">
                                    <a href="javascript:void(0);" id="shuffle_menu_1" data-toggle="modal">
                                        <i class="icon icon-shuffle"></i>{{ __("wheel.WheelExchangeItem") }}
                                    </a>
                                </li>
                            </ul>
                            <div class="bottom"></div>
                        </div>
                    </div>
                    <div class="nk-gap-2"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="WheelEarnSpin" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" style="ltr">
            <div class="modal-content" dir="ltr">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Earn Spins" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelSpinsWin") }}</h4> </div>
                <div class="scrollbars">
                    <div class="modal-body reward-list earnspins">
                        <div class="row"> </div>
                    </div>
                </div>
                <div class="modal-footer-empty">
                    <div class="modal-footer-inn"></div>&nbsp;</div>
            </div>
        </div>
    </div>
    <div id="WheelHowplay" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="How to Play" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelSpinsWin") }}</h4>
                    <h5 data-lang-en="Login and spin the wheel for a chance to earn a prize. Spin enough times and you might win the jackpot!">
                        {{ __("wheel.WheelLoginCheck") }}
                    </h5>
                </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body howitplay">
                        <div class="how-content hw-block">
                            <h6 data-lang-en="How to Earn Spins">{{ __("wheel.WheelGainSpins") }}</h6>
                            <ul>
                                <li> <span>1</span>{{ __("wheel.WheelRuleOne") }}</li>
                                <li> <span>2</span>{{ __("wheel.WheelRuleTwo") }}</li>
                                <li> <span>3</span>{{ __("wheel.WheelRuleThree") }}</li>
                                <li> <span>4</span>{{ __("wheel.WheelRuleFour") }}</li>
                            </ul>
                        </div>
                        <div class="how-content hw-block" style="clear: both;">
                            <p class="white" data-lang-en="Check out the Earn Spins menu to see all events">
                                {{ __("wheel.CheckSpinsEvent") }}
                            </p>
                        </div>
                        <div class="how-content hw-block">
                            <h6 data-lang-en="How to buy Spins">{{ __("wheel.WheelHowToBuy") }}</h6>
                            <p data-lang-en="Click «Buy Spins» to instantly buy more Spins!">
                                {{ __("wheel.CheckSpinsZP") }}
                            </p>
                        </div>
                        <div class="how-content hw-block">
                            <h6 data-lang-en="What is shuffle Primary Rewards?" dir="{{ __("wheel.WheelLanguageIndex") }}">{{ __("wheel.WheelExchangeItemQ") }}</h6>
                            <p data-lang-en="Click Shuffle to buy the ability to change the permanent reward on the wheel">
                                {{ __("wheel.WheelExchangeAbility") }}
                            </p>
                            <p data-lang-en="(Only applies to Spin the Wheel events with multiple Permanent items)">
                                {{ __("wheel.WheelExchangeItemOnlyMoreThanOne") }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;</div>
            </div>
        </div>
    </div>
    <div id="WheelShuffle" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Shuffle Permanent Rewards" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.EchangePermanentReward") }}</h4>
                    <p class="hidden-xs" data-lang-en="Want a chance to win a different reward?">{{ __("wheel.WheelExchangeItem2") }}</p>
                </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body buyspins shuffle_pp">
                        <div class="buyspin-left">
                            <div class="row">
                                <div class="col-12 text-center">
                                    <p class="visible-xs" data-lang-en="Want a chance to win a different reward?">
                                        {{ __("wheel.WheelExchangeItem2") }}
                                    </p>
                                    <h3> <b id="shuffle_item_zp" dir="ltr">0 ZP</b> </h3> </div>
                            </div>
                        </div>
                        <div class="buyspin-bottom">
                            <div class="row">
                                <div class="col-12">
                                    <ul>
                                        <li> <span data-lang-en="Current Balance">{{ __("wheel.WheelCurrentBalance") }}</span> <em id="current_zp_balance_in_shuffle_modal">0 ZP</em> </li>
                                        <li> <span data-lang-en="Cost">{{ __("wheel.WheelCost") }}</span> <em id="current_shuffle_cost_modal"></em> </li>
                                        <li> <span data-lang-en="Balance">{{ __("wheel.WheelBalance") }}</span> <em id="zp_balance_in_shuffle_modal">0 ZP</em> </li>
                                    </ul>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-block btn-primary pull-right" id="shuffle_button">{{ __("wheel.WheelExchange") }}</button>
                                    <button class="btn btn-block btn-grey pull-left">{{ __("wheel.WheelCancel") }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;</div>
            </div>
        </div>
    </div>
    <div id="PurchaseResult" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Purchase Complete" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelPurchaseComplete") }}</h4>
                    <p class="hidden-xs" data-lang-en="Your purchase has been completed">{{ __("wheel.WheelPurchaseCompleteDesc") }}</p>
                </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body buyspins shuffle_pp">
                        <div class="buyspin-left">
                            <div class="row">
                                <div class="col-12 text-center">
                                    <h3> <b data-lang-en="Success">{{ __("wheel.WheelSuccess") }}</b> </h3>
                                    <p class="visible-xs" data-lang-en="Your purchase has been completed">{{ __("wheel.WheelPurchaseCompleteDesc") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;
                </div>
            </div>
        </div>
    </div>
    <div id="ShuffleItemResult" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Purchase Complete">{{ __("wheel.WheelPurchaseComplete") }}</h4>
                    <p class="hidden-xs" data-lang-en="Your purchase has been completed">
                        {{ __("wheel.WheelPurchaseCompleteDesc") }}
                    </p>
                </div>
                <div class="scrollbar-content-no" dir="{{ __("wheel.WheelLanguageIndex") }}">
                    <div class="modal-body buyspins shuffle_pp">
                        <div class="buyspin-left">
                            <div class="row">
                                <div class="col-12 text-center">
                                    <p class="visible-xs" data-lang-en="Your purchase has been completed">
                                        {{ __("wheel.WheelNowPermanentReward") }} <strong><span id="shuffle_item_new" style="color: #0E9A00;"></span></strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;
                </div>
            </div>
        </div>
    </div>
    <div id="WheelBuySpin" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" dir="{{ __("wheel.WheelLanguageIndex") }}" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelBuyMoreSpins") }}</h4>
                    <p class="hidden-xs">{{ __("wheel.WheelAmountToBuy") }}</p>
                </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body buyspins">
                        <div class="buyspin-left">
                            <div class="row">
                                <div class="col-12">
                                    <div class="nk-info-box nk-info-box-sm bg-main-1">
                                        <div class="nk-info-box-icon"><i class="fal fa-fw fa-exclamation-circle"></i></div>
                                        {{ __("wheel.WheelCompletePurchaseWait") }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12" id="spin_bundle_container"> </div>
                            </div>
                        </div>
                        <div class="buyspin-bottom">
                            <div class="row">
                                <div class="col-12">
                                    <ul>
                                        <li> <span>{{ __("wheel.WheelCurrentBalance") }}</span> <em id="current_zp_balance_in_spin_modal">0</em> </li>
                                        <li> <span>{{ __("wheel.WheelCost") }}</span> <em id="current_spin_cost_modal">1</em> </li>
                                        <li> <span>{{ __("wheel.WheelBalance") }}</span> <em id="zp_balance_in_spin_modal">0 ZP</em> </li>
                                    </ul>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-block btn-primary pull-right" id="buy_spins">{{ __("wheel.WheelBuy") }}</button>
                                    <button class="btn btn-block btn-grey pull-left">{{ __("wheel.WheelCancel") }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;</div>
            </div>
        </div>
    </div>
    <div id="WheelRewards" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelRewards") }}</h4> </div>
                <div class="scrollbars">
                    <div class="modal-body reward-list">
                        <div class="row" id="available_rewards_container"> </div>
                    </div>
                </div>
                <div class="modal-footer-empty">
                    <div class="modal-footer-inn"></div>&nbsp;</div>
            </div>
        </div>
    </div>
    <div id="WheelMyRewards" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="My Rewards" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelMyRewards") }}</h4> </div>
                <div class="scrollbars">
                    <div class="modal-body reward-list myrewards">
                        <div class="row" id="myrewards_container"> </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="footer-btn">
                        <span class="reward-copy" data-lang-en="*Rewards are claimed in-game">{{ __("wheel.RewardsClaimedIngame") }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="Wheelprize1" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Congratulations!"  style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelCongratulations") }}</h4>
                    <h5 id="won_item_title" data-lang-en="You won the random!"  style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelRandomWin") }}</h5>
                </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body">
                        <div class="col-sm-12 pric_img text-center">
                            <div class="img-block"> <img src="{{ asset("assets/wheel/images/congrats.jpg") }}" alt="" title="" style="max-width: 100%; height: auto;" /> </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;</div>
            </div>
        </div>
    </div>
    <div id="Wheelprize2" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content shadowme" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Congratulations!">{{ __("wheel.WheelCongratulations") }}</h4> </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body">
                        <div class="col-sm-12 text-center">
                            <div class="brand_bg">
                                <h4 data-lang-en="You won the Jackpot!">{{ __("wheel.WheelWonJackpot") }}</h4>
                                <h2 id="jackpot_price_h2">... ZP</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp
                </div>
            </div>
        </div>
    </div>
    <div id="ErrorModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Error"  style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelError") }}</h4>
                    <h5 id="error_content"></h5> </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body">
                        <div class="col-sm-12 text-center">
                            <br/>
                            <br/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;
                </div>
            </div>
        </div>
    </div>
    <div id="SampleModal2" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                    <h5></h5> </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body">
                        <div class="col-sm-10 col-sm-offset-1">
                            <button class="btn btn-grey pull-left" data-lang-en="Cancel">{{ __("wheel.WheelCancel") }}</button>
                            <button class="btn btn-primary-me pull-right" data-lang-en="Shuffle">{{ __("wheel.WheelExchange") }}</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;
                </div>
            </div>
        </div>
    </div>
    <div id="OutOfSpinsModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content" dir="ltr">
                <div class="modal-header" dir="ltr">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" data-lang-en="Out of Spins" style="{{ __("wheel.WheelScriptHardCode") }}">{{ __("wheel.WheelNoSpins") }}</h4>
                    <h5 data-lang-en="You have no more spins left!" style="{{ __("wheel.WheelScriptHardCode") }}">
                        {{ __("wheel.WheelNoSpinsLeft") }}
                    </h5>
                </div>
                <div class="scrollbar-content-no">
                    <div class="modal-body">
                        <div class="col-12" style="width:90.33333333%">
                            <button class="btn btn-grey btn-block" id="earn_more_spins_button" data-lang-en="Earn More Spins">
                                {{ __("wheel.WheelEarnMoreSpins") }}
                            </button>
                            <button class="btn btn-primary-me bg-primary btn-block" id="buy_spin_option" data-lang-en="Buy More Spins" >
                                {{ __("wheel.WheelBuyMoreSpins") }}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer-empty-no">
                    <div class="modal-footer-inn"></div>&nbsp;
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript" src="{{ asset("assets/wheel/js/jquery.mousewheel.js") }}"></script>
    <script type="text/javascript" src="{{ asset("assets/wheel/js/jquery.classyscroll.js") }}"></script>
    <script type="text/javascript" src="{{ asset("assets/wheel/js/jquery.countdown.min.js") }}"></script>
    <script>
        var target = 5;
        var login_url = '{{ route("auth.login") }}';
        $('.scrollbars').ClassyScroll();
    </script>
    <script type="text/javascript" src="{{ asset("assets/wheel/js/wof.min.js?v" . now()->getTimestamp()) }}"></script>
@endsection