@extends('admin.layout')

@inject('presenter', 'App\Presenters\NavPresenter')

@section('css')
  <link rel="stylesheet" href="{{asset('plugins/nestable/nestable.css')}}">
  <style>
    @media only screen and (min-width: 700px){
      .dd{width: 95%}
    }
    .dd3-content a[class*=Menu]{margin-left: 10px;}
  </style>
@endsection

@section('content')
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

  <section class="content">
    <div class="row">
      <div class="col-xs-6">
        <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.nav.create') }}" data-toggle="modal" data-target="#myModal">添加</a>
            </div>
            
            <div class="clearfix" style="margin-top: 20px;">
              {!! $presenter->show($navs, $relations) !!}
            </div>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
      </div><!-- /.col -->
    </div><!-- /.row -->
  </section><!-- /.content -->
  
@endsection


@section('js')
  <script src="{{asset('plugins/nestable/nestable.js')}}"></script>
  <script>
    $("#myModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });

    $('.dd').nestable({ /* config options */ });

    $('.dd').on('change', function() {
        /* on change event */
        $.ajax({
          url: "{{route('admin.nav.drag')}}",
          type: 'post',
          dataType: 'json',
          data: {
            data : JSON.stringify($('.dd').nestable('serialize'))
          },
          headers : {
            "X-CSRF-TOKEN" : $("meta[name='csrf-token']").attr('content')
          },
        })
        .done(function(response) {
          if(response.result){
            layer.msg(response.message);
            location.reload();
          }
        })
        .fail(function(response) {
          console.log("error");
        });
    });
    /*删除*/
  </script>
@endsection