@extends('layout.container')
@section('title', 'Reorder page')
@section('content')
<style>
.ui-sortable-handle{
  background-color:rgba(255,255,255,0.5);
}

div{
  padding: 4px;
  /* border: 1px solid gray; */
  margin-bottom: 1px;
  cursor: pointer;
}

#orderlist{
  background-color: #DDF;
}
.inner{width:100%;}
.inner2{width:80%;margin-left:10%;}
.inner3{width:40%;margin-left:30%;}
.blok{border: 1px solid #5555f3;padding: 5px;}
    </style>

<div class="text-center" style="padding: 10px 15px;background-color: red;color: #fff;font-weight:bold;margin-bottom: 10px;border:none;">{{$lpage['name']}}</div>
<div style="max-width: 300px;margin:0px auto;">

<div id="orderlist" class="sortable-list">
    @foreach ($data as $order)
        {{-- {{$order}} --}}
        <div  id="{{$order['id']}}">
            <div class="blok {{$order['innerwidth']}}" @if ($order['type'] == 'startstysec' || $order['type'] == 'closestysec') style ="background-color:red;color:#fff;border-color: red;" @endif>
               {{ readCodeType($order['type']) }}
                {{-- {{$order['type']}} --}}
            </div>
        </div>       
    @endforeach
</div>

<form method="POST" action="/updatereorder" class="text-center" >
    @csrf
    <input type="hidden" name="pageid" value="{{$pageid}}"/>
    <input id="nworder" type="hidden" name="neworder" value="none"/>
    <button type="submit" name="save" value="data" style="display: inline-block;padding: 10px;margin: 10px;text-align: center;cursor: pointer;">Update Order</button>
    <p id="msg" style="color:red;">To Reset the Order Refesh the page and submit without change</p>
</form>

</div>

@verbatim
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$('.sortable-list').sortable({ 
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
    var positions = order.join(':');
    $('#nworder').val(positions);
    $('#msg').css("color","green");
    console.log({
     // id: changedList,
      positions: positions
    });
  }
});
</script>
@endverbatim


@endsection