{extends file="admin-layout.tpl"}

{block name="no-return-functions"}
    {$admin_current_location = 'configuration'}
{/block}

{block name="page-title"}{intl l='Menu Edit an item'}{/block}

{block name="check-resource"}admin.configuration.menu{/block}
{block name="check-access"}update{/block}

{block name="main-content"}

<div class="taxes-rules edit-taxes-rules">
    <div id="wrapper" class="container">
		<ul class="breadcrumb">
			<li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
			<li><a href="{url path='/admin/tools'}">{intl l="Outils"}</a></li>
			<li><a href="{url path='/admin/modules/menu/gestion'}">{intl l="Menu"}</a></li>
			<li>{intl l="Détails"}</li>
		</ul>

     

        <div class="row">
            <div class="col-md-12 general-block-decorator clearfix">

          
                <div class="tab-content">
                    

                        <div class="col-md-12 title title-without-tabs">
                            {intl l="Gérer le menu"}
                        </div>

						<div class="row">
                            <div class="col-md-6">

                                <div id="panel" class="panel panel-default place">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">{intl l="Gérer les liens du menu et leur ordre d'affichage"}</h3>
                                    </div>
                                    <div class="panel-body">

                                        <div class="drop-group droppable add-to-group">
                                            <p class="drop-message">
                                                <span class="glyphicon glyphicon-plus"></span>
                                                <span class="message">{intl l="Déposer un lien ici afin de l'ajouter au menu"}</span>
                                            </p>
                                            
                                            {loop type="menu_item" name="lienDuMenu" menu_id=$menu_id}
	                                            {if $TYPE && $OBJET}
	                                            	{loop type=$TYPE name="itemmenu" id=$OBJET}
													<div class="drag" data-id="{$ID}">{$TITLE}</div>
													{/loop}
												{/if}
											{/loop}
                                            
                                        </div>                                
										
									</div>


	                            </div>
							   {form name="menu.item.form"}
								<form method="post" action="{url path="/admin/modules/menu/details/$menu_id"}" id="menuItemForm">
									{form_hidden_fields form=$form}
									
									{form_field form=$form field='success_url'}
										<input type="hidden" name="{$name}" value="{url path="/admin/modules/menu/details/$menu_id"}">
									{/form_field}
									{form_field form=$form field='menu_id'}
										<input type="hidden" name="{$name}" value="{$menu_id}">
									{/form_field}
									{form_field form=$form field='menu_list'}
										<input type="hidden" id="menu_list" name="{$name}" value="">
									{/form_field}
								</form>
								{/form}
    	                        <a href="#menu_list_update_dialog" id="apply-item-menu" class="btn btn-default btn-primary btn-block"><span class="glyphicon glyphicon-check"></span> {intl l="Apply"}</a>
	
    	                    </div>
        	                <div class="col-md-6">

                            <div id="panel-list" class="panel panel-default take">
                                <div class="panel-heading">
                                    <h3 class="panel-title">{intl l="Category"}</h3>
                                </div>
                                <div class="panel-body">
                                    {loop type="category" name="catgory-list" parent="0" exclude_category_menu=$ID}
                                        <div class="draggable" data-id="{$ID}" data-cpfc="0">{$TITLE}</div>
        
                                        {loop type="category" name="sous-catgory-list" parent=$ID}
    	                                    <div class="draggable" data-id="{$ID}" data-cpfc="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$TITLE}</div>
	                                    {/loop}
                                    {/loop}
                                </div>
                                <div class="panel-footer droppable remove-from-group">
                                    <p class="drop-message">
                                        <span class="glyphicon glyphicon-minus"></span>
                                        <span class="message">{intl l="Déposer un lien ici pour l'enlever du menu"}</span>
                                    </p>
                                </div>
                                <br />
                                <div class="panel-heading">
                                    <h3 class="panel-title">{intl l="Folder"}</h3>
                                </div>
                                <div class="panel-body">
                                    {loop type="folder" name="folder-list" parent="0" exclude_folder_menu=$ID}
                                        <div class="draggable" data-id="{$ID}" data-cpfc="2">{$TITLE}</div>
        
                                        {loop type="folder" name="sous-folder-list" parent=$ID}
    	                                    <div class="draggable" data-id="{$ID}" data-cpfc="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$TITLE}</div>
	                                    {/loop}
                                    {/loop}
                                </div>
                                <div class="panel-footer droppable remove-from-group">
                                    <p class="drop-message">
                                        <span class="glyphicon glyphicon-minus"></span>
                                        <span class="message">{intl l="Déposer un lien ici pour l'enlever du menu"}</span>
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>

            </div>

        </div>

    </div>
 
</div>

{/block}

{block name="javascript-initialization"}

    {javascripts file='assets/js/bootstrap-select/bootstrap-select.js'}
        <script src='{$asset_url}'></script>
    {/javascripts}

    {javascripts file='assets/js/main.js'}
        <script src='{$asset_url}'></script>
    {/javascripts}

    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>
        $(function() {

            {if $taxUpdateError == true}
            $('#tax_list_update_dialog').modal();
            {/if}


            $('.js-collapse').each(function(k, v) {
                var h = $(v).data('collapse-height');
                if( $(v).height() > h ) {
                    $(v).css('overflow', 'hidden').css('height', h + 'px');
                } else {
                    $('[data-collapse-block=' + $(v).attr('id') + ']').hide();
                }
            });

            $('.js-collapse-btn').click(function(e) {
                e.preventDefault();
                var block = $(this).data('collapseBlock');
                $('#' + block).css('overflow', 'initial').css('height', 'initial');
                $(this).unbind().remove();
            });

            $('.js-uncheck-all').click(function(e) {
                e.preventDefault();
                var selectId = $(this).data('uncheckSelect');
                $('#' + selectId).selectpicker('deselectAll');
            });

            {literal}
            // Cache jQuery Objects
            var $group = $('#panel');
            var $list = $('#panel-list');

            // Build array of taxes rules
            $('#apply-item-menu').click(function(){
                var menuItem = [],
                        index;

                $('.drop-group', $group).each(function(i){
                    var $this = $(this);
                    index = i;
                    menuItem[index] = [];

                    $('.drag', $this).each(function(j){
                        menuItem[index][j] = [];
                        menuItem[index][j] = $(this).data('cpfc')+'_'+$(this).data('id'); // retrieve with data
                    });
                });

                $('#menu_list').val(JSON.stringify(menuItem));    
				$('#menuItemForm').submit();
            });

            // Default options for draggable
            var dragOptions = {
                cursor: 'move',
                containment: "document",
                opacity: 0.5,
                revert: "invalid", // when not dropped, the item will revert back to its initial position
                zIndex: 10
            };

            // Default options for sortabble
            var sortOptions = {
                cursor: 'move',
                cancel: '.drop-message',
                update: function( event, ui ){
                    // Check if we have an empty group
                    var $zone = $('.add-to-group', $group);
                    if($zone.size() > 1 && $(this).find('> div').size() == 0){ // Remove empty group only if we have more than 1 group
                        $(this).slideUp(function(){ $(this).remove(); });
                    }
                }
            };

            // Default options for droppable
            var dropOptions = {
                accept: "#panel-list .draggable", // Controls which draggable elements are accepted
                hoverClass: "over",
                drop: function( event, ui ) {
                    var $drop = $(this);

                    if($(this).hasClass('create-group')){
                        // Check if we have already an empty group
                        var $empty_group = $group.find('.drop-group:not(:has(> div))');
                        if($empty_group.size() > 0){ // if yes (Use the first empty group)
                            $drop = $empty_group.filter(':first');
                        }else{ //if no (Create a new group)
                            $drop = $group.find('.drop-group:last-child').clone().appendTo($group.find('.panel-body'));

                            // Remove taxes
                            $drop.find('> div').remove();

                            // Make the new group droppable
                            $drop
                                    .droppable(dropOptions)
                                    .sortable(sortOptions);
                        }
                    }

                    $("<div></div>").addClass('drag').attr('data-id', ui.draggable.data('id')).attr('data-cpfc', ui.draggable.data('cpfc')).text( ui.draggable.text()).appendTo( $drop );
                    ui.draggable.remove();
                }
            };


            // Make the list of taxes draggable
            $('.draggable', $list).draggable(dragOptions);


            // let the drop-group be droppable & sortable, accepting the tax items
            $('.droppable', $group)
                    .droppable(dropOptions)
                    .sortable(sortOptions);

            $('.place .panel-body').sortable(sortOptions);

            // let the gallery be droppable as well, accepting items from the trash
            $('.remove-from-group', $list)
                    .droppable({
                        accept: "#panel .drag",
                        hoverClass: 'over',
                        drop: function( event, ui ) {
                            $("<div></div>").addClass('draggable').text( ui.draggable.text() ).attr('data-id', ui.draggable.data('id')).attr('data-cpfc', ui.draggable.data('cpfc')).draggable(dragOptions).appendTo(  $list.find('.panel-body') );
                            ui.draggable.remove();

                        }
                    });

            {/literal}

        });

    </script>

{/block}

{block name="javascript-last-call"}

{/block}