{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="submit" form="form-product" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
        <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    {% if master_id %}
      <div class="alert alert-warning"><i class="fa-solid fa-circle-exclamation"></i> {{ text_variant }}</div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-pencil"></i> {{ text_form }}</div>
      <div class="card-body">
        <form id="form-product" action="{{ save }}" method="post" data-oc-toggle="ajax">

          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#tab-general" data-bs-toggle="tab" class="nav-link active">{{ tab_general }}</a></li>
            <li class="nav-item"><a href="#tab-data" data-bs-toggle="tab" class="nav-link">{{ tab_data }}</a></li>
            <li class="nav-item"><a href="#tab-links" data-bs-toggle="tab" class="nav-link">{{ tab_links }}</a></li>
            <li class="nav-item"><a href="#tab-attribute" data-bs-toggle="tab" class="nav-link">{{ tab_attribute }}</a></li>
            <li class="nav-item"><a href="#tab-option" data-bs-toggle="tab" class="nav-link">{{ tab_option }}</a></li>
            <li class="nav-item"><a href="#tab-subscription" data-bs-toggle="tab" class="nav-link">{{ tab_subscription }}</a></li>
            <li class="nav-item"><a href="#tab-discount" data-bs-toggle="tab" class="nav-link">{{ tab_discount }}</a></li>
            <li class="nav-item"><a href="#tab-special" data-bs-toggle="tab" class="nav-link">{{ tab_special }}</a></li>
            <li class="nav-item"><a href="#tab-image" data-bs-toggle="tab" class="nav-link">{{ tab_image }}</a></li>
            <li class="nav-item"><a href="#tab-reward" data-bs-toggle="tab" class="nav-link">{{ tab_reward }}</a></li>
            <li class="nav-item"><a href="#tab-seo" data-bs-toggle="tab" class="nav-link">{{ tab_seo }}</a></li>
            <li class="nav-item"><a href="#tab-design" data-bs-toggle="tab" class="nav-link">{{ tab_design }}</a></li>
            <li class="nav-item"><a href="#tab-report" data-bs-toggle="tab" class="nav-link">{{ tab_report }}</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-general">
              <ul class="nav nav-tabs">
                {% for language in languages %}
                  <li class="nav-item"><a href="#language-{{ language.language_id }}" data-bs-toggle="tab" class="nav-link{% if loop.first %} active{% endif %}"><img src="{{ language.image }}" title="{{ language.name }}"/> {{ language.name }}</a></li>
                {% endfor %}
              </ul>
              <div class="tab-content">
                {% for language in languages %}
                  <div id="language-{{ language.language_id }}" class="tab-pane{% if loop.first %} active{% endif %}">
                    <div class="row mb-3 required">
                      <label for="input-name-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_name }}</label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <input type="text" name="product_description[{{ language.language_id }}][name]" value="{{ product_description[language.language_id] ? product_description[language.language_id].name }}" placeholder="{{ entry_name }}" id="input-name-{{ language.language_id }}" class="form-control"/>
                          {% if master_id %}
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[product_description][{{ language.language_id }}][name]" value="1" id="input-variant-name-{{ language.language_id }}" data-oc-toggle="switch" data-oc-target="#input-name-{{ language.language_id }}" class="form-check-input"{% if override.product_description[language.language_id].name %} checked{% endif %}/>
                                <label for="input-variant-name-{{ language.language_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          {% endif %}
                        </div>
                        <div id="error-name-{{ language.language_id }}" class="invalid-feedback"></div>
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="input-description-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_description }}</label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <div class="form-control h-100 p-0 border-0 rounded-0">
                            <textarea name="product_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" id="input-description-{{ language.language_id }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="w-100 position-relative">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea>
                          </div>
                          {% if master_id %}
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[product_description][{{ language.language_id }}][description]" value="1" id="input-variant-description-{{ language.language_id }}" data-oc-toggle="switch" data-oc-target="#input-description-{{ language.language_id }}" class="form-check-input"{% if override.product_description[language.language_id].description %} checked{% endif %}/> <label for="input-variant-description-{{ language.language_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                    <div class="row mb-3 required">
                      <label for="input-meta-title-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_meta_title }}</label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <input type="text" name="product_description[{{ language.language_id }}][meta_title]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_title }}" placeholder="{{ entry_meta_title }}" id="input-meta-title-{{ language.language_id }}" class="form-control"/>
                          {% if master_id %}
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[product_description][{{ language.language_id }}][meta_title]" value="1" id="input-variant-meta-title-{{ language.language_id }}" data-oc-toggle="switch" data-oc-target="#input-meta-title-{{ language.language_id }}" class="form-check-input"{% if override.product_description[language.language_id].meta_title %} checked{% endif %}/> <label for="input-variant-meta-title-{{ language.language_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          {% endif %}
                        </div>
                        <div id="error-meta-title-{{ language.language_id }}" class="invalid-feedback"></div>
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="input-meta-description-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_meta_description }}</label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <textarea name="product_description[{{ language.language_id }}][meta_description]" rows="5" placeholder="{{ entry_meta_description }}" id="input-meta-description-{{ language.language_id }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].meta_description }}</textarea>
                          {% if master_id %}
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[product_description][{{ language.language_id }}][meta_description]" value="1" id="input-variant-meta-description-{{ language.language_id }}" data-oc-toggle="switch" data-oc-target="#input-meta-description-{{ language.language_id }}" class="form-check-input"{% if override.product_description[language.language_id].meta_description %} checked{% endif %}/> <label for="input-variant-meta-description-{{ language.language_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="input-meta-keyword-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_meta_keyword }}</label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <textarea name="product_description[{{ language.language_id }}][meta_keyword]" rows="5" placeholder="{{ entry_meta_keyword }}" id="input-meta-keyword-{{ language.language_id }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].meta_keyword }}</textarea>
                          {% if master_id %}
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[product_description][{{ language.language_id }}][meta_keyword]" value="1" id="input-variant-meta-keyword-{{ language.language_id }}" data-oc-toggle="switch" data-oc-target="#input-meta-keyword-{{ language.language_id }}" class="form-check-input"{% if override.product_description[language.language_id].meta_keyword %} checked{% endif %}/> <label for="input-variant-meta-keyword-{{ language.language_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label for="input-tag-{{ language.language_id }}" class="col-sm-2 col-form-label">{{ entry_tag }}</label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <input type="text" name="product_description[{{ language.language_id }}][tag]" value="{{ product_description[language.language_id] ? product_description[language.language_id].tag }}" placeholder="{{ entry_tag }}" id="input-tag-{{ language.language_id }}" class="form-control"/>
                          {% if master_id %}
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[product_description][{{ language.language_id }}][tag]" value="1" id="input-variant-tag-{{ language.language_id }}" data-oc-toggle="switch" data-oc-target="#input-tag-{{ language.language_id }}" class="form-check-input"{% if override.product_description[language.language_id].tag %} checked{% endif %}/> <label for="input-variant-tag-{{ language.language_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          {% endif %}
                        </div>
                        <div class="form-text">{{ help_tag }}</div>
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
            <div id="tab-data" class="tab-pane">
              <input type="hidden" name="master_id" value="{{ master_id }}"/>
              <fieldset>
                <legend>{{ text_model }}</legend>
                <div class="row mb-3 required">
                  <label for="input-model" class="col-sm-2 col-form-label">{{ entry_model }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="model" value="{{ model }}" placeholder="{{ entry_model }}" id="input-model" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[model]" value="1" id="input-variant-model" data-oc-toggle="switch" data-oc-target="#input-model" class="form-check-input"{% if override.model %} checked{% endif %}/> <label for="input-variant-model" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div id="error-model" class="invalid-feedback"></div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-sku" class="col-sm-2 col-form-label">{{ entry_sku }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="sku" value="{{ sku }}" placeholder="{{ entry_sku }}" id="input-sku" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[sku]" value="1" id="input-variant-sku" data-oc-toggle="switch" data-oc-target="#input-sku" class="form-check-input"{% if override.sku %} checked{% endif %}/> <label for="input-variant-sku" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_sku }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-upc" class="col-sm-2 col-form-label">{{ entry_upc }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="upc" value="{{ upc }}" placeholder="{{ entry_upc }}" id="input-upc" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[upc]" value="1" id="input-variant-upc" data-oc-toggle="switch" data-oc-target="#input-upc" class="form-check-input"{% if override.upc %} checked{% endif %}/> <label for="input-variant-upc" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_upc }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-ean" class="col-sm-2 col-form-label">{{ entry_ean }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="ean" value="{{ ean }}" placeholder="{{ entry_ean }}" id="input-ean" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[ean]" value="1" id="input-variant-ean" data-oc-toggle="switch" data-oc-target="#input-ean" class="form-check-input"{% if override.ean %} checked{% endif %}/> <label for="input-variant-ean" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_ean }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-jan" class="col-sm-2 col-form-label">{{ entry_jan }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="jan" value="{{ jan }}" placeholder="{{ entry_jan }}" id="input-jan" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[jan]" value="1" id="input-variant-jan" data-oc-toggle="switch" data-oc-target="#input-jan" class="form-check-input"{% if override.jan %} checked{% endif %}/> <label for="input-variant-jan" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_jan }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-isbn" class="col-sm-2 col-form-label">{{ entry_isbn }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="isbn" value="{{ isbn }}" placeholder="{{ entry_isbn }}" id="input-isbn" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[isbn]" value="1" id="input-variant-isbn" data-oc-toggle="switch" data-oc-target="#input-isbn" class="form-check-input"{% if override.isbn %} checked{% endif %}/> <label for="input-variant-isbn" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_isbn }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-mpn" class="col-sm-2 col-form-label">{{ entry_mpn }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="mpn" value="{{ mpn }}" placeholder="{{ entry_mpn }}" id="input-mpn" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[mpn]" value="1" id="input-variant-mpn" data-oc-toggle="switch" data-oc-target="#input-mpn" class="form-check-input"{% if override.mpn %} checked{% endif %}/> <label for="input-variant-mpn" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_mpn }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-location" class="col-sm-2 col-form-label">{{ entry_location }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="location" value="{{ location }}" placeholder="{{ entry_location }}" id="input-location" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[location]" value="1" id="input-variant-location" data-oc-toggle="switch" data-oc-target="#input-location" class="form-check-input"{% if override.location %} checked{% endif %}/> <label for="input-variant-location" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_price }}</legend>
                <div class="row mb-3">
                  <label for="input-price" class="col-sm-2 col-form-label">{{ entry_price }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="price" value="{{ price }}" placeholder="{{ entry_price }}" id="input-price" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[price]" value="1" id="input-variant-price" data-oc-toggle="switch" data-oc-target="#input-price" class="form-check-input"{% if override.price %} checked{% endif %}/>
                            <label for="input-variant-price" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-tax-class" class="col-sm-2 col-form-label">{{ entry_tax_class }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="tax_class_id" id="input-tax-class" class="form-select">
                        <option value="0">{{ text_none }}</option>
                        {% for tax_class in tax_classes %}
                          <option value="{{ tax_class.tax_class_id }}"{% if tax_class.tax_class_id == tax_class_id %} selected{% endif %}>{{ tax_class.title }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[tax_class_id]" value="1" id="input-variant-tax-class" data-oc-toggle="switch" data-oc-target="#input-tax-class" class="form-check-input"{% if override.tax_class_id %} checked{% endif %}/> <label for="input-variant-tax-class" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_stock }}</legend>
                <div class="row mb-3">
                  <label for="input-quantity" class="col-sm-2 col-form-label">{{ entry_quantity }}</label>
                  <div class="col-sm-10">
                    <input type="text" name="quantity" value="{{ quantity }}" placeholder="{{ entry_quantity }}" id="input-quantity" class="form-control"/>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-minimum" class="col-sm-2 col-form-label">{{ entry_minimum }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="minimum" value="{{ minimum }}" placeholder="{{ entry_minimum }}" id="input-minimum" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[minimum]" value="1" id="input-variant-minimum" data-oc-toggle="switch" data-oc-target="#input-minimum" class="form-check-input"{% if override.minimum %} checked{% endif %}/> <label for="input-variant-minimum" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_minimum }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_subtract }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <div id="input-subtract" class="form-check form-switch form-switch-lg">
                        <input type="hidden" name="subtract" value="0"/> <input type="checkbox" name="subtract" value="1" class="form-check-input"{% if subtract %} checked{% endif %}/>
                      </div>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[subtract]" value="1" id="input-variant-subtract" data-oc-toggle="switch" data-oc-target="#input-subtract" class="form-check-input"{% if override.subtract %} checked{% endif %}/> <label for="input-variant-subtract" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-stock-status" class="col-sm-2 col-form-label">{{ entry_stock_status }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="stock_status_id" id="input-stock-status" class="form-select">
                        {% for stock_status in stock_statuses %}
                          <option value="{{ stock_status.stock_status_id }}"{% if stock_status.stock_status_id == stock_status_id %} selected{% endif %}>{{ stock_status.name }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[stock_status_id]" value="1" id="input-variant-stock-status" data-oc-toggle="switch" data-oc-target="#input-stock-status" class="form-check-input"{% if override.stock_status_id %} checked{% endif %}/> <label for="input-variant-stock-status" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_stock_status }}</div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-date-available" class="col-sm-2 col-form-label">{{ entry_date_available }}</label>
                  <div class="col-sm-10 col-md-4">
                    <div class="input-group">
                      <input type="text" name="date_available" value="{{ date_available }}" placeholder="{{ entry_date_available }}" id="input-date-available" class="form-control date"/>
                      <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[date_available]" value="1" id="input-variant-date-available" data-oc-toggle="switch" data-oc-target="#input-date-available" class="form-check-input"{% if override.date_available %} checked{% endif %}/> <label for="input-variant-date-available" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_specification }}</legend>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_shipping }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <div id="input-shipping" class="form-check form-switch form-switch-lg">
                        <input type="hidden" name="shipping" value="0"/>
                        <input type="checkbox" name="shipping" value="1" class="form-check-input"{% if shipping %} checked{% endif %}/>
                      </div>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[shipping]" value="1" id="input-variant-shipping" data-oc-toggle="switch" data-oc-target="#input-shipping" class="form-check-input"{% if override.shipping %} checked{% endif %}/> <label for="input-variant-shipping" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-length" class="col-sm-2 col-form-label">{{ entry_dimension }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="length" value="{{ length }}" placeholder="{{ entry_length }}" id="input-length" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[length]" value="1" id="input-variant-length" data-oc-toggle="switch" data-oc-target="#input-length" class="form-check-input"{% if override.length %} checked{% endif %}/> <label for="input-variant-length" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                      <input type="text" name="width" value="{{ width }}" placeholder="{{ entry_width }}" id="input-width" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[width]" value="1" id="input-variant-width" data-oc-toggle="switch" data-oc-target="#input-width" class="form-check-input"{% if override.width %} checked{% endif %}/> <label for="input-variant-width" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                      <input type="text" name="height" value="{{ height }}" placeholder="{{ entry_height }}" id="input-height" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[height]" value="1" id="input-variant-height" data-oc-toggle="switch" data-oc-target="#input-height" class="form-check-input"{% if override.height %} checked{% endif %}/> <label for="input-variant-height" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-length-class" class="col-sm-2 col-form-label">{{ entry_length_class }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="length_class_id" id="input-length-class" class="form-select">
                        {% for length_class in length_classes %}
                          <option value="{{ length_class.length_class_id }}"{% if length_class.length_class_id == length_class_id %} selected{% endif %}>{{ length_class.title }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[length_class_id]" value="1" id="input-variant-length-class" data-oc-toggle="switch" data-oc-target="#input-length-class" class="form-check-input"{% if override.length_class_id %} checked{% endif %}/> <label for="input-variant-length-class" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-weight" class="col-sm-2 col-form-label">{{ entry_weight }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="weight" value="{{ weight }}" placeholder="{{ entry_weight }}" id="input-weight" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[weight]" value="1" id="input-variant-weight" data-oc-toggle="switch" data-oc-target="#input-weight" class="form-check-input"{% if override.weight %} checked{% endif %}/> <label for="input-variant-weight" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-weight-class" class="col-sm-2 col-form-label">{{ entry_weight_class }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <select name="weight_class_id" id="input-weight-class" class="form-select">
                        {% for weight_class in weight_classes %}
                          <option value="{{ weight_class.weight_class_id }}"{% if weight_class.weight_class_id == weight_class_id %} selected{% endif %}>{{ weight_class.title }}</option>
                        {% endfor %}
                      </select>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[weight_class_id]" value="1" id="input-variant-weight-class" data-oc-toggle="switch" data-oc-target="#input-weight-class" class="form-check-input"{% if override.weight_class_id %} checked{% endif %}/> <label for="input-variant-weight-class" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label">{{ entry_status }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <div class="form-check form-switch form-switch-lg">
                        <input type="hidden" name="status" value="0"/> <input type="checkbox" name="status" value="1" id="input-status" class="form-check-input"{% if status %} checked{% endif %}/>
                      </div>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[status]" value="1" id="input-variant-status" data-oc-toggle="switch" data-oc-target="#input-status" class="form-check-input"{% if override.status %} checked{% endif %}/> <label for="input-variant-status" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="input-sort-order" class="col-sm-2 col-form-label">{{ entry_sort_order }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="sort_order" value="{{ sort_order }}" placeholder="{{ entry_sort_order }}" id="input-sort-order" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[sort_order]" value="1" id="input-variant-sort-order" data-oc-toggle="switch" data-oc-target="#input-sort-order" class="form-check-input"{% if override.sort_order %} checked{% endif %}/> <label for="input-variant-sort-order" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
            <div id="tab-links" class="tab-pane">
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_manufacturer }}</label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <input type="text" name="manufacturer" value="{{ manufacturer }}" placeholder="{{ entry_manufacturer }}" id="input-manufacturer" data-oc-target="autocomplete-manufacturer" class="form-control" autocomplete="off"/>
                    {% if master_id %}
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <input type="checkbox" name="override[manufacturer]" value="1" id="input-variant-manufacturer" data-oc-toggle="switch" data-oc-target="#input-manufacturer" class="form-check-input"{% if override.manufacturer %} checked{% endif %}/>
                          <label for="input-variant-manufacturer" class="form-check-label"></label>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  <input type="hidden" name="manufacturer_id" value="{{ manufacturer_id }}" id="input-manufacturer-id"/>
                  <ul id="autocomplete-manufacturer" class="dropdown-menu"></ul>
                  <div class="form-text">{{ help_manufacturer }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_category }}</label>
                <div class="col-sm-10">
                  <input type="text" name="category" value="" placeholder="{{ entry_category }}" id="input-category" data-oc-target="autocomplete-category" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-category" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-category" class="table m-0">
                        <tbody>
                          {% for product_category in product_categories %}
                            <tr id="product-category-{{ product_category.category_id }}">
                              <td>{{ product_category.name }}<input type="hidden" name="product_category[]" value="{{ product_category.category_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <input type="checkbox" name="override[product_category]" value="1" id="input-variant-category" data-oc-toggle="switch" data-oc-target="#input-category, #product-category" class="form-check-input"{% if override.product_category %} checked{% endif %}/> <label for="input-variant-category" class="form-check-label"></label>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_category }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_filter }}</label>
                <div class="col-sm-10">
                  <input type="text" name="filter" value="" placeholder="{{ entry_filter }}" id="input-filter" data-oc-target="autocomplete-filter" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-filter" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-filter" class="table m-0">
                        <tbody>
                          {% for product_filter in product_filters %}
                            <tr id="product-filter-{{ product_filter.filter_id }}">
                              <td>{{ product_filter.name }}<input type="hidden" name="product_filter[]" value="{{ product_filter.filter_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <input type="checkbox" name="override[product_filter]" value="1" id="input-variant-filter" data-oc-toggle="switch" data-oc-target="#input-filter, #product-filter" class="form-check-input"{% if override.product_filter %} checked{% endif %}/> <label for="input-variant-filter" class="form-check-label"></label>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_filter }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_store }}</label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <div id="product-store" class="form-control" style="height: 150px; overflow: auto;">
                      {% for store in stores %}
                        <div class="form-check">
                          <input type="checkbox" name="product_store[]" value="{{ store.store_id }}" id="input-store-{{ store.store_id }}" class="form-check-input"{% if store.store_id in product_store %} checked{% endif %}/> <label for="input-store-{{ store.store_id }}" class="form-check-label">{{ store.name }}</label>
                        </div>
                      {% endfor %}
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <input type="checkbox" name="override[product_store]" value="1" id="input-variant-store" data-oc-toggle="switch" data-oc-target="#product-store" class="form-check-input"{% if override.product_store %} checked{% endif %}/> <label for="input-variant-store" class="form-check-label"></label>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_download }}</label>
                <div class="col-sm-10">
                  <input type="text" name="download" value="" placeholder="{{ entry_download }}" id="input-download" data-oc-target="autocomplete-download" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-download" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-download" class="table m-0">
                        <tbody>
                          {% for product_download in product_downloads %}
                            <tr id="product-download-{{ product_download.download_id }}">
                              <td>{{ product_download.name }}<input type="hidden" name="product_download[]" value="{{ product_download.download_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <input type="checkbox" name="override[product_download]" value="1" id="input-variant-download" data-oc-toggle="switch" data-oc-target="#input-download, #product-download" class="form-check-input"{% if override.product_download %} checked{% endif %}/> <label for="input-variant-download" class="form-check-label"></label>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_download }}</div>
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2 col-form-label">{{ entry_related }}</label>
                <div class="col-sm-10">
                  <input type="text" name="related" value="" placeholder="{{ entry_related }}" id="input-related" data-oc-target="autocomplete-related" class="form-control" autocomplete="off"/>
                  <ul id="autocomplete-related" class="dropdown-menu"></ul>
                  <div class="input-group">
                    <div class="form-control p-0" style="height: 150px; overflow: auto;">
                      <table id="product-related" class="table m-0">
                        <tbody>
                          {% for product_related in product_relateds %}
                            <tr id="product-related-{{ product_related.product_id }}">
                              <td>{{ product_related.name }}<input type="hidden" name="product_related[]" value="{{ product_related.product_id }}"/></td>
                              <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    {% if master_id %}
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <input type="checkbox" name="override[product_related]" value="1" id="input-variant-related" data-oc-toggle="switch" data-oc-target="#input-related, #product-related" class="form-check-input"{% if override.product_related %} checked{% endif %}/> <label for="input-variant-related" class="form-check-label"></label>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  <div class="form-text">{{ help_related }}</div>
                </div>
              </div>
            </div>
            <div id="tab-attribute" class="tab-pane">
              <div class="table-responsive">
                <table id="product-attribute" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-start">{{ entry_attribute }}</td>
                      <td class="text-start">{{ entry_text }}</td>
                      <td>
                        {% if master_id %}
                          <div class="form-check form-switch float-end">
                            <input type="checkbox" name="override[product_attribute]" value="1" id="input-variant-product-attribute" data-oc-toggle="switch" data-oc-target="#product-attribute" class="form-check-input"{% if override.product_attribute %} checked{% endif %}/> <label for="input-variant-product-attribute" class="form-check-label"></label>
                          </div>
                        {% endif %}
                      </td>
                    </tr>
                  </thead>
                  <tbody>
                    {% set attribute_row = 0 %}
                    {% for product_attribute in product_attributes %}
                      <tr id="attribute-row-{{ attribute_row }}">
                        <td class="text-start">
                          <input type="text" name="product_attribute[{{ attribute_row }}][name]" value="{{ product_attribute.name }}" placeholder="{{ entry_attribute }}" id="input-attribute-{{ attribute_row }}" data-oc-target="autocomplete-attribute-{{ attribute_row }}" class="form-control" autocomplete="new-password"/>
                          <input type="hidden" name="product_attribute[{{ attribute_row }}][attribute_id]" value="{{ product_attribute.attribute_id }}" id="input-attribute-id-{{ attribute_row }}"/>
                          <ul id="autocomplete-attribute-{{ attribute_row }}" class="dropdown-menu"></ul>
                        </td>
                        <td class="text-start">
                          {% for language in languages %}
                            <div class="input-group mb-12">
                              <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
                              <textarea name="product_attribute[{{ attribute_row }}][product_attribute_description][{{ language.language_id }}][text]" rows="5" placeholder="{{ entry_text }}" id="input-text-{{ attribute_row }}-{{ language.language_id }}" class="form-control">{{ product_attribute.product_attribute_description[language.language_id] ? product_attribute.product_attribute_description[language.language_id].text }}</textarea>
                            </div>
                          {% endfor %}</td>
                        <td class="text-end"><button type="button" onclick="$('#attribute-row-{{ attribute_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set attribute_row = attribute_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="2"></td>
                      <td class="text-end"><button type="button" id="button-attribute" data-bs-toggle="tooltip" title="{{ button_attribute_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            {% if not master_id %}
              <div id="tab-option" class="tab-pane">

                <div id="option">
                  {% set option_row = 0 %}
                  {% set option_value_row = 0 %}
                  {% for product_option in product_options %}

                    <fieldset id="option-row-{{ option_row }}">
                      <legend class="float-none">{{ product_option.name }} <button type="button" class="btn btn-danger btn-sm float-end" onclick="$('#option-row-{{ option_row }}').remove();"><i class="fa-solid fa-minus-circle"></i></button></legend>
                      <input type="hidden" name="product_option[{{ option_row }}][product_option_id]" value="{{ product_option.product_option_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][name]" value="{{ product_option.name }}"/> <input type="hidden" name="product_option[{{ option_row }}][option_id]" value="{{ product_option.option_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][type]" value="{{ product_option.type }}"/>

                      <div class="row mb-3">
                        <label for="input-required-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_required }}</label>
                        <div class="col-sm-10">
                          <select name="product_option[{{ option_row }}][required]" id="input-required-{{ option_row }}" class="form-select">
                            <option value="1"{% if product_option.required %} selected{% endif %}>{{ text_enabled }}</option>
                            <option value="0"{% if not product_option.required %} selected{% endif %}>{{ text_disabled }}</option>
                          </select>
                        </div>
                      </div>

                      {% if product_option.type == 'text' %}
                        <div class="row mb-3">
                          <label for="input-option-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_option_value }}</label>
                          <div class="col-sm-10">
                            <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/>
                          </div>
                        </div>
                      {% endif %}

                      {% if product_option.type == 'textarea' %}
                        <div class="row mb-3">
                          <label for="input-option-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_option_value }}</label>
                          <div class="col-sm-10">
                            <textarea name="product_option[{{ option_row }}][value]" rows="5" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control">{{ product_option.value }}</textarea>
                          </div>
                        </div>
                      {% endif %}

                      {% if product_option.type == 'file' %}
                        <div class="row mb-3 d-none">
                          <label for="input-option-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_option_value }}</label>
                          <div class="col-sm-10"><input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control"/></div>
                        </div>
                      {% endif %}

                      {% if product_option.type == 'date' %}
                        <div class="row mb-3">
                          <label for="input-option-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_option_value }}</label>
                          <div class="col-sm-10 col-md-4">
                            <div class="input-group">
                              <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control date"/>
                              <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                            </div>
                          </div>
                        </div>
                      {% endif %}

                      {% if product_option.type == 'time' %}
                        <div class="row mb-3">
                          <label for="input-option-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_option_value }}</label>
                          <div class="col-sm-10 col-md-4">
                            <div class="input-group">
                              <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control time"/>
                              <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                            </div>
                          </div>
                        </div>
                      {% endif %}

                      {% if product_option.type == 'datetime' %}
                        <div class="row mb-3">
                          <label for="input-option-{{ option_row }}" class="col-sm-2 col-form-label">{{ entry_option_value }}</label>
                          <div class="col-sm-10 col-md-4">
                            <div class="input-group">
                              <input type="text" name="product_option[{{ option_row }}][value]" value="{{ product_option.value }}" placeholder="{{ entry_option_value }}" id="input-option-{{ option_row }}" class="form-control datetime"/>
                              <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                            </div>
                          </div>
                        </div>
                      {% endif %}

                      {% if product_option.type == 'select' or product_option.type == 'radio' or product_option.type == 'checkbox' or product_option.type == 'image' %}
                        <div class="table-responsive">
                          <table class="table table-bordered table-hover">
                            <thead>
                              <tr>
                                <td class="text-start">{{ entry_option_value }}</td>
                                <td class="text-end">{{ entry_quantity }}</td>
                                <td class="text-start">{{ entry_subtract }}</td>
                                <td class="text-end">{{ entry_price }}</td>
                                <td class="text-end">{{ entry_points }}</td>
                                <td class="text-end">{{ entry_weight }}</td>
                                <td></td>
                              </tr>
                            </thead>
                            <tbody id="option-value-{{ option_row }}">
                              {% for product_option_value in product_option.product_option_value %}
                                <tr id="option-value-row-{{ option_value_row }}">
                                  <td class="text-start">{{ product_option_value.name }}
                                    <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][option_value_id]" value="{{ product_option_value.option_value_id }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][product_option_value_id]" value="{{ product_option_value.product_option_value_id }}"/></td>
                                  <td class="text-end">{{ product_option_value.quantity }} <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][quantity]" value="{{ product_option_value.quantity }}"/></td>
                                  <td class="text-start">{% if product_option_value.subtract %}
                                      {{ text_yes }}
                                    {% else %}
                                      {{ text_no }}
                                    {% endif %}
                                    <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][subtract]" value="{{ product_option_value.subtract }}"/></td>
                                  <td class="text-end">{{ product_option_value.price_prefix }}{{ product_option_value.price }}
                                    <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price_prefix]" value="{{ product_option_value.price_prefix }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][price]" value="{{ product_option_value.price }}"/></td>
                                  <td class="text-end">{{ product_option_value.points_prefix }}{{ product_option_value.points }}
                                    <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][points_prefix]" value="{{ product_option_value.points_prefix }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][points]" value="{{ product_option_value.points }}"/></td>
                                  <td class="text-end">{{ product_option_value.weight_prefix }}{{ product_option_value.weight }}
                                    <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][weight_prefix]" value="{{ product_option_value.weight_prefix }}"/> <input type="hidden" name="product_option[{{ option_row }}][product_option_value][{{ option_value_row }}][weight]" value="{{ product_option_value.weight }}"/></td>
                                  <td class="text-end"><button type="button" data-bs-toggle="tooltip" title="{{ button_edit }}" data-option-row="{{ option_row }}" data-option-value-row="{{ option_value_row }}" class="btn btn-primary"><i class="fa-solid fa-pencil"></i></button> <button type="button" onclick="$('#option-value-row-{{ option_value_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                                </tr>
                                {% set option_value_row = option_value_row + 1 %}
                              {% endfor %}
                            </tbody>
                            <tfoot>
                              <tr>
                                <td colspan="6"></td>
                                <td class="text-end"><button type="button" data-bs-toggle="tooltip" title="{{ button_option_value_add }}" data-option-row="{{ option_row }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                              </tr>
                            </tfoot>
                          </table>
                          <select id="product-option-values-{{ option_row }}" class="d-none">
                            {% if option_values[product_option.option_id] %}
                              {% for option_value in option_values[product_option.option_id] %}
                                <option value="{{ option_value.option_value_id }}">{{ option_value.name }}</option>
                              {% endfor %}
                            {% endif %}
                          </select>
                        </div>
                      {% endif %}
                    </fieldset>

                    {% set option_row = option_row + 1 %}
                  {% endfor %}
                </div>

                <fieldset>
                  <legend class="float-none">{{ text_option_add }}</legend>
                  <div class="row mb-3">
                    <label for="input-option" class="col-sm-2 col-form-label">{{ entry_option }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="option" value="" placeholder="{{ entry_option }}" id="input-option" data-oc-target="autocomplete-option" class="form-control" autocomplete="off"/>
                      <ul id="autocomplete-option" class="dropdown-menu"></ul>
                      <div class="form-text">{{ help_option }}</div>
                    </div>
                  </div>
                </fieldset>
              </div>

            {% else %}

              <div id="tab-option" class="tab-pane">
                {% for option in options %}
                  <fieldset>
                    <legend class="float-none">{{ option.name }}</legend>

                    {% if option.type == 'select' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <select name="variant[{{ option.product_option_id }}]" id="input-option-{{ option.product_option_id }}" class="form-select">
                              <option value="">{{ text_select }}</option>
                              {% for option_value in option.product_option_value %}
                                <option value="{{ option_value.product_option_value_id }}"{% if variant[option.product_option_id] and option_value.product_option_value_id == variant[option.product_option_id] %} selected{% endif %}>{{ option_value.name }}
                                  {% if option_value.price %}
                                    ({{ option_value.price_prefix }}{{ option_value.price }})
                                  {% endif %}</option>
                              {% endfor %}
                            </select>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'radio' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <div id="input-option-{{ option.product_option_id }}" class="form-control" style="height: 150px; overflow: auto;">
                              {% for option_value in option.product_option_value %}
                                <div class="form-check">
                                  <input type="radio" name="variant[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"{% if variant[option.product_option_id] and option_value.product_option_value_id == variant[option.product_option_id] %} checked{% endif %}/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">
                                    {% if option_value.image %}<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail"/>{% endif %}
                                    {{ option_value.name }}
                                    {% if option_value.price %}
                                      ({{ option_value.price_prefix }}{{ option_value.price }})
                                    {% endif %}
                                  </label>
                                </div>
                              {% endfor %}
                            </div>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'checkbox' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <div id="input-option-{{ option.product_option_id }}" class="form-control" style="height: 150px; overflow: auto;">
                              {% for option_value in option.product_option_value %}
                                <div class="form-check">
                                  <input type="checkbox" name="variant[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" id="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-input"{% if variant[option.product_option_id] and option_value.product_option_value_id in variant[option.product_option_id] %} checked{% endif %}/> <label for="input-option-value-{{ option_value.product_option_value_id }}" class="form-check-label">{% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail"/>{% endif %}
                                    {{ option_value.name }}
                                    {% if option_value.price %}
                                      ({{ option_value.price_prefix }}{{ option_value.price }})
                                    {% endif %}
                                  </label>
                                </div>
                              {% endfor %}
                            </div>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'text' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'textarea' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <textarea name="variant[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}</textarea>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'file' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10">
                          <div class="input-group">
                            <button type="button" data-oc-toggle="upload" data-oc-url="{{ upload }}" id="button-upload-{{ option.product_option_id }}" data-oc-target="#input-option-{{ option.product_option_id }}" data-oc-size-max="{{ config_file_max_size }}" data-oc-size-error="{{ error_upload_size }}" class="btn btn-primary"><i class="fa-solid fa-upload"></i> {{ button_upload }}</button>
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>
                            <button type="button" data-oc-toggle="download" data-oc-target="#input-option-{{ option.product_option_id }}"{% if not variant[option.product_option_id] %} disabled{% endif %} class="btn btn-outline-secondary"><i class="fa-solid fa-download"></i> {{ button_download }}</button>
                            <button type="button" data-oc-toggle="clear" data-bs-toggle="tooltip" title="{{ button_clear }}" data-oc-target="#input-option-{{ option.product_option_id }}"{% if not variant[option.product_option_id] %} disabled{% endif %} class="btn btn-outline-danger"><i class="fa-solid fa-eraser"></i></button>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#button-upload-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'date' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10 col-md-4">
                          <div class="input-group">
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control date"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'time' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10 col-md-4">
                          <div id="input-option-{{ option.product_option_id }}" class="input-group">
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" class="form-control time"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                    {% if option.type == 'datetime' %}
                      <div class="row mb-3{% if option.required %} required{% endif %}">
                        <label for="input-option-{{ option.product_option_id }}" class="col-sm-2 col-form-label">{{ option.name }}</label>
                        <div class="col-sm-10 col-md-4">
                          <div class="input-group">
                            <input type="text" name="variant[{{ option.product_option_id }}]" value="{{ variant[option.product_option_id] ? variant[option.product_option_id] : option.value }}" id="input-option-{{ option.product_option_id }}" class="form-control datetime"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                            <div class="input-group-text">
                              <div class="form-check form-switch">
                                <input type="checkbox" name="override[variant][{{ option.product_option_id }}]" value="1" id="input-variant-option-{{ option.product_option_id }}" data-oc-toggle="switch" data-oc-target="#input-option-{{ option.product_option_id }}" class="form-check-input"{% if override.variant[option.product_option_id] %} checked{% endif %}/> <label for="input-variant-option-{{ option.product_option_id }}" class="form-check-label"></label>
                              </div>
                            </div>
                          </div>
                          <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
                        </div>
                      </div>
                    {% endif %}

                  </fieldset>
                {% endfor %}
              </div>
            {% endif %}

            <div id="tab-subscription" class="tab-pane">
              <div class="table-responsive">
                <table id="product-subscription" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-start">{{ entry_subscription }}</td>
                      <td class="text-start">{{ entry_customer_group }}</td>
                      <td class="text-start">{{ entry_trial_price }}</td>
                      <td class="text-start">{{ entry_price }}</td>
                      <td>
                        {% if master_id %}
                          <div class="form-check form-switch float-end">
                            <input type="checkbox" name="override[product_subscription]" value="1" id="input-variant-product-subscription" data-oc-toggle="switch" data-oc-target="#product-subscription" class="form-check-input"{% if override.product_subscription %} checked{% endif %}/> <label for="input-variant-product-subscription" class="form-check-label"></label>
                          </div>
                        {% endif %}
                      </td>
                    </tr>
                  </thead>
                  <tbody>
                    {% set subscription_row = 0 %}
                    {% for product_subscription in product_subscriptions %}
                      <tr id="subscription-row-{{ subscription_row }}">
                        <td class="text-start"><select name="product_subscription[{{ subscription_row }}][subscription_plan_id]" class="form-select">
                            {% for subscription_plan in subscription_plans %}
                              <option value="{{ subscription_plan.subscription_plan_id }}"{% if subscription_plan.subscription_plan_id == product_subscription.subscription_plan_id %} selected{% endif %}>{{ subscription_plan.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td class="text-start"><select name="product_subscription[{{ subscription_row }}][customer_group_id]" class="form-select">
                            {% for customer_group in customer_groups %}
                              <option value="{{ customer_group.customer_group_id }}"{% if customer_group.customer_group_id == product_subscription.customer_group_id %} selected{% endif %}>{{ customer_group.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td class="text-start"><input type="text" name="product_subscription[{{ subscription_row }}][trial_price]" value="{{ product_subscription.trial_price }}" placeholder="{{ entry_trial_price }}" class="form-control"/></td>
                        <td class="text-start"><input type="text" name="product_subscription[{{ subscription_row }}][price]" value="{{ product_subscription.price }}" placeholder="{{ entry_price }}" class="form-control"/></td>
                        <td class="text-end"><button type="button" onclick="$('#subscription-row-{{ subscription_row }}').remove()" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set subscription_row = subscription_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="4"></td>
                      <td class="text-end"><button type="button" id="button-subscription" data-bs-toggle="tooltip" title="{{ button_subscription_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>

            <div id="tab-discount" class="tab-pane">
              <div class="table-responsive">
                <table id="product-discount" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-start">{{ entry_customer_group }}</td>
                      <td class="text-end">{{ entry_quantity }}</td>
                      <td class="text-end">{{ entry_priority }}</td>
                      <td class="text-end">{{ entry_price }}</td>
                      <td class="text-start">{{ entry_date_start }}</td>
                      <td class="text-start">{{ entry_date_end }}</td>
                      <td class="text-end">{% if master_id %}
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[product_discount]" value="1" id="input-variant-product-discount" data-oc-toggle="switch" data-oc-target="#product-discount" class="form-check-input"{% if override.product_discount %} checked{% endif %}/> <label for="input-variant-product-discount" class="form-check-label"></label>
                          </div>
                        {% endif %}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% set discount_row = 0 %}
                    {% for product_discount in product_discounts %}
                      <tr id="discount-row-{{ discount_row }}">
                        <td class="text-start"><select name="product_discount[{{ discount_row }}][customer_group_id]" class="form-select">
                            {% for customer_group in customer_groups %}
                              <option value="{{ customer_group.customer_group_id }}"{% if customer_group.customer_group_id == product_discount.customer_group_id %} selected{% endif %}>{{ customer_group.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td class="text-end"><input type="text" name="product_discount[{{ discount_row }}][quantity]" value="{{ product_discount.quantity }}" placeholder="{{ entry_quantity }}" class="form-control"/></td>
                        <td class="text-end"><input type="text" name="product_discount[{{ discount_row }}][priority]" value="{{ product_discount.priority }}" placeholder="{{ entry_priority }}" class="form-control"/></td>
                        <td class="text-end"><input type="text" name="product_discount[{{ discount_row }}][price]" value="{{ product_discount.price }}" placeholder="{{ entry_price }}" class="form-control"/></td>
                        <td class="text-start">
                          <div class="input-group">
                            <input type="text" name="product_discount[{{ discount_row }}][date_start]" value="{{ product_discount.date_start }}" placeholder="{{ entry_date_start }}" class="form-control date"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                          </div>
                        </td>
                        <td class="text-start">
                          <div class="input-group">
                            <input type="text" name="product_discount[{{ discount_row }}][date_end]" value="{{ product_discount.date_end }}" placeholder="{{ entry_date_end }}" class="form-control date"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                          </div>
                        </td>
                        <td class="text-end"><button type="button" onclick="$('#discount-row-{{ discount_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set discount_row = discount_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="6"></td>
                      <td class="text-end"><button type="button" id="button-discount" data-bs-toggle="tooltip" title="{{ button_discount_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>

            <div id="tab-special" class="tab-pane">
              <div class="table-responsive">
                <table id="product-special" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-start">{{ entry_customer_group }}</td>
                      <td class="text-end">{{ entry_priority }}</td>
                      <td class="text-end">{{ entry_price }}</td>
                      <td class="text-start">{{ entry_date_start }}</td>
                      <td class="text-start">{{ entry_date_end }}</td>
                      <td class="text-center">{% if master_id %}
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[product_special]" value="1" id="input-variant-special" data-oc-toggle="switch" data-oc-target="#product-special" class="form-check-input"{% if override.product_special %} checked{% endif %}/> <label for="input-variant-special" class="form-check-label"></label>
                          </div>
                        {% endif %}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% set special_row = 0 %}
                    {% for product_special in product_specials %}
                      <tr id="special-row-{{ special_row }}">
                        <td class="text-start"><select name="product_special[{{ special_row }}][customer_group_id]" class="form-select">
                            {% for customer_group in customer_groups %}
                              <option value="{{ customer_group.customer_group_id }}"{% if customer_group.customer_group_id == product_special.customer_group_id %} selected{% endif %}>{{ customer_group.name }}</option>
                            {% endfor %}
                          </select></td>
                        <td class="text-end"><input type="text" name="product_special[{{ special_row }}][priority]" value="{{ product_special.priority }}" placeholder="{{ entry_priority }}" class="form-control"/></td>
                        <td class="text-end"><input type="text" name="product_special[{{ special_row }}][price]" value="{{ product_special.price }}" placeholder="{{ entry_price }}" class="form-control"/></td>
                        <td class="text-start">
                          <div class="input-group">
                            <input type="text" name="product_special[{{ special_row }}][date_start]" value="{{ product_special.date_start }}" placeholder="{{ entry_date_start }}" class="form-control date"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                          </div>
                        </td>
                        <td class="text-start">
                          <div class="input-group">
                            <input type="text" name="product_special[{{ special_row }}][date_end]" value="{{ product_special.date_end }}" placeholder="{{ entry_date_end }}" class="form-control date"/>
                            <div class="input-group-text"><i class="fa-regular fa-calendar"></i></div>
                          </div>
                        </td>
                        <td class="text-end"><button type="button" onclick="$('#special-row-{{ special_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                      </tr>
                      {% set special_row = special_row + 1 %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="5"></td>
                      <td class="text-end"><button type="button" id="button-special" data-bs-toggle="tooltip" title="{{ button_special_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>

            <div id="tab-image" class="tab-pane">

              <fieldset>
                <legend>{{ text_image }}</legend>
                <div class="row">
                  <div class="col-sm-4 col-md-3 mb-3">
                    <div id="image" class="card image">
                      <img src="{{ thumb }}" alt="" title="" id="thumb-image" data-oc-placeholder="{{ placeholder }}" class="card-img-top"/> <input type="hidden" name="image" value="{{ image }}" id="input-image"/>
                      <div class="card-body">
                        <button type="button" data-oc-toggle="image" data-oc-target="#input-image" data-oc-thumb="#thumb-image" class="btn btn-primary btn-block"><i class="fa-solid fa-pencil"></i> {{ button_edit }}</button>
                        <button type="button" data-oc-toggle="clear" data-oc-target="#input-image" data-oc-thumb="#thumb-image" class="btn btn-warning btn-block"><i class="fa-regular fa-trash-can"></i> {{ button_clear }}</button>

                        {% if master_id %}
                          <div class="mx-auto w-25">
                            <div class="form-check form-switch">
                              <input type="checkbox" name="override[image]" value="1" id="input-variant-image" data-oc-toggle="switch" data-oc-target="#image" class="form-check-input"{% if override.image %} checked{% endif %}/> <label for="input-variant-image" class="form-check-label"></label>
                            </div>
                          </div>
                        {% endif %}

                      </div>
                    </div>
                  </div>
                </div>
              </fieldset>

              <fieldset>
                <legend>{{ text_image_additional }}</legend>
                <div class="table-responsive">
                  <table id="product-image" class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <td class="text-start">{{ entry_image }}</td>
                        <td class="text-start">{{ entry_sort_order }}</td>
                        <td class="text-end">

                          {% if master_id %}
                            <div class="form-check form-switch">
                              <input type="checkbox" name="override[product_image]" value="1" id="input-variant-product-image" data-oc-toggle="switch" data-oc-target="#product-image" class="form-check-input"{% if override.product_image %} checked{% endif %}/> <label for="input-variant-product-image" class="form-check-label"></label>
                            </div>
                          {% endif %}

                        </td>
                      </tr>
                    </thead>
                    <tbody>
                      {% set image_row = 0 %}
                      {% for product_image in product_images %}
                        <tr id="product-image-row-{{ image_row }}">
                          <td>
                            <div class="card image">
                              <img src="{{ product_image.thumb }}" alt="" title="" id="product-image-{{ image_row }}" data-oc-placeholder="{{ placeholder }}" class="card-img-top"/> <input type="hidden" name="product_image[{{ image_row }}][image]" value="{{ product_image.image }}" id="input-product-image-{{ image_row }}"/>
                              <div class="card-body">
                                <button type="button" data-oc-toggle="image" data-oc-target="#input-product-image-{{ image_row }}" data-oc-thumb="#product-image-{{ image_row }}" class="btn btn-primary btn-block"><i class="fa-solid fa-pencil"></i> {{ button_edit }}</button>
                                <button type="button" data-oc-toggle="clear" data-oc-target="#input-product-image-{{ image_row }}" data-oc-thumb="#product-image-{{ image_row }}" class="btn btn-warning btn-block"><i class="fa-regular fa-trash-can"></i> {{ button_clear }}</button>
                              </div>
                            </div>
                          </td>
                          <td class="text-start"><input type="text" name="product_image[{{ image_row }}][sort_order]" value="{{ product_image.sort_order }}" placeholder="{{ entry_sort_order }}" class="form-control"/></td>
                          <td class="text-end"><button type="button" onclick="$('#product-image-row-{{ image_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                        </tr>
                        {% set image_row = image_row + 1 %}
                      {% endfor %}
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colspan="2"></td>
                        <td class="text-end"><button type="button" id="button-image" data-bs-toggle="tooltip" title="{{ button_image_add }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </fieldset>
            </div>

            <div id="tab-reward" class="tab-pane">
              <fieldset>
                <legend>{{ text_reward }}</legend>
                <div class="row mb-3">
                  <label for="input-points" class="col-sm-2 col-form-label">{{ entry_points }}</label>
                  <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" name="points" value="{{ points }}" placeholder="{{ entry_points }}" id="input-points" class="form-control"/>
                      {% if master_id %}
                        <div class="input-group-text">
                          <div class="form-check form-switch">
                            <input type="checkbox" name="override[points]" value="1" id="input-variant-points" data-oc-toggle="switch" data-oc-target="#input-points" class="form-check-input"{% if override.points %} checked{% endif %}/> <label for="input-variant-points" class="form-check-label"></label>
                          </div>
                        </div>
                      {% endif %}
                    </div>
                    <div class="form-text">{{ help_points }}</div>
                  </div>
                </div>
              </fieldset>
              <fieldset>
                <legend>{{ text_points }}</legend>
                <div class="table-responsive">
                  <table id="product-reward" class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <td class="text-start">{{ entry_customer_group }}</td>
                        <td class="text-end">{{ entry_reward }}&nbsp;&nbsp;
                          {% if master_id %}
                            <div class="form-check form-switch float-end">
                              <input type="checkbox" name="override[product_reward]" value="1" id="input-variant-product-reward" data-oc-toggle="switch" data-oc-target="#product-reward" class="form-check-input"{% if override.product_reward %} checked{% endif %}/> <label for="input-variant-product-reward" class="form-check-label"></label>
                            </div>
                          {% endif %}
                        </td>
                      </tr>
                    </thead>
                    <tbody>
                      {% for customer_group in customer_groups %}
                        <tr>
                          <td class="text-start">{{ customer_group.name }}</td>
                          <td class="text-end"><input type="text" name="product_reward[{{ customer_group.customer_group_id }}][points]" value="{{ product_reward[customer_group.customer_group_id] ? product_reward[customer_group.customer_group_id].points }}" class="form-control"/></td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </fieldset>
            </div>

            <div id="tab-seo" class="tab-pane">
              <div class="alert alert-info"><i class="fa-solid fa-info-circle"></i> {{ text_keyword }}</div>
              <div id="product-seo" class="table-responsive">
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-start">{{ entry_store }}</td>
                      <td class="text-start">{{ entry_keyword }}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for store in stores %}
                      <tr>
                        <td class="text-start">{{ store.name }}</td>
                        <td class="text-start">
                          {% for language in languages %}
                            <div class="input-group">
                              <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
                              <input type="text" name="product_seo_url[{{ store.store_id }}][{{ language.language_id }}]" value="{% if product_seo_url[store.store_id][language.language_id] %}{{ product_seo_url[store.store_id][language.language_id] }}{% endif %}" id="input-keyword-{{ store.store_id }}-{{ language.language_id }}" placeholder="{{ entry_keyword }}" class="form-control"/>
                            </div>
                            <div id="error-keyword-{{ store.store_id }}-{{ language.language_id }}" class="invalid-feedback"></div>
                          {% endfor %}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            <div id="tab-design" class="tab-pane">
              <div class="table-responsive">
                <table id="product-layout" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-start">{{ entry_store }}</td>
                      <td class="text-start">{{ entry_layout }}
                        {% if master_id %}
                          <div class="form-check form-switch float-end">
                            <input type="checkbox" name="override[product_layout]" value="1" id="input-variant-product-layout" data-oc-toggle="switch" data-oc-target="#product-layout" class="form-check-input"{% if override.product_layout %} checked{% endif %}/> <label for="input-variant-product-layout" class="form-check-label"></label>
                          </div>
                        {% endif %}
                      </td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for store in stores %}
                      <tr>
                        <td class="text-start">{{ store.name }}</td>
                        <td class="text-start"><select name="product_layout[{{ store.store_id }}]" class="form-select">
                            <option value=""></option>
                            {% for layout in layouts %}
                              <option value="{{ layout.layout_id }}"{% if product_layout[store.store_id] and product_layout[store.store_id] == layout.layout_id %} selected{% endif %}>{{ layout.name }}</option>
                            {% endfor %}
                          </select></td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>

              </div>
            </div>
            <div id="tab-report" class="tab-pane">
              <fieldset>
                <legend>{{ text_report }}</legend>
                <div id="report">{{ report }}</div>
              </fieldset>
            </div>
          </div>
          <input type="hidden" name="product_id" value="{{ product_id }}" id="input-product-id"/>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('textarea[data-oc-toggle=\'ckeditor\']').ckeditor({
    language: '{{ ckeditor }}'
});

// Manufacturer
$('#input-manufacturer').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/manufacturer.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                json.unshift({
                    manufacturer_id: 0,
                    name: '{{ text_none }}'
                });

                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['manufacturer_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        $('#input-manufacturer').val(item['label']);
        $('#input-manufacturer-id').val(item['value']);
    }
});

// Category
$('#input-category').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/category.autocomplete&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) {
        $('#input-category').val('');

        $('#product-category-' + item['value']).remove();

        html = '<tr id="product-category-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="product_category[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#product-category tbody').append(html);
    }
});

$('#product-category').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

// Filter
$('#input-filter').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/filter.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['filter_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        $('#input-filter').val('');

        $('#product-filter-' + item['value']).remove();

        html = '<tr id="product-filter-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="product_filter[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#product-filter tbody').append(html);
    }
});

$('#product-filter').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

// Downloads
$('#input-download').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/download.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['download_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        $('#input-download').val('');

        $('#product-download-' + item['value']).remove();

        html = '<tr id="product-download-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="product_download[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#product-download tbody').append(html);
    }
});

$('#product-download').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

// Related
$('#input-related').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/product.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['product_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        $('#input-related').val('');

        $('#product-related-' + item['value']).remove();

        html = '<tr id="product-related-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="product_related[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#product-related tbody').append(html);
    }
});

$('#product-related').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

var attributeautocomplete = function (attribute_row) {
    $('#input-attribute-' + attribute_row).autocomplete({
        'source': function (request, response) {
            $.ajax({
                url: 'index.php?route=catalog/attribute.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function (json) {
                    response($.map(json, function (item) {
                        return {
                            category: item.attribute_group,
                            label: item.name,
                            value: item.attribute_id
                        }
                    }));
                }
            });
        },
        'select': function (item) {
            $('#input-attribute-' + attribute_row).val(item['label']);
            $('#input-attribute-id-' + attribute_row).val(item['value']);
        }
    });
}

var attribute_row = {{ attribute_row }};

$('#product-attribute tr').each(function (index) {
    attributeautocomplete(index);
});

$('#button-attribute').on('click', function () {
    html = '<tr id="attribute-row-' + attribute_row + '">';
    html += '  <td class="text-start">';
    html += '    <input type="text" name="product_attribute[' + attribute_row + '][name]" value="" placeholder="{{ entry_attribute|escape('js') }}" id="input-attribute-' + attribute_row + '" data-oc-target="autocomplete-attribute-' + attribute_row + '" class="form-control" autocomplete="off"/>';
    html += '    <input type="hidden" name="product_attribute[' + attribute_row + '][attribute_id]" value="" id="input-attribute-id-' + attribute_row + '"/>';
    html += '    <ul id="autocomplete-attribute-' + attribute_row + '" class="dropdown-menu"></ul>';
    html += '  </td>';
    html += '  <td class="text-start">';
  {% for language in languages %}
    html += '<div class="input-group">';
    html += '  <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name|escape('js') }}" /></div>';
    html += '  <textarea name="product_attribute[' + attribute_row + '][product_attribute_description][{{ language.language_id }}][text]" rows="5" placeholder="{{ entry_text|escape('js') }}" id="input-text-' + attribute_row + '-{{ language.language_id }}" class="form-control"></textarea>';
    html += '</div>';
  {% endfor %}
    html += '  </td>';
    html += '  <td class="text-end"><button type="button" onclick="$(\'#attribute-row-' + attribute_row + '\').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#product-attribute').append(html);

    attributeautocomplete(attribute_row);

    attribute_row++;
});

{% if not master_id %}
var option_row = {{ option_row }};

$('#input-option').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/option.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        category: item['category'],
                        label: item['name'],
                        value: item['option_id'],
                        type: item['type'],
                        option_value: item['option_value']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        html = '<fieldset id="option-row-' + option_row + '">';
        html += '  <legend class="float-none">' + item['label'] + ' <button type="button" class="btn btn-danger float-end" onclick="$(\'#option-row-' + option_row + '\').remove();"><i class="fa-solid fa-minus-circle"></i></button></legend>';
        html += '  <input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
        html += '  <input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
        html += '  <input type="hidden" name="product_option[' + option_row + '][option_id]" value="' + item['value'] + '" />';
        html += '  <input type="hidden" name="product_option[' + option_row + '][type]" value="' + item['type'] + '" />';

        html += '  <div class="row mb-3">';
        html += '    <label for="input-required-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_required|escape('js') }}</label>';
        html += '	   <div class="col-sm-10"><select name="product_option[' + option_row + '][required]" id="input-required-' + option_row + '" class="form-select">';
        html += '	     <option value="1">{{ text_yes|escape('js') }}</option>';
        html += '	     <option value="0">{{ text_no|escape('js') }}</option>';
        html += '	 </select></div>';
        html += '  </div>';

        if (item['type'] == 'text') {
            html += '	<div class="row mb-3">';
            html += '	  <label for="input-option-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_option_value|escape('js') }}</label>';
            html += '	  <div class="col-sm-10"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value|escape('js') }}" id="input-option-' + option_row + '" class="form-control"/></div>';
            html += '	</div>';
        }

        if (item['type'] == 'textarea') {
            html += '	<div class="row mb-3">';
            html += '	  <label for="input-option-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_option_value|escape('js') }}</label>';
            html += '	  <div class="col-sm-10"><textarea name="product_option[' + option_row + '][value]" rows="5" placeholder="{{ entry_option_value|escape('js') }}" id="input-option-' + option_row + '" class="form-control"></textarea></div>';
            html += '	</div>';
        }

        if (item['type'] == 'file') {
            html += '	<div class="row mb-3 d-none">';
            html += '	  <label for="input-option-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_option_value|escape('js') }}</label>';
            html += '	  <div class="col-sm-10 d-none"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value|escape('js') }}" id="input-option-' + option_row + '" class="form-control"/></div>';
            html += '	</div>';
        }

        if (item['type'] == 'date') {
            html += '	<div class="row mb-3">';
            html += '	  <label for="input-option-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_option_value|escape('js') }}</label>';
            html += '	  <div class="col-sm-10 col-md-4"><div class="input-group"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value|escape('js') }}" id="input-option-' + option_row + '" class="form-control date"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></div>';
            html += '	</div>';
        }

        if (item['type'] == 'time') {
            html += '	<div class="row mb-3">';
            html += '	  <label for="input-option-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_option_value|escape('js') }}</label>';
            html += '	  <div class="col-sm-10 col-md-4"><div class="input-group"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value|escape('js') }}" id="input-option-' + option_row + '" class="form-control time"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></div>';
            html += '	</div>';
        }

        if (item['type'] == 'datetime') {
            html += '	<div class="row mb-3">';
            html += '	  <label for="input-option-' + option_row + '" class="col-sm-2 col-form-label">{{ entry_option_value|escape('js') }}</label>';
            html += '	  <div class="col-sm-10 col-md-4"><div class="input-group"><input type="text" name="product_option[' + option_row + '][value]" value="" placeholder="{{ entry_option_value|escape('js') }}" id="input-option-' + option_row + '" class="form-control datetime"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></div>';
            html += '	</div>';
        }

        if (item['type'] == 'select' || item['type'] == 'radio' || item['type'] == 'checkbox' || item['type'] == 'image') {
            html += '<div class="table-responsive">';
            html += '  <table id="option-value-' + option_row + '" class="table table-bordered table-hover">';
            html += '  	 <thead>';
            html += '      <tr>';
            html += '        <td class="text-start">{{ entry_option_value|escape('js') }}</td>';
            html += '        <td class="text-end">{{ entry_quantity|escape('js') }}</td>';
            html += '        <td class="text-start">{{ entry_subtract|escape('js') }}</td>';
            html += '        <td class="text-end">{{ entry_price|escape('js') }}</td>';
            html += '        <td class="text-end">{{ entry_points|escape('js') }}</td>';
            html += '        <td class="text-end">{{ entry_weight|escape('js') }}</td>';
            html += '        <td></td>';
            html += '      </tr>';
            html += '    </thead>';
            html += '    <tbody></tbody>';
            html += '    <tfoot>';
            html += '      <tr>';
            html += '        <td colspan="6"></td>';
            html += '        <td class="text-end"><button type="button" data-option-row="' + option_row + '" data-bs-toggle="tooltip" title="{{ button_option_value_add|escape('js') }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>';
            html += '      </tr>';
            html += '    </tfoot>';
            html += '  </table>';
            html += '</div>';

            html += '  <select id="product-option-values-' + option_row + '" class="d-none">';

            for (i = 0; i < item['option_value'].length; i++) {
                html += '<option value="' + item['option_value'][i]['option_value_id'] + '">' + item['option_value'][i]['name'] + '</option>';
            }

            html += '  </select>';
            html += '</fieldset>';
        }

        $('#option').append(html);

        option_row++;
    }
});

var option_value_row = {{ option_value_row }};

$('#option').on('click', '.btn-primary', function () {
    var element = this;

    if ($(element).attr('data-option-value-row')) {
        element.option_value_row = $(element).attr('data-option-value-row');
    } else {
        element.option_value_row = option_value_row;
    }

    $('.modal').remove();

    html = '<div id="modal-option" class="modal fade">';
    html += '  <div class="modal-dialog">';
    html += '    <div class="modal-content">';
    html += '      <div class="modal-header">';
    html += '        <h5 class="modal-title"><i class="fa-solid fa-pencil"></i> {{ text_option_value|escape('js') }}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>';
    html += '      </div>';
    html += '      <div class="modal-body">';
    html += '        <div class="mb-3">';
    html += '      	   <label for="input-modal-option-value" class="form-label">{{ entry_option_value|escape('js') }}</label>';
    html += '      	   <select name="option_value_id" id="input-modal-option-value" class="form-select">';

    option_value = $('#product-option-values-' + $(element).attr('data-option-row') + ' option');

    for (i = 0; i < option_value.length; i++) {
        if ($(element).attr('data-option-value-row') && $(option_value[i]).val() == $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][option_value_id]\']').val()) {
            html += '<option value="' + $(option_value[i]).val() + '" selected>' + $(option_value[i]).text() + '</option>';
        } else {
            html += '<option value="' + $(option_value[i]).val() + '">' + $(option_value[i]).text() + '</option>';
        }
    }

    html += '      	   </select>';
    html += '          <input type="hidden" name="product_option_value_id" value="' + ($(element).attr('data-option-value-row') ? $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][product_option_value_id]\']').val() : '') + '"/>';
    html += '        </div>';

    html += '        <div class="mb-3">';
    html += '      	   <label for="input-modal-quantity" class="form-label">{{ entry_quantity|escape('js') }}</label>';
    html += '      	   <input type="text" name="quantity" value="' + ($(element).attr('data-option-value-row') ? $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][quantity]\']').val() : '1') + '" placeholder="{{ entry_quantity|escape('js') }}" id="input-modal-quantity" class="form-control"/>';
    html += '        </div>';

    html += '        <div class="mb-3">';
    html += '      	   <label for="input-modal-subtract" class="form-label">{{ entry_subtract|escape('js') }}</label>';
    html += '      	   <select name="subtract" id="input-modal-subtract" class="form-select">';

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][subtract]\']').val() == '1') {
        html += '        <option value="1" selected>{{ text_yes|escape('js') }}</option>';
        html += '      	 <option value="0">{{ text_no|escape('js') }}</option>';
    } else {
        html += '      	 <option value="1">{{ text_yes|escape('js') }}</option>';
        html += '      	 <option value="0" selected>{{ text_no|escape('js') }}</option>';
    }

    html += '      	   </select>';
    html += '        </div>';

    html += '        <div class="mb-3">';
    html += '      	   <label for="input-modal-price" class="form-label">{{ entry_price|escape('js') }}</label>';
    html += '          <div class="input-group">';
    html += '            <select name="price_prefix" class="form-select">';

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][price_prefix]\']').val() == '+') {
        html += '      	   <option value="+" selected>+</option>';
    } else {
        html += '      	   <option value="+">+</option>';
    }

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][price_prefix]\']').val() == '-') {
        html += '      	       <option value="-" selected>-</option>';
    } else {
        html += '      	       <option value="-">-</option>';
    }

    html += '      	     </select>';
    html += '      	     <input type="text" name="price" value="' + ($(element).attr('data-option-value-row') ? $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][price]\']').val() : '0') + '" placeholder="{{ entry_price|escape('js') }}" id="input-modal-price" class="form-control"/>';
    html += '          </div>';
    html += '        </div>';

    html += '        <div class="mb-3">';
    html += '      	   <label for="input-modal-points" class="form-label">{{ entry_points|escape('js') }}</label>';
    html += '          <div class="input-group">';
    html += '      	     <select name="points_prefix" class="form-select">';

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][points_prefix]\']').val() == '+') {
        html += '      	       <option value="+" selected>+</option>';
    } else {
        html += '      	       <option value="+">+</option>';
    }

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][points_prefix]\']').val() == '-') {
        html += '      	       <option value="-" selected>-</option>';
    } else {
        html += '      	       <option value="-">-</option>';
    }

    html += '      	     </select>';
    html += '      	     <input type="text" name="points" value="' + ($(element).attr('data-option-value-row') ? $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][points]\']').val() : '0') + '" placeholder="{{ entry_points|escape('js') }}" id="input-modal-points" class="form-control"/>';
    html += '          </div>';
    html += '        </div>';

    html += '        <div class="mb-3">';
    html += '      	   <label for="input-modal-weight" class="form-label">{{ entry_weight|escape('js') }}</label>';
    html += '          <div class="input-group">';
    html += '      	     <select name="weight_prefix" class="form-select">';

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][weight_prefix]\']').val() == '+') {
        html += '      	       <option value="+" selected>+</option>';
    } else {
        html += '      	       <option value="+">+</option>';
    }

    if ($(element).attr('data-option-value-row') && $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][weight_prefix]\']').val() == '-') {
        html += '      	       <option value="-" selected>-</option>';
    } else {
        html += '      	       <option value="-">-</option>';
    }

    html += '      	     </select>';
    html += '      	     <input type="text" name="weight" value="' + ($(element).attr('data-option-value-row') ? $('input[name=\'product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][weight]\']').val() : '0') + '" placeholder="{{ entry_weight|escape('js') }}" id="input-modal-weight" class="form-control"/>';
    html += '          </div>';
    html += '        </div>';

    html += '      </div>';

    html += '      <div class="modal-footer">';
    html += '	     <button type="button" id="button-save" data-option-row="' + $(element).attr('data-option-row') + '" data-option-value-row="' + element.option_value_row + '" class="btn btn-primary">{{ button_save|escape('js') }}</button> <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ button_cancel|escape('js') }}</button>';
    html += '      </div>';
    html += '    </div>';
    html += '  </div>';
    html += '</div>';

    $('body').append(html);

    $('#modal-option').modal('show');

    $('#modal-option #button-save').on('click', function () {
        html = '<tr id="option-value-row-' + element.option_value_row + '">';
        html += '  <td class="text-start">' + $('#modal-option select[name=\'option_value_id\'] option:selected').text() + '<input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][option_value_id]" value="' + $('#modal-option select[name=\'option_value_id\']').val() + '"/><input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][product_option_value_id]" value="' + $('#modal-option input[name=\'product_option_value_id\']').val() + '"/></td>';
        html += '  <td class="text-end">' + $('#modal-option input[name=\'quantity\']').val() + '<input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][quantity]" value="' + $('#modal-option input[name=\'quantity\']').val() + '"/></td>';
        html += '  <td class="text-start">' + ($('#modal-option select[name=\'subtract\'] option:selected').val() == '1' ? '{{ text_yes|escape('js') }}' : '{{ text_no|escape('js') }}') + '<input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][subtract]" value="' + $('#modal-option select[name=\'subtract\'] option:selected').val() + '"/></td>';
        html += '  <td class="text-end">' + $('#modal-option select[name=\'price_prefix\'] option:selected').val() + $('#modal-option input[name=\'price\']').val() + '<input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][price_prefix]" value="' + $('#modal-option select[name=\'price_prefix\'] option:selected').val() + '"/><input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][price]" value="' + $('#modal-option input[name=\'price\']').val() + '"/></td>';
        html += '  <td class="text-end"> ' + $('#modal-option select[name=\'points_prefix\'] option:selected').val() + $('#modal-option input[name=\'points\']').val() + '<input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][points_prefix]" value="' + $('#modal-option select[name=\'points_prefix\'] option:selected').val() + '"/><input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][points]" value="' + $('#modal-option input[name=\'points\']').val() + '"/></td>';
        html += '  <td class="text-end">' + $('#modal-option select[name=\'weight_prefix\'] option:selected').val() + $('#modal-option input[name=\'weight\']').val() + '<input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][weight_prefix]" value="' + $('#modal-option select[name=\'weight_prefix\'] option:selected').val() + '"/><input type="hidden" name="product_option[' + $(element).attr('data-option-row') + '][product_option_value][' + element.option_value_row + '][weight]" value="' + $('#modal-option input[name=\'weight\']').val() + '"/></td>';
        html += '  <td class="text-end"><button type="button" data-bs-toggle="tooltip" title="{{ button_edit|escape('js') }}" data-option-row="' + $(element).attr('data-option-row') + '" data-option-value-row="' + element.option_value_row + '"class="btn btn-primary"><i class="fa-solid fa-pencil"></i></button> <button type="button" onclick="$(\'#option-value-row-' + element.option_value_row + '\').remove();" data-bs-toggle="tooltip" rel="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        if ($(element).attr('data-option-value-row')) {
            $('#option-value-row-' + element.option_value_row).replaceWith(html);
        } else {
            $('#option-value-' + $(element).attr('data-option-row')).append(html);

            option_value_row++;
        }

        $('#modal-option').modal('hide');
    });
});
{% endif %}

var discount_row = {{ discount_row }};

$('#button-discount').on('click', function () {
    html = '<tr id="discount-row-' + discount_row + '">';
    html += '  <td class="text-start"><select name="product_discount[' + discount_row + '][customer_group_id]" class="form-select">';
  {% for customer_group in customer_groups %}
    html += '    <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name|escape('js') }}</option>';
  {% endfor %}
    html += '  </select><input type="hidden" name="product_discount[' + discount_row + '][product_discount_id]" value=""/></td>';
    html += '  <td class="text-end"><input type="text" name="product_discount[' + discount_row + '][quantity]" value="" placeholder="{{ entry_quantity|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><input type="text" name="product_discount[' + discount_row + '][priority]" value="" placeholder="{{ entry_priority|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><input type="text" name="product_discount[' + discount_row + '][price]" value="" placeholder="{{ entry_price|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-start"><div class="input-group"><input type="text" name="product_discount[' + discount_row + '][date_start]" value="" placeholder="{{ entry_date_start|escape('js') }}" class="form-control date"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></td>';
    html += '  <td class="text-start"><div class="input-group"><input type="text" name="product_discount[' + discount_row + '][date_end]" value="" placeholder="{{ entry_date_end|escape('js') }}" class="form-control date"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></td>';
    html += '  <td class="text-end"><button type="button" onclick="$(\'#discount-row-' + discount_row + '\').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#product-discount tbody').append(html);

    discount_row++;
});

var special_row = {{ special_row }};

$('#button-special').on('click', function () {
    html = '<tr id="special-row-' + special_row + '">';
    html += '  <td class="text-start"><select name="product_special[' + special_row + '][customer_group_id]" class="form-select">';
  {% for customer_group in customer_groups %}
    html += '      <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name|escape('js') }}</option>';
  {% endfor %}
    html += '  </select><input type="hidden" name="product_special[' + special_row + '][product_special_id]" value=""/></td>';
    html += '  <td class="text-end"><input type="text" name="product_special[' + special_row + '][priority]" value="" placeholder="{{ entry_priority|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><input type="text" name="product_special[' + special_row + '][price]" value="" placeholder="{{ entry_price|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-start"><div class="input-group"><input type="text" name="product_special[' + special_row + '][date_start]" value="" placeholder="{{ entry_date_start|escape('js') }}" class="form-control date"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></td>';
    html += '  <td class="text-start"><div class="input-group"><input type="text" name="product_special[' + special_row + '][date_end]" value="" placeholder="{{ entry_date_end|escape('js') }}" class="form-control date"/><div class="input-group-text"><i class="fa-regular fa-calendar"></i></div></div></td>';
    html += '  <td class="text-end"><button type="button" onclick="$(\'#special-row-' + special_row + '\').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#product-special tbody').append(html);

    special_row++;
});

var image_row = {{ image_row }};

$('#button-image').on('click', function () {
    html = '<tr id="product-image-row-' + image_row + '">';
    html += '  <td><div class="card image">';
    html += '    <img src="{{ placeholder|escape('js') }}" alt="" title="" id="thumb-image-' + image_row + '" data-oc-placeholder="{{ placeholder|escape('js') }}" class="card-img-top"/> <input type="hidden" name="product_image[' + image_row + '][image]" value="" id="input-product-image-' + image_row + '"/>';
    html += '    <div class="card-body">';
    html += '      <button type="button" data-oc-toggle="image" data-oc-target="#input-product-image-' + image_row + '" data-oc-thumb="#thumb-image-' + image_row + '" class="btn btn-primary btn-sm btn-block"><i class="fa-solid fa-pencil"></i> {{ button_edit|escape('js') }}</button>';
    html += '      <button type="button" data-oc-toggle="clear" data-oc-target="#input-product-image-' + image_row + '" data-oc-thumb="#thumb-image-' + image_row + '" class="btn btn-warning btn-sm btn-block"><i class="fa-regular fa-trash-can"></i> {{ button_clear|escape('js') }}</button>';
    html += '    </div>';
    html += '  </div></td>';
    html += '  <td class="text-start"><input type="text" name="product_image[' + image_row + '][sort_order]" value="0" placeholder="{{ entry_sort_order|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><button type="button" onclick="$(\'#product-image-row-' + image_row + '\').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#product-image tbody').append(html);

    image_row++;
});

var subscription_row = {{ subscription_row }};

$('#button-subscription').on('click', function () {
    html = '<tr id="subscription-row-' + subscription_row + '">';
    html += '  <td class="text-start"><select name="product_subscription[' + subscription_row + '][subscription_plan_id]" class="form-select">';
  {% for subscription_plan in subscription_plans %}
    html += '      <option value="{{ subscription_plan.subscription_plan_id }}">{{ subscription_plan.name|escape('js') }}</option>';
  {% endfor %}
    html += '  </select></td>';
    html += '  <td class="text-start"><select name="product_subscription[' + subscription_row + '][customer_group_id]" class="form-select">';
  {% for customer_group in customer_groups %}
    html += '      <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name|escape('js') }}</option>';
  {% endfor %}
    html += '  <select></td>';
    html += '  <td class="text-end"><input type="text" name="product_subscription[' + subscription_row + '][trial_price]" value="" placeholder="{{ entry_trial_price|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><input type="text" name="product_subscription[' + subscription_row + '][price]" value="" placeholder="{{ entry_price|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><button type="button" onclick="$(\'#subscription-row-' + subscription_row + '\').remove()" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#product-subscription tbody').append(html);

    subscription_row++;
});

{% if master_id %}
// Variable products
$('input[data-oc-toggle=\'switch\']').on('change', function (e) {
    var element = this;

    var target = $(this).attr('data-oc-target');

    // First we need to grab the default values
    // Now we need to enable or disable any fields in the targets
    $.merge($(target), $(target).find('input, textarea, select, button')).not('[data-oc-toggle=\'switch\']').each(function (i, elem) {
        // Text Textarea
        if ($(this).is('input[type=\'text\'], textarea')) {
            $(this).prop('readonly', !$(element).prop('checked'));
        }

        // CKEditor readonly
        if ($(this).is('[data-oc-toggle=\'ckeditor\']')) {
            var editor = CKEDITOR.instances[$(this).attr('id')];

            if (editor.editable() == undefined) {
                editor.on('instanceReady', function () {
                    this.setReadOnly(!$(element).prop('checked'));
                });
            } else {
                editor.setReadOnly(!$(element).prop('checked'));
            }
        }

        // Radio Checkbox
        if ($(this).is('input[type=\'radio\'], input[type=\'checkbox\'], div[data-bs-toggle=\'buttons\']')) {
            if (!$(element).prop('checked')) {
                $(this).on('click', function (e) {
                    return false;
                });
            } else {
                $(this).off('click');
            }
        }

        // Select
        if ($(this).is('select')) {
            if (!$(element).prop('checked')) {
                $(this).addClass('.disabled');

                $(this).prop('readonly', true);
            } else {
                $(this).removeClass('disabled');

                $(this).prop('readonly', false);
            }

            $(this).find('option').not(':selected').prop('disabled', !$(element).prop('checked'));
        }

        // Button
        if ($(this).is('button')) {
            if (!$(element).prop('checked')) {
                $(this).prop('disabled', true);
            } else {
                $(this).prop('disabled', false);
            }
        }
    });
});

$('input[data-oc-toggle=\'switch\']').trigger('change');
{% endif %}

$('#report').on('click', '.pagination a', function (e) {
    e.preventDefault();

    $('#report').load(this.href);
});
//--></script>
{{ footer }}
