<?php 

function menu_cb() {
	global $post_meta;
	add_page_javascript('app/assets/menu-builder/jquery-menu-editor.js');
	add_page_javascript('app/assets/menu-builder/bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js');
	add_page_javascript('app/assets/menu-builder/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js');
    add_page_javascript('app/assets/js/menu-builder-init.js');
	
	?>
	<link rel="stylesheet" href="app/assets/menu-builder/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css">
    

    <div class="row">
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-heading">
                    <h1>Menu</h1>
                </div>
                <div class="panel-body" id="menuContainer">
                    <ul id="myEditor" class="sortableLists list-group"></ul>
                    <?php alert(); ?>
                </div>
                <div class="panel-footer">
                    <button type="button" id="btnSave" class="btn btn-success"><i class="fas fa-save"></i> Save</button>
                </div>
            </div>
        </div>
        <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        <h1>Edit item</h1>
                    </div>
                    <div class="panel-body pl-5 pr-5">
                        <form id="frmEdit" class="form-horizontal">
                        <div class="form-group">
                        <label for="text">Text <span class="error">*</span></label>
                        <div class="input-group">
                        <input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
                        <!-- <div class="input-group-append"> -->
                        <button type="button" id="myEditor_icon" class="btn btn-outline-secondary"></button>
                        <!-- </div> -->
                        </div>
                        <input type="hidden" name="icon" class="item-menu">
                        </div>
                        <div class="form-group">
                        <label for="href">Permalink <span class="error">*</span></label>
                        <input type="text" class="form-control item-menu" id="page" name="page" placeholder="URL">
                        </div>
                        <div class="form-group">
                        <label for="target">Menu ID <span class="error">*</span></label>
                        <input type="text" class="form-control item-menu" id="id" name="id" placeholder="Menu ID">
                        </div>
                        <div class="form-group">
                        <label for="access">Access <span class="error">*</span></label>
                        <input type="text" name="access" class="form-control item-menu" id="access" placeholder="Access">
                        </div>
                        </form>
                    </div>
                    <div class="panel-footer">
                        <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fas fa-sync-alt"></i> Update</button>
                        <button type="button" id="btnAdd" class="btn btn-success"><i class="fas fa-plus"></i> Add</button>
                    </div>
                </div>
        </div>
    </div>

	<?php
}