@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 ('slider.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">

    @can('user-create')
    <a href="{{ route('slider.create') }}" class="btn btn-primary float-right btn-sm">
      <i class="ti-plus pdd-right-5"></i>
      <span>Add slider</span>
    </a>
    @endcan
    <div class="page-title">
      <h4>Slider</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="10%"></th>
                    <th width="20%">Image</th>
                    <th width="20%">Name</th>
                    <th width="20%">Service name</th>
                    <th width="20%">Created At</th>
                    <th width="20%">Active</th>
                    <th class="text-center">Action</th>
                  </tr>
                </thead>

                <tbody id="tablecontents">
                  @foreach($sliders as $slider)
                  <tr class="row1" data-id="{{ $slider->id }}">
                    <td class="pl-3"> <i class="fa fa-sort"></i></td>

                    <td>
                      <div class="list-info mrg-top-10">
                        <img class="thumb-img1" src="{{asset($slider->cover_img)}}" alt="">

                      </div>
                    </td>
                    <td>
                      <div class=" mrg-top-10">
                        <div class="info">
                          <span class="title">{{$slider->title}}</span>
                          <!--span class="sub-title">ID 860</span-->
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class=" mrg-top-10">
                        <div class="info">
                          <span class="title">{{$slider->svg_title}}</span>
                          <!--span class="sub-title">ID 860</span-->
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class=" mrg-top-10">
                        <div class="info">
                          <span class="title">{{$slider->created_at}}</span>
                          <!--span class="sub-title">ID 860</span-->
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="toggle-checkbox toggle-danger checkbox-inline toggle-sm mrg-top-10">
                        @if($slider->status == 1 )
                        <a href="{{ route('slider.disable', $slider->id) }}">
                          <i class="fa fa-check activeslider" aria-hidden="true"></i>
                        </a>
                        @elseif ($slider->status ==0 )
                        <a href="{{ route('slider.enable', $slider->id) }}">
                          <i class="fa fa-close inactiveslider" aria-hidden="true"></i>
                        </a>

                        @endif
                        <label for="toggle7"></label>
                      </div>
                    </td>
                    <td style="float: right">

                      <div class="display-block ">
                        <div class="btn-group dropdown">
                          @can('role-edit')
                          <a href="{{ route('slider.edit', $slider->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' =>
                              ['slider.destroy', $slider->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>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


@endsection