@extends("Manager.Master")
@section("header")
<link href="{{ url("css/bootstrap-iconpicker.min.css") }}" rel="stylesheet" >
<meta name="csrf-token" content="{{ csrf_token() }}">
@stop
@section('title')منو ساز
    @stop
@section("content")

    <div class="col-md-12 menu-page x_content">
        <div class="x_panel ">
            <div class="col-xs-12 col-sm-6 myborder no-padding botton_border" >
                <h2 class="myh2"> صفحات ، تگ ها ، دسته بندی ها </h2>
                <div class="panel-group myaccordion" 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 role="button" data-toggle="collapse" data-parent="#accordion" href="#pages"
                                   aria-expanded="true" aria-controls="pages">
                                    صفحات
                                </a>
                            </h4>
                        </div>
                        <div id="pages" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                <ul class="myul">
                                    @foreach($pages as $p)
                                    <li class="myli">{{ mb_substr( $p->title  , 0 , 45)}}
                                        <button data-name="{{ $p->title }}" data-slug="{{ url($p->slug) }}" onclick="addtolist(this)"><i
                                                    class="fa fa-arrow-circle-o-left"></i></button>
                                    </li>
                                    @endforeach

                                </ul>

                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    تگ ها
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                             aria-labelledby="headingTwo">
                            <div class="panel-body">
                                <ul class="myul">
                                    @foreach($tags as $tag)
                                    <li class="myli">{{mb_substr( $tag->name , 0 , 40 )}}
                                        <button data-name="{{ $tag->name }}" data-slug="{{ url('Tag/'.$tag->slug) }}" onclick="addtolist(this)"><i
                                                    class="fa fa-arrow-circle-o-left"></i></button>
                                    </li>
                                    @endforeach


                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingThree">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    دسته ها
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"
                             aria-labelledby="headingThree">
                            <div class="panel-body">
                                <ul class="myul">
                                    @foreach($categories as $category)
                                    <li class="myli"> {{ mb_substr($category->fa_name  , 0 , 45 )}}
                                        <button data-name="{{ $category->fa_name }}" data-slug="{{ url('Category/' . $category->slug ) }}" onclick="addtolist(this)"><i
                                                    class="fa fa-arrow-circle-o-left"></i></button>
                                    </li>
                                    @endforeach

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

            </div>
            <div class="col-xs-12 col-sm-6 no-padding botton_border" >
                <h2 class="myh2"> ویرایش ، افزودن </h2>
                <div class="mymenuform">
                <form id="frmEdit" class="form-horizontal">
                    <div class="form-group">
                        <label for="text" class="col-sm-2 control-label">عنوان</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="text" class="form-control item-menu" id="text" name="text" placeholder="title">
                                <div class="input-group-btn">
                                    <button id="myEditor_icon" class="btn btn-default" data-iconset="fontawesome" data-icon="" type="button"></button>
                                </div>
                                <input type="hidden" name="icon" class="item-menu">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mnu_href" class="col-sm-2 control-label">لینک</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="target" class="col-sm-2 control-label">نوع </label>
                        <div class="col-sm-10">
                            <select name="target" id="target" class="form-control item-menu">
                                <option value="_self">باز شدن در همان صفحه</option>
                                <option value="_blank">باز شدن در صفحه جدید</option>
                                {{--<option value="_top">Top</option>--}}
                            </select>
                        </div>
                    </div>
                    {{--<div class="form-group">--}}
                        {{--<label for="title" class="col-sm-2 control-label">Tooltip</label>--}}
                        {{--<div class="col-sm-10">--}}
                            {{--<input type="text" class="form-control item-menu" id="title" name="title" placeholder="Text">--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    <div class="text-center">
                        <button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> افزودن</button>
                        <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fa fa-refresh"></i> ویرایش کردن</button>
                    </div>
                </form>
                </div>
                </div>
            <div class="col-xs-12 col-sm-12 no-padding ">

                <h2 class="myh2"> منو اصلی<button class="btn btn-primary  " id="save"> ذخیره</button> </h2>
                <div class="panel-body" id="cont">
                    <ul id="myEditor" class="sortableLists list-group">
                    </ul>
                </div>
            </div>
        </div>

    </div>
    </div>
@stop
@section("footer")
    <script src="{{ url("js/jquery-menu-editor.js")}}"></script>
    <script src="{{ url("js/iconset/iconset-fontawesome-4.2.0.min.js")}}"></script>
    <script src="{{ url("js/bootstrap-iconpicker.min.js")}}"></script>

    <script>
        var menu = '{!! $menu  !!}';


        function addtolist(btn) {
            var this_btn = $(btn);
            var name = this_btn.attr("data-name");
            var  slug = this_btn.attr("data-slug");
            $("input#text").val(name);
            $("input#href").val(slug);

        }
        $(document).ready(function () {

            var iconPickerOpt = {cols: 5, searchText: "Buscar...", labelHeader: '{0} de {1} Pags.', footer: false};
            var options = {
                hintCss: {'border': '1px dashed #13981D'},
                placeholderCss: {'background-color': 'gray'},
                opener: {
                    as: 'html',
                    close: '<i class="fa fa-minus"></i>',
                    open: '<i class="fa fa-plus"></i>',
                    openerCss: {'margin-right': '10px'},
                    openerClass: 'btn btn-success btn-xs'
                }
            };
            var editor = new MenuEditor('myEditor', {listOptions: options, iconPicker: iconPickerOpt, labelEdit: 'ویرایش'});
            editor.setForm($('#frmEdit'));
            editor.setUpdateButton($('#btnUpdate'));
            editor.setData(menu);

            $('#btnOut').on('click', function () {
                var str = editor.getString();
                $("#out").text(str);
                console.log()
            });
            $("#btnUpdate").click(function(){
                editor.update();
            });
            $('#btnAdd').click(function(){
                editor.add();
            });
            $('button#save').on("click" , function () {
                var str = editor.getString();
                waitingDialog.show();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });