@extends('dashboard.base')

@section('css')
<link href='{{ asset("css/luckydraw.css") }}' rel='stylesheet' type='text/css'>
<link href='{{ asset("css/jquerysctipttop.css") }}' rel='stylesheet' type='text/css'>

@endsection

@section('content')
<div class="container-fluid">
  <div class="fade-in">
    <div class="row justify-content-center">
      <div class="col-sm-12 col-md-8">
        <div class="card">
          <div class="card-header">
            <h4>{{ $luckydraw->title }}</h4>
          </div>
          <div class="card-body">
            <div id="wrapper">
              <div id="content">
                <div id="animation">
                  <div class="fancy d-flex justify-content-center" style="margin-bottom:40px;">
                    <img class="" src="{{ asset('assets/img/cc_logo_purple.png') }}" width="180" alt="Logo">
                  </div>
                  <div class="viewBox">
                    <ul class="userList">
                        @foreach($users as $key => $user)
                            <li class="align-middle user{{ $key }}" id="user{{ $key }}" data-id="{{ $key }}">{{ $user }}</li>
                        @endforeach
                        
                        <!--@for($i=1;$i<5000;$i++) <li id="user{{ $i }}"  data-id="{{ $i }}">User{{$i}}</li>
                        @endfor-->

                    </ul>
                  </div>

                  <!-- <div class="fancy d-flex justify-content-center">
                    <ul class="slot" id="slot-entries">
                      @foreach($users as $key => $user)
                      <li class="align-middle list_user_{{ $key }}" id="{{ $user }}" data-id="{{ $key }}"><span>{{ $user }}</span></li>
                      @endforeach
                    </ul>
                  </div> -->
                </div>
                </br>
                <div class="d-flex justify-content-center">
                  <button class="btn btn-secondary btn-lg" type="button" id="start">Draw</button>
                  <button class="btn btn-warning btn-lg" type="button" id="end">End</button>
                  <a class="btn btn-secondary btn-lg" style="background-color:#bdb5ca" id="pickAnother">Draw Again</a>

                  <!-- <a class="btn btn-secondary btn-lg" style="background-color:#bdb5ca" id="playFancy">Draw</a>
                  <a class="btn btn-secondary btn-lg d-none" style="background-color:#bdb5ca" id="stopBtn">Stop</a> -->
                  <!-- <a class="btn btn-secondary btn-lg" style="background-color:#bdb5ca" id="pickAnother">Draw Again</a> -->
                </div>
              </div>
            </div>
            <!-- <a class="btn btn-primary pull-right" href="{{ route('luckydraws.index') }}">Return</a> -->
            <br />
            <br />
            <div id="winnerName" class="alert alert-dark text-center" role="alert"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

@endsection

@section('javascript')
<script src="{{ asset('js/jquery.easing.1.3.js') }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ asset('js/jquery.jSlots.min.js') }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ asset('js/jquery.fireworks.js') }}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var stopFunctionClicked = false;
    $('#pickAnother').hide();
    $('#pickAnother').on('click', function() {
        location.reload();
    });
   
  /* $('#stopBtn').addClass('d-none');
   $('#pickAnother').hide();
   $('#winnerName').hide();
   $('#slot-entries').hide();

   

   // fancy
   $('.fancy .slot').jSlots({
     number: 1,
     winnerNumber: