@extends('layouts.admin')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <strong>Menu Details</strong>
                </div>
                {{-- <form method="post" autocomplete="off" autofill="off"> --}}
                    <div class="card-body">

                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="inputName">Name</label>
                            <input id="inputName" type="text" name="name" class="form-control" value="{{ old('name', $menu->name) }}">
                        </div>

                        <div class="form-group">
                            <label for="inputSlug">Slug</label>
                            <input id="inputSlug" type="text" name="slug" class="form-control" value="{{ old('slug', $menu->slug) }}">
                        </div>

                        <div class="form-group">    
                            <div class="form-group">
                                <label for="inputSearch">Search</label>
                                <div>
                                    <label class="switch switch-label switch-pill switch-success switch-sm">
                                    <input id="inputSearch" class="switch-input" {{ ($menu->search) ? 'checked=""': '' }} type="checkbox" name="search" value="1">
                                        <span class="switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputLayout">Layout</label>
                            <select id="inputLayout" name="layout" class="form-control">
                                <option value="navbar" {{ ($menu->layout == 'navbar' || old('layout') == 'navbar') ? 'selected': "" }}>Navbar</option>
                                <option value="list" {{ ($menu->layout == 'list' || old('layout') == 'list') ? 'selected': "" }}>List</option>
                            </select>
                        </div>


                        {{-- Testing Output --}}
                        <div class="row output-container d-none">
                            <div class="col-md-offset-1 col-md-10">
                            <h2 class="text-center">Output:</h2>
                                <textarea name='json' class="form-control" id="json-output" rows="5">{{$menu->json}}</textarea>
                            </div>
                        </div>
                        {{-- //Testing Output --}}

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <div class="card-footer text-right">
                        <input type="hidden" name="id" value="{{ $menu->id }}">
                        <input type="submit" class="btn btn-primary" value="Save Menu">
                    </div>
                {{-- </form> --}}
            </div>
        </div>
    </div>


    {{-- TESTING --}}
    <div class="row">
        <div class="col-md-6">
            <div class="form" id="menu-add">
                <div class="card">
                    <div class="card-header">
                        <strong>New Menu Items</strong>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="addInputName">Name</label>
                            <input type="text" class="form-control" id="addInputName" placeholder="Item name" >
                        </div>
                        <div class="form-group">
                            <label for="addInputSlug">Slug</label>
                            <input type="text" class="form-control" id="addInputSlug" placeholder="item-slug" >
                        </div>
                        <div class="form-group">
                            <label for="addInputTarget">Target</label>
                            <select class="form-control" id="addInputTarget" placeholder="item-target" >
                                <option value="_self">Self</option>
                                <option value="_blank">Blank</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="addInputDescription">Description</label>
                            <textarea class="form-control" id="addInputDescription" placeholder="item-description"></textarea>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="button" class="btn btn-info" id="addButton">Add</button>
                    </div>
                </div>
            </div>

            <div class="" id="menu-editor" style="display: none;">
                <div class="card">
                    <div class="card-header">
                        <strong>New Menu Items</strong>
                    </div>
                    <div class="card-body">
                        <h3>Editing <span id="currentEditName"></span></h3>
                        <div class="form-group">
                            <label for="addInputName">Name</label>
                            <input type="text" class="form-control" id="editInputName" placeholder="Item name" >
                        </div>
                        <div class="form-group">
                            <label for="addInputSlug">Slug</label>
                            <input type="text" class="form-control" id="editInputSlug" placeholder="item-slug">
                        </div>
                        <div class="form-group">
                            <label for="editInputTarget">Target</label>
                            <select class="form-control" id="editInputTarget" placeholder="item-target" >
                                <option value="_self">Self</option>
                                <option value="_blank">Blank</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="editInputDescription">Description</label>
                            <textarea class="form-control" id="editInputDescription" placeholder="item-description"></textarea>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="button"  class="btn btn-info" id="editButton">Edit</button>
                        <button type="button"  class="btn btn-info" id="cancelEditButton">cancel</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <strong>Menu</strong>
                </div>
                <div class="card-body">
                    <div class="dd nestable" id="nestable">
                        <ol class="dd-list">
                        {{-- Populate Menu --}}
                        @if($menu_items)
                            @foreach ($menu_items as $menu_item)
                                @include('menu::partials.menu_item', array('menu_item' => $menu_item))
                            @endforeach
                        @endif
                        {{-- //Populate Menu --}}
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    {{-- //TESTING --}}
</div>

{{-- {{ Module::asset('Menu:js/nestable-master/style.css') }}
{{ Module::asset('Menu:js/nestable-master/jquery.nestable.js') }}
{{ Module::asset('Menu:js/nestable-master/jquery.nestable++.js') }} --}}

<link rel="stylesheet" href="{{ Module::asset('menu:js/Nestable-master/style.css') }}">
<script src="{{ Module::asset('menu:js/Nestable-master/jquery.nestable.js') }}"></script>
<script src="{{ Module::asset('menu:js/Nestable-master/jquery.nestable++.js') }}"></script>
<script>
$('#nestable').nestable({ maxDepth: 3 }).on('change', updateOutput);
</script>

@endsection