{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default tt-panel">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal tt-module">
          <div class="form-group">
            <label class="control-label" for="input-name">{{ entry_name }}</label>
            <div class="control-option width-4">
              <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
              {% if error_name %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
            </div>
          </div>

          <div class="form-group">
            <label class="control-label" for="input-status">{{ entry_status }}</label>
            <div class="control-option">
            <div class="switch tt-switch">
              <input type="radio" name="status" class="switch-input" id="status-on" value="1" {% if status == 1 %} checked="checked" {% endif %}/>
              <label for="status-on" class="switch-label switch-label-on">{{ text_enabled }}</label>
              <input type="radio" name="status" class="switch-input" id="status-off" value="0" {% if status == 0 %} checked="checked" {% endif %}/>
              <label for="status-off" class="switch-label switch-label-off">{{ text_disabled }}</label>
              <span class="switch-selection"></span>
                  </div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="control-label" for="input-row">{{ entry_title }}</label>
            <div class="control-option width-4">
              {% for language in languages %}
                <div class="input-group">
                  <span class="input-group-addon">{{ language.name }}</span>
                  <input type="text" name="title_lang[{{ language.code }}][title]" value="{{ title_lang[language.code].title ? title_lang[language.code].title }}" placeholder="" id="input-title{{ language.language_id }}" class="form-control" />
                </div>
              {% endfor %}
            </div>
          </div>
      {# -----Description------ #}
      <div class="form-group">
        <label class="control-label" for="input-description{{ language.language_id }}">{{ entry_description }}</label>
          <div class="control-control">
            <div class="tabdes-content" style="margin: 10px;">
              {% for language in languages %}
              <div id="language{{ language.language_id }}">
                  <a href="javascript:void(0)" class="language-label"><span>{{ language.name }}</span><i class="fa fa-angle-down"></i></a>
                  <div class="html-content">
                     <textarea name="module_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" id="input-description{{ language.language_id }}" class="form-control summernote">{{ module_description[language.language_id] ? module_description[language.language_id].description }}</textarea>
                  </div>
              </div>
              {% endfor %}
          </div>
        </div>
      </div>
      {# ----End Description----- #}
      <div class="form-group" style="border-top: 2px solid #279CBB;">
        <label class="control-label" for="input-type">{{ entry_product_type }}</label>
        <div class="control-option width-1">
          <div class="switch switch-long switch-multi3">
            <input type="radio" name="type" class="switch-input" id="type-grid" value="0" {% if type == 0 %} checked="checked"{% endif %}/>
            <label for="type-grid" class="switch-label switch-label-1">{{ entry_grid }}</label>
            <input type="radio" name="type" class="switch-input" id="type-list" value="1" {% if type == 1 %} checked="checked"{% endif %}/>
            <label for="type-list" class="switch-label switch-label-2">{{ entry_list }}</label>
            <input type="radio" name="type" class="switch-input" id="type-other" value="2" {% if type == 2 %} checked="checked"{% endif %}/>
            <label for="type-other" class="switch-label switch-label-3">{{ entry_other }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="form-group parent-form"  style="border-top: 2px solid #279CBB;">
        <label class="control-label" for="input-navigation">{{ entry_slider }}</label>
        <div class="control-option">    
          <div class="switch switch-bol">
            <input type="radio" name="slider" class="switch-input" id="slider-on" value="1" onClick="GetOptionsSelect();" {% if slider == 1 %} checked="checked"{% endif %}/>
            <label for="slider-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="slider" class="switch-input" id="slider-off" value="0" onClick="GetOptionsSelect();" {% if slider == 0 %} checked="checked"{% endif %}/>
            <label for="slider-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="slider-on-selected select-options">
        <div class="form-group">
          <label class="control-label" for="input-items">{{ entry_item }}</label>
          <div class="control-option width-1">
            <input type="text" name="items" value="{{ items }}" placeholder="" id="input-items" class="tt-number-field" />
          </div>
        </div>  
        <div class="form-group">
          <label class="control-label" for="input-row">{{ entry_rows }}</label>
          <div class="control-option width-1">
            <input type="text" name="row" value="{{ row }}" placeholder="" id="input-row" class="tt-number-field" />
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-loop">{{ entry_loop }}</label>
          <div class="control-option">
            <div class="switch switch-bol">
              <input type="radio" name="loop" class="switch-input" id="loop-on" value="1" {% if loop == 1 %} checked="checked"{% endif %}/>
              <label for="loop-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
              <input type="radio" name="loop" class="switch-input" id="loop-off" value="0" {% if loop == 0 %} checked="checked"{% endif %}/>
              <label for="loop-off" class="switch-label switch-label-off">{{ entry_no }}</label>
              <span class="switch-selection"></span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-time">{{ entry_margin }}</label>
          <div class="control-option width-2">
            <input type="text" name="margin" value="{{ margin }}" placeholder="" id="input-margin" class="tt-number-field" />
            <span class="suffix">pixels</span>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-auto">{{ entry_auto }}</label>
          <div class="control-option">
            <div class="switch switch-bol">
              <input type="radio" name="auto" class="switch-input" id="auto-on" value="1" {% if auto == 1 %} checked="checked"{% endif %}/>
              <label for="auto-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
              <input type="radio" name="auto" class="switch-input" id="auto-off" value="0" {% if auto == 0 %} checked="checked"{% endif %}/>
              <label for="auto-off" class="switch-label switch-label-off">{{ entry_no }}</label>
              <span class="switch-selection"></span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-time">{{ entry_time }}</label>
          <div class="control-option width-2">
            <input type="text" name="time" value="{{ time }}" placeholder="" id="input-time" class="tt-number-field" />
            <span class="suffix">miliseconds</span>
          </div>
        </div>  
        <div class="form-group">
          <label class="control-label" for="input-time">{{ entry_speed }}</label>
          <div class="control-option width-2">
            <input type="text" name="speed" value="{{ speed }}" placeholder="" id="input-speed" class="tt-number-field" />
            <span class="suffix">miliseconds</span>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-navigation">{{ entry_navigation }}</label>
          <div class="control-option">           
            <div class="switch switch-bol">
            <input type="radio" name="navigation" class="switch-input" id="navigation-on" value="1" {% if navigation == 1 %} checked="checked"{% endif %}/>
            <label for="navigation-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="navigation" class="switch-input" id="navigation-off" value="0" {% if navigation == 0 %} checked="checked"{% endif %}/>
            <label for="navigation-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-pagination">{{ entry_pagination }}</label>
          <div class="control-option">       
            <div class="switch switch-bol">
            <input type="radio" name="pagination" class="switch-input" id="pagination-on" value="1" {% if pagination == 1 %} checked="checked"{% endif %}/>
            <label for="pagination-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="pagination" class="switch-input" id="pagination-off" value="0" {% if pagination == 0 %}  checked="checked"{% endif %}/>
            <label for="pagination-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="input-width">{{ entry_responsive }}</label>
          <div class="control-option width-6">
           <i class="fa fa-desktop"></i> {{ entry_desktop }}
           <input type="text" name="desktop" value="{{ desktop }}" placeholder="" id="responsive-desktop" class="tt-number-field" />
            {% if error_width %}
            <div class="text-danger">{{ error_responsive }}</div>
            {% endif %}
            <i class="fa fa-laptop"></i> {{ entry_sdesktop }}
            <input type="text" name="tablet" value="{{ tablet }}" placeholder="" id="responsive-tablet" class="tt-number-field" />
            {% if error_width %}
            <div class="text-danger">{{ error_responsive }}</div>
            {% endif %}
            <i class="fa fa-tablet"></i> {{ entry_tablet }}
            <input type="text" name="mobile" value="{{ mobile }}" placeholder="" id="responsive-mobile" class="tt-number-field" />
            {% if error_width %}
            <div class="text-danger">{{ error_responsive }}</div>
            {% endif %}
             <i class="fa fa-mobile"></i> {{ entry_mobile }}
            <input type="text" name="smobile" value="{{ smobile }}" placeholder="" id="responsive-smobile" class="tt-number-field" />
          </div>
        </div>
      </div>
      <div class="slider-off-selected select-options">
        <div class="form-group">{# if "Using slider" is false #}
          <label class="control-label" for="input-row">{{ entry_pprow }}</label>
          <div class="control-option width-1">
            <select name="nrow" id="input-nrow" class="form-control">
              {% if nrow == 0 %}
                <option value="0" selected="select-options">2</option>
                <option value="1">3</option>
                <option value="2">4</option>
                <option value="3">6</option>
              {% elseif nrow == 1 %}
                <option value="0">2</option>
                <option value="1" selected="select-options">3</option>
                <option value="2">4</option>
                <option value="3">6</option>
              {% elseif nrow == 2 %}
                <option value="0">2</option>
                <option value="1">3</option>
                <option value="2" selected="select-options">4</option>
                <option value="3">6</option>
              {% else %}
                <option value="0">2</option>
                <option value="1">3</option>
                <option value="2">4</option>
                <option value="3" selected="select-options">6</option>
              {% endif %}
            </select>
          </div>
        </div>
      </div>
      {# ------------------ #}
      <div class="form-group"  style="border-top: 2px solid #279CBB;">
        <label class="control-label" for="input-navigation">{{ entry_show_description }}</label>
        <div class="control-option">
          <div class="switch switch-bol">
            <input type="radio" name="description" class="switch-input" id="description-on" value="1" {% if description == 1 %} checked="checked"{% endif %}/>
            <label for="description-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="description" class="switch-input" id="description-off" value="0" <{% if description == 0 %} checked="checked"{% endif %}/>
            <label for="description-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="input-navigation">{{ entry_countdown }}<small>{{ entry_countdown_small }}</small></label>
        <div class="control-option">
          <div class="switch switch-bol">
            <input type="radio" name="countdown" class="switch-input" id="countdown-on" value="1" {% if countdown == 1 %} checked="checked"{% endif %}/>
            <label for="countdown-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="countdown" class="switch-input" id="countdown-off" value="0" {% if countdown == 0 %} checked="checked"{% endif %}/>
            <label for="countdown-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="input-navigation">{{ entry_rotator }}</label>   
        <div class="control-option">
          <div class="switch switch-bol">
            <input type="radio" name="rotator" class="switch-input" id="rotator-on" value="1" {% if rotator == 1 %} checked="checked"{% endif %}/>
            <label for="rotator-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="rotator" class="switch-input" id="rotator-off" value="0" {% if rotator == 0 %} checked="checked"{% endif %}/>
            <label for="rotator-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="input-navigation">{{ entry_newlabel }}</label>    
        <div class="control-option">
          <div class="switch switch-bol">
            <input type="radio" name="newlabel" class="switch-input" id="newlabel-on" value="1" {% if newlabel == 1 %} checked="checked"{% endif %}/>
            <label for="newlabel-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="newlabel" class="switch-input" id="newlabel-off" value="0" {% if newlabel == 0 %} checked="checked"{% endif %}/>
            <label for="newlabel-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="input-navigation">{{ entry_salelabel }}</label>   
        <div class="control-option">
          <div class="switch switch-bol">
            <input type="radio" name="salelabel" class="switch-input" id="salelabel-on" value="1" {% if salelabel == 1 %} checked="checked"{% endif %}/>
            <label for="salelabel-on" class="switch-label switch-label-on">{{ entry_yes }}</label>
            <input type="radio" name="salelabel" class="switch-input" id="salelabel-off" value="0" {% if salelabel == 0 %} checked="checked"{% endif %}/>
            <label for="salelabel-off" class="switch-label switch-label-off">{{ entry_no }}</label>
            <span class="switch-selection"></span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="input-limit">{{ entry_limit }}</label>
        <div class="control-option width-1">
          <input type="text" name="limit" value="{{ limit }}" placeholder="{{ entry_limit }}" id="input-limit" class="tt-number-field" />
        </div>
      </div>
      <div class="form-group">
        <label class="control-label" for="input-width">{{ entry_size }}<small>{{ entry_dessize }}</small></label>
        <div class="control-option width-2">
          <input type="text" name="width" value="{{ width }}" placeholder="" id="input-width" class="tt-number-field" />
          {% if error_width %}
          <div class="text-danger">{{ error_width }}</div>
          {% endif %}
           x
          <input type="text" name="height" value="{{ height }}" placeholder="" id="input-height" class="tt-number-field" />
          {% if error_height %}
          <div class="text-danger">{{ error_height }}</div>
          {% endif %}
        </div>
      </div>



      <div class="tabs-container">
          {% set tab_id = 0 %}
          {% for octab in octabs %}
          <div class="tab-container">
          <div class="tab-heading">Tab-{{ tab_id }}<span class="delete_tab"><i class="fa fa-times"></i>{{ entry_deletetab }}</span></div>
          <div class="tab-content">
            <div class="form-group">
              <label class="control-label" for="input-row">{{ entry_overwritetitle }}</label>
              <div class="control-option width-4">
                {% for language in languages %}
                  <div class="input-group">
                    <span class="input-group-addon">{{ language.name }}</span>
                    <input type="text" name="octab[{{ tab_id }}][tab_name][{{ language.code }}][title]" value="{{ octab.tab_name[language.code].title ? octab.tab_name[language.code].title }}" placeholder="" id="input-title{{ language.language_id }}-{{ tab_id }}" class="form-control" />
                  </div>
                {% endfor %}
              </div>
            </div>
            <div class="form-group parent-form">
              <label class="control-label" for="input-option">{{ entry_type }}</label>
              <div class="control-option">
              <div class="switch switch-long switch-multi3">
                <input type="radio" name="octab[{{ tab_id }}][option]" class="switch-input switch-input-1" id="option-all-{{ tab_id }}" onClick="GetOptionsSelect();" value="0" {% if octab.option == 0 %}checked="checked"{% endif %}/>
                <label for="option-all-{{ tab_id }}" class="switch-label switch-label-1" >{{ entry_type_all }}</label>
                <input type="radio" name="octab[{{ tab_id }}][option]" class="switch-input switch-input-2" onClick="GetOptionsSelect();" id="option-cate-{{ tab_id }}" value="1" {% if octab.option == 1 %}checked="checked"{% endif %}/>
                <label for="option-cate-{{ tab_id }}" class="switch-label switch-label-2">{{ entry_type_cate }}</label>
                <input type="radio" name="octab[{{ tab_id }}][option]" class="switch-input switch-input-3" onClick="GetOptionsSelect();" id="option-auto-{{ tab_id }}" value="2" {% if octab.option == 2 %}checked="checked"{% endif %}/>
                <label for="option-auto-{{ tab_id }}" class="switch-label switch-label-3">{{ entry_type_auto }}</label>
                <span class="switch-selection"></span>
              </div>
              </div>
            </div>

            <div class="option-all-{{ tab_id }}-selected select-options">
            <div class="form-group">
              <label class="control-label" for="input-productall-{{ tab_id }}">{{ entry_product }}</label>
              <div class="control-option width-4">
                <input type="text" name="octab[{{ tab_id }}][productall]" value="" placeholder="{{ entry_product }}" id="input-productall-{{ tab_id }}" class="form-control" />
                <div id="featured-product-{{ tab_id }}" class="well well-sm" style="height: 150px; overflow: auto;">
                  {% for product in octab.productalls %} 
                  <div id="featured-product{{ product.product_id }}" class="tt-product">
                  <i class="fa fa-times"></i>
                  <img src="{{ product.image }}" alt="" />
                  {{ product.name }}     
                  <input type="hidden" name="octab[{{ tab_id }}][productall][]" value="{{ product.product_id }}  " />
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
          <!--------------------------- Categories tab-------------------------->
          <div class="option-cate-{{ tab_id }}-selected select-options">
            <div class="form-group">
              <label class="control-label" for="input-cate_id-{{ tab_id }}">{{ entry_cate_select }}</label>
              <div class="control-option width-3">
                <input type="text" name="octab[{{ tab_id }}][cate_name]" value="{{ octab.cate_name }}" placeholder="Search category" id="input-cate_name-{{ tab_id }}" class="form-control input-cate_name" /><i class="fa fa-times"></i>
              <input type="hidden" name="octab[{{ tab_id }}][cate_id]" value="{{ octab.cate_id }}" id="input-cate_id-{{ tab_id }}" />
            </div>
            </div>
             <div class="form-group parent-form">
              <label class="control-label" for="input-productfrom-{{ tab_id }}">{{ entry_pfrom }}</label>
              <div class="control-option width-3">            
                <div class="switch switch-long switch-multi3">
                <input type="radio" name="octab[{{ tab_id }}][productfrom]" class="switch-input" id="productfrom-all-{{ tab_id }}" value="1" onClick="GetOptionsSelect();" {% if octab.productfrom == 1 %}checked="checked"{% endif %}/>
                <label for="productfrom-all-{{ tab_id }}" class="switch-label switch-label-1">{{ entry_pfrom_all }}</label>
                <input type="radio" name="octab[{{ tab_id }}][productfrom]" class="switch-input" id="productfrom-select-{{ tab_id }}" value="0" onClick="GetOptionsSelect();" {% if octab.productfrom == 0 %}checked="checked"{% endif %}/>
                <label for="productfrom-select-{{ tab_id }}" class="switch-label switch-label-2">{{ entry_pfrom_select }}</label>
                <input type="radio" name="octab[{{ tab_id }}][productfrom]" class="switch-input" id="productfrom-specific-{{ tab_id }}" value="2" onClick="GetOptionsSelect();" {% if octab.productfrom == 2 %}checked="checked"{% endif %}/>
                <label for="productfrom-specific-{{ tab_id }}" class="switch-label switch-label-3">{{ entry_specificproduct }}</label>
                <span class="switch-selection"></span>
                 
              </div>
              </div>
            </div>
            <div class="productfrom-all-{{ tab_id }}-selected select-options">
              <!-- <small class="text-for-allproducts" style="padding: 10px 0; float: left;"><?php echo $entry_textall; ?></small> -->
            </div>
            <div class="productfrom-select-{{ tab_id }}-selected select-options">
              <div class="form-group">
                <label class="control-label" for="input-productcate-{{ tab_id }}">{{ entry_product }}</label>
                <div class="control-option width-4">
                  <input type="text" name="octab[{{ tab_id }}][productcate]" value="" placeholder="{{ entry_product }}" id="input-productcate-{{ tab_id }}" class="form-control" />
                  <div id="category-product-{{ tab_id }}" class="well well-sm" style="height: 150px; overflow: auto;">
                    {% for productcate in octab.productcates %}   
                    <div id="category-product{{ productcate.product_id }}" class="tt-product">       
                    <img src="{{ productcate.image }}" alt="" /> 
                    {{ productcate.name }}      
                    <input type="hidden" name="octab[{{ tab_id }}][productcate][]" value="{{ productcate.product_id }}" />
                    <i class="fa fa-times"></i>
                    </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
            <div class="productfrom-specific-{{ tab_id }}-selected select-options">
              <div class="form-group">
                <label class="control-label" for="input-specific-product-{{ tab_id }}">{{ entry_selectspecificproduct }}</label>
                <div class="control-option width-3">
                 <small class="text-for-specificproducts" style="padding: 0 0 10px 0; float: left;">{{ entry_selectspecificproduct_small }}</small>
                  <select name="octab[{{ tab_id }}][input_specific_product]" id="input-specific-product-{{ tab_id }}" class="form-control">
                    {% if octab.input_specific_product == 0 %}
                    <option value="0" selected="select-options">{{ entry_new }}</option>
                    <option value="1">{{ entry_sale }}</option>
                    <option value="2">{{ entry_bestseller }}</option>
                    <option value="3">{{ entry_mostview }}</option>
                    <option value="4">{{ entry_dealproducts }}</option>
                    {% elseif octab.input_specific_product == 1 %}
                    <option value="0">{{ entry_new }}</option>
                    <option value="1" selected="select-options">{{ entry_sale }}</option>
                    <option value="2">{{ entry_bestseller }}</option>
                    <option value="3">{{ entry_mostview }}</option>
                    <option value="4">{{ entry_dealproducts }}</option>
                    {% elseif octab.input_specific_product == 2 %}
                    <option value="0">{{ entry_new }}</option>
                    <option value="1">{{ entry_sale }}</option>
                    <option value="2" selected="select-options">{{ entry_bestseller }}</option>
                    <option value="3">{{ entry_mostview }}</option>
                    <option value="4">{{ entry_dealproducts }}</option>
                    {% elseif octab.input_specific_product == 3 %}
                    <option value="0">{{ entry_new }}</option>
                    <option value="1">{{ entry_sale }}</option>
                    <option value="2">{{ entry_bestseller }}</option>
                    <option value="3" selected="select-options">{{ entry_mostview }}</option>
                    <option value="4">{{ entry_dealproducts }}</option>
                    {% else %}
                    <option value="0">{{ entry_new }}</option>
                    <option value="1">{{ entry_sale }}</option>
                    <option value="2">{{ entry_bestseller }}</option>
                    <option value="3">{{ entry_mostview }}</option>
                    <option value="4" selected="select-options">{{ entry_dealproducts }}</option>
                    {% endif %}
                  </select>
                </div>
              </div>
            </div>
          </div>
          <!--------------------------- Auto tab ----------------------- -->
          <div class="option-auto-{{ tab_id }}-selected select-options">
            <div class="form-group auto-select">
              <label class="control-label" for="input-autoproduct-{{ tab_id }}">{{ entry_product }}</label>
              <div class="control-option width-2">
                <select name="octab[{{ tab_id }}][autoproduct]" id="input-autoproduct-{{ tab_id }}" class="form-control">
                  {% if octab.autoproduct == 0 %}
                  <option value="0" selected="select-options">{{ entry_new }}</option>
                  <option value="1">{{ entry_sale }}</option>
                  <option value="2">{{ entry_bestseller }}</option>
                  <option value="3">{{ entry_mostview }}</option>
                  <option value="4">{{ entry_dealproducts }}</option>
                  {% elseif octab.autoproduct == 1 %}
                  <option value="0">{{ entry_new }}</option>
                  <option value="1" selected="select-options">{{ entry_sale }}</option>
                  <option value="2">{{ entry_bestseller }}</option>
                  <option value="3">{{ entry_mostview }}</option>
                  <option value="4">{{ entry_dealproducts }}</option>
                  {% elseif octab.autoproduct == 2 %}
                  <option value="0">{{ entry_new }}</option>
                  <option value="1">{{ entry_sale }}</option>
                  <option value="2" selected="select-options">{{ entry_bestseller }}</option>
                  <option value="3">{{ entry_mostview }}</option>
                  <option value="4">{{ entry_dealproducts }}</option>
                  {% elseif octab.autoproduct == 3 %}
                  <option value="0">{{ entry_new }}</option>
                  <option value="1">{{ entry_sale }}</option>
                  <option value="2">{{ entry_bestseller }}</option>
                  <option value="3" selected="select-options">{{ entry_mostview }}</option>
                  <option value="4">{{ entry_dealproducts }}</option>
                  {% else %}
                  <option value="0">{{ entry_new }}</option>
                  <option value="1">{{ entry_sale }}</option>
                  <option value="2">{{ entry_bestseller }}</option>
                  <option value="3">{{ entry_mostview }}</option>
                  <option value="4" selected="select-options">{{ entry_dealproducts }}</option>
                  {% endif %}
                </select>
              </div>
            </div>
          </div>
        </div>
        </div>
      {% set tab_id = tab_id + 1 %}
      {% endfor %}
      </div>
      <button class="button-addnew" type="button" onClick="addTabs();">{{ entry_addnewtab }}</button>
    </form>
    </div>
  </div>
</div>
<link href="view/javascript/codemirror/lib/codemirror.css" rel="stylesheet" />
  <link href="view/javascript/codemirror/theme/monokai.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script> 
  <script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script> 
  <script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script> 
    
  <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" src="view/javascript/summernote/opencart.js"></script>
  <script type="text/javascript"><!--
  var category_id;
  var tab_id = {{ tab_id }};
function loadAutocomplete(i){
  $("input[name=\'octab["+i+"][productall]\']").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: 'index.php?route=extension/module/ocproduct/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              image: item['image'],
              label: item['name'],
              value: item['product_id'] 
            }
          }));
        }
      });
    },
    select: function(item) {
      $("input[name=\'octab["+i+"][productall]\']").val('');
      
      $('#featured-product-'+ i+ + item['value']).remove();
      $('#featured-product-'+ i).append('<div id="featured-product-'+i + item['value'] + '" class="tt-product"><i class="fa fa-times"></i> ' + '<img src="' +item['image']+ '" alt=""/>' + item['label'] + '<input type="hidden" name="octab['+i+'][productall][]" value="' + item['value'] + '" /></div>');  
      
      $('#featured-product-'+i).scrollTop(1000);
    }
  });
  $('#featured-product-'+i).delegate('.fa-times', 'click', function() {
    $(this).parent().remove();
  });

  // Search category
  $("input[name=\'octab["+i+"][cate_name]\']").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: 'index.php?route=extension/module/ocproduct/autocompleteCategory&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              value: item['category_id']
            }
          }));
        }
      });
    },
    select: function(item) {  
      document.getElementById("input-cate_name-"+i).value= item['label'];  
      document.getElementById("input-cate_id-"+i).value= item['value'];  
      $('#category-product-'+i).children().remove();
      }
  });
  $('#input-cate_name-'+i).parent().delegate('.fa-times', 'click', function() {
    document.getElementById("input-cate_name-"+i).value= '';
    document.getElementById("input-cate_id-"+i).value= '';
    $('#category-product-'+i).children().remove();
  });

  // Search product from category
  $("input[name=\'octab["+i+"][productcate]\']").autocomplete({
    source: function( request, response) {
      $.ajax({
        url: 'index.php?route=extension/module/ocproduct/getProductCategory&user_token={{ user_token }}&category_id=' + $("#input-cate_id-"+i).val()+ '&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        data: {
        },
        success: function(json) {
          response($.map(json, function(item) {
            return {
              image: item['image'],
              label: item['name'],
              value: item['product_id'] 
            }
          }));
          
        }
      });
    },
    select: function(item) {
      $('input[name=\'productcate\']').val('');
      
      $('#category-product-' + i + item['value']).remove();
      
      $('#category-product-' +i).append('<div id="category-product-' + i + item['value'] + '" class="tt-product"><i class="fa fa-times"></i> ' + '<img src="' +item['image']+ '" alt=""/>' + item['label'] + '<input type="hidden" name="octab['+i+'][productcate][]" value="' + item['value'] + '" /></div>');  
      
      $('#category-product'+i).scrollTop(1000);
    }
  });
    
  $('#category-product-'+i).delegate('.fa-times', 'click', function() {
    $(this).parent().remove();
  });
}
function GetOptionsSelect() {
    $('.select-options').hide();
    var ParentForms = document.getElementsByClassName('parent-form');
    for (var j = 0; j < ParentForms.length; j ++){
      var InputChilds = ParentForms[j].getElementsByTagName('input');
      for (var i = 0; i < InputChilds.length; i++) {
            if (InputChilds[i].checked) {
              var id = InputChilds[i].id;
              var test = $('.'+id+'-selected');
              $(test).show();

            } //end if
 
      } // end for
    };
    
} //end

$(document).ready(function(){
  GetOptionsSelect(); 
  afterAdd();
  $('.list-selection label').on('click',function(){
      $(this).parent().find('.active').removeClass('active');
      $(this).addClass('active');
  });
  for(i=0; i <= tab_id; i++){
    loadAutocomplete(i);
  }
  $('.tab-content').hide(); 
})
{% for language in languages %}
  $('#input-description{{ language.language_id }}').summernote({height: 300});
  $('#language{{ language.language_id }} .html-content').hide();
  $('#language{{ language.language_id }} a').click(function(){
    $('#language{{ language.language_id }} .html-content').slideToggle();
  });
  $('#input-title{{ language.language_id }}').parent().parent().parent().css('border-top','2px solid #279CBB');
{% endfor %}


function afterAdd(){
  $('.tab-heading').on('click', function(){    
    $(this).next('.tab-content').slideToggle();
	event.stoppropagation();
  })
  $('.delete_tab').click(function(){
    $(this).parent().parent().remove();
  })
}
function addTabs() {
  html  = '<div class="tab-container"><div class="tab-heading">Tab-'+tab_id+'<span class="delete_tab"><i class="fa fa-times"></i>{{ entry_deletetab }}</span></div><div class="tab-content">';
    html += '<div class="form-group">';
    html += '<label class="control-label" for="input-row">{{entry_overwritetitle}}</label>';
    html += '<div class="control-option width-4">';
    {% for language in languages %}
    html += '<div class="input-group">';
    html += '<span class="input-group-addon">{{ language.name }}</span>';
    html += '<input type="text" name="octab[' + tab_id + '][tab_name][{{ language.code }}][title]" value="" placeholder="" id="input-tabname{{ language.language_id }}-'+ tab_id +'" class="form-control" />';
    html += '</div>';
    {% endfor %}
    html += '</div></div>';
    html += '<div class="form-group parent-form">';
    html += '<label class="control-label" for="input-option">{{ entry_type }}</label>';
    html += '<div class="control-option"><div class="switch switch-long switch-multi3">';
    html += '<input type="radio" name="octab[' + tab_id + '][option]" class="switch-input switch-input-1" id="option-all-' + tab_id + '" onClick="GetOptionsSelect();" value="0" checked="checked"/>';
      html += '<label for="option-all-' + tab_id + '" class="switch-label switch-label-1" >{{ entry_type_all }}</label>';
    html += '<input type="radio" name="octab[' + tab_id + '][option]" class="switch-input switch-input-2" onClick="GetOptionsSelect();" id="option-cate-' + tab_id + '" value="1"/>';
    html += '<label for="option-cate-' + tab_id + '" class="switch-label switch-label-2">{{ entry_type_cate }}</label>';
    html += '<input type="radio" name="octab[' + tab_id + '][option]" class="switch-input switch-input-3" onClick="GetOptionsSelect();" id="option-auto-' + tab_id + '" value="2"/>';
    html += '<label for="option-auto-' + tab_id + '" class="switch-label switch-label-3">{{ entry_type_auto }}</label>';
    html += '<span class="switch-selection"></span>';
    html += '</div></div>';
    html += '</div>';

    /////////////////////////////////

    html += '<div class="option-all-' + tab_id + '-selected select-options">';
        html += '<div class="form-group">';
        html += '<label class="control-label" for="input-product">{{ entry_product }}</label>';
        html += '<div class="control-option width-4">';
        html += '<input type="text" name="octab[' + tab_id + '][productall]" value="" placeholder="{{ entry_product }}" id="input-product-' + tab_id + '" class="form-control" />';
        html += '<div id="featured-product-' + tab_id + '" class="well well-sm" style="height: 150px; overflow: auto;">';
        html += '</div></div></div></div>'; 

        ////////////////////////////////////

        html += '<div class="option-cate-' + tab_id + '-selected select-options">';
        html += '<div class="form-group">';
        html += '<label class="control-label" for="input-cate_id">{{ entry_cate_select }}</label>';
        html += '<div class="control-option width-3">';
        html += '<input type="text" name="octab[' + tab_id + '][cate_name]" value="" placeholder="Search category" id="input-cate_name-' + tab_id + '" class="form-control input-cate_name" /><i class="fa fa-times"></i>';
        html += '<input type="hidden" name="octab[' + tab_id + '][cate_id]" value="" id="input-cate_id-' + tab_id + '" />';
        html += '</div></div>';

        html += '<div class="form-group parent-form">';
        html += '<label class="control-label" for="input-productfrom">{{ entry_pfrom }}</label>';
        html += '<div class="control-option width-3">';             
        html += '<div class="switch switch-long switch-multi3">';
        html += '<input type="radio" name="octab[' + tab_id + '][productfrom]" class="switch-input" id="productfrom-all-' + tab_id + '" value="1" checked="checked"  onClick="GetOptionsSelect();"/>';
        html += '<label for="productfrom-all-' + tab_id + '" class="switch-label switch-label-1">{{ entry_pfrom_all }}</label>';
        html += '<input type="radio" name="octab[' + tab_id + '][productfrom]" class="switch-input" id="productfrom-select-' + tab_id + '" value="0" onClick="GetOptionsSelect();"/>';
        html += '<label for="productfrom-select-' + tab_id + '" class="switch-label switch-label-2">{{ entry_pfrom_select }}</label>';
        html += '<input type="radio" name="octab[' + tab_id + '][productfrom]" class="switch-input" id="productfrom-specific-' + tab_id + '" value="2" onClick="GetOptionsSelect();"/>';
        html += '<label for="productfrom-specific-' + tab_id + '" class="switch-label switch-label-3">{{ entry_specificproduct }}</label>';
        html += '<span class="switch-selection"></span>';                 
        html += '</div></div></div>';

        html += '<div class="productfrom-all-' + tab_id + '-selected select-options"></div>';

        html += '<div class="productfrom-select-' + tab_id + '-selected select-options">';
        html += '<div class="form-group">';
        html += '<label class="control-label" for="input-productcate-' + tab_id + '">{{ entry_product }}</label>';
        html += '<div class="control-option width-4">';
        html += '<input type="text" name="octab[' + tab_id + '][productcate]" value="" placeholder="{{ entry_product }}" id="input-productcate-' + tab_id + '" class="form-control" />';
        html += '<div id="category-product-' + tab_id + '" class="well well-sm" style="height: 150px; overflow: auto;">';
        html += '</div></div></div></div>';


        html += '<div class="productfrom-specific-' + tab_id + '-selected select-options">';
        html += '<div class="form-group">';
        html += '<label class="control-label" for="input-specific-product-' + tab_id + '">{{ entry_selectspecificproduct }}</label>';
        html += '<div class="control-option width-3">';
        html += '<small class="text-for-specificproducts" style="padding: 0 0 10px 0; float: left;">{{ entry_selectspecificproduct_small }}</small>';
        html += '<select name="octab[' + tab_id + '][input_specific_product]" id="input-specific-product-' + tab_id + '" class="form-control">';
        html += '<option value="0">{{ entry_new }}</option>';
        html += '<option value="1">{{ entry_sale }}</option>';
        html += '<option value="2">{{ entry_bestseller }}</option>';
        html += '<option value="3">{{ entry_mostview }}</option>';
        html += '<option value="4">{{ entry_dealproducts }}</option>';
        html += '</select></div></div></div></div>';

        html += '<div class="option-auto-' + tab_id + '-selected select-options">';
        html += '<div class="form-group auto-select">';
        html += '<label class="control-label" for="input-autoproduct-' + tab_id + '">{{ entry_product }}</label>';
        html += '<div class="control-option width-2">';
        html += '<select name="octab[' + tab_id + '][autoproduct]" id="input-select-' + tab_id + '" class="form-control">';
        html += '<option value="0">{{ entry_new }}</option>';
        html += '<option value="1">{{ entry_sale }}</option>';
        html += '<option value="2">{{ entry_bestseller }}</option>';
        html += '<option value="3">{{ entry_mostview }}</option>';
        html += '<option value="4">{{ entry_dealproducts }}</option>';
        html += '</select></div></div></div>';
    html += '</div></div>';
  
  $('.tabs-container').append(html); 
  GetOptionsSelect(); 
  afterAdd();
  loadAutocomplete(tab_id);
  tab_id++;
  $('body').scrollTop(10000);
}
//--></script>
</div>
{{ footer }}