{% extends 'base/module.twig' %}

{% block content %}

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-8">
        <div class="content-box preview-container">

          <base-card>

            <div class="padding-large">
              <div v-show="Object.keys(selectedVisual).length !== 0" class="bottom-padding-large">
                <span class="text-large text-dark text-bold left-margin-large">Pré-visualização</span>
              </div>
              <div v-show="Object.keys(selectedVisual).length === 0" class="padding-x-small center">
                <span class="text-large text-gray">Escolha um item para personalizar</span>
              </div>

              {# Desenha a Barra de Pesquisa em Tempo Real pra ver as alterações #}
              <div v-show="selectedVisual === visual[0]" class="container-fluid vertical-padding-small">
                <div class="content-box">
                  <div class="rel full-width visible-inline-block" >
                    <label class="search-bar-container"
                      :style="'border-radius: ' + (configurations.searchbar_form == this['Type_SearchBarForm'].Retangular ? '0.25rem' : '30px' ) + ';'"
                    >
                      <input type="text" name="search" autocomplete="off" placeholder="{{ text_search_placeholder }}"
                             class="search-bar-input"
                             :style="configurations.searchbar_form == this['Type_SearchBarForm'].Retangular ? '' : 'border-radius: 25px;'"
                             style="padding: 0.75rem; border: 0"
                             readonly
                      />
                      <button type="button" class="btn-default btn-small-square"
                                  :style="'background-color: ' + (configurations.searchbar_button_background == this['Type_SearchBarButtonBackground'].Padrao ? wg24_header_btsearch : '#ffffff') + ';'
                                  + 'color: ' + (configurations.searchbar_button_background == this['Type_SearchBarButtonBackground'].Padrao ? wg24_icon_btnsearch_color : '#000000') + ';'
                                  + 'border-radius: ' + (configurations.searchbar_form == this['Type_SearchBarForm'].Retangular ? '0.25rem' : '30px' ) + ';'"
                              style="position: absolute; top: 3px; right: 4px">
                        <i class="fas fa-search" aria-hidden="true"></i>
                      </button>
                    </label>
                  </div>
                </div>
              </div>

              {# Desenha o Box de Produtos em Tempo Real pra ver as alterações #}
              {# Manterei a maior parte do código mesmo usando valores fixos do produto, porque se um dia a gente for
                colocar uma config nova, ja tem a regra pra alteração do visual #}
              <div v-show="selectedVisual === visual[1]" class="reset container-fluid">
                  <div class="rel"
                       :style="'max-width:' + (configurations.wg24_productbox_size == this['Type_Tamanho'].Tp_Grande ? '280px' : '225px')">
                    <div :class="'item-column' +  (configurations.wg24_productbox_size == this['Type_Tamanho'].Tp_Grande ? ' item-column--large' : '' ) + ' no-padding'">
                      <div :class="configurations.wg24_productbox_border == this['Type_DsimDnao'].Tp_Sim ? 'shadow-small' : ''"
                           style="background-color: {{ wg24_product_bx_bgclr }};
                                  border: 1px solid {{ wg24_product_bx_bdrclr }};
                                  padding: 16px">
                        <div class="rel itembox-image-link full-width" {{ product.ratio }}>
                          <div class="itembox-tags">
                            <div v-show="configurations.wg24_futura_prod_exibe_selo == this['Type_Status'].Tp_Habilitado" class="itembox-new-product">
                              <span>{{ text_novo_selo }}</span>
                            </div>
                            {% if product.price %}
                              {% if not product.aviseme %}
                                {% if product.title_promotion %}
                                  <div v-show="configurations.wg24_l_sale_icon_style == 'square' && product.special" class="itembox-sale-label-title"
                                    style="color: {{ wg24_product_box_sale_nicontcolor }};
                                           background-color: {{ wg24_product_box_sicon_bgcolor }}">
                                    {{ product.title_promotion }}
                                  </div>
                                {% endif %}
                                <div v-show="product.special"
                                     class="itembox-sale-label {{ itembox_sale_label }}"
                                     style="color: {{ wg24_product_box_sale_nicontcolor }};
                                            background-color: {{ wg24_product_box_sicon_bgcolor }}">
                                  {{ product.porcentagemDesconto }}
                                </div>
                              {% endif %}
                            {% endif %}
                          </div>

                          {% if futura_habilita_lista_desejos %}
                            <button type="button"
                                    title="{{ (product.in_wishlist is defined and product.in_wishlist) ? 'Remover da lista de desejos' : button_wishlist }}"
                                    data-product-id="{{ product.product_id }}"
                                    class="itembox-btn text-small btn-wishlist"
                                    style="
                                      position: absolute;
                                      right: -2px;
                                      top: -4px;
                                      background: transparent;
                                      padding: 4px;
                                    ">
                              <i class="{{ (product.in_wishlist is defined and product.in_wishlist) ? 'fas' : 'far' }} fa-heart"></i>
                            </button>
                          {% endif %}

                          {% if product.thumb %}
                            <picture v-show="configurations.wg24_prod_efec_img == this['Type_EfeitoImagem'].Tp_Padrao">
                              <source class="load-image" srcset="{{ product.thumb }}"
                                      data-src="{{ product.thumb }}">
                              <img class="load-image full-width" src="{{ product.thumb }}" data-src="{{ product.thumb }}"
                                   alt="{{ product.name }}">
                            </picture>

                            <picture v-show="configurations.wg24_prod_efec_img == this['Type_EfeitoImagem'].Tp_MultiplasImgs">
                              <source class="load-image" srcset="{{ product.thumb }}"
                                      data-src="{{ product.thumb }}">
                              <img class="itembox-primary-image load-image full-width" src="{{ product.thumb }}" data-src="{{ product.thumb }}"
                                   alt="{{ product.name }}">
                            </picture>
                            <picture v-show="configurations.wg24_prod_efec_img == this['Type_EfeitoImagem'].Tp_MultiplasImgs">
                              <source class="load-image" srcset="{{ product.image_extra }}"
                                      data-src="{{ product.image_extra }}">
                              <img class="itembox-secondary-image load-image full-width" src="{{ product.image_extra }}"
                                   data-src="{{ product.image_extra }}" alt="{{ product.name }}">
                            </picture>
                          {% endif %}

                          {% if not product.aviseme %}
                            <button
                              v-show="configurations.wg24_quick === this['Type_StatusEn'].Tp_Enable"
                              type="button"
                              class="btn-default btn-small-square shadow-medium itembox-btn-detail"
                              style="
                                background-color: {{ wg24_btn_1bg_col }};
                                color: {{ wg24_btn_text_col }};
                                position: absolute;">
                              <i class="fas fa-search" aria-hidden="true"></i>
                            </button>
                          {% endif %}
                        </div>

                        <div class="itembox-content">
                          <div class="itembox-inner">
                            {{ (product.model) ?
                            '<span class="itembox-model"
                              style="
                                color: ' ~ wg24_l_linkc ~';
                                font-size: 12px;
                            ">' ~ text_code ~ product.model ~ '</span>' : '' }}

                            <h3 class="itembox-title {{ product.class_one_line }} box-product-name"
                              style="color: {{ wg24_product_box_n_col }};">
                              {{ product.name }}
                            </h3>

                            <div class="itembox-price full-width">
                              <span class="itembox-single-price">
                                {{ product.price }}
                              </span>
                            </div>
                          </div>

                          <div class="itembox-actions">
                            {% if productBoxButton %}
                              {% if product.aviseme %}
                                {{ product.aviseme }}
                              {% else %}
                                <div class="flex nowrap-xs full-width">
                                  {% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}
                                    <div class="itembox-quantity-control"
                                         data-fator="{{ product.fator_multiplicador }}"
                                         style="
                                            display: -webkit-box;
                                            display: -webkit-flex;
                                            display: -ms-flexbox;
                                            display: flex;
                                            max-width: 122px;
                                         ">
                                      <button class="itembox-btn btn-down" type="button"
                                        style="color: {{ wg24_l_linkc }};">
                                        <i aria-hidden="true" class="fas fa-minus"></i>
                                      </button>
                                      <input type="text" name="quantity" size="1" maxlength="4"
                                             value="{{ product.quantity_initial }}"
                                             class="numeric input-text quantity"
                                             readonly/>
                                      <button class="itembox-btn btn-up" type="button"
                                        style="color: {{ wg24_l_linkc }};">
                                        <i aria-hidden="true" class="fas fa-plus"></i>
                                      </button>
                                    </div>
                                  {% else %}
                                    <input type="hidden" name="quantity" size="2"
                                           value="{{ product.fator_multiplicador }}"/>
                                  {% endif %}

                                  <button
                                    type="button"
                                    class="itembox-btn btn-default btn-medium-square btn-cart"
                                    title="{{ text_buy }}"
                                    style="
                                      background-color: {{ wg24_btn_1bg_col }};
                                      color: {{ wg24_btn_text_col }};
                                    "
                                  >
                                    <i :class="configurations.icon_cart"></i>
                                    <span>{{ (productBoxButton == typeProductBoxButton.Tp_QuantityAndButton) ? '' : text_buy }}</span>
                                  </button>

                                  {% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}
                                    <span
                                      class="btn-cart-notification {% if product.notification_value %} have-in-cart{% endif %}"
                                    >
                                    </span>
                                  {% endif %}
                                </div>
                              {% endif %}
                            {% endif %}

                            {% if futura_habilita_lista_comparacao and product.aviseme is empty %}
                              <label class="checkbox checkbox-medium itembox-compare-control">
                                <input class="checkbox-entry"
                                       type="checkbox"
                                       disabled>
                                <span class="checkbox-text" style="color: #0d0d0d">{{ text_compare_list }}</span>
                              </label>
                            {% endif %}
                          </div>
                        </div>
                      </div>

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

              {# Icones #}
              <div v-show="selectedVisual === visual[2]" class="container-fluid vertical-padding-small">
                <span class="text-medium text-dark visible-block bottom-margin-x-small">Carrinho</span>
                <div class="padding-small visible-inline-block"
                     style="color: {{ wg24_link_color_stick }}; background-color: {{ wg24_header_bg_color }};
                            border: 1px solid grey; border-radius: 10px;">
                  <i :class="'fas ' + configurations.icon_cart + ' text-x-large'"></i>
                </div>
              </div>

              {# Listas de Produtos #}
              <div v-show="selectedVisual === visual[3]" class="container-fluid vertical-padding-small">
                <span class="text-medium text-dark visible-block bottom-margin-x-small">Estilo do Título</span>
                <div class="vertical-padding-medium horizontal-padding-medium"
                     style="border: 1px solid grey; background-color: {{ wg24_l_bodyb }};">
                  <div>
                    <div class="flex flex-row nowrap-xs between-xs middle-xs center-xs rel">
                      <h2 :class="'flex-1 '
                        + (configurations.product_list_title_style == this['Type_ProductListTitleStyle'].Left ? '' : ' text-center ')
                        + (configurations.product_list_title_style == this['Type_ProductListTitleStyle'].CenterWithLines ? ' product-list-title ' : '')"
                      >
                        <span
                          style="font-size: 1.5rem; line-height: {{ title_page.desktop.line_height }};
                            font-family: {{ product_list_title_style_font_family }}; text-transform: {{ wg24_heading_transfrom }};
                            color: {{ wg24_l_header_color }}; font-weight: normal;">
                          Título de Exemplo
                        </span>
                      </h2>
                      <span v-show="configurations.product_list_title_style == this['Type_ProductListTitleStyle'].Left " class="text-medium cursor-pointer" style="color: #2e55a3">Ver todos</span>
                    </div>
                  </div>
                </div>
              </div>

              {# Listas de Produtos #}
              <div v-show="selectedVisual === visual[4]" class="container-fluid vertical-padding-small">
                <span class="text-medium text-dark visible-block bottom-margin-x-small">Posição do logo</span>
                <div class="vertical-padding-medium horizontal-padding-medium"
                     style="border: 1px solid grey; background-color: {{ wg24_l_bodyb }};">
                  <div>
                    <div class="row middle-xs between-xs small-space-xs">
                      <div :class="'col-xs-12 ' + (configurations.header_logo_position == this['Type_HeaderLogoPosition'].Left ? 'col-md-width-auto' : 'col-md-12 center')">
                        <picture>
                          <img src="{{ logo|replace({'%20': ' '}) }}"  height="40">
                        </picture>
                      </div>
                      <div class="col-xs-12 col-sm hidden-sm-down border-gray">
                        <span class="visible-block center" style="color: {{ wg24_l_header_color }}">Barra de Pesquisa</span>
                      </div>
                      <div class="col-xs-12 col-sm-width-auto border-gray left-margin-small">
                        <span class="visible-block center" style="color: {{ wg24_l_header_color }}">Conta e carrinho</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {# Carrinho de Compras #}
              <div v-show="selectedVisual === visual[5]" class="container-fluid vertical-padding-small">
                <div class=" rel padding-large col-xs-12 col-sm-9 col-md-6"
                     style="background-color: {{ wg24_product_bx_bgclr }};
                           border: 1px solid {{ wg24_product_bx_bdrclr }};">
                  <button v-if="configurations.cart_continue_button == this['Type_Status'].Tp_Habilitado"
                          type="button"
                          title="{{ text_button_continue }}"
                          class="bottom-margin-medium btn-default btn-large btn-full"
                          style="background-color: {{ wg24_btn_1bg_col }}; color: {{ wg24_btn_text_col }};"
                  >
                    <span>{{ text_button_continue }}</span>
                  </button>

                  <button type="button" title="{{ text_button_checkout }}"
                          class="btn-default btn-large btn-full"
                          style="background-color: {{ wg24_finalizar_carrinho }} ; color: {{ wg24_finalizar_carrinho_texto }};"
                  >
                    <span>{{ text_button_checkout }}</span>
                  </button>

                </div>
              </div>

            </div>

          </base-card>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="content-box">
          <base-card>

            <div v-show="Object.keys(selectedVisual).length === 0" class="vertical-padding-small">
              <div
                v-for="(item, index) in visual"
                class="flex flex-row between-xs middle-xs text-medium text-dark padding-medium cursor-pointer hover:background-gray"
                @click="selectedVisual = item"
                :key="item.group">
                <span class="text-medium text-dark text-bold">{item.group}</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div v-show="Object.keys(selectedVisual).length > 0">
              <div class="flex flex-row middle-xs bottom-border-gray padding-x-small">
                <base-button
                  apperance="white"
                  square
                  @click.native="selectedVisual = {}">
                  <i class="fas fa-chevron-left"></i>
                </base-button>
                <span class="text-medium text-dark text-bold left-margin-small">{selectedVisual.group}</span>
              </div>

              <div class="padding-large">
                <div class="bottom-margin-large" v-for="field in selectedVisual.fields">

                  <base-select
                    v-if="['select'].includes(field.type)"
                    :name="field.name"
                    :id="field.name"
                    :label="field.label"
                    :description="field.description"
                    v-model="configurations[field.name]">
                    <option
                      v-for="(value, key) in  getTypeEnumList(`${field.name}`, `${field.options}`, `${field.customOptions}`)  "
                      :value="key">{ value }
                    </option>
                  </base-select>

                  <base-input
                    v-if="!['select'].includes(field.type)"
                    :key="field.name"
                    :type="field.type"
                    :name="field.name"
                    :id="field.name"
                    :label="field.label"
                    :description="field.description"
                    :mask="field.mask"
                    v-model="configurations[field.name]">
                  </base-input>
                </div>
              </div>

            </div>
          </base-card>
        </div>
      </div>
    </div>
  </div>

{% endblock %}