{#
    Responsive Menu Jinja template file.
    Safe to Copy
#}

{% import 'admin/macros.html.twig' as macros %}

<div id="responsive-menu-desktop-menu-container" class="pro-container">

    {% set desktop_menu_options = options.desktop_menu_options|json_decode %}
    {% set menu_items = menu_items(options) %}

    <div class="col-md-3 responsive-menu-desktop-menu-links-container">
        {% for item in menu_items %}

            {% set continue = false %}

            {% if item.menu_item_parent == '0' %}
                {% set parent_id = item.ID %}
                {% set class = 'responsive-menu-desktop-menu-top-level-label' %}
                {% set continue = true %}
            {% elseif parent_id == item.menu_item_parent %}
                {% set next_level_id = item.ID %}
                {% set class = 'responsive-menu-desktop-menu-sub-menu-label' %}
                {% set continue = true %}
            {% endif %}

            {# Stop us going too many levels deep #}
            {% if continue %}
                <div
                        data-id="{{ item.ID }}"
                        class="{% if loop.first %}responsive-menu-desktop-menu-label-active {% endif %} responsive-menu-desktop-menu-label {{ ' ' ~ class }}">
                    {{ item.title }}
                    <div class="pull-right">
                        <span class="label label-info">
                            {{ desktop_menu_options[item.ID]['width']|default('auto') }}
                        </span>
                    </div>
                </div>
            {% endif %}

        {% endfor %}
    </div>

    <div class="col-md-9 responsive-menu-desktop-menu-options-wrapper" style="padding-right: 90px;">
        {% for item in menu_items %}
            {% set has_title = false %}
            <div class="responsive-menu-desktop-menu-options-container" id="responsive-menu-desktop-menu-option-{{ item.ID }}">

                <div class="control-label pull-right responsive-menu-desktop-menu-option-badges">
                    <span class="label label-info">#{{ item.ID }}</span>
                    <span class="label label-info">{{ item.title }}</span>
                </div>

                {% if item.menu_item_parent == 0 %}
                    <div class="responsive-menu-desktop-menu-option-container">
                        <label class="control-label">Type</label>
                        <div class="sub-text">
                            Set the type of menu for this sub menu section.
                        </div>
                        <select class="selectpicker show-tick desktop-menu-type-switcher" name="menu[desktop_menu_options][{{ item.ID }}][type]">
                            {% set types = {
                                'standard': 'Standard',
                                'mega': 'Mega Menu'
                            } %}
                            {% for value, display in types %}
                                <option
                                        value="{{ value }}"
                                        {% if desktop_menu_options[item.ID]['type'] == value %}
                                            selected="selected"
                                        {% endif %}
                                >{{ display }}
                                </option>
                            {% endfor %}
                        </select>
                        <p style="color:red;margin-top:10px;" class="mega-menu-depth-notice sub-text {% if desktop_menu_options[item.ID]['type'] != 'mega' %} hidden{% endif %}">Note : The Menu > Depth option will not apply for Mega Menu items.</p>
                    </div>
                {% endif %}

                <div class="responsive-menu-desktop-menu-option-container">
                    <label class="control-label">Item Width</label>
                    <div class="sub-text">
                        Our Desktop Menu uses a 12 item width grid. You can specify the width of each item here as a fraction of 12, or keep them auto sized.
                    </div>
                    <select class="selectpicker show-tick" name="menu[desktop_menu_options][{{ item.ID }}][width]">
                        <option
                                value="auto"
                                {% if desktop_menu_options[item.ID]['width'] == 'auto' %}
                                    selected="selected"
                                {% endif %}
                        >Auto
                        </option>
                        {% for i in range(1, 12) %}
                            <option
                                    value="{{ i }}"
                                    {% if desktop_menu_options[item.ID]['width'] == i %}
                                        selected="selected"
                                    {% endif %}
                            >{{ i }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                {% if item.menu_item_parent == 0 %}
                    {# Menu panel max width element for desktop menu. #}
                    <div class="responsive-menu-desktop-menu-option-container">
                        <label class="control-label">Submenu Panel Maximum Width</label>
                        <div class="sub-text">
                            Add submenu panel max width.
                        </div>
                        <div class="row">
                            <div class="col-md-9 col-sm-8">
                                <input type='text' class='form-control' name='menu[desktop_menu_options][{{ item.ID }}][submenu_panel_max_width]' value='{{ desktop_menu_options[item.ID]['submenu_panel_max_width'] }}' />
                            </div>
                            <div class="col-md-3 col-sm-4">
                                {% set choices = {
                                    'px': 'px',
                                    '%': '%',
                                    'em': 'em',
                                    'rem': 'rem',
                                    'vw': 'vw',
                                    'vh': 'vh'
                                } %}
                               <select class="selectpicker show-tick"  name="menu[desktop_menu_options][{{ item.ID }}][submenu_panel_max_width_unit]">
                                    {% for key, display in choices %}
                                        <option value='{{ key }}'
                                            {% if key == desktop_menu_options[item.ID]['submenu_panel_max_width_unit'] %}
                                                 selected='selected'
                                            {% endif %}>
                                            {{ display }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
    
                    <div class="responsive-menu-desktop-menu-option-container responsive-menu-desktop-menu-mega-menu-option{% if desktop_menu_options[item.ID]['type'] != 'mega' %} hidden{% endif %}">
                        <div>
                            <label class="control-label">Mega Menu Background Colour</label>
                            <div class="sub-text">
                                Sets the background colour for the mega menu container section.
                            </div>
                            <input type='text' class='form-control mini-colours' name='menu[desktop_menu_options][{{ item.ID }}][parent_background_colour]' value='{{ desktop_menu_options[item.ID]['parent_background_colour'] }}' />
                        </div>
                    </div>

                    <div class="responsive-menu-desktop-menu-option-container responsive-menu-desktop-menu-mega-menu-option{% if desktop_menu_options[item.ID]['type'] != 'mega' %} hidden{% endif %}">
                        <div>
                            <label class="control-label">Mega Menu Background Image</label>
                            <div class="sub-text">
                                Sets the background image for the mega menu container section.
                            </div>
                            <div class='input-group'>
                                <input type='text' class='form-control'
                                       name="menu[desktop_menu_options][{{ item.ID }}][parent_background_image]"
                                       value="{{ desktop_menu_options[item.ID]['parent_background_image'] }}"
                                       id='responsive-menu-desktop-menu-mega-menu-background-image-{{ item.ID }}' />
                                <span class='input-group-btn'>
                                    <button type='button' class='image_button btn btn-primary btn-rm'
                                            for='responsive-menu-desktop-menu-mega-menu-background-image-{{ item.ID }}'>Upload Image</button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="responsive-menu-desktop-menu-option-container responsive-menu-desktop-menu-mega-menu-option{% if desktop_menu_options[item.ID]['type'] != 'mega' %} hidden{% endif %}">
                        <div>
                            <label class="control-label">Mega Menu items Colours</label>
                            <div class="sub-text">
                                Set the Mega menu items background and text colors.
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <span>Background</span>
                                        <input type='text' class='form-control mini-colours' name='menu[desktop_menu_options][{{ item.ID }}][mega_menu_items_background_colour]' value='{{ desktop_menu_options[item.ID]['mega_menu_items_background_colour'] }}' />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <span>Background Hover</span>
                                        <input type='text' class='form-control mini-colours' name='menu[desktop_menu_options][{{ item.ID }}][mega_menu_items_background_hover_colour]' value='{{ desktop_menu_options[item.ID]['mega_menu_items_background_hover_colour'] }}' />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <span>Text Color</span>
                                        <input type='text' class='form-control mini-colours' name='menu[desktop_menu_options][{{ item.ID }}][mega_menu_items_text_colour]' value='{{ desktop_menu_options[item.ID]['mega_menu_items_text_colour'] }}' />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <span>Text Hover</span>
                                        <input type='text' class='form-control mini-colours' name='menu[desktop_menu_options][{{ item.ID }}][mega_menu_items_text_hover_colour]' value='{{ desktop_menu_options[item.ID]['mega_menu_items_text_hover_colour'] }}' />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                {% endif %}

                {% if item.menu_item_parent != '0' %}

                    <div class="responsive-menu-desktop-menu-option-container responsive-menu-desktop-menu-mega-menu-option{% if desktop_menu_options[item.menu_item_parent]['type'] != 'mega' %} hidden{% endif %}">
                        <label class="control-label">Padding</label>
                        <div class="sub-text">
                            Add padding for this mega menu widgets section. You can add padding in any unit. Example : 10px, 2% or etc. 
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="input-group">
                                    <span>Top</span>
                                    <input type="text"
                                        class="form-control" 
                                        placeholder="0px"
                                        name="menu[desktop_menu_options][{{ item.ID }}][top_padding]"
                                        value="{{ desktop_menu_options[item.ID]['top_padding'] }}"/>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <span>Right</span>
                                    <input type="text"
                                        class="form-control" 
                                        placeholder="0px"
                                        name="menu[desktop_menu_options][{{ item.ID }}][right_padding]"
                                        value="{{ desktop_menu_options[item.ID]['right_padding'] }}"/>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <span>Bottom</span>
                                    <input type="text"
                                        class="form-control" 
                                        placeholder="0px"
                                        name="menu[desktop_menu_options][{{ item.ID }}][bottom_padding]"
                                        value="{{ desktop_menu_options[item.ID]['bottom_padding'] }}"/>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <span>Left</span>
                                    <input type="text"
                                        class="form-control" 
                                        placeholder="0px"
                                        name="menu[desktop_menu_options][{{ item.ID }}][left_padding]"
                                        value="{{ desktop_menu_options[item.ID]['left_padding'] }}"/>
                                </div>
                            </div> 
                        </div>
                    </div>

                    <div class="responsive-menu-desktop-menu-option-container">
                        <label class="control-label">Widgets</label>
                        <div class="sub-text">
                            Drag the widgets and re-arrange them below.
                        </div>
                        <div class="row responsive-menu-desktop-menu-widgets-container">
                            <div class="col-md-9">
                                <div class="responsive-menu-desktop-menu-option-container-grid" id="responsive-menu-desktop-menu-option-container-grid-{{ item.ID }}">{% if desktop_menu_options[item.ID]['widgets'] %}
                                        {% set count = 0 %}
                                        {% for widget in desktop_menu_options[item.ID]['widgets'] %}
                                            {% for type, value in widget %}
                                                {% set count = count + 1 %}
                                                {% if type == 'image' %}
                                                    <div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-image-widget responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                                        <div class="responsive-menu-desktop-menu-widget-header">
                                                            Image <span class="glyphicon glyphicon-remove"></span>
                                                        </div>
                                                        <div class="responsive-menu-desktop-menu-widget-body">

                                                            <div class='input-group'>
                                                                <input type='text' class='form-control'
                                                                       name="menu[desktop_menu_options][{{ item.ID }}][widgets][][image][url]"
                                                                       value="{{ value['url'] }}"
                                                                       id='responsive-menu-desktop-menu-{{ item.ID }}-{{ count }}' />
                                                                <span class='input-group-btn'>
                                                            <button type='button' class='image_button btn btn-primary btn-rm'
                                                                    for='responsive-menu-desktop-menu-{{ item.ID }}-{{ count }}'>Upload Image</button>
                                                        </span>
                                                            </div>

                                                        </div>
                                                    </div>
                                                {% elseif type == 'text' %}
                                                    <div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                                        <div class="responsive-menu-desktop-menu-widget-header">
                                                            Text <span class="glyphicon glyphicon-remove"></span>
                                                        </div>
                                                        <div class="responsive-menu-desktop-menu-widget-body">
                                                            <textarea type="text" name="menu[desktop_menu_options][{{ item.ID }}][widgets][][text][text]">{{ value['text'] }}</textarea>
                                                        </div>
                                                    </div>
                                                {% elseif type == 'title' %}
                                                    {% set has_title = true %}
                                                    <div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                                        <div class="responsive-menu-desktop-menu-widget-header">
                                                            Title {{ item.title }}
                                                            <input type='hidden' class='form-control'
                                                                   name="menu[desktop_menu_options][{{ item.ID }}][widgets][][title][enabled]"
                                                                   value="true" />
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            {% endfor %}

                                        {% endfor %}

                                    {% endif %}
                                    {% if not has_title %}
                                        <div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                            Title {{ item.title }}
                                            <div class="responsive-menu-desktop-menu-widget-header">
                                                <input type='hidden' class='form-control'
                                                       name="menu[desktop_menu_options][{{ item.ID }}][widgets][][title][enabled]"
                                                       value="true" />
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="responsive-menu-desktop-menu-widget-container" id="responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                    <div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-image-widget responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                        <div class="responsive-menu-desktop-menu-widget-header">
                                            Image <span class="glyphicon glyphicon-remove"></span>
                                        </div>
                                        <div class="responsive-menu-desktop-menu-widget-body">

                                            <div class='input-group'>
                                                <input type='text' class='form-control'
                                                       data-name="menu[desktop_menu_options][{{ item.ID }}][widgets][][image][url]"
                                                       data-id='responsive-menu-desktop-menu-{{ item.ID }}' />
                                                <span class='input-group-btn'>
                                                <button type='button' class='image_button btn btn-primary btn-rm' for='responsive-menu-desktop-menu-{{ item.ID }}'>Upload Image</button>
                                            </span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="responsive-menu-desktop-menu-widget responsive-menu-desktop-menu-widget-{{ item.ID }}">
                                        <div class="responsive-menu-desktop-menu-widget-header">
                                            Text <span class="glyphicon glyphicon-remove"></span>
                                        </div>
                                        <div class="responsive-menu-desktop-menu-widget-body">
                                            <textarea type="text" data-name="menu[desktop_menu_options][{{ item.ID }}][widgets][][text][text]"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        jQuery(function($) {
                            $(".col-md-3 .responsive-menu-desktop-menu-widget-{{ item.ID }}").draggable({
                                connectToSortable: "#responsive-menu-desktop-menu-option-container-grid-{{ item.ID }}",
                                helper: "clone",
                                revert: "invalid",
                                start: function(event, ui) {
                                    var input = ui.helper.find('input, textarea');
                                    var image_button = ui.helper.find('button.image_button');
                                    var current_total_ids = $('input[id^="' + input.data('id') + '"]').length;
                                    var next_id = current_total_ids + 1;

                                    input.attr('name', input.data('name'));

                                    if(input.data('id')) {
                                        input.attr('id', input.data('id') + '-' + next_id);
                                    }

                                    if(image_button) {
                                        image_button.attr('for', input.data('id') + '-' + next_id);
                                    }

                                    input.data('name', '');
                                    input.data('id', '');
                                }
                            });

                            $('#responsive-menu-desktop-menu-option-container-grid-{{ item.ID }}').sortable({
                                revert: true
                            });
                        });
                    </script>
                {% endif %}
            </div>
        {% endfor %}
    </div>
    <div class="clearfix"></div>
</div>