@extends('_layouts.app-public')

@section('content')
  <div class="content-wrapper page-spinwheel">
    <div class="content-header">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1 class="mt-3 text-center">Spin Wheel</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center mb-4">
            <button class="btn btn-outline-primary" data-toggle="modal" data-target="#modal-entries">Entries</button>
          </div>
          <div class="col-md-12">
            <div class="wheelContainer">
              <svg class="wheelSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink" text-rendering="optimizeSpeed"
                   preserveAspectRatio="xMidYMin meet">
                <defs>
                  <filter id="shadow" x="-100%" y="-100%" width="550%" height="550%">
                    <feOffset in="SourceAlpha" dx="0" dy="0" result="offsetOut"></feOffset>
                    <feGaussianBlur stdDeviation="9" in="offsetOut" result="drop"/>
                    <feColorMatrix in="drop" result="color-out" type="matrix" values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 .3 0"/>
                    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
                  </filter>
                </defs>
                <g class="mainContainer">
                  <g class="wheel">
                  </g>
                </g>
                <g class="centerCircle"/>
                <g class="wheelOutline"/>
                <g class="pegContainer" opacity="1">
                  <path class="peg" fill="#343a40"
                        d="M22.139,0C5.623,0-1.523,15.572,0.269,27.037c3.392,21.707,21.87,42.232,21.87,42.232 s18.478-20.525,21.87-42.232C45.801,15.572,38.623,0,22.139,0z"/>
                </g>
                <g class="valueContainer"/>
                <g class="centerCircleImageContainer"/>
              </svg>
              <div class="toast">
                <p></p>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var spinWheelConfig = {!! json_encode($data) !!};
  </script>

  <div class="modal fade" id="modal-entries">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Entries</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <button class="btn btn-outline-secondary btn-sort-entries" data-order="asc">
              <i class="fa fa-sort-alpha-up"></i>
              Ascending
            </button>
            <button class="btn btn-outline-secondary btn-sort-entries" data-order="desc">
              <i class="fa fa-sort-alpha-down"></i>
              Descending
            </button>
            <button class="btn btn-outline-secondary btn-sort-entries" data-order="random">
              <i class="fa fa-random"></i>
              Random
            </button>
          </div>
          <div class="form-group">
            <textarea name="spinwheel_entries" id="spinwheel-entries" class="form-control" rows="15"></textarea>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="btn-update-entries">Update</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modal-result">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="form-group text-center">
            <h4>Winner:</h4>
            <h2 id="spinwheel-result"></h2>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="btn-remove-entries">Remove</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('title')
  Spin Wheel
@endsection