@section('script')
    @parent
    <script>
        window.theme_wheel = {!!  json_encode(config('spinandwin.wheel'))!!}
    </script>
@endsection

<div class="container-fluid p-0">

    <div class="col-12 mx-auto p-0 position-relative overflow-hidden">
        <div class="wheel-container">
            <div class="wheel-back wheel-art" style="background-image: url('/assets/images/spinandwin/Wheel/wheel-back.png')"></div>
            <div class="wheel-outer">
                <div class="wheel-wrap">
                    <div class="wheel-shadow">
                        <div class="wheel"></div>
                    </div>
                </div>
                <div class="wheel-center" style="background-image:url(/assets/images/yeos/wheel-center.png)"></div>
            </div>
            <div class="wheel-front wheel-art" style="background-image: url('/assets/images/spinandwin/Wheel/wheel-front.png')"></div>
        </div>

    </div>
    <img width="100%" class="mx-auto d-block" style="max-width:450px" src="{{asset('/assets/images/spinandwin/Wheel/wheel-title.png')}}"/>

</div>

<div class="container text-white">
    <div class="col-10 col-md-6 mx-auto text-center">
        <a id="spin-btn" load_popup="popup_incomplete"  class="d-block btn btn-primary btn-lg w-100 my-3 text-center"  alt="Start">{{__('spinandwin.labelUploadReceiptToStart')}}</a>
        <a id="home-btn" class="d-none btn btn-primary btn-lg w-100 my-3 text-center" href="/" alt="Return Home">Return Home</a>
        <p id="spin-error" class="text-danger mb-5"></p>
    </div>

</div>