@extends('layouts.main')
@section('container')
<style> a{cursor: pointer;}.select2-results .select2-disabled { display:none;} .todo1 {     list-style-type: none }
.headborder{border: 1px solid #ddd; padding:5px 10px;	}
.tdborder{border: 1px solid #ddd; padding:8px 10px;	}
.todos {    margin: 0px ! important;
    padding: 0px ! important; }
.label { line-height:1 }
li {margin-bottom:0px ! important }
#table_filter {
    float: left !important;
}
	</style>

<div class="page-title"><h1>Agents </h1></div>
<!-- DataTables Example -->
<div class="row">
    <div class="col-lg-12">
        <div class="widget-container fluid-height clearfix">
			<div class="widget-content padded clearfix tabledata">
                <table id="table" class="table table-bordered pagin-table">
                    <thead>
                            <tr >
                                <th width="50px">Sort Order</th>
                                <th>Username</th>
                                <th>Phone Number</th>
                                <th>Role</th>
                                <th style="display: none"></th>
                            </tr>
                    </thead>
                    <tbody class="todos row_position">
                                                @foreach($fetch as $key=>$data)
                            <tr class="todo1" id="{{$data->id}}">
                                    <td>{{$x++}} </td>
                                    <td>{{$data->name}}</td>
                                    <td>{{$data->phone}}</td>
                                    <td><div class="label label-default">Agent</div></td>
                                    <td style="display: none"><input type="hidden" class="userID{{$key}}" value="{{$data->id}}" ></td>
                            </tr>
           
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    $(document).ready(function() {
    $('#table').dataTable({bFilter: true, bInfo: false});
} );
</script>
<!-- <script>
	// Make the form fields sortable/draggable
$('.todos').sortable({
    items: '.todo1',
    start: function(event, ui) {
        // Create a temporary attribute on the element with the old index
        $(this).attr('data-currentindex', ui.item.index());
    },
    update: function(event, ui) {
       
        let current_position = $(this).attr('data-currentindex');
        let desired_position = ui.item.index();
        console.log();
        $(this).removeAttr('data-currentindex');
        console.log(current_position);
		var user_id = $(".userID"+current_position).val();
        $.ajax({
            type: "POST",
            url: "{{url('/api/sort')}}",
            data: {
                desired_position: desired_position,
                current_position: current_position,
                user_id: user_id
            },
            beforeSend: function() {
                // Disable dragging
               // $('.todos').sortable('disable');
               //window.location.reload();
            },
            success: function(html) {
                window.location.reload();
            }
        });


    }
});
</script> -->
<script type="text/javascript">
    $( ".row_position" ).sortable({
        delay: 150,
        stop: function() {
            var selectedData = new Array();
            $('.row_position>tr').each(function() {
                selectedData.push($(this).attr("id"));
            });
            updateOrder(selectedData);
        }
    });


    function updateOrder(data) {
        $.ajax({
            url:"{{url('/api/sort')}}",
            type:'post',
            data:{position:data},
            success:function(){
                toastr.success('your change successfully saved')

            }
        })
    }
</script>
@stop