@extends('admin.layouts.main', [
    'scripts' => [
        path_asset('path.backoffice.js_path') . '/view/backend-menus-edit.js'
    ]
])

@section('content')
    @if (isset($menu_errors) && sizeof($menu_errors) > 0)
        <div class="alert alert-danger alert-dismissible" role="alert">
            <strong>@lang('backend.menu_errors')</strong>
        </div>
    @else
        @php $menu_errors = null; @endphp
    @endif
  
    <div id="menu_edit">
        <h1>{{ $menu->name }}</h1>
        <div class="row">
            <div class="col-lg-4 col-sm-5">
                <h3>@lang('backend.add_menu_items')</h3>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    @lang('backend.add_pages')
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                <p>@lang('backend.available_pages')</p>
                                <div class="menu-pages-selector panel panel-default">
                                    <table class="table">
                                        @foreach($pages as $page)
                                        <tr data-id="{{ $page->id }}" class="page-line">
                                            <td>{{ $page['title'] }}</td>
                                            <td>
                                                <button type="button" data-placement="right" class="btn btn-xs btn-default command-add-page pull-right" title="">
                                                    <span class="icon glyphicon glyphicon-plus"></span>
                                                </button>
                                            </td>    
                                        </tr>
                                        @endforeach
                                    </table> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    @lang('backend.add_links')
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                            <div class="panel-body" id="new_link_form">
                                {!! MenuFormBuilder::text('link_label_input', trans('backend.menu_label'), false) !!}
                                {!! MenuFormBuilder::text('link_url_input', trans('backend.uri_or_url'), false)  !!}
                                <div class="form-group">
                                    <div class="row no-gutter">
                                        <div class="col-sm-8">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" id="link_open_new_window"/>
                                                    @lang('backend.open_new_window')
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <button type="button" data-placement="right" class="btn btn-default btn-default command-add-link pull-right" title="">
                                                <span class="icon glyphicon glyphicon-plus"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>  
                            </div>           
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-7">
                {!! Form::open(array('id' => 'menu_form')) !!}
                    <input type="hidden" id="menu_structure" name="menu_structure"/>
                    <input type="hidden" id="to_delete" name="to_delete" value="{{ isset($to_delete) ? $to_delete : '' }}"/>
                    <div class="row no-gutter">
                        <div class="col-xs-10">
                            <h3>@lang('backend.menu_structure')</h3>
                        </div>
                        <div class="col-xs-2">
                            <input class="btn btn-primary pull-right save-menu" type="submit" value="@lang('backend.save')">
                        </div>
                    </div>   
                    <div class="dd" id="nestable3">
                        <ol class="dd-list" id="menu-items"> 
                         
                        @foreach($menuItems as $child) 
                            @include('admin.pages.menus.menu_item', array('menuItem' => $child, 'menu_errors' => (isset($menu_errors[$child->id]) ? $menu_errors[$child->id] : null)))
                        @endforeach
                        </ol>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <script>
        $(function() {
            var manageMenus = new Eae.View.BackendMenusEdit({
                el : $('#menu_edit')
            });
        });     
    </script>
@stop