@extends('backend.app')
@section('css')
    <style>
        .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
        * html .cf { zoom: 1; }
        *:first-child+html .cf { zoom: 1; }

        /*html { margin: 0; padding: 0; }
        body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; }

        h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }

        a { color: #2996cc; }
        a:hover { text-decoration: none; }
*/
        p { line-height: 1.5em; }
        .small { color: #666; font-size: 0.875em; }
        .large { font-size: 1.25em; }

        /**
         * Nestable
         */

        .dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }

        .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
        .dd-list .dd-list { padding-left: 30px; }
        .dd-collapsed .dd-list { display: none; }

        .dd-item,
        .dd-empty,
        .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

        .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
            background: #fafafa;
            background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
            background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
            background:         linear-gradient(top, #fafafa 0%, #eee 100%);
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-sizing: border-box; -moz-box-sizing: border-box;
        }
        .dd-handle:hover { color: #2ea8e5; background: #fff; }

        .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
        .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
        .dd-item > button[data-action="collapse"]:before { content: '-'; }

        .dd-placeholder,
        .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
        .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
            background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
            -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
            background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
            -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
            background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
            linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
            background-size: 60px 60px;
            background-position: 0 0, 30px 30px;
        }

        .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
        .dd-dragel > .dd-item .dd-handle { margin-top: 0; }
        .dd-dragel .dd-handle {
            -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
        }

        /**
         * Nestable Extras
         */

        .nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }

        #nestable-menu { padding: 0; margin: 20px 0; }

        #nestable-output,
        #nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

        #nestable2 .dd-handle {
            color: #fff;
            border: 1px solid #999;
            background: #bbb;
            background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
            background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
            background:         linear-gradient(top, #bbb 0%, #999 100%);
        }
        #nestable2 .dd-handle:hover { background: #bbb; }
        #nestable2 .dd-item > button:before { color: #fff; }

        @media only screen and (min-width: 700px) {

            .dd { float: left; width: 48%; }
            .dd + .dd { margin-left: 2%; }

        }

        .dd-hover > .dd-handle { background: #2ea8e5 !important; }

        /**
         * Nestable Draggable Handles
         */

        .dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
            background: #fafafa;
            background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
            background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
            background:         linear-gradient(top, #fafafa 0%, #eee 100%);
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-sizing: border-box; -moz-box-sizing: border-box;
        }
        .dd3-content:hover { color: #2ea8e5; background: #fff; }

        .dd-dragel > .dd3-item > .dd3-content { margin: 0; }

        .dd3-item > button { margin-left: 30px; }

        .dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
            border: 1px solid #aaa;
            background: #ddd;
            background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
            background:    -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
            background:         linear-gradient(top, #ddd 0%, #bbb 100%);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
        .dd3-handle:hover { background: #ddd; }

        #load { height: 100%; width: 100%; }
        #load {
            position    : fixed;
            z-index     : 99; /* or higher if necessary */
            top         : 0;
            left        : 0;
            overflow    : hidden;
            text-indent : 100%;
            font-size   : 0;
            opacity     : 0.6;
            background  : #E0E0E0  url('loading.gif') center no-repeat;
        }

        .del-button{
            cursor:pointer;
            text-decoration:none;
        }

        .edit-button{
            cursor:pointer;
            text-decoration:none;
        }

        .span-right{
            float:right;
        }
    </style>
    @endsection
@section('content')

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Menu Ekle</h1>
        <hr>
    </div>

    <div class="col-md-12">

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong> Hata...!</strong> zorunlu alanları giriniz.<br>
                <ul>
                    @foreach($errors as $error)
                        <li>{{$error}}</li>
                    @endforeach
                </ul>
            </div>
        @endif
            <div id="load1"></div>
            <menu id="nestable-menu">
                <button type="button" data-action="expand-all" class="btn btn-warning">Hepsini Aç</button>
                <button type="button" data-action="collapse-all" class="btn btn-danger">Hepsini Kapat</button>
            </menu>


            <table>


                <tr>
                    <td>Menü Adı</td>
                    <td>:</td>
                    <td><input type="text" id="label" name="label" placeholder="Menü Adı" required class="form-control"></td><br>
                </tr>
                <tr>
                    <td>Link</td>
                    <td>:</td>
                    <td><input type="text" id="link" name="link" placeholder="Link" class="form-control"></td>
                </tr>
                <tr>
                    <td>Route</td>
                    <td>:</td>
                    <td><input type="text" id="route" name="route" placeholder="Route" class="form-control"></td>
                </tr>
                <tr>
                    <td>İcon</td>
                    <td>:</td>
                    <td><input type="text" id="icon" name="icon" placeholder="icon" class="form-control"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td><button id="submit" class="btn btn-primary">Gönder</button> <button id="reset" class="btn btn-info">Sıfırla</button></td>
                </tr>
            </table>
            <input type="hidden" id="id">
            <br/><br />

            <div class="cf nestable-lists">

                <div class="dd" id="nestable">
        @php
        if($menusCount>0) {
            foreach ($menus as $data) {
                 $thisRef = &$ref[$data->id];
                 $thisRef['parent'] = $data->parent;
                 $thisRef['label'] = $data->label;
                 $thisRef['link'] = $data->link;
                 $thisRef['route'] = $data->route;
                 $thisRef['icon'] = $data->icon;
                 $thisRef['id'] = $data->id;
                if($data->parent == 0) {
                     $items[$data->id] = &$thisRef;
                } else {
                     $ref[$data->parent]['child'][$data->id] = &$thisRef;
                }
             }


             function get_menu($items,$class = 'dd-list') {
                 $html = '<ol class="'.$class.'" id="menu-id">';
                 foreach($items as $key=>$value) {
                     $html.= '<li class="dd-item dd3-item" data-id="'.$value['id'].'" >
                                 <div class="dd-handle dd3-handle">&nbsp</div>
                                 <div class="dd3-content"><span id="label_show'.$value['id'].'"><i class="'.$value['icon'].'"></i> '.$value['label'].'</span>';
                                    /*
                                    $html.=' <span class="span-right">/<span id="link_show'.$value['id'].'">'.$value['link'].'</span> &nbsp;&nbsp;';
                                    $html.=' <span class="span-right">{{<span id="link_route'.$value['id'].'">'.$value['route'].'</span>}} &nbsp;&nbsp;';
                                    */
                                    $html.= ($value['link']!='') ? ' <span class="span-right">/<span id="link_show'.$value['id'].'">'.$value['link'].'</span> &nbsp;&nbsp;' : ' <span class="span-right">{{<span id="link_route'.$value['id'].'">'.$value['route'].'</span>}} &nbsp;&nbsp;';

                                    $html.='<a class="edit-button" id="'.$value['id'].'" label="'.$value['label'].'" link="'.$value['link'].'" route="'.$value['route'].'" icon="'.$value['icon'].'"><i class="fa fa-pencil"></i></a>
                                         <a class="del-button" id="'.$value['id'].'"><i class="fa fa-trash"></i></a></span>
                                 </div>';
                     if(array_key_exists('child',$value)) {
                         $html .= get_menu($value['child'],'child');
                     }
                         $html .= "</li>";
                 }
                 $html .= "</ol>";
                 return $html;
             }

             print get_menu($items);
            }
        @endphp

    </div>
    </div>

<form action="{{route('ajaxMenuUpdate')}}" method="post">
    @csrf
    <input type="hidden" id="nestable-output" name="cart">
    <button type="submit" id="save" class="btn  btn-primary">Kaydet</button>
</form>
    </div>


@endsection


@section('js')
    <script src="/backend/js/jquery.nestable.js"></script>
    <script>
        // CSRF for all ajax call
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content') } });
    </script>

    <script>

        $(document).ready(function()
        {

            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.');
                }
            };

            // activate Nestable for list 1
            $('#nestable').nestable({
                group: 1
            })
                .on('change', updateOutput);



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

            $('#nestable-menu').on('click', function(e)
            {
                var target = $(e.target),
                    action = target.data('action');
                if (action === 'expand-all') {
                    $('.dd').nestable('expandAll');
                }
                if (action === 'collapse-all') {
                    $('.dd').nestable('collapseAll');
                }
            });


        });
    </script>

    <script>
        $(document).ready(function(){
            $("#load").hide();
            $("#submit").click(function(){
                $("#load").show();

                var dataString = {
                    label : $("#label").val(),
                    link : $("#link").val(),
                    route : $("#route").val(),
                    icon : $("#icon").val(),
                    id : $("#id").val()
                };

                $.ajax({
                    type: "POST",
                    url: "{{route('ajaxMenuAdd')}}",
                    data: dataString,
                    dataType: "json",
                    cache : false,
                    success: function(data){
                        if(data.type == 'add'){
                            $("#menu-id").append(data.menu);
                            /*location.reload();*/
                        } else if(data.type == 'edit'){
                            $('#label_show'+data.id).html(data.label);
                            $('#link_show'+data.id).html(data.link);
                            $('#link_route'+data.id).html(data.route);
                            $('#link_icon'+data.id).html(data.icon);
                            location.reload();
                        }
                        $('#label').val('');
                        $('#link').val('');
                        $('#route').val('');
                        $('#icon').val('');
                        $('#id').val('');
                        $("#load").hide();
                    } ,error: function(xhr, status, error) {
                        alert(error);
                    },
                });
            });

             $(document).on("click",".del-button",function() {
                var x = confirm('Delete this menu?');
                var id = $(this).attr('id');
                if(x){
                    $("#load").show();
                    $.ajax({
                        type: "POST",
                        url: "{{route('menuDelete')}}",
                        data: { id : id },
                        cache : false,
                        success: function(data){
                            $("#load").hide();
                            $("li[data-id='" + id +"']").remove();
                        } ,error: function(xhr, status, error) {
                            alert(error);
                        },
                    });
                }
            });

            $(document).on("click",".edit-button",function() {
                var id = $(this).attr('id');
                var label = $(this).attr('label');
                var link = $(this).attr('link');
                var route = $(this).attr('route');
                var icon = $(this).attr('icon');
                $("#id").val(id);
                $("#label").val(label);
                $("#link").val(link);
                $("#route").val(route);
                $("#icon").val(icon);
            });

            $(document).on("click","#reset",function() {
                $('#label').val('');
                $('#link').val('');
                $('#route').val('');
                $('#icon').val('');
                $('#id').val('');
            });

        });

    </script>



@endsection