@extends("layouts.dashboard.app")

@section("css-links")
<link rel="stylesheet" href="{{asset("assets/css/utils/sort.css")}}">
@endsection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{__('spin-wheel-game')}}</h1>
            <p>{{__('Control and view all Spin Wheel Game')}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{route("spin_wheel_game.index")}}">{{__('spin-wheel-game')}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__('sort')}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
@include("layouts.main-parts.page-message")
<form action="{{route("spin_wheel_game.sort")}}" method="post">
@csrf
<div class="row">
    <div class="col-md-8 m-auto">
        <ul id="sortable">
            @foreach($games as $game)
            <li class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                <span class="text"><i class="fas fa-sort"></i>{{$game->name_en}}</span>
                <input type="hidden" name="sort[]" value="{{$game->sort}}" id="Sort">
                <input type="hidden" name="item[]" value="{{$game->id}}">
            </li>
            @endforeach
        </ul>
        <hr>
        <button class="btn btn-primary" >{{__("Save")}}</button>

    </div>
</div>
</form>

@endsection

@section("scripts")

<!-- Data table plugin-->
<script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
<script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#sortable" ).sortable({
            update: function( event, ui ) {
                let count = 1
                $("#sortable li input#Sort").each((index, el) => {
                    $(el).val(count)
                    count++;
                })
            }
        });
    } );
</script>

@endsection