@extends('admin.layout')


@section('content')

<div class="content-header">
    <div class="container-fluid">
        <div class="row">
        <div class="col-sm-6">
            <h1 class="m-0 text-dark">Menu Builder</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="fas fa-home"></i>Home</a></li>
            <li class="breadcrumb-item">Menu Builder</li>
            </ol>
        </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                    <h3 class="card-title">Menu Builder</h3>
                    <div class="card-tools d-flex">
                        <button id="updateMenu" class="btn btn-primary btn-sm mr-4">Update Main Menu</button>
                        <div class="d-inline-block mr-4">
                            <select class="form-control lang" id="languageSelect" data="{{url()->current() . '?language='}}">
                                @foreach($langs as $lang)
                                    <option value="{{$lang->code}}" {{$lang->code == request()->input('language') ? 'selected' : ''}} >{{$lang->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body ">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6>Add/Edit/Update Area</h6>
                                    </div>
                                    <div class="card-body">
                                        <form id="frmEdit" class="form-horizontal">
                                            <input class="item-menu" type="hidden" name="type" value="">
        
                                            <div id="withUrl">
                                                <div class="form-group">
                                                    <label for="text">Text</label>
                                                    <input type="text" class="form-control item-menu" name="text" placeholder="Text">
                                                </div>
                                                <div class="form-group">
                                                    <label for="href">URL</label>
                                                    <input type="text" class="form-control item-menu" name="href" placeholder="URL">
                                                </div>
                                                <div class="form-group">
                                                    <label for="target">Target</label>
                                                    <select name="target" id="target" class="form-control item-menu">
                                                        <option value="_self">Self</option>
                                                        <option value="_blank">Blank</option>
                                                        <option value="_top">Top</option>
                                                    </select>
                                                </div>
                                            </div>
        
                                            <div id="withoutUrl" style="display: none;">
                                                <div class="form-group">
                                                    <label for="text">Text</label>
                                                    <input type="text" class="form-control item-menu" name="text" placeholder="Text">
                                                </div>
                                                <div class="form-group">
                                                    <label for="href">URL</label>
                                                    <input type="text" class="form-control item-menu" name="href" placeholder="URL">
                                                </div>
                                                <div class="form-group">
                                                    <label for="target">Target</label>
                                                    <select name="target" class="form-control item-menu">
                                                        <option value="_self">Self</option>
                                                        <option value="_blank">Blank</option>
                                                        <option value="_top">Top</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="card-footer">
                                        <button type="button" id="btnUpdate" class="btn btn-info btn-sm" disabled><i class="fas fa-sync-alt"></i> Update Menu</button>
                                        <button type="button" id="btnAdd" class="btn btn-success btn-sm"><i class="fas fa-plus"></i> Add Menu</button>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6>Main Menu Area</h6>
                                    </div>
                                    <div class="card-body">
                                        <ul id="myEditor" class="sortableLists list-group">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6>Pre-Made Menu Area</h6>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-group">

                                            <li class="list-group-item">{{__('Home')}} <a data-text="{{__('Home')}}" data-type="home" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a></li>
        
                                            <li class="list-group-item">{{__('About')}}
                                                <a data-text="{{__('About')}}" data-type="about" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Services')}}
                                                <a data-text="{{__('Services')}}" data-type="services" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
                                         
        
                                            <li class="list-group-item">{{__('Portfolios')}}
                                                <a data-text="{{__('Portfolios')}}" data-type="portfolios" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
                                            <li class="list-group-item">{{__('Pages')}}
                                                <a data-text="{{__('Pages')}}" data-type="pages" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Packages')}}
                                                <a data-text="{{__('Packages')}}" data-type="packages" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Team')}}
                                                <a data-text="{{__('Team')}}" data-type="team" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('FAQ')}}
                                                <a data-text="{{__('FAQ')}}" data-type="faq" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Gallery')}}
                                                <a data-text="{{__('Gallery')}}" data-type="gallery" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Career')}}
                                                <a data-text="{{__('Career')}}" data-type="career" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
                                            <li class="list-group-item">{{__('Blogs')}}
                                                <a data-text="{{__('Blogs')}}" data-type="blogs" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Products')}} 
                                                <span class="badge badge-success">Mega Menu</span>
                                                <a data-text="{{__('Products')}}" data-type="products-mega" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
                                            <li class="list-group-item">{{__('Products')}} 
                                                <span class="badge badge-info">Normal Link</span>
                                                <a data-text="{{__('Products')}}" data-type="products" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            <li class="list-group-item">{{__('Contact')}}
                                                <a data-text="{{__('Contact')}}" data-type="contact" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
        
                                            @foreach ($pages as $page)
                                            <li class="list-group-item">
                                                {{$page->title}}
                                                <a data-text="{{$page->title}}" data-type="{{$page->id}}" data-custom="yes" class="addToMenus btn btn-info btn-sm float-right" href=""><i class="fas fa-plus"></i></a>
                                            </li>
                                            @endforeach
        
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                       
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

</section>
@endsection


@section('script')
<script src="{{ asset('assets/admin/js/menu.js') }}"></script>

<script>
    jQuery(document).ready(function () {
    /* =============== DEMO =============== */
    // menu items
    var arrayjson = {!! json_encode($prevMenu) !!};

    // icon picker options
    var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"};
    // sortable list options
    var sortableListOptions = {
        placeholderCss: {'background-color': "#ddd"}
    };

    var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions, iconPicker: iconPickerOptions});
    editor.setForm($('#frmEdit'));
    editor.setUpdateButton($('#btnUpdate'));
    // $('#btnReload').on('click', function () {

    editor.setData({!! $prevMenu !!});
    // });

    $('#updateMenu').on('click', function () {
        var str = editor.getString();
        let fd = new FormData();
        // fd.append('language_id', );
        fd.append('str', str);
        fd.append('language_id', {{$lang_id}});

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: "{{route('admin.menu.update')}}",
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            success: function(data) {
                console.log(data);
                if(data.status == 'error') {
                    error(data.message);
                } else {
                    success(data.message);
                }
            }
        });
    });


    $("#btnUpdate").click(function(){
        disableWithoutUrl();
        editor.update();
        enableWithoutUrl();
    });

    $('#btnAdd').click(function(){
        disableWithoutUrl();
        $("input[name='type']").val('custom');
        editor.add();
        enableWithoutUrl();
    });
    /* ====================================== */

    // when menu is chosen from readymade menus list
    $(".addToMenus").on('click', function(e) {
        e.preventDefault();
        disableWithUrl();
        $("input[name='type']").val($(this).data('type'));
        $("#withoutUrl input[name='text']").val($(this).data('text'));
        $("#withoutUrl input[name='target']").val('_self');
        editor.add();
        enableWithUrl();

        if ($(this).data('type').indexOf('mega') > -1) {
            $("#myEditor").find("span.txt").last().after(" <span class='ml-2 badge badge-danger'>Mega Menu</span>");
        }

    });


});
</script>
@endsection