<a class="a-close" onclick="ocmegamenu.closeForm()"><i class="fa fa-close" aria-hidden="true"></i></a>
<input type="hidden" id="input-append-categories-link" value="{{ append_categories_link }}" />
<div class="frm-container">
    <div class="frm-heading">
        <h4 class="frm-title">{{ text_item_form }}</h4>
    </div>
    <div class="frm-body">
        <div class="frm-button">
            <button type="button" class="btn btn-primary btn-submit" onclick="ocmegamenu.submitTopItemForm({{ menu_id }})" title="{{ button_save }}"><i class="fa fa-save"></i> Save</button>
        </div>
        <div class="col-md-2 frm-left">
            <ul class="frm-list">
                <li class="active"><a href="#tab-general" data-toggle="tab">{{ text_general_setting }}</a></li>
                <li><a href="#tab-content" data-toggle="tab">{{ text_content_setting }}</a></li>
            </ul>
        </div>
        <div class="col-md-10 frm-right">
            {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
            {% endif %}
            <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-menu-item" class="form-horizontal">
                <div class="tab-content">
                    <!-- General Settings -->
                    <div id="tab-general" class="tab-pane active">
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-item-name">{{ entry_item_name }}</label>
                            <div class="col-sm-6">
                                <input type="text" id="input-item-name" class="form-control" value="{{ name }}" name="name" />
                                {% if error_name %}
                                    <div class="text-danger">{{ error_name }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-status">{{ entry_status }}</label>
                            <div class="col-sm-4">
                                <select name="status" id="input-status" class="form-control">
                                    {% if status %}
                                        <option value="1" selected="selected">{{ text_enabled }}</option>
                                        <option value="0">{{ text_disabled }}</option>
                                    {% else %}
                                        <option value="1">{{ text_enabled }}</option>
                                        <option value="0" selected="selected">{{ text_disabled }}</option>
                                    {% endif %}
                                </select>
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-title">{{ entry_title }}</label>
                            <div class="col-sm-6">
                                {% for language in languages %}
                                <div class="input-group">
                                    <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /> {{ language.name }}</span>
                                    <input type="text" name="title[{{ language.language_id }}]" value="{{ title[language.language_id] ? title[language.language_id] : '' }}" placeholder="" id="input-title{{ language.language_id }}" class="form-control" />
                                </div>
                                {%  endfor %}
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="col-sm-3">
                                <div class="checkbox">
                                    <input type="checkbox" name="disable_title" value="{{ disable_title }}" {% if disable_title %} checked="checked" {% endif %} /> {{ text_hide_title }}
                                </div>
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-link">{{ entry_link }}</label>
                            <div class="col-sm-6">
                                <input type="text" id="input-link" name="link" value="{{ link }}" class="form-control" />
                                <div class="frm-info">
                                    <i class="fa fa-info-circle" aria-hidden="true"></i> <span>{{ text_link_info }}</span>
                                </div>
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="col-sm-3">
                                <div class="checkbox">
                                    <input type="checkbox" name="disable_link" value="{{ disable_link }}" {% if disable_link %} checked="checked" {% endif %} /> {{ text_disable_link }}
                                </div>
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-sub-menu-type">{{ entry_sub_menu_type }}</label>
                            <div class="col-sm-4">
                                <select name="sub_menu_type" id="input-sub-menu-type" class="form-control">
                                    <option value="mega"    {% if sub_menu_type == 'mega' %}    selected="selected" {% endif %}>{{ text_megamenu }}</option>
                                    <option value="flyout"  {% if sub_menu_type == 'flyout' %}  selected="selected" {% endif %}>{{ text_flyoutmenu }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-position">{{ entry_position }}</label>
                            <div class="col-sm-4">
                                <input type="text" id="input-position" name="position" value="{{ position }}" class="form-control" />
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-item-align">{{ entry_item_align }}</label>
                            <div class="col-sm-4">
                                <select name="item_align" id="input-item-align" class="form-control">
                                    <option value="left"    {% if item_align == 'left' %}    selected="selected" {% endif %}>{{ text_left }}</option>
                                    <option value="right"   {% if item_align == 'right' %}   selected="selected" {% endif %}>{{ text_right }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-icon">{{ entry_icon }}</label>
                            <div class="col-sm-6">
                                <a href="" id="thumb-image" data-toggle="image" class="img-thumbnail"><img src="{{ thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                <input type="hidden" name="icon" value="{{ icon }}" id="input-image" />
                            </div>
                        </div>
                    </div>

                    <!-- Content Settings -->
                    <div id="tab-content" class="tab-pane">
                        <div class="frm-info">
                            <i class="fa fa-info-circle" aria-hidden="true"></i> <span>{{ text_megamenu_info }}</span>
                        </div>
                        <div class="frm-group">
                            <label class="frm-label col-sm-2" for="input-sub-menu-content-type">{{ entry_sub_menu_content_type }}</label>
                            <div class="col-sm-4">
                                <select name="sub_menu_content_type" id="input-sub-menu-content-type" class="form-control">
                                    <option value="widget"   {% if sub_menu_content_type == 'widget' %}    selected="selected" {% endif %}>{{ text_widget }}</option>
                                    <option value="category" {% if sub_menu_content_type == 'category' %}  selected="selected" {% endif %}>{{ text_category }}</option>
                                    <option value="children" {% if sub_menu_content_type == 'children' %}  selected="selected" {% endif %}>{{ text_children }}</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <div class="frm-info">
                                    <i class="fa fa-info-circle" aria-hidden="true"></i> <span>{{ text_sub_menu_info }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="frm-group frm-group-content frm-group-category">
                            <label class="frm-label col-sm-2" for="input-sub-menu-category">{{ text_choose_top_category }}</label>
                            <div class="col-sm-4 frm-group-category">
                                <select name="category_id" id="input-sub-menu-category" class="form-control">
                                    {% for category in categories %}
                                        <option value="{{ category.category_id }}" {% if category_id == category.category_id %} selected="selected" {% endif %}>{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-2 frm-group-category">
                                <button type="button" class="btn btn-primary btn-widget" onclick="ocmegamenu.addCategoryWidget()"><i class="fa fa-plus"></i> {{ text_add_widget }}</button>
                                <img class="frm-loader-img" src="{{ loader_image }}" alt="loader_image" />
                            </div>
                        </div>
                        <div class="frm-group frm-group-content frm-group-widget">
                            <label class="frm-label col-sm-2">{{ entry_megamenu_editor }}</label>
                            <div class="col-sm-4">
                                <select id="widget-type" class="form-control">
                                    <option value="category">{{ text_category }}</option>
                                    <option value="product">{{ text_product }}</option>
                                    <option value="html">{{ text_html }}</option>
                                    <<option value="link">{{ text_link }}</option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <select id="widget-cols" class="form-control">
                                    <option value="2">{{ 1 ~ " " ~ text_column }}</option>
                                    <option value="4">{{ 2 ~ " " ~ text_columns }}</option>
                                    <option value="6">{{ 3 ~ " " ~ text_columns }}</option>
                                    <option value="8">{{ 4 ~ " " ~ text_columns }}</option>
                                    <option value="10">{{ 5 ~ " " ~ text_columns }}</option>
                                    <option value="12">{{ 6 ~ " " ~ text_columns }}</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-primary btn-widget" onclick="ocmegamenu.addWidget()"><i class="fa fa-plus"></i> {{ text_add_widget }}</button>
                                <img class="frm-loader-img" src="{{ loader_image }}" alt="loader_image" />
                            </div>
                        </div>

                        <div class="frm-group frm-group-content frm-group-children">
                            <label class="frm-label col-sm-2" for="input-cols">{{ entry_number_cols }}</label>
                            <div class="col-sm-4">
                                <select id="input-cols" name="sub_menu_content_columns" class="form-control">
                                    <option value="1" {% if sub_menu_content_columns == 1 %} selected="selected" {% endif %}>{{ 1 ~ " " ~ text_column }}</option>
                                    <option value="2" {% if sub_menu_content_columns == 2 %} selected="selected" {% endif %}>{{ 2 ~ " " ~ text_columns }}</option>
                                    <option value="3" {% if sub_menu_content_columns == 3 %} selected="selected" {% endif %}>{{ 3 ~ " " ~ text_columns }}</option>
                                    <option value="4" {% if sub_menu_content_columns == 4 %} selected="selected" {% endif %}>{{ 4 ~ " " ~ text_columns }}</option>
                                    <option value="5" {% if sub_menu_content_columns == 5 %} selected="selected" {% endif %}>{{ 5 ~ " " ~ text_columns }}</option>
                                    <option value="6" {% if sub_menu_content_columns == 6 %} selected="selected" {% endif %}>{{ 6 ~ " " ~ text_columns }}</option>
                                </select>
                            </div>
                        </div>
                        <!-- Widget Type Container -->
                        <div class="widget-container widget-sortable" id="widget-type-widget-container">
                            {% if widget %}
                                {% if widget.widget %}
                                    {% set i = 0 %}
                                    {% for w in widget.widget %}
                                        <div class="widget-block col-sm-{{ w.cols }}">
                                            <div class="widget-content">
                                                <div class="widget-resize-action">
                                                    <a class="a-resize-minus a-left" onclick="ocmegamenu.decreaseColumn($(this))"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                                                    <a class="a-resize-plus a-left" onclick="ocmegamenu.increaseColumn($(this))"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                                                    <a class="a-delete a-right" onclick="ocmegamenu.deleteWidget($(this))"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
                                                    <a class="a-config a-right" onclick="ocmegamenu.showWidgetConfiguration($(this))"><i class="fa fa-cogs" aria-hidden="true"></i></a>
                                                </div>
                                                <div class="widget-name-container">
                                                    {% if w.type == 'category' or w.type == 'product' %}
                                                        <i class="fa fa-star" aria-hidden="true"></i><span class="name">{{ w.name ? w.name : '...' }}</span>
                                                    {% endif %}

                                                    {% if w.type == 'html' or w.type == 'link' %}
                                                        <i class="fa fa-star" aria-hidden="true"></i><span class="name">{{ w.name[lang_id] ? w.name[lang_id] : '...' }}</span>
                                                    {% endif %}
                                                </div>
                                            </div>

                                            {% if w.type == 'category' %}
                                                <div class="widget-configuration">
                                                    <div class="option"><input type="text" class="w-category" placeholder="{{ text_choose_category }}" /></div>
                                                    <div class="option"><input type="checkbox" class="show-image" {% if w.show_image == 1 %} checked="checked" {% endif %} /> {{ text_show_image }}</div>
                                                    <div class="option"><input type="checkbox" class="show-child" {% if w.show_child == 1 %} checked="checked" {% endif %} /> {{ text_show_child }}</div>
                                                </div>
                                                <input type="hidden" class="widget-name" value="{{ w.name }}" name="widget[widget][{{ i }}][name]" />
                                                <input type="hidden" class="widget-category-id" value="{{ w.category_id }}" name="widget[widget][{{ i }}][category_id]" />
                                                <input type="hidden" class="widget-show-image" value="{{ w.show_image }}" name="widget[widget][{{ i }}][show_image]" />
                                                <input type="hidden" class="widget-show-child" value="{{ w.show_child }}" name="widget[widget][{{ i }}][show_child]" />
                                            {% endif %}

                                            {% if w.type == 'product' %}
                                                <div class="widget-configuration">
                                                    <div class="option"><input type="text" class="w-product" placeholder="{{ text_choose_product }}" /></div>
                                                    <div class="option"><input type="checkbox" class="show-image" {% if w.show_image == 1 %} checked="checked" {% endif %} /> {{ text_show_image }}</div>
                                                </div>
                                                <input type="hidden" class="widget-name" value="{{ w.name }}" name="widget[widget][{{ i }}][name]" />
                                                <input type="hidden" class="widget-product-id" value="{{ w.product_id }}" name="widget[widget][{{ i }}][product_id]" />
                                                <input type="hidden" class="widget-show-image" value="{{ w.show_image }}" name="widget[widget][{{ i }}][show_image]" />
                                            {% endif %}

                                            {% if w.type == 'html' %}
                                                <div class="widget-configuration">
                                                    <ul class="nav nav-tabs ul-widget-lang" id="ul-widget-html-{{ i }}">
                                                        {% for language in languages %}
                                                            <li><a href="#widget-html-language{{ language.language_id }}-{{ i }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /> {{ language.name }}</a></li>
                                                        {% endfor %}
                                                    </ul>
                                                    <div class="tab-content" id="tab-widget-html-{{ i }}">
                                                        {% for language in languages %}
                                                            <div class="tab-pane" id="widget-html-language{{ language.language_id }}-{{ i }}">
                                                                <div class="option"><input type="text" name="widget[widget][{{ i }}][name][{{ language.language_id }}]" value="{{ w.name[language.language_id] }}" placeholder="{{ text_title }}" /></div>
                                                                <div class="option">
                                                                    <textarea data-toggle="summernote" rows="10" class="w-html-content" name="widget[widget][{{ i }}][content][{{ language.language_id }}]" placeholder="{{ text_html }}">{{ w.content[language.language_id] }}</textarea>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="option"><input type="checkbox" class="show-title" {% if w.show_title == 0 %} checked="checked" {% endif %} /> {{ text_hide_title }}</div>
                                                </div>
                                                <input type="hidden" class="widget-show-title" value="{{ w.show_title ? w.show_title : 0}}" name="widget[widget][{{ i }}][show_title]" />
                                            {% endif %}

                                            {% if w.type == 'link' %}
                                                <div class="widget-configuration">
                                                    <ul class="nav nav-tabs ul-widget-lang" id="ul-widget-link-{{ i }}">
                                                        {% for language in languages %}
                                                            <li><a href="#widget-link-language{{ language.language_id }}-{{ i }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /> {{ language.name }}</a></li>
                                                        {% endfor %}
                                                    </ul>
                                                    <div class="tab-content" id="tab-widget-link-{{ i }}">
                                                        {% for language in languages %}
                                                            <div class="tab-pane" id="widget-link-language{{ language.language_id }}-{{ i }}">
                                                                <div class="option"><input type="text" name="widget[widget][{{ i }}][name][{{ language.language_id }}]" value="{{ w.name[language.language_id] }}" placeholder="{{ text_title }}" /></div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="option"><input type="text" name="widget[widget][{{ i }}][link]" value="{{ w.link }}" placeholder="{{ text_link }}" /></div>
                                                </div>
                                            {% endif %}

                                            <input type="hidden" class="widget-type" value="{{ w.type }}" name="widget[widget][{{ i }}][type]" />
                                            <input type="hidden" class="widget-cols" value="{{ w.cols }}" name="widget[widget][{{ i }}][cols]" />
                                            <input type="hidden" class="widget-position" value="{{ w.position }}" name="widget[widget][{{ i }}][position]" />
                                        </div>
                                        {% set i = i + 1 %}
                                    {% endfor %}
                                {% else %}
                                    <p class="p-widget-items">{{ text_no_children_items }}</p>
                                {% endif %}
                            {% else %}
                                <p class="p-widget-items">{{ text_no_children_items }}</p>
                            {% endif %}
                        </div>

                        <!-- Category Type Container -->
                        <div class="widget-container widget-sortable" id="widget-type-category-container">
                            {% if widget %}
                                {% if widget.category %}
                                    {% set i = 0 %}
                                    {% for w in widget.category %}
                                        <div class="widget-block col-sm-{{ w.cols }}">
                                            <div class="widget-content">
                                                <div class="widget-resize-action">
                                                    <a class="a-resize-minus a-left" onclick="ocmegamenu.decreaseColumn($(this))"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                                                    <a class="a-resize-plus a-left" onclick="ocmegamenu.increaseColumn($(this))"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                                                    <a class="a-delete a-right" onclick="ocmegamenu.deleteWidget($(this))"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
                                                    <a class="a-config a-right" onclick="ocmegamenu.showWidgetConfiguration($(this))"><i class="fa fa-cogs" aria-hidden="true"></i></a>
                                                </div>
                                                <div class="widget-name-container">
                                                    <i class="fa fa-star" aria-hidden="true"></i><span class="name">{{ w.name ? w.name : '...' }}</span>
                                                </div>
                                            </div>

                                            <div class="widget-configuration">
                                                <div class="option"><input type="text" class="w-category" placeholder="{{ text_choose_category }}" /></div>
                                                <div class="option"><input type="checkbox" class="show-image" {% if w.show_image == 1 %} checked="checked" {% endif %} /> {{ text_show_image }}</div>
                                                <div class="option"><input type="checkbox" class="show-child" {% if w.show_child == 1 %} checked="checked" {% endif %} /> {{ text_show_child }}</div>
                                            </div>

                                            <input type="hidden" class="widget-name" value="{{ w.name }}" name="widget[category][{{ i }}][name]" />
                                            <input type="hidden" class="widget-type" value="{{ w.type }}" name="widget[category][{{ i }}][type]" />
                                            <input type="hidden" class="widget-cols" value="{{ w.cols }}" name="widget[category][{{ i }}][cols]" />
                                            <input type="hidden" class="widget-position" value="{{ w.position }}" name="widget[category][{{ i }}][position]" />
                                            <input type="hidden" class="widget-category-id" value="{{ w.category_id }}" name="widget[category][{{ i }}][category_id]" />
                                            <input type="hidden" class="widget-show-image" value="{{ w.show_image }}" name="widget[category][{{ i }}][show_image]" />
                                            <input type="hidden" class="widget-show-child" value="{{ w.show_child }}" name="widget[category][{{ i }}][show_child]" />
                                        </div>
                                        {% set i = i + 1 %}
                                    {% endfor %}
                                {% else %}
                                    <p class="p-widget-items">{{ text_no_children_items }}</p>
                                {% endif %}
                            {% else %}
                                <p class="p-widget-items">{{ text_no_children_items }}</p>
                            {% endif %}
                        </div>

                        <input type="hidden" name="category_id" id="input-category-id" value="{{ category_id }}" />
                        <input type="hidden" name="has_child" id="input-has-child" value="{{ has_child }}" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
<link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
<script type="text/javascript" src="view/javascript/summernote/summernote-image-attributes.js"></script>
<script type="text/javascript">
    ocmegamenu.initSortMenuItem();
    ocmegamenu.chooseCategory();
    ocmegamenu.chooseProduct();
    ocmegamenu.checkBoxClick();
    ocmegamenu.initSummerNote();
</script>

<script type="text/javascript">
    var sub_menu_content_type_selection = $('#input-sub-menu-content-type');
    var sub_menu_content_type = sub_menu_content_type_selection.val();

    $('.widget-container').hide();
    $('#widget-type-'+ sub_menu_content_type +'-container').show();

    $('.frm-group-content').hide();
    $('.frm-group-' + sub_menu_content_type).show();

    sub_menu_content_type_selection.change(function () {
        var sub_menu_content_type = $(this).val();

        $('.frm-group-content').hide();
        $('.frm-group-' + sub_menu_content_type).show();

        $('.widget-container').hide();
        $('#widget-type-'+ sub_menu_content_type +'-container').show();
    });

    $('.ul-widget-lang').each(function () {
        $(this).find('a:first').tab('show');
    });
</script>