@extends('layouts.backend')
@section('js_after')
    <!-- jQuery UI -->
  <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
 
 <!-- Datatables Js-->
 <script type="text/javascript" src="//cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>

 <script type="text/javascript">
 $(function () {
   $("#table").DataTable();

   $( "#tablecontents" ).sortable({
     items: "tr",
     cursor: 'move',
     opacity: 0.6,
     update: function() {
         sendOrderToServer();
     }
   });

   function sendOrderToServer() {

     var order = [];
     $('tr.row1').each(function(index,element) {
       order.push({
         id: $(this).attr('data-id'),
         position: index+1
       });
     });

     $.ajax({
       type: "POST", 
       dataType: "json", 
       url: "{{ url('webadmin/thought/reorder') }}",
       data: {
         order:order,
         _token: '{{csrf_token()}}'
       },
       success: function(response) {
           if (response.status == "success") {
             console.log(response);
           } else {
             console.log(response);
           }
       }
     });

   }
 });

</script>
@endsection
@section('content')
    <div class="content">
        <div class="row">

            <div class="col-lg-12">
                <div class="block block-themed">
                    <div class="block-header">
                        <h3 class="block-title">THOUGHTS REORDER</h3>
                        <div class="block-options">
                            
                        </div>
                    </div>
                    <div class="block-content">
                        <table id="table" class="table table-bordered">
                            <thead>
                                <tr>
                                <th>#</th>
                                <th>Title</th>
                                </tr>
                            </thead>
                            <tbody id="tablecontents">
                                @foreach($datas as $data)
                                <tr class="row1" data-id="{{ $data->id }}">
                                <td>
                                    <div style="color:rgb(124,77,255); padding-left: 10px; float: left; font-size: 20px; cursor: pointer;" title="change display order">
                                    <i class="fa fa-ellipsis-v"></i>
                                    <i class="fa fa-ellipsis-v"></i>
                                    </div>
                                </td>
                                <td>{{ $data->content }}</td>
                                </tr>
                                @endforeach
                            </tbody>                  
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection