@extends('web.tema.content')
@section('content')

 <!-- SOUND TRACK -->
 @if($spin=="true")

  <embed src="{{Fibonanci::content()['music_spin']}}" loop="true" autostart="true" width="2" height="0" hidden>
    <audio controls autoplay hidden id="my_audio" loop="loop">
        <source src="{{Fibonanci::content()['music_spin']}}" type="audio/mpeg">
        Your browser does not support the audio element.
  </audio>

@endif

<div class="container">

  <div class="row d-flex align-items-center" style="height:100vh">
    <div class="col-sm-12">
      <div class="text-center mb-2">
        <img src="{{Fibonanci::content()['logo']}}" width="200px" alt="">
      </div>
        @include('web.tema.wheel')
    </div>
  </div>
</div>

@push('js')

<script>
    var total    = {{ Js::from($total) }};
    var duration = {{ Js::from($duration) }};
    var rotation = {{ Js::from($rotation) }};
    // Create new wheel object specifying the parameters at creation time.
    var theWheel = new Winwheel({
        'numSegments'       : 8,                 // Specify number of segments.
        'outerRadius'       : 200,               // Set outer radius so wheel fits inside the background.
        'drawText'          : false,              // Code drawn text can be used with segment images.
        'textFontSize'      : 16,
        'textOrientation'   : 'curved',
        'textAlignment'     : 'inner',
        'textMargin'        : 170,
        'textFontFamily'    : 'monospace',
        'textStrokeStyle'   : 'black',
        'textLineWidth'     : 3,
        'textFillStyle'     : 'white',
        'imageOverlay'      : false,
        'wheelImage'        : "{{Fibonanci::content()['outwheel']}}",
        'drawMode'          : 'segmentImage',    // Must be segmentImage to draw wheel using one image per segemnt.
        'segments'          :  hadiah,                // Define segments including image and text,
        'animation' :           // Specify the animation to use.
        {
            'type'              : 'spinToStop',
            'duration'          : duration,     // Duration in seconds.
            'spins'             : total,     // Number of complete spins.
            'stopAngle'         : rotation,
            'callbackFinished'  : alertPrize
        }
    });

    // Vars used by the code in this page to do power controls.
    var wheelPower    = 0;
    var wheelSpinning = false;

    theWheel.startAnimation();

    function alertPrize()
    {
                // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
        result("{{url('result/'.$draw_id.'/'.$result)}}")
    }

    function result(url){
        window.location.href = url;
    }

  </script>
    
    
@endpush



@endsection