@extends('admin.layouts.nav-footer')



@section('js-plugins')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://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 = [];
        var token = $('meta[name="csrf-token"]').attr('content');
        $('tr.row1').each(function(index,element) {
          order.push({
            id: $(this).attr('data-id'),
            position: index+1
          });
        });

        $.ajax({
          type: "POST", 
          dataType: "json", 
          url: "{{ route ('blocks.reorder') }}",
              data: {
            order: order,
            _token: token
          },
          success: function(response) {
              if (response.status == "success") {
                console.log(response);
              } else {
                console.log(response);
              }
          }
        });
      }
    });
</script>
<script src="{{ asset('admin-assets/js/forms/form-elements.js') }}"></script>


@endsection
@section('content')
<div class="main-content">
    <div class="container-fluid">

        <div class="page-title">
            <h4>Home Section</h4>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-block">
                        <div class="table-overflow">

                            <table id="slider-table" class="table table-lg table-hover">
                                <thead>
                                    <tr>
                                        <th width="33%">Position</th>
                                        <th width="33%">Name</th>
                                        <th width="33%"class="text-center">Action</th>
                                    </tr>
                                </thead>

                                <tbody id="tablecontents">

                                    @foreach($sections as $section)
                                    @if ($section->name !== 'get started')
                                    <tr class="row1" data-id="{{ $section->id }}">
                                        <td class="pl-3"> <i class="fa fa-sort"></i></td>

                                        <td>
                                            <div class="mrg-top-10">
                                                <div class="info ">
                                                    <span class="title">{{$section->name}}</span>
                                                </div>
                                            </div>
                                        </td>


                                        <td style="float: right">
                                    
                                            <div class="display-block ">
                                                <div class="btn-group dropdown">
                                                    @can('role-edit')
                                                    <a href="{{ route('sections.edit', $section->id) }}"
                                                        class="btn btn-default">
                                                        <i class="ei-save-edit pdd-top-10 pdd-right-10"></i> Edit
                                                    </a>
                                                    @endcan
                                                    <button type="button" class="btn btn-default" data-toggle="dropdown"
                                                        aria-expanded="false">
                                                        <i class="ti-more-alt"></i>
                                                    </button>


                                                    <ul class="dropdown-menu ">
                                                        @can('role-delete')
                                                        <li slider="separator" class="divider"></li>
                                                        <li>
                                                            {!! Form::open(['method' => 'DELETE','route' =>
                                                            ['sections.destroy', $section->id],'class'=>'delete-form'])
                                                            !!}
                                                            <button type="submit" style="color: red;"><i
                                                                    class="ei-delete pdd-right-10"></i>
                                                                <span>Delete</span></button>
                                                            {!! Form::close() !!}
                                                        </li>
                                                        @endcan
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endif

                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection