{% extends 'admin\\baseadmin.html.twig' %}

{% trans_default_domain 'menus' %}
{% block stylesheets %}
{{parent()}}
{# Font Awesome #}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
{# Artgris FileManager #}
<link rel="stylesheet" href="{{ asset('bundles/artgrisfilemanager/libs/blueimp-file-upload/css/jquery.fileupload.css') }}">
{# Import fengyuanchen/cropper #}
<link rel="stylesheet" href="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.css') }}">
{# Then the default bundle's CSS #}
<link rel="stylesheet" href="{{ asset('bundles/artgrismedia/css/media.css') }}">
<style>
	.treeSelector-input-box{display:none;}
	.menu-actions i {font-size: 25px; margin-top: 5px; margin-right: 15px}

    .original-name {font-style:italic; font-size:11px;clear:both; display:block;}
    .original-name span {font-weight:bold;}
	.menu-structure {margin-left:0;padding-left:0;position:relative;}    
	.menu-item-title {padding-left:15px;}
    .menu-item-drag {margin-top:15px !important;}
    .menu-item-drag ul.actions.top-right {position:absolute; top:13px; right:15px;}
    .relation-info-wrap {margin-top: -1px; border-bottom: 1px solid rgb(221, 221, 221); padding: 0px 15px;}

    .magicsearch-wrapper {width:100% !important;z-index: 2;}
    .magicsearch-wrapper .form-control {width:100% !important;}

    .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none;}
    .dd-list .dd-list { padding-left: 30px;padding-right: 20px; padding-bottom: 10px; }
    .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 { position: relative; padding: 5px 15px; height: auto; min-height: 20px; line-height: 30px; overflow: hidden; word-wrap: break-word;}
    .dd-handle:hover { color: #5accca; background: #fff; cursor:move; }
    .dd-item > button { display: block; position: absolute; top:7px; left:5px;z-index:5; 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-placeholder {margin-top:15px;}
    .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); }

    .custom-checkbox .custom-control-label {padding-top:4px;}

    .block-el .treeSelector {padding-right:15px; width:100%;}


    /* .borda{border: 1px solid #CCC} */
    .borda button{display:none !important}
    .actions-right{position:relative;border:0;margin-right:10px;}    
    .actions-right li{position:relative; display:inline;float:right;padding:7px;margin:3px;border:0}
    .actions-right li a i{border:1px;margin-top: -5px;transition: 0.5s; }
    .actions-right li a i:hover{color:#5accca !important}


</style>
{% endblock %}
{% block content%}
{% include 'admin\\stdpages\\modalroles.html.twig' %}
{% include 'admin\\stdmenus\\modalclone.html.twig' %}

<!--START PAGE CONTENT -->
				<section class="page-content container-fluid">
                    <div class="row">
                        <div class="col-12">

                            <!--START NAVIGATION CARD -->
                            <div class="card">
                                <div class="card-header">
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-down"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body block-el">
                                    <div class="form-group row">
                                        <div class="col-md-8">
                                            <select id="select-menu" class="form-control select2-style" name="menu">
                                                {% for menu in menus %}
													<option value="{{menu.0.id}}" {%if selectedmenu|default and menu.0.id==selectedmenu.id %} selected {%endif%} data-language="{{menu.1}}">{{menu.0.name}} [{{menu.1|upper}}]</option>
												{% endfor %}
                                            </select>
                                        </div>
										<div class="col-md-4 menu-actions">
                                            <a class="js-new-menu float-left" href="/{{ app.request.getLocale() }}/admin/content/menus/new/" ><i class="la la-plus" title="New Menu"></i></a>
											<a class="js-edit-menu float-left" href="#"><i class="la la-edit" title="Edit Menu"></i></a>
											<a class="js-clone-menu float-left" href="#"><i class="la la-clone" title="{{'copy'|trans({},'studio')}}"></i></a>
											<a class="js-delete-menu float-left" href="#"><i class="la la-trash" title="{{'delete'|trans({},'studio')}}"></i></a>
										</div>
                                    </div>
                                </div>
                            </div>
                            <!--END NAVIGATION CARD -->

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">

                            <!--START NAVIGATION CARD -->
                            <div class="card">
                                <div class="card-header">
                                    {{pageslabel}}
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body block-el">
                                    <div class="form-group row">
										<div class="col-md-12 m-b-15">
											<input class="magicsearch form-control" id="magic-page" placeholder="search names...">
                                        </div>
                                        <div class="card-scroll" style="height:180px;overflow-y:scroll;width:calc(100% - 15px)">
                                            {% for page in pages %}
                                            <div class="col-md-12">
                                                <div class="custom-control custom-checkbox checkbox-primary">
                                                    <input type="checkbox" class="custom-control-input check-page" value="{{page.id}}" id="check_page_id_{{page.id}}">
                                                    <label class="custom-control-label" for="check_page_id_{{page.id}}">{{page.title}}</label>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        <div class="col-md-12 m-t-15">
                                            <button class="btn btn-primary btn-sm float-right button add-page-menu">{{addtomenu}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--END NAVIGATION CARD -->

							<!--START NAVIGATION CARD -->
                            <div class="card">
                                <div class="card-header">
                                    {{categorieslabel}}
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body block-el">
                                    <div class="form-group row">
										<div class="col-md-12 m-b-15">
											<input class="magicsearch-category form-control" id="magic-category" placeholder="search names...">
                                        </div>
                                        {# {% for category in categories %}
                                        <div class="col-md-12">
                                            <div class="custom-control custom-checkbox checkbox-primary">
                                                <input type="checkbox" class="custom-control-input check-category" value="{{category.id}}" id="check_category_id_{{category.id}}">
                                                <label class="custom-control-label" for="check_category_id_{{category.id}}">{{category.title}}</label>
                                            </div>
                                        </div>
										{% endfor %} #}
										<input type="hidden" name="menu-parent-category" id="menu-parent-category" {% if pagesRelations.values is defined %} value="{{ pagesRelations.values }}" {% endif %}>
										<div class="treeSelector"></div>
                                        <div class="col-md-12 m-t-15">
                                            <button class="btn btn-primary btn-sm float-right button add-cat-menu">{{addtomenu}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--END NAVIGATION CARD -->



                            <!--START NAVIGATION CARD -->
                            <div class="card">
                                <div class="card-header">
                                    {{customfieldlabel}}
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body block-el">
									<form id="custom-link" method="POST" action="/{{ app.request.getLocale() }}/admin/menus/insert/custom">
										<div class="form-group row">
											<div class="col-md-12">
												<div class="form-group">
													<label for="urlalias">{{linklabellabel}}</label>
													<div class="input-group mb-3">
														<input type="text" class="form-control custom-label"  name="label" id="label" aria-describedby="basic-addon3">
													</div>
												</div>
											</div>
											<div class="col-md-12">
												<div class="form-group">
													<label for="urlalias">{{linklabel}}</label>
													<div class="input-group mb-3">
														<input type="text" class="form-control custom-link" name="link" id="link" aria-describedby="basic-addon3">
													</div>
												</div>
											</div>
											<div class="col-md-12">
												<div class="form-group">
													<label for="urlalias">{{linktarget}}</label>
													<select class="form-control select2-style custom-target" name="target" id="target">
														<option value="">{{selectoption}}</option>
														{% for target in targetOptions %}
															<option value="{{target.value}}">{{target.label}}</option>
														{% endfor %}
													</select>
												</div>
											</div>
											<div class="col-md-12 m-t-15">
												<button class="btn btn-primary btn-sm float-right button add-custom-menu">{{addtomenu}}</button>
											</div>
										</div>
									</form>
                                </div>
                            </div>
                            <!--END NAVIGATION CARD -->

                        </div>
                        <div class="col-sm-9">
                            <div class="card">
                                <div class="card-header">
									{{menustructurelabel}}
									<div class="col-md-12 m-t-15">
										<button class="btn btn-primary btn-sm float-right button save-menu">{{savemenu}}</button>
									</div>
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-down"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body block-el menu-structure-wrap dd">
                                    <ol class="menu-structure dd-list">
                                        <li class="m-t-30">
                                            <div class="preloader transform50XY pl-xs pls-primary"><svg class="pl-circular" viewBox="25 25 50 50"><circle class="plc-path" cx="50" cy="50" r="20"></circle></svg></div>
                                        </li>
                                    </ol>
                                </div>

                            </div>

                        </div>
                    </div>

                </section>
	            <!--END PAGE CONTENT -->
{% endblock %}

{% block scripts %}
    {{parent()}}       
    {#  Jqueri UI #}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    {# jquery.collection.js #}
    <script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>

    {% include '@ArtgrisMedia/assets/include_js.html.twig' %}

<script>
$(function(){

	/* get menu structure by ajax */
	$("#select-menu").on("change",function(e){
		e.preventDefault();
		var t = $(this), menuId = t.val();
        var language=t.find(':selected').data('language');
		$("ol.menu-structure").html("");
		$("#select-menu").val(menuId);
		updateStructure(menuId);
	});

    /* Load First Menu on Page Load */
    var menuId = $("#select-menu").val();
    var language=$("#select-menu").find(':selected').data('language');
    if(menuId != "")
        updateStructure($("#select-menu").val());
    else{
        $("#select-menu").find('option:nth-child(2)').prop('selected',true).trigger('change');
        updateStructure($("#select-menu").find('option:nth-child(2)').val());
    }

	function updateStructure(id) {
        $("ol.menu-structure").html('<li class="m-t-30"><div class="preloader transform50XY pl-xs pls-primary"><svg class="pl-circular" viewBox="25 25 50 50"><circle class="plc-path" cx="50" cy="50" r="20"></circle></svg></div></li>');
		$.ajax({
			url: "/{{ app.request.getLocale() }}/admin/menus/structure",
			type: "GET",
			dataType: "html",
			global: true,
			cache: false,
			data: "id="+id,
			success: function(data) {
				$("ol.menu-structure").html(data)
                $(".dd").nestable();
                initFileUpload('.fileupload.alone');
                $('form.ajax-menu-form').each((index, item) => {
                    $(item).find('select').select2();
                })
            }
		});
	}


	/* add pages & categories to menu structure */
	$(".add-page-menu, .add-cat-menu").on("click",function(e){
		e.preventDefault();
        addItemToMenu($(this));
	});


	 /* add custom link to menu structure */
	 $(".add-custom-menu").on("click",function(e){
		 e.preventDefault();
        addItemToMenu($(this),'custom');
	 });


    function addItemToMenu(element,type){
		var arr = [], t = element, card_el = t.closest(".block-el"), menuId = $("#select-menu").val();
		if(menuId != ""){
            if(type == "custom"){
                var form = $("#custom-link");
                $.ajax({
                    url : form.attr('action'),
                    type: "POST",
                    data : form.serialize()+"&menuId="+menuId,
                    success: function(html) {
                        updateStructure(menuId);
                        $("#custom-link")[0].reset();
                    }
                });
            } else {
                card_el.find("input[type='checkbox']:checked").each(function () {
                    arr.push($(this).val());
                });
                $.ajax({
                    url: "/{{ app.request.getLocale() }}/admin/menus/insert",
                    type: "POST",
                    dataType: "html",
                    global: true,
                    cache: false,
                    data: {"menuId":menuId,"pages":arr},
                    success: function(data) {
                        updateStructure(menuId);
                        card_el.find("input[type='checkbox']:checked").prop('checked',false);
                        card_el.find(".magicsearch, .magicsearch-category").trigger('clear');

                    }
                });
            }
		}
    }



	 /* save menu structure */
	 $(".save-menu").on("click",function(e){
		e.preventDefault();
		var menuId = $("#select-menu").val();
		if(menuId != ""){
			var data = $(".dd").nestable('serialize');
			var articleorder="";
			$.ajax({
				url : "/{{ app.request.getLocale() }}/admin/menus/structure/save",
				type: "POST",
				data : {"data":data,"menuId":menuId},
				success: function(html) {
					updateStructure(menuId);
				}
			});
		}

	 });


    //MagicSearch Pages
    initMagicSearch('#magic-page',getPages());

    //MagicSearch Category
    initMagicSearch('#magic-category',getCategories());


    function initMagicSearch(element,source){
        var card_el = $(element).closest(".block-el");
        $(element).magicsearch({
            dataSource: source,
            fields: ['title','id',"type"],
            id: 'id',
            format: '%title% (%type%)',
            multiple: true,
            maxShow: 10,
            dropdownMaxItem: 15,
            multiField: 'title',
            noResult: '{{noresults}}',
            afterDelete:function($input,data){
               card_el.find("input[type='checkbox'][value="+data.id+"]").prop('checked',false);
            },
            success:function($input,data){
                card_el.find("input[type='checkbox'][value="+data.id+"]").prop('checked',true);
            }
        });
    }


	$("input.check-page:checkbox").change(function() {
		var id =$(this).val();
		if(this.checked) {
			$('#magic-page').trigger('set', { id: id });
		} else {
			$(".multi-item-close[data-id="+id+"]").trigger("click");
		}
    });

	$('div.treeSelector').on("change",".checkbox",function(){
		var id = $(this).data("value");
		if(!this.checked) {
			$(".multi-item-close[data-id="+id+"]").trigger("click");
		}
	});


	function getPages () {
		var pages;
		$.ajax({
			url: "/{{ app.request.getLocale() }}/admin/menus/pages",
			type: "GET",
			dataType: "json",
			global: true,
			cache: true,
			async: false,
			success: function(data) {
				pages = data;
			}
		});
		return pages;
	}

	function getCategories () {
		var categories;
		$.ajax({
			url: "/{{ app.request.getLocale() }}/admin/menus/categories",
			type: "GET",
			dataType: "json",
			global: true,
			cache: true,
			async: false,
			success: function(data) {
				categories = data;
			}
		});
		return categories;
	}


	{% if pagesRelations.content is defined %}
        $('div.treeSelector').treeSelector({{ pagesRelations.content|json_encode|raw }}, [], function (e, values) {
            values.forEach(function(val){
                $('#magic-category').trigger('set', { id:val});
            });
        },{
			checkWithParent: false,
			titleWithParent: false,
			notViewClickParentTitle: false,
			disabled: false,
			emptyOptonPlaceholder: '{{noresults}}',
		});
	{% endif %}

	$(".menu-structure").on("click",".remove-menu",function(e){
		e.preventDefault();
		var relationId = $(this).data("relationid");
		var menuId = $("#select-menu").val();
		if(menuId != ""){
			if(relationId != ""){
				$.ajax({
					url : "{{ path('admin_menus_delete_item')}}",
					type: "POST",
					data : {"relationId":relationId,"menuId":menuId},
					success: function(html) {
						updateStructure(menuId);
					}
				});
			}
		}
	});


	$("body").on("click",".show-menu",function(e){
		e.preventDefault();
		var relationId = $(this).data("relationid");
  		$( ".relation-info-"+relationId ).toggle();
	});
    $(document).on("click",".js-clone-menu", function(e){
        var idmenu = $("#select-menu").val();
        if(idmenu){
            $(".show-clone-menu").modal("show");
            $('.languagesResult').html('{{ 'loading'|trans({},'studio')}}');
            $.ajax({
                url: '/{{ app.request.getLocale() }}/admin/menus/getLanguages',
                type: "POST",
                data: {
                    'idmenu': idmenu
                },
                success: function (responseJson) {                
                    $('.languagesResult').html(responseJson)
                }
            });
        }
    });
    $(document).on("click",".js-copy-menu", function(e){
        idmenu = $("#select-menu").val();
        menuname=$("#menuname").val();
        language=$("input:radio[name=language]:checked").val();
        if(language && menuname){            
            $.ajax({
                url: "{{path('admin_menus_clone_test',{mode:'test'})}}",
                type: "POST",
                data: {
                    'idmenu': idmenu,
                    'menuname': menuname,
                    'language': language
                },
                success: function (data) {
                    if(!data.success){
                        Swal({
                            text: data.error,
                            type: 'warning',
                            showCancelButton: true,
                            confirmButtonText: "{{'confirmyes'|trans({},'studio')}}",
                            cancelButtonText: "{{'confirmno'|trans({},'studio')}}"
                        }).then((result) => {
                            if (result.value) {
                                $.ajax({
                                    url: "{{path('admin_menus_clone')}}",
                                    type: "POST",
                                    data: {
                                        'idmenu': idmenu,
                                        'menuname': menuname,
                                        'language': language
                                    },
                                    success: function (data) {
                                        if(data.success){
                                            window.location.href="{{path('admin_menus')}}/edit/"+data.menu;                                        
                                        }                
                                    }
                                });
                            }
                        })
                    }                
                }
            });
        }
    });
    $(document).on("click",".js-edit-menu", function(e){
        menuId=$("#select-menu").val();
        var language=$("#select-menu").find(':selected').data('language');
        if(menuId == '')
            $(this).attr("href","#");
        else
        	$(this).attr("href","/{{ app.request.getLocale() }}/admin/content/menus/edit/"+menuId+"/language/"+language).show();
    });
    $(document).on("click",".js-delete-menu", function(e){
        var idmenu=$("#select-menu option:selected");
        if(idmenu.val()){
            Swal({
                html: "{{'confirm_delete_menu'|trans({},'menus')}}<br><strong>"+ idmenu.text() +"</strong>",
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: "{{'confirmyes'|trans({},'studio')}}",
                cancelButtonText: "{{'confirmno'|trans({},'studio')}}"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url: "{{path('admin_menus_delete')}}",
                        type: "POST",
                        data: {
                            'idmenu': idmenu.val()
                        },
                        success: function (data) {
                            if(data.success){
                                window.location.href="{{path('admin_menus')}}";                                        
                            }                
                        }
                    });
                }
            })
        }
    });
	$(".menu-structure").on("click",".update-menu",function(e){
		e.preventDefault();
		var relationId = $(this).data("relationid");
  		var form = $("#form-info-"+relationId);
        console.log("update-menu", form.attr('action'), relationId, form);
		$.ajax({
			url : form.attr('action'),
			type: "POST",
			data : form.serialize(),
			success: function(html) {
				updateStructure(menuId);
			}
		});
	});
});
 {% include 'admin\\stdpages\\modalroles.js.twig' %}
</script>

{% endblock %}