{#**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 *#}
<div role="tabpanel" class="form-contenttab tab-pane active" id="step1">
  <div class="container-fluid">
    <div
      class="row">

      {# LEFT #}
      <div class="col-md-9 left-column">

        <div id="js_form_step1_inputPackItems">
          {{ form_errors(formPackItems) }}
          {{ form_widget(formPackItems) }}
        </div>

        <div id="product-images-container" class="mb-4">
          <div id="product-images-dropzone" class="panel dropzone ui-sortable col-md-12" 
               url-upload="{{ path('admin_product_image_upload', {'idProduct': productId}) }}" 
               url-position="{{ path('admin_product_image_positions') }}" 
               data-max-size="{{ configuration('PS_LIMIT_UPLOAD_IMAGE_VALUE') }}">
            <div id="product-images-dropzone-error" class="text-danger"></div>
            <div class="dz-default dz-message openfilemanager">
              <i class="material-icons">add_a_photo</i><br/>
              {{js_translatable['Drop images here']}}<br/>
              <a>{{js_translatable['or select files']}}</a><br/>
              <small>
                {{js_translatable['files recommandations']}}<br/>
                {{js_translatable['files recommandations2']}}
              </small>
            </div>
            {% if images is defined %}
              {% if editable %}
                <div class="dz-preview disabled openfilemanager">
                  <div>
                    <span>+</span>
                  </div>
                </div>
              {% endif %}
              {% for image in images %}
                <div class="dz-preview dz-processing dz-image-preview dz-complete ui-sortable-handle" data-id="{{ image.id }}" 
                     url-delete="{{ path('admin_product_image_delete', {'idImage': image.id}) }}" 
                     url-update="{{ path('admin_product_image_form', {'idImage': image.id}) }}">
                  <div class="dz-image bg" style="background-image: url('{{ image.base_image_url }}-home_default.{{ image.format }}');"></div>
                  <div class="dz-details">
                    <div class="dz-size">
                      <span data-dz-size=""></span>
                    </div>
                    <div class="dz-filename">
                      <span data-dz-name=""></span>
                    </div>
                  </div>
                  <div class="dz-progress">
                    <span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
                  </div>
                  <div class="dz-error-message">
                    <span data-dz-errormessage=""></span>
                  </div>
                  <div class="dz-success-mark"></div>
                  <div class="dz-error-mark"></div>
                  {% if image.cover %}
                    <div class="iscover">{{ 'Cover'|trans({}, 'Admin.Catalog.Feature') }}</div>
                  {% endif %}
                </div>
              {% endfor %}
            {% endif %}
          </div>
          <div id="product-images-form-container" class="col-md-4">
            <div id="product-images-form"></div>
          </div>
          <div class="dropzone-expander text-sm-center col-md-12">
            <span class="expand">{{ 'View all images'|trans({}, 'Admin.Catalog.Feature') }}</span>
            <span class="compress">{{ 'View less'|trans({}, 'Admin.Catalog.Feature') }}</span>
          </div>

        </div>

        <div class="summary-description-container">
          <h2>{{ 'Summary'|trans({}, 'Admin.Catalog.Feature') }}</h2>
          <div id="description_short" class="mb-3">
            {{ form_widget(formShortDescription) }}
          </div>

          <h2>{{ 'Description'|trans({}, 'Admin.Global') }}</h2>
          <div id="description" class="mb-3">
            {{ form_widget(formDescription) }}
          </div>
        </div>

        {{ renderhook('displayAdminProductsMainStepLeftColumnMiddle', { 'id_product': productId }) }}

        <div id="features" class="mb-3">
          <div id="features-content" class="content {{ formFeatures|length == 0 ? 'hide':'' }}">
            <h2>{{ 'Features'|trans({}, 'Admin.Catalog.Feature') }}</h2>
            {{ form_errors(formFeatures) }}
            <div class="feature-collection nostyle" data-prototype="{% apply escape %} {{ include('@Product/ProductPage/Forms/form_feature.html.twig', { 'form': formFeatures.vars.prototype }) }} {% endapply %}">
              {% for feature in formFeatures %}
                {{ include('@Product/ProductPage/Forms/form_feature.html.twig', { 'form': feature }) }}
              {% endfor %}
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <button type="button" class="btn btn-outline-primary sensitive add" id="add_feature_button">
                <i class="material-icons">add_circle</i>
                {{ 'Add a feature'|trans({}, 'Admin.Catalog.Feature') }}</button>
            </div>
          </div>
        </div>

        <div id="manufacturer" class="mb-3">
          {{ include('@Product/ProductPage/Forms/form_manufacturer.html.twig', { 'form': formManufacturer }) }}
        </div>

        <div id="related-product" class="mb-3">
          {{ include('@Product/ProductPage/Forms/form_related_products.html.twig', { 'form': formRelatedProducts }) }}
        </div>

        {{ renderhook('displayAdminProductsMainStepLeftColumnBottom', { 'id_product': productId }) }}

      </div>

      {# RIGHT #}
      <div class="col-md-3 right-column">

        {% if is_combination_active %}
          <div class="form-group mb-3" id="show_variations_selector">
            <h2>
              {{ "Combinations"|trans({}, 'Admin.Catalog.Feature') }}
              <span class="help-box" 
                    data-toggle="popover" 
                    data-content="{{ "Combinations are the different variations of a product, with attributes like its size, weight or color taking different values. Does your product require combinations?"|trans({}, 'Admin.Catalog.Help') }}">
              </span>
            </h2>
            <div class="radio">
              <label>
                <input type="radio" name="show_variations" value="0" {% if not has_combinations %} checked="checked" {% endif %}>
                {{ "Simple product"|trans({}, 'Admin.Catalog.Feature') }}
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="show_variations" value="1" {% if has_combinations %} checked="checked" {% endif %}>
                {{ "Product with combinations"|trans({}, 'Admin.Catalog.Feature') }}
              </label>
              <div id="product_type_combinations_shortcut">
                <span
                  class="small font-secondary">
                  {# First tag [1][/1] is for a HTML link. Second tag [2] is an icon (no closing tag needed). #}
                  {{ "Advanced settings in [1][2]Combinations[/1]"|trans({}, 'Admin.Catalog.Help')|replace({'[1]': '<a href="#tab-step3" onclick="$(\'a[href=\\\'#step3\\\']\').click();" class="btn sensitive px-0">', '[/1]': '</a>', '[2]': '<i class="material-icons">open_in_new</i>'})|raw }}
                </span>
              </div>
            </div>
          </div>
        {% endif %}

        <div class="form-group mb-4">
          <h2>
            {{ "Reference"|trans({}, 'Admin.Catalog.Feature') }}
            <span class="help-box" 
                  data-toggle="popover" 
                  data-content="{{ "Your reference code for this product. Allowed special characters: .-_#\."|trans({}, 'Admin.Catalog.Help') }}">
            </span>
          </h2>
          {{ form_errors(formReference) }}
          <div class="row">
            <div class="col-lg-12" id="product_reference_field">
              {{ form_widget(formReference) }}
            </div>
          </div>
        </div>

        {% if configuration('PS_STOCK_MANAGEMENT') %}
          <div class="form-group mb-4" id="product_qty_0_shortcut_div">
            <h2>
              {{ "Quantity"|trans({}, 'Admin.Catalog.Feature') }}
              <span class="help-box" 
                    data-toggle="popover" 
                    data-content="{{ "How many products should be available for sale?"|trans({}, 'Admin.Catalog.Help') }}">
              </span>
            </h2>
            {{ form_errors(formQuantityShortcut) }}
            <div class="row">
              <div class="col-xl-6 col-lg-12">
                {{ form_widget(formQuantityShortcut) }}
              </div>
            </div>
            <span
              class="small font-secondary">
              {# First tag [1][/1] is for a HTML link. Second tag [2] is an icon (no closing tag needed). #}
              {{ "Advanced settings in [1][2]Quantities[/1]"|trans({}, 'Admin.Catalog.Help')|replace({'[1]': '<a href="#tab-step3" onclick="$(\'a[href=\\\'#step3\\\']\').click();" class="btn sensitive px-0">', '[/1]': '</a>', '[2]': '<i class="material-icons">open_in_new</i>'})|raw }}
            </span>
          </div>
        {% endif %}

        <div class="form-group mb-4">
          <h2>
            {{ "Price"|trans({}, 'Admin.Global') }}
            <span class="help-box" 
                  data-toggle="popover" 
                  data-content="{{ "This is the retail price at which you intend to sell this product to your customers. The tax included price will change according to the tax rule you select."|trans({}, 'Admin.Catalog.Help') }}">
            </span>
          </h2>
          <div class="row">
            <div class="col-md-6">
              <label class="form-control-label">{{ "Tax excluded"|trans({}, 'Admin.Catalog.Feature') }}</label>
              {{ form_widget(formPriceShortcut) }}
              {{ form_errors(formPriceShortcut) }}
            </div>
            <div class="col-md-6 col-offset-md-1">
              <label class="form-control-label">{{ "Tax included"|trans({}, 'Admin.Catalog.Feature') }}</label>
              {{ form_widget(formPriceShortcutTTC) }}
              {{ form_errors(formPriceShortcutTTC) }}
            </div>
            <div class="col-md-12 mt-1">
              <label class="form-control-label">{{ "Tax rule"|trans({}, 'Admin.Catalog.Feature') }}</label>
              {{ render(
                      controller('PrestaShopBundle:Admin/Common:renderField', {
                        'formName': 'step2',
                        'formType': 'PrestaShopBundle\\Form\\Admin\\Product\\ProductPrice',
                        'fieldName': 'id_tax_rules_group',
                        'fieldData' : form.step2.id_tax_rules_group.vars.value
                        }
                      )
                    )
                  }}
            </div>
            <div class="col-md-12">
              <span
                class="small font-secondary">
                {# First tag [1][/1] is for a HTML link. Second tag [2] is an icon (no closing tag needed). #}
                {{ "Advanced settings in [1][2]Pricing[/1]"|trans({}, 'Admin.Catalog.Help')|replace({'[1]': '<a href="#tab-step2" onclick="$(\'a[href=\\\'#step2\\\']\').click();" class="btn sensitive px-0">', '[/1]': '</a>', '[2]': '<i class="material-icons">open_in_new</i>'})|raw }}
              </span>
            </div>
          </div>
          <div class="row hide">
            <div class="col-md-12">
              <label>{{ "Tax rule"|trans({}, 'Admin.Catalog.Feature') }}</label>
            </div>
            <div class="clearfix"></div>
            <div class="col-md-11" id="tax_rule_shortcut"></div>
            <a href="#" onclick="$(this).parent().hide()">&times;</a>
          </div>
        </div>

        <div class="form-group mb-4" id="categories">
          {{ include('@Product/ProductPage/Forms/form_categories.html.twig', { 'form': formCategories, 'productId': productId }) }}
        </div>

        {{ renderhook('displayAdminProductsMainStepRightColumnBottom', { 'id_product': productId }) }}

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