@extends('admin.layout')

@section("css")
	<link rel="stylesheet" href="{{ asset('plugins/datatables/dataTables.bootstrap.css') }}">
@endsection

@section('content')
	<section class="content">
	  <div class="row">
	    <div class="col-xs-12">
	      <div class="box">
	        <div class="box-header">
	          <h3 class="box-title">轮播图管理</h3>
	        </div><!-- /.box-header -->
	        <div class="box-body">
	        	<div>
	        		<a class="btn btn-success" href="{{ route('admin.carousel.create') }}">添加</a>
	        	</div>
	          <table id="example2" class="table table-bordered table-hover">
	            <thead>
	              <tr>
	                <th>url</th>
                  <th>图片</th>
	                <th>创建时间</th>
	                <th>操作</th>
	              </tr>
	            </thead>
	            <tbody>
	            	
	            </tbody>
	          </table>
	        </div><!-- /.box-body -->
	      </div><!-- /.box -->
	    </div><!-- /.col -->
	  </div><!-- /.row -->
	</section><!-- /.content -->
@endsection


@section('js')
	<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables/dataTables.bootstrap.min.js') }}"></script>

    <script>
      $(function () {
        var dt = $('#example2').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": false,
          "info": true,
          "autoWidth": false,
          "processing": true,
          "serverSide": true,
          "ajax": {
              "url": "{{route('admin.carousel.datatable')}}",
              "type": "POST",
		          beforeSend: function (request) {
		          	request.setRequestHeader("X-CSRF-TOKEN", $("meta[name='csrf-token']").attr('content'));
		          },
          },
          "columns": [
              { "data": "url" },
              { 
                "data": "path",
                render : function(data, type, row){
                  return "<img class='img-thumbnail img-md' src='"+data+"'>";
                }
              },
              { "data": "created_at" },
              { "data": "button" },
          ]
        });


        $(document).on("click", ".filter-delete", function(){
          $this = $(this);
          var deleteUrl = $this.data('url');
          layer.open({
            title : "删除",
            content: '确定要删除此记录吗(删除记录会放入回收站)?',
            btn: ['确定', '取消'],
            yes: function(index, layero){
              $.ajax({
                url: deleteUrl,
                type: 'delete',
                dataType: 'json',
                data: {},
                headers : {
                  "X-CSRF-TOKEN" : $("meta[name='csrf-token']").attr('content')
                },
                success : function(response){
                  layer.msg(response.message);
                  if(response.result){
                    dt.ajax.reload();
                  }
                },
                error : function(response){
                  layer.close(index);
                }
              });
            },
            no: function(index, layero){
              layer.close(index);
            },
            cancel: function(index, layero){ 
              layer.close(index);
            }
          });
          return false;
        });
      });
    </script>
@endsection