{% 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>

              {# Menu Principal #}
              <div v-show="selectedVisual === visual[6]" class="container-fluid vertical-padding-small">
                <div class="content-box">
                  <div class="rel full-width visible-inline-block"
                       style="background-color: {{ wg24_product_bx_bgclr }};">

                    <nav class="menu js-menu no-margin" style="background-color: {{ wg24_mm_bgcol }}">
                      <div class="menu__mask js-menu__mask" @click="() => document.querySelector('.js-menu').classList.remove('menu--open')"></div>

                      <div class="menu__wrapper js-menu__wrapper between-xs "
                        :style="(configurations.menu_position != this['Type_MenuPosition'].Full ? 'max-width: 500px;' : '')">

                        <!-- Controle do slider -->
                        <div class="menu__item menu__item--prev js-menu__item--prev" @click="prevMenu"
                             :style="((configurations.menu_divider == this['Type_Status'].Tp_Habilitado) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
                          <div class="menu__content">
                            <i class="menu__icon fas fa-angle-left"></i>
                          </div>
                        </div>

                        <div class="menu__container js-menu__container"
                             :style="((configurations.menu_divider == this['Type_Status'].Tp_Habilitado) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">


                          <div v-if="configurations.wg24_main_menu_link_home == this['Type_StatusEn'].Tp_Enable" class="menu__item js-menu__item"
                               :style="((configurations.menu_divider == this['Type_Status'].Tp_Habilitado) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
                            <a class="menu__content" href="" @click="(e) => e.preventDefault()" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none', }" >
                              <i v-if="configurations.wg24_main_menu_link_home_display == this['Type_MenuLinkHomeDisplay'].Icon" class="menu__icon fas fa-home hidden-sm-down"></i>
                              <span v-else class="menu__text">
                                Página inicial
                              </span>
                            </a>
                          </div>

                          <div v-if="configurations.wg24_main_menu_departamentos == this['Type_StatusEn'].Tp_Enable" class="menu__item js-menu__item"
                               :style="((configurations.menu_divider == this['Type_Status'].Tp_Habilitado) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
                            <div class="menu__content menu__content--departments" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none'}">
                              <span class="menu__text">{ configurations.wg24_main_menu_departamentos_text || "Departamentos" }</span>
                              <i v-if="configurations.menu_selector == this['Type_Status'].Tp_Habilitado" class="menu__icon menu__icon--desktop fas fa-angle-down"></i>
                            </div>

                            <div class="submenu js-submenu submenu--departments">
                              <div v-for="item in departamentos">
                                <a class="submenu__item submenu__item--full" href="" @click="(e) => e.preventDefault()" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none'}">
                                  <span class="submenu__text submenu__text--second">{ item.name }</span>
                                </a>
                              </div>
                            </div>

                          </div>

                          <div v-for="(category, index) in categories" class="menu__item js-menu__item"
                            :style="((index < categories.length && configurations.menu_divider == this['Type_Status'].Tp_Habilitado) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')"
                          >
                              <a class="menu__content" href="" @click="(e) => e.preventDefault()" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none'}">
                                <span class="menu__text">{ category.name }</span>
                                <i v-if="configurations.menu_selector == this['Type_Status'].Tp_Habilitado" class="menu__icon menu__icon--desktop fas fa-angle-down"></i>
                              </a>

                                <div class="submenu js-submenu">
                                  <div v-if="configurations.wg24_exibe_imagens_categorias_menu == this['Type_DsimDnao'].Tp_Sim" class="submenu__showcase"
                                       style="max-height: 9rem; max-width: 250px">
                                    <img :src="category.image" class="submenu__image"
                                         :style="{ 'max-height': '9rem',
                                         'max-width': '250px',
                                         'width': Math.round((500/1140) * configurations.wg24_largura_imagens_categorias) + 'px',
                                          'height': Math.round((500/1140) * configurations.wg24_altura_imagens_categorias) + 'px'}">
                                  </div>
                                  <div class="submenu__content js-submenu__content">
                                    <div class="submenu__item submenu__item--back js-submenu__item--back">
                                      <i class="submenu__icon fas fa-angle-left"></i>
                                      <span class="submenu__text submenu__text--third">voltar</span>
                                    </div>
                                    <a class="submenu__item submenu__item--header" href="" @click="(e) => e.preventDefault()" style="text-decoration: none;">
                                      <span class="submenu__text submenu__text--first">{ category.name }</span>
                                    </a>
                                    <div v-for="children in category.children">
                                      <a class="submenu__item" href="" @click="(e) => e.preventDefault()" style="text-decoration: none;">
                                        <span class="submenu__text submenu__text--second">{ children.name }</span>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>

                        <!-- Controle do slider -->
                        <div class="menu__item menu__item--next js-menu__item--next" @click="nextMenu">
                          <div class="menu__content">
                            <i class="menu__icon fas fa-angle-right"></i>
                          </div>
                        </div>

                      </div>
                    </nav>
                  </div>
                </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">
                  <validation-provider
                    tag="div"
                    v-for="(field, index) in selectedVisual.fields"
                    :key="index"
                    class="bottom-margin-large"
                    :name="field.name"
                    :rules="field.rules"
                    v-slot="{ errors, valid }">
                    <base-select
                      v-if="['select'].includes(field.type)"
                      :name="field.name"
                      :id="field.name"
                      :label="field.label"
                      :description="field.description"
                      :valid="valid"
                      :error="errors[0]"
                      :disabled="disableForm"
                      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-else="!['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"
                      :valid="valid"
                      :error="errors[0]"
                      :disabled="disableForm"
                      v-model="configurations[field.name]">
                    </base-input>
                  </validation-provider>
              </div>

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

{% endblock %}