@extends('backend.layout')

@section('content')
<div class="row">
	
	<div class="panel panel-flat">

		<div class="panel-body">
			<fieldset>
				<legend class="text-bold">
					<div class="row">
						<div class="text-right">
							<a class="btn btn-success" href="{{route('backend.sort_chanel.reset', $code)}}" id="save">Reset</a>
						</div>
					</div>
				
				</legend>
			</fieldset>

			<div class="table-responsive" style="min-height: 80vh; overflow: auto;">
				<ul id="sortable">
					@foreach($sorts as $item)
				  	<li class="ui-state-default" data-id="{{$item['id']}}" data-name="{{$item['name']}}"> <span class="index">{{ $loop->index }}</span>.&nbsp;&nbsp; <span class="item-name">{{$item['name']}}</span></li>
				  	@endforeach
				</ul>
			</div>
		</div>
	</div>
</div>

@endsection

@push('styles')
 	<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
	<style type="text/css">
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding:10px 10px;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding: 5px 5px;
			white-space: normal !important;
		}
		#sortable { 
			width: 100%;
			list-style-type: none; margin: 0; padding: 0;display: flex;
		    flex-direction: row;
		    flex-wrap: wrap;
		    justify-content: center; 
		}
		#sortable li { width: 24%; margin: 0 3px 3px 3px; padding: 10px; padding-left: 1.5em; font-size: 1.4em; line-height: 10px; }
		/*#sortable li span { position: absolute; margin-left: -1.3em; }*/
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
	<script type="text/javascript">
		var _token = $('meta[name="csrf-token"]').attr('content'); 
		var url = "{{route('backend.sort_chanel.list', $code)}}";
		$( function() {
		    $( "#sortable" ).sortable({
		        stop: function(event, ui) {
		            updateIndices();
		        },update: function(e,ui){
				    var lis = $("#sortable li");
				    var ids = lis.map(function(i,el){return {id:el.dataset.id, name:el.dataset.name}}).get();
				    console.log(ids);
				    $.ajax({
					    url: url,
					    method: 'POST',
					    data: {
					        _token: _token,
					        sorts: ids,
					        contract_code: "{{$code}}",
					    },
					    success: function(response) {
					        // Handle success
					        console.log('Success:', response);
					    },
					    error: function(xhr, status, error) {
					        // Handle error
					        console.error('Error:', status, error);
					    }
					});
				} 
		    });
		});

		function updateIndices() {
	        $("#sortable li").each(function(index) {
	            $(this).find('.index').text(index);
	        });
	    }

	</script>
@endpush