{{ header }}{{ column_left }} 
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-apc" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <button id="apply" data-toggle="tooltip" title="{{ button_apply }}" class="btn btn-success"><i class="fa fa-save"></i> {{ button_apply }}</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 (success) %} 
    <div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ success }} 
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %} 
    {% 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">
      <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-apc" class="form-horizontal">
          <div class="row">
            <div class="col-sm-3">
              <ul id="method-list" class="nav nav-pills nav-stacked">
                <li class="active"><a href="#tab-general" data-toggle="tab"><i class="fa fa-cogs" aria-hidden="true"></i> {{ text_general_settings }}</a></li>
                <li><a href="#tab-additional" data-toggle="tab"><i class="fa fa-list-alt" aria-hidden="true"></i> {{ text_additional_settings }}</a></li>
                <li><a href="#tab-language" data-toggle="tab"><i class="fa fa-language" aria-hidden="true"></i> {{ text_language_settings }}</a></li>
                <li><a href="#tab-styles" data-toggle="tab"><i class="fa fa-magic" aria-hidden="true"></i> {{ text_style_settings }}</a></li>
                <li><a href="#tab-support" data-toggle="tab"><i class="fa fa-support" aria-hidden="true"></i> {{ tab_support }}</a></li>
              </ul>
            </div>
            <div class="col-sm-9">
              <div class="tab-content">
                <!-- General setting -->
                <div class="tab-pane active" id="tab-general">
                  <fieldset>
                    <legend class="md-legend">{{ text_general_settings }}</legend>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_status }}</label>
                      <div class="col-sm-9">
                        <input type="checkbox" name="status" value="1" {{ status ? 'checked' : '' }} data-offstyle="danger" class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_sub_heading }}</label>
                      <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons">
                          {% if (sub_heading == 'total') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[sub_heading]" value="total" checked="checked" />{{ text_cart_total }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[sub_heading]" value="total" />{{ text_cart_total }}</label>
                          {% endif %} 
                          {% if (sub_heading == 'weight') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[sub_heading]" value="weight" checked="checked" />{{ text_weight }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[sub_heading]" value="weight" />{{ text_weight }}</label>
                          {% endif %} 
                          {% if (sub_heading is empty) %} 
                          <label class="btn btn-default md-btn active"><input type="radio" name="config[sub_heading]" value="0" checked="checked" />{{ text_disabled }}</label>
                          {% else %} 
                          <label class="btn btn-default md-btn"><input type="radio" name="config[sub_heading]" value="0" />{{ text_disabled }}</label>
                          {% endif %} 
                        </div>
                      </div>
                    </div>
                  </fieldset>
                  <fieldset>
                    <legend class="md-legend">{{ legend_cart_table }}</legend>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_column_image }}</label>
                      <div class="col-sm-9">
                        <input type="checkbox" name="config[column_image]" value="1" {{ column_image ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_column_additional }}</label>
                      <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons">
                          {% if (column_additional == 'model') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="model" checked="checked" /> {{ text_model }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="model" /> {{ text_model }}</label>
                          {% endif %} 
                          {% if (column_additional == 'brand') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="brand" checked="checked" /> {{ text_brand }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="brand" /> {{ text_brand }}</label>
                          {% endif %} 
                          {% if (column_additional == 'sku') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="sku" checked="checked" /> {{ text_sku }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="sku" /> {{ text_sku }}</label>
                          {% endif %} 
                          {% if (column_additional == 'upc') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="upc" checked="checked" /> {{ text_upc }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="upc" /> {{ text_upc }}</label>
                          {% endif %} 
                          {% if (column_additional == 'ean') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="ean" checked="checked" /> {{ text_ean }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="ean" /> {{ text_ean }}</label>
                          {% endif %} 
                          {% if (column_additional == 'jan') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="jan" checked="checked" /> {{ text_jan }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="jan" /> {{ text_jan }}</label>
                          {% endif %} 
                          {% if (column_additional == 'isbn') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="isbn" checked="checked" /> {{ text_isbn }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="isbn" /> {{ text_isbn }}</label>
                          {% endif %} 
                          {% if (column_additional == 'mpn') %} 
                          <label class="btn btn-success md-btn active"><input type="radio" name="config[column_additional]" value="mpn" checked="checked" /> {{ text_mpn }}</label>
                          {% else %} 
                          <label class="btn btn-success md-btn"><input type="radio" name="config[column_additional]" value="mpn" /> {{ text_mpn }}</label>
                          {% endif %} 
                          {% if (column_additional is empty) %} 
                          <label class="btn btn-default md-btn active"><input type="radio" name="config[column_additional]" value="0" checked="checked" /> {{ text_disabled }}</label>
                          {% else %} 
                          <label class="btn btn-default md-btn"><input type="radio" name="config[column_additional]" value="0" /> {{ text_disabled }}</label>
                          {% endif %} 
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_column_price }}</label>
                      <div class="col-sm-9">
                        <input type="checkbox" name="config[column_price]" value="1" {{ column_price ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_column_quantity }}</label>
                      <div class="col-sm-9">
                        <div class="btn-group" data-toggle="buttons">
                          <div class="btn-group" data-toggle="buttons">
                            {% if (column_quantity == '1') %} 
                            <label class="btn btn-success md-btn active"><input type="radio" name="config[column_quantity]" value="1" checked="checked" /> {{ text_plus_minus_btns }}</label>
                            {% else %} 
                            <label class="btn btn-success md-btn"><input type="radio" name="config[column_quantity]" value="1" /> {{ text_plus_minus_btns }}</label>
                            {% endif %} 
                            {% if (column_quantity == '2') %} 
                            <label class="btn btn-success md-btn active"><input type="radio" name="config[column_quantity]" value="2" checked="checked" /> {{ text_update_btn }}</label>
                            {% else %} 
                            <label class="btn btn-success md-btn"><input type="radio" name="config[column_quantity]" value="2" /> {{ text_update_btn }}</label>
                            {% endif %} 
                            {% if (column_quantity == '3') %} 
                            <label class="btn btn-success md-btn active"><input type="radio" name="config[column_quantity]" value="3" checked="checked" /> {{ text_text_only }}</label>
                            {% else %} 
                            <label class="btn btn-success md-btn"><input type="radio" name="config[column_quantity]" value="3" /> {{ text_text_only }}</label>
                            {% endif %} 
                            {% if (column_quantity is empty) %} 
                            <label class="btn btn-default md-btn active"><input type="radio" name="config[column_quantity]" value="0" checked="checked" /> {{ text_disabled }}</label>
                            {% else %} 
                            <label class="btn btn-default md-btn"><input type="radio" name="config[column_quantity]" value="0" /> {{ text_disabled }}</label>
                            {% endif %} 
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_column_total }}</label>
                      <div class="col-sm-9">
                        <input type="checkbox" name="config[column_total]" value="1" {{ column_total ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_column_remove }}</label>
                      <div class="col-sm-9">
                        <input type="checkbox" name="config[column_remove]" value="1" {{ column_remove ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                  </fieldset>
                </div>
                <!-- Additonal Features -->
                <div class="tab-pane" id="tab-additional">
                  <fieldset>
                    <legend class="md-legend">{{ legend_remove_features }}</legend>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_selective_remove }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[selective_remove]" value="1" {{ selective_remove ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_btn_clear_cart_status }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[btn_clear_cart_status]" value="1" {{ btn_clear_cart_status ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                  </fieldset>
                  <fieldset>
                    <legend class="md-legend">{{ legend_cart_modules }}</legend>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_text_next_status }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[text_next_status]" value="1" {{ text_next_status ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_text_next_choice_status }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[text_next_choice_status]" value="1" {{ text_next_choice_status ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_coupon_show }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[coupon_field]" value="1" {{ coupon_field ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_voucher_show }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[voucher_field]" value="1" {{ voucher_field ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_reward_points_show }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[reward_points_field]" value="1" {{ reward_points_field ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_shipping_estimate }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[shipping_estimate_block]" value="1" {{ shipping_estimate_block ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{{ entry_btn_continue }}</label>
                      <div class="col-sm-8">
                        <input type="checkbox" name="config[btn_continue]" value="1" {{ btn_continue ? 'checked' : '' }} class="btn-toggle">
                      </div>
                    </div>
                  </fieldset>
                </div>
                <!-- Language settings -->
                <div class="tab-pane" id="tab-language">
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_page_heading }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_page_heading][{{ language['code'] }}]" value="{{ lng_page_heading[language['code']] is defined ? lng_page_heading[language['code']] : '' }}" class="form-control" placeholder="{{ text_default }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_btn_remove_checked }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_btn_remove_checked][{{ language['code'] }}]" value="{{ lng_btn_remove_checked[language['code']] is defined ? lng_btn_remove_checked[language['code']] : '' }}" class="form-control" placeholder="{{ text_btn_remove_checked }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_btn_clear_cart }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_btn_clear_cart][{{ language['code'] }}]" value="{{ lng_btn_clear_cart[language['code']] is defined ? lng_btn_clear_cart[language['code']] : '' }}" class="form-control" placeholder="{{ text_btn_clear_cart }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_text_next }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_text_next][{{ language['code'] }}]" value="{{ lng_text_next[language['code']] is defined ? lng_text_next[language['code']] : '' }}" class="form-control" placeholder="{{ text_default }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_text_next_choice }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_text_next_choice][{{ language['code'] }}]" value="{{ lng_text_next_choice[language['code']] is defined ? lng_text_next_choice[language['code']] : '' }}" class="form-control" placeholder="{{ text_default }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_btn_continue }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_btn_continue][{{ language['code'] }}]" value="{{ lng_btn_continue[language['code']] is defined ? lng_btn_continue[language['code']] : '' }}" class="form-control" placeholder="{{ text_default }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">{{ entry_btn_checkout }}</label>
                    <div class="col-sm-8">
                      {% for language in languages %} 
                      <div class="input-group">
                        <label class="input-group-addon"><img src="{{ language['flag_img'] }}" alt="{{ language['name'] }}" title="{{ language['name'] }}" /></label>
                        <input type="text" name="config[lng_btn_checkout][{{ language['code'] }}]" value="{{ lng_btn_checkout[language['code']] is defined ? lng_btn_checkout[language['code']] : '' }}" class="form-control" placeholder="{{ text_default }}">
                      </div>
                      {% endfor %} 
                    </div>
                  </div>
                </div>
                <!-- Styles and Colors -->
                <div class="tab-pane" id="tab-styles">
                  <div id="styles_setting">
                    <fieldset>
                      <legend class="md-legend">{{ legend_cart_table }}</legend>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_loader_style }}</label>
                        <div class="col-sm-4">
                          <label for="loader_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="loader_bg_color" name="config[loader_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-format="rgb" data-opacity="true" value="{{ loader_bg_color }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="loader_font_color">{{ text_font_color }}</label>
                          <input type="text" id="loader_font_color" name="config[loader_font_color]" class="form-control color" placeholder="{{ text_default }}" value="{{ loader_font_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_table_head }}</label>
                        <div class="col-sm-4">
                          <label for="table_head_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="table_head_bg_color" name="config[table_head_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ table_head_bg_color }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="table_head_font_color">{{ text_font_color }}</label>
                          <input type="text" id="table_head_font_color" name="config[table_head_font_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ table_head_font_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_image_size }}</label>
                        <div class="col-sm-4">
                          <label for="image-width">{{ text_width }}</label>
                          <input type="number" id="image-width" name="config[image_width]" class="form-control" max="200" min="0" value="{{ image_width }}" placeholder="{{ text_default }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="image-height">{{ text_height }}</label>
                          <input type="number" id="image-height" name="config[image_height]" class="form-control" max="200" min="0" value="{{ image_height }}" placeholder="{{ text_default }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_image_border_style }}</label>
                        <div class="col-sm-4">
                          <label for="image-border-color">{{ text_border_color }}</label>
                          <input type="text" id="image-border-color" name="config[image_border_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ image_border_color }}">
                        </div>
                        <div class="col-sm-2">
                          <label for="image-border-size">{{ text_border_size }}</label>
                          <input type="number" id="image-border-size" name="config[image_border_size]" class="form-control" max="30" min="0" value="{{ image_border_size }}" placeholder="{{ text_default }}">
                        </div>
                        <div class="col-sm-2">
                          <label for="image-border-radius">{{ text_border_radius }}</label>
                          <input type="number" id="image-border-radius" name="config[image_border_radius]" class="form-control" max="30" min="0" value="{{ image_border_radius }}" placeholder="{{ text_default }}">
                        </div>
                      </div>
                    </fieldset>
                    <fieldset>
                      <legend class="md-legend">{{ legend_buttons }}</legend>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_quantity_buttons }}</label>
                        <div class="col-sm-4">
                          <label for="btn_qty_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="btn_qty_bg_color" name="config[btn_qty_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_qty_bg_color }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="btn_qty_font_color">{{ text_font_color }}</label>
                          <input type="text" id="btn_qty_font_color" name="config[btn_qty_font_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_qty_font_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_btn_remove }}</label>
                        <div class="col-sm-4">
                          <label for="btn_remove_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="btn_remove_bg_color" name="config[btn_remove_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_remove_bg_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_btn_continue }}</label>
                        <div class="col-sm-4">
                          <label for="btn_continue_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="btn_continue_bg_color" name="config[btn_continue_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_continue_bg_color }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="btn_continue_font_color">{{ text_font_color }}</label>
                          <input type="text" id="btn_continue_font_color" name="config[btn_continue_font_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_continue_font_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_btn_checkout }}</label>
                        <div class="col-sm-4">
                          <label for="btn_checkout_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="btn_checkout_bg_color" name="config[btn_checkout_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_checkout_bg_color }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="btn_checkout_font_color">{{ text_font_color }}</label>
                          <input type="text" id="btn_checkout_font_color" name="config[btn_checkout_font_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_checkout_font_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-3 control-label">{{ entry_other_buttons }}</label>
                        <div class="col-sm-4">
                          <label for="btn_other_bg_color">{{ text_bg_color }}</label>
                          <input type="text" id="btn_other_bg_color" name="config[btn_other_bg_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_other_bg_color }}">
                        </div>
                        <div class="col-sm-4">
                          <label for="btn_other_font_color">{{ text_font_color }}</label>
                          <input type="text" id="btn_other_font_color" name="config[btn_other_font_color]" class="form-control color" placeholder="{{ text_default }}" data-control="hue" value="{{ btn_other_font_color }}">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="btn_radius" class="col-sm-3 control-label">{{ entry_button_radius }}</label>
                        <div class="col-sm-4">
                          <input type="number" id="btn_radius" name="config[btn_radius]" class="form-control" max="50" min="0" value="{{ btn_radius }}" placeholder="{{ text_default }}">
                        </div>
                      </div>
                    </fieldset>
                  </div>
                  <fieldset>
                    <legend class="md-legend">{{ legend_additional_styles }}</legend>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ text_custom_css }}</label>
                      <div class="col-sm-8">
                        <textarea name="config[custom_css_code]" placeholder="{{ text_custom_css }}" class="form-control" rows="8">{{ custom_css_code }}</textarea>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label">{{ entry_reset_styles }}</label>
                      <div class="col-sm-9">
                        <a id="reset_styles" class="btn btn-warning"><i class="fa fa-eraser"></i> <span class="hidden-xs">{{ button_reset }}</span></a>
                        <br><br>
                        <div class="alert alert-info"><i class="fa fa-exclamation-circle"></i> {{ text_reset_styles_info }}</div>
                      </div>
                    </div>
                  </fieldset>
                </div>
                <!-- Tab Support -->
                <div class="tab-pane" id="tab-support">
                  <fieldset>
                    <legend class="apc-legend">{{ text_need_help }}</legend>
                    <p>{{ text_contact_us }} <a href="{{ support_href }}" target="_blank"><strong>{{ support_email }}</strong></a></p>
                    <p>{{ text_provide_credentials }}</p>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <br>
        </form>
      </div>
      <div class="panel-footer">
        <div class="row">
          <div class="col-sm-6">
            <h4>{{ heading_title }}</h4>
            <span>{{ text_module_version }}: {{ module_version }}</span>
          </div>
          <div class="col-sm-6 text-right">
            <span>{{ text_copyright }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .btn-toggle {
    display: none;
  }
  .input-group {
    padding: 4px 0 4px 0;
  }
  .md-legend {
    padding-top: 15px;
  }
  .md-btn {
    background-color: #fff;
    color: #888;
    border-color: #aaa;
  }
</style>
<script>
  function bootstrapToggleInit() {
    $(".btn-toggle").bootstrapToggle({
      height: 35,
      width: 90,
      onstyle: 'success',
      on: '{{ text_enabled }}',
      off: '{{ text_disabled }}'
    });
  }

  function miniColorsInit() {
    $('.color').each(function() {
      $(this).minicolors({
        format: $(this).attr('data-format') || 'hex',
        opacity: $(this).attr('data-opacity') || false,
        theme: 'bootstrap',
        swatches: [
          '#ea2222', '#ff9800', '#ffeb3b', '#36bf31', '#19d2e3', '#2196f3', '#bf27d6',
          '#000000', '#444444', '#666666', '#999999', '#bbbbbb', '#eeeeee', '#ffffff',
        ],
      });
    });
  }

  function applySettings() {
    $.ajax({
      type: "post",
      data: $('#form-apc').serialize(),
      url: "{{ apply_url }}",
      dataType: "json",
      beforeSend: function() {
        $('#form-apc').fadeTo('slow', 0.5);
      },
      complete: function() {
        $('#form-apc').fadeTo('slow', 1);
      },
      success: function(json) {
        $('.alert-success, .alert-danger, .text-danger').remove();
        if (json['error']) {
          $('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
        }
        if (json['success']) {
          setTimeout(function() {
            $('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
          }, 1000);
        }
      },
      error: function() {
        location.reload();
      }
    })
  }

  function resetStyles() {
    if (confirm("{{ text_confirm }}")) {
      $('#styles_setting input:not([type=checkbox])').val('');
      $('.alert-success, .alert-danger, .text-danger').remove();
      $.ajax({
        type: "post",
        data: $('#form-apc').serialize(),
        url: "{{ apply_url }}",
        dataType: "json",
        beforeSend: function() {
          $('#form-apc').fadeTo('slow', 0.5);
        },
        success: function(json) {
          if (json['error']) {
            $('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
          }
          if (json['success']) {
            setTimeout(function() {
              $('#styles_setting').load('{{ reload_url }} #styles_setting > *', function() {
                bootstrapToggleInit();
                miniColorsInit();
                applySettings();
              });
            }, 200);
          }
        },
        error: function() {
          location.reload();
        }
      })
    }
  }

  $("#apply").on("click", function() {
    applySettings();
  });

  $("#reset_styles").on("click", function() {
    resetStyles();
  });

  $(document).ready(function() {
    bootstrapToggleInit();
    miniColorsInit();
  });

</script>
{{ footer }}