@extends('admin.layout.master')
@section('style')
    <link rel="stylesheet" href="{{asset('assets/admin/css/table.css')}}">
    <link rel="stylesheet" href="{{asset('assets/admin/css/nestable.css')}}">
    <style>
        .dd-handle {
            font-size: 16px;
            color: #151719;
        }
    </style>
@stop
@section('body')
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title ">
                    {{$page_title}}
                    <a href="#" class="btn btn-primary pull-right bold"  data-toggle="modal"
                       data-target="#addItem"><i class="fa fa-plus"></i> Add item</a>
                </h3>
                <div class="tile-body">
                    @if ($menus->count() > 0)
                        <div class="row">
                            <div class="col-md-6 offset-md-3">
                                {{ Form::open(['route' => ['admin.manage-top-menu.sort']]) }}
                                <div class="dd" id="nestable">
                                    <ol class="dd-list">
                                        @foreach($menus as $item)
                                            <li class="dd-item" data-title="{{ $item->title }}" data-id="{{ $item->id }}">
                                                <div class="dd-handle text-megna"  style="width: 80%;display: inline-block;font-weight: 800">{{ $item->title }}</div>
                                                <a style="display: inline-block;margin-top: -5px" href="{{ route('admin.manage-top-menu.delete', $item->id) }}"
                                                   onclick="return confirm('Are you sure ?')" class="btn btn-sm btn-danger">Delete</a>
                                            </li>
                                        @endforeach
                                    </ol>
                                </div>
                                <input type="hidden" name="arrangement" class="form-control" value="" id="nestable-output">
                                <div class="pt-3">
                                    {{ Form::button('Save', ['type' => 'submit', 'class' => 'btn btn-success']) }}
                                </div>
                                {{ Form::close() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addItem" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" method="POST" action="{{ route('admin.manage-top-menu.store') }}" name="editForm"
                      enctype="multipart/form-data">
                    <div class="modal-header">
                        <h4 class="modal-title"><b class="text-uppercase"> <span
                                        id="modal-heading">{{ 'Add menu item' }}</span>
                            </b></h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                    </div>
                    <div class="modal-body">

                        {{ csrf_field() }}

                        <div class="col-md-12">
                            <h6> Name</h6>
                            <div class="input-group">
                                <input type="text" class="form-control input-lg" value=""
                                       name="title">
                                <div class="input-group-append"><span class="input-group-text">
                                            <i class="fa fa-font"></i>
                                            </span>
                                </div>
                            </div>
                            @if ($errors->has('title'))
                                <div class="error">{{ $errors->first('title') }}</div>
                            @endif

                        </div>
                        <div class="col-md-12 mt-2">
                            <h6> Relative link (ex: <span class="text-danger">/pricing</span>)</h6>
                            <div class="input-group">
                                <input type="text" class="form-control input-lg" value=""
                                       name="link">
                                <div class="input-group-append"><span class="input-group-text">
                                            <i class="fa fa-font"></i>
                                            </span>
                                </div>
                            </div>
                            @if ($errors->has('link'))
                                <div class="error">{{ $errors->first('link') }}</div>
                            @endif

                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>

                        <button type="button" class="btn btn-danger" data-dismiss="modal">
                            Close
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>

@stop

@section('script')
    <script src="{{asset('assets/admin/js/jquery.nestable.js')}}"></script>
    <script>
        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target),
                output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
            } else {
                output.val('JSON browser support required for this feature.');
            }
        };

        $('#nestable').nestable({
            group: 1,
            maxDepth: 1
        }).on('change', updateOutput);

        updateOutput($('#nestable').data('output', $('#nestable-output')));

    </script>

@stop