@extends('backend.layouts.app')

@section('title')
Menu Header
@endsection

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    @include('backend.layouts.content-header', ['page' => 'Menu Header'])

    <div class="content">
        <div class="container-fluid">
        @include('backend.components.notification')
            <div class="row">
            
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h4>Menu tree</h4> 
                            <h6>Drag and drop to order menu position</h6>

                            <div class="dd nestable" id="nestable">
                                <ol class="dd-list">
                                    <!--- Initial Menu Items --->
                                    @if($menu)
                                                                                                                                                    @endif
                                </ol>
                            </div>

                            <form class="mt-3" action="" method="POST">
                                {{ csrf_field() }}
                                <textarea name="menu_content" class="form-control" style="display: none" id="json-output" rows="5"></textarea>
                                <div class="text-center">
                                    <button type="submit" class="btn waves-effect waves-light btn-primary" title="{{ trans('label.action.save') }}"><i class="fas fa-save"></i> {{ trans('label.action.save') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h4>Add new item</h4>

                            <form class="form-inline" id="menu-add">
                                <div class="form-group mr-2">
                                    <label for="addInputName">{{ trans('label.title') }}</label>
                                    <input type="text" class="form-control" id="addInputName" placeholder="" required>
                                </div>
                                <div class="form-group">
                                    <label for="addInputSlug">Link</label>
                                    <input type="text" class="form-control" id="addInputSlug" placeholder="" required>
                                </div>
                                <button class="btn btn-primary" id="addButton">
                                    <i class="fa fa-plus-circle" aria-hidden="true"></i> Add
                                </button>
                            </form>
                            <hr>

                            <div class="modal fade modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="myLargeModalLabel"><i class="fas fa-pencil-alt"></i> {{ trans('label.action.edit') }}: <span id="currentEditName"></span></h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        </div>
                                        <div id="menu-editor">
                                            <form class="">
                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label for="addInputName">{{ trans('label.title') }}</label>
                                                        <input type="text" class="form-control" id="editInputName" placeholder="Item name" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="addInputSlug">Link</label>
                                                        <input type="text" class="form-control" id="editInputSlug" placeholder="item-slug">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="editButton">{{ trans('label.action.save') }}</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#default" role="tab">
                                        <span class="hidden-sm-up"><i class="fas fa-bars"></i></span>
                                        <span class="hidden-xs-down">Default</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#page" role="tab">
                                        <span class="hidden-sm-up"><i class="fas fa-file"></i></span>
                                        <span class="hidden-xs-down">Pages</span>
                                    </a>
                                </li>
                            </ul>
                            <br>
                            <div class="tab-content tabcontent-border">
                                <div class="tab-pane active" id="default" role="tabpanel">
                                    @includeIf('backend.menu.menu_header.tabs.default')
                                </div>

                                <div class="tab-pane" id="page" role="tabpanel">
                                    @includeIf('backend.menu.menu_header.tabs.pages')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('css')
    <link href="/backend/plugins/nestable/nestable.css" rel="stylesheet">
@endpush

@push('js')
    <!-- Nestable -->
    <script src="/backend/plugins/nestable/jquery.nestable.js"></script>

    <script src="/backend/plugins/nestable/jquery.nestable1.js"></script>
    
    <script>
        $('#nestable').nestable({
            maxDepth: 3
        }).on('change', updateOutput);
    </script>

    <script>
        
        // $('#search-post').keyup(function () {
        //     var keyword = $(this).val();
        //     $.ajax({
        //         url: '/ajax/pagination-post?keyword=' + keyword
        //     }).done(function (data) {
        //         $('#content-post').html(data);
        //     });
        // });

        $(document).on('click', '.pagination a', function (e) {
            e.preventDefault();
            let page = $(this).attr('data-page');
            let type = $(this).attr('data-type');
            getItems(page, type);
        });

        function getItems(page, type) {
            let route = '';
            if(type === 'page'){
                route = '{{ route('menu.render_pagination') }}';
            }

            if(route){
                $.get(route, {
                    page : page
                }, function(data){
                    $('#content-'+ type).html(data);
                });
            }
        }
    </script>
@endpush