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

{% block content %}
  <div class="container-fluid">
    <div class="row medium-space-xs">
      <div class="col-xs-12 col-md-12">
        <div v-show="tabs[0].active">
          <div class="row stretch-xs" v-show="!Number(configurations.advanced_config)">
            <div class="col-xs-6 col-md-3">   
              <base-card class="padding-small">
                <span class="text-dark text-medium">CARD DO PRODUTO</span>
                <div class="vertical-padding-small">
                  <img :src="no_image" class="image-cover">
                </div>
                <div>
                  <h3 class="text-dark text-small">
                    {{ text_product_title }}
                  </h3>
                  <div class="vertical-padding-small">
                    <span class="visible-block text-small text-gray text-dashed">
                      {{ text_product_price }}
                    </span>
                    <span class="visible-block text-medium text-bold text-dark top-padding-x-small">
                      {{ text_product_price_discount }}
                    </span>
                    <span class="visible-block text-small text-gray top-padding-x-small word-break-dynamic">
                      { dinamicPrice }
                    </span>
                  </div>
                </div>
                <base-button full>
                  {{ text_buy }}
                </base-button>
              </base-card>
            </div>
            <div class="col-xs-12 col-md-9">
              <base-card class="padding-small">
                <span class="text-dark text-medium">PÁGINA DO PRODUTO</span>
                <div class="row stretch-xs small-space-xs">
                  <div class="col-xs-6 top-margin-small">
                    <div class="content-box">
                      <img :src="no_image" class="image-cover">
                    </div>
                  </div>
                  <div class="col-xs-6 top-margin-x-small">
                    <div class="content-box">
                      <span class="text-x-large text-dark">
                        {{ text_product_title }}
                      </span>
                      <div class="text-medium text-gray vertical-margin-small">
                        {{ text_product_code }}
                      </div>
                      <div class="vertical-middle text-medium text-gray">
                        <i class="far fa-star active_star0"></i>
                        <i class="far fa-star active_star0"></i>
                        <i class="far fa-star active_star0"></i>
                        <i class="far fa-star active_star0"></i>
                        <i class="far fa-star active_star0"></i>
                      </div>
                      <span class="text-medium text-gray vertical-middle">{{ text_star_number }}</span>
                      <div class="top-margin-small">
                        <div class="flex">
                          <div class="padding-x-small right-margin-x-small text-center" style="background-color: rgb(59, 89, 152); width: 26px">
                            <i class="fab fa-facebook-f" style="color: white;"></i>
                          </div>
                          <div class="padding-x-small right-margin-x-small text-center" style="background-color: rgb(29, 161, 242); width: 26px">
                            <i class="fab fa-twitter" style="color: white;"></i>
                          </div>
                          <div class="padding-x-small right-margin-x-small text-center" style="background-color: rgb(77, 194, 71); width: 26px">
                            <i class="fab fa-whatsapp" style="color: white;"></i>
                          </div>
                          <div class="padding-x-small right-margin-x-small text-center" style="background-color: rgb(132, 132, 132); width: 26px">
                            <i class="far fa-envelope" style="color: white;"></i>
                          </div>
                          <div class="padding-x-small right-margin-x-small text-center" style="background-color: rgb(203, 32, 39); width: 26px">
                            <i class="fab fa-pinterest-p" style="color: white;"></i>
                          </div>
                          <div class="padding-x-small right-margin-x-small text-center" style="background-color: rgb(255, 101, 80); width: 26px">
                            <i class="fas fa-plus" style="color: white;"></i>
                          </div>
                        </div>
                      </div>
                      <div class="padding-medium top-margin-medium border-gray">
                        <div>
                          <span class="bottom-padding-x-small text-small text-gray visible-block">
                            <s>{{ text_product_price }}</s>
                          </span>
                          <span class="text-x-large text-bold text-dark visible-block">
                            {{ text_product_price_discount }}
                          </span>
                          <span class="text-small text-gray visible-block word-break-dynamic">
                            { dinamicPrice }
                          </span>
                          <span class="text-small text-gray visible-block" v-if="configurations.model == 'parcel' || configurations.model == 'complete'">
                            <base-popover :data="table_parcels" :is_admin="true" :key="updateComponent" />
                          </span>
                        </div>
                        <base-button full class="top-margin-large">
                          {{ text_buy }}
                        </base-button>
                      </div>
                      <div v-if="selectedModel == 'custom'" class="flex top-margin-medium">
                        <label>Simulação da quantidade de parcelas e seus valores 
                         <base-popover :is_icon="true" :data="table_parcels" :is_admin="false" :key="updateComponent" />  
                        </label>                   
                      </div>
                    </div>
                  </div>
                </div>
              </base-card>
            </div>
          </div>
          <base-card class="padding-large bottom-margin-small" v-show="Number(configurations.advanced_config)">
            <div>
              <span class="text-small text-dark text-bold">{{text_preco}}</span>
              <highlight-editor
                class="top-margin-small"
                v-model="configurations.futura_preco_dinamico_produto"
                :readonly="!futura_user ? true : false"
                language="php"
              ></highlight-editor>
            </div>
            <div class="top-margin-large">
              <span class="text-small text-dark text-bold">{{text_preco_demais}}</span>
              <highlight-editor
                class="top-margin-small"
                v-model="configurations.futura_preco_dinamico_exibicoes"
                :readonly="!futura_user ? true : false"
                language="php"
              ></highlight-editor>
            </div>
          </base-card>
        </div>
      
        <div v-show="tabs[1].active">
          <div class="content-box bottom-padding-medium">
            <span class="text-x-large text-dark">{ tabs[1].text }</span>
          </div>
          <div v-if="customerGroups">
            <base-checkbox
              type="text"
              name="select_all"
              label="Selecionar todos"
              v-model="selectAll"
            >
            </base-checkbox>
            <div v-for="customerGroup in customerGroups">
              <base-card
                hover
                class="flex nowrap-xs padding-medium between-xs center-xs bottom-margin-small rel"
              >
                <base-checkbox
                  type="text"
                  :name="'preco_dinamico_tabelapreco[' + customerGroup.customer_group_id + ']'"
                  v-model="customerGroup.selected"
                  :label="customerGroup.name"
                  @change="handleCheckBoxInput(customerGroup.customer_group_id)"
                >
                </base-checkbox>
                <validation-provider
                  tag="div"
                  :rules="configurations.preco_dinamico_tabelapreco[customerGroup.customer_group_id] ? 'required' : ''"
                  :name="'preco_dinamico_tabelapreco_apelido[' + customerGroup.customer_group_id + ']'"
                  v-slot="{ errors, valid }"
                  >
                  <base-input
                    type="text"
                    :error="errors[0]"
                    :valid="valid"
                    :name="'preco_dinamico_tabelapreco_apelido[' + customerGroup.customer_group_id + ']'"
                    v-model="configurations.preco_dinamico_tabelapreco_apelido[customerGroup.customer_group_id]"
                    :disabled="!customerGroup.selected">
                  </base-input>
                </validation-provider>
              </base-card>
            </div>
          </div>
          <div v-else>
            <base-card
              class="flex nowrap-xs middle-xs center-xs padding-large rel"
            >
              <span class="text-x-large text-dark">{{ text_no_results }}</span>
            </base-card>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-12">
        <base-card class="padding-large">
          <div class="flex row no-space-xs">
            <validation-provider
              tag="div"
              rules="required"
              class="col-xs"
              name="preco_dinamico_status"
              v-slot="{ errors, valid }">
              <base-select
                name="preco_dinamico_status"
                class="bottom-margin-large"
                :label="text_preco_status"
                v-model="configurations.preco_dinamico_status"
                :error="errors[0]"
                :valid="valid"
                :disabled="disableForm"
                >
                <option
                  v-for="(value, key) in Type_Status"
                  :key="key"
                  :value="key"
                >
                  { value }
                </option>
              </base-select>
            </validation-provider>

            <validation-provider
              tag="div"
              rules="required"
              name="advanced_config"
              class="col-xs"
              v-slot="{ errors, valid }">
              <base-select
                name="advanced_config"
                label="Configurações Avançadas"
                v-model="configurations.advanced_config"
                :error="errors[0]"
                :valid="valid"
                :disabled="disableForm"
                class="left-padding-small"
                >
                <option
                  v-for="(value, key) in Type_Status"
                  :key="key"
                  :value="key"
                >
                  { value }
                </option>
              </base-select>
            </validation-provider>
          </div>

          <div v-show="!Number(configurations.advanced_config)">
            <div class="">
              <span class="text-small text-dark text-bold">{{ text_models }}</span>
              <div class="top-padding-small flex flex-row">
                <base-button
                  v-for="(model, key) in modelOptions"
                  :key="key"
                  :apperance="model.selected ? 'primary' : 'outline'"
                  size="small"
                  class="right-margin-small bottom-margin-small"
                  @click.native="handleSelectModel(key)"
                >
                  <span>{model.name}</span>
                </base-button>
              </div>
            </div>

            <base-textarea
              v-show="selectedModel == 'custom'"
              class="top-padding-medium"
              name="preco_dinamico_personalized"
              ref="personalizedText"
              type="text"
              rows="4"
              :value="configurations.preco_dinamico_personalized"
              v-model="configurations.preco_dinamico_personalized"
              max-length="120"
            ></base-textarea>

            <div class="vertical-padding-medium flex flex-row" v-if="selectedModel == 'custom'">
              {# PARCEL NUMBER #}
              <div class="flex-column right-margin-medium">
                <div class="flex">
                  <label v-text="'{{text_number_parcel}}'" class="text-small text-dark text-bold vertical-margin-small"></label>
                  <base-Info class="dinamicPrice-info">
                    <div class="info-content">
                      <div class="flex-column bottom-margin-medium">
                        <label class="text-bold text-medium bottom-margin-small">Quantidade máxima de parcelas sem juros:</label>
                        <span class="text-justify">A quantidade máxima de parcelas sem juros consiste em somar o <u>número de parcelas sem juros</u> com o <u>número de parcelas com desconto</u>, assim trazendo a quantidade máxima de parcelas sem juros, pois, as parcelas com desconto também são parcelas sem juros.</span>
                      </div>
                      <div class="flex-column">
                        <label class="text-bold text-medium bottom-margin-small">Quantidade máxima de parcelas com juros:</label>
                        <span class="text-justify">A quantidade máxima de parcelas com juros sempre será a <u>quantidade total de parcelas</u>, pois, os juros só irão se aplicar desde que as parcelas com desconto e sem juros não estiverem sendo usadas.</span>
                        <img class="img-dynamic-price vertical-margin-medium" src="../image/data/example-dynamic-price.png">
                        <span class="text-justify" v-text="infoIncreaseImg"></span>
                      </div>
                    </div>
                  </base-Info>
                </div>
                <div class="base-custom-options">
                  <div class="custom-options"  v-for="(info, key) in  stringContainsParcelNumber">
                    <base-button             
                      :key="key"
                      apperance="outline"
                      size="small"
                      :class="info.disabled ? 'selectedTag' : '' "
                      class="padding-small full-width"         
                      style="justify-content: flex-start; border: none"
                      @click.native="info.disabled ? '' : addElement(info.text)"
                    >
                      <span class="right-padding-large">{info.name}</span>              
                    </base-button>   
                    <i v-if="info.disabled" class="fa-regular fa-circle-xmark cancel-icon-custom" @click="removeElement(info.text)"></i>    
                  </div>
                </div>
              </div>     
              {# TOTAl PRICE #}
              <div class="flex-column right-margin-medium">
                <label v-text="'{{text_total_price}}'" class="text-small text-dark text-bold vertical-margin-small"></label>
                <div class="base-custom-options">
                  <div class="custom-options"  v-for="(info, key) in stringContainsTotalPrice">
                    <base-button     
                      :key="key"
                      apperance="outline"
                      size="small"
                      :class="info.disabled ? 'selectedTag' : '' "
                      class="padding-small full-width"
                      style="justify-content: flex-start; border: none"
                       @click.native="info.disabled ? '' : addElement(info.text)"
                    >
                      <span class="right-padding-large">{info.name}</span>
                    </base-button>
                    <i v-if="info.disabled" class="fa-regular fa-circle-xmark cancel-icon-custom" @click="removeElement(info.text)"></i> 
                  </div>
                </div>
              </div>       
              {# DESCOUNT AND INCREASE #}
              <div class="flex-column">
                <label v-text="'{{text_discount_increase}}'" class="text-small text-dark text-bold vertical-margin-small"></label>
                <div class="base-custom-options">
                  <div class="custom-options" v-for="(info, key) in stringContainsDiscAndInc">
                    <base-button      
                      :key="key"
                      apperance="outline"
                      size="small"
                      :class="info.disabled ? 'selectedTag' : '' "
                      class="padding-small full-width"
                      style="justify-content: flex-start; border: none"
                       @click.native="info.disabled ? '' : addElement(info.text)"
                    >
                      <span class="right-padding-large">{info.name}</span>
                    </base-button>
                    <i v-if="info.disabled" class="fa-regular fa-circle-xmark cancel-icon-custom" @click="removeElement(info.text)"></i> 
                  </div>
                </div>
              </div>
            </div>

            <div v-if="selectedModel == 'parcel'" class="flex row top-margin-medium no-space-xs">
              <validation-provider
                tag="div"
                name="minimum_parcel"
                :key="updateMinimumParcel"
                class="col-xs-12 no-padding"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="text"
                  name="minimum_parcel"
                  mask="brazilCurrency"
                  label="Parcela Mínima"
                  v-model="configurations.minimum_parcel"
                  :error="errors[0]"
                  :valid="valid"
                >
                </base-input>
              </validation-provider>
            </div>

            {# PARCELS#} 
            <div class="flex row no-space-xs">
              <validation-provider
                tag="div"
                rules="required"
                name="parcel_number"
                class="col-xs"
                v-if="selectedModel == 'complete' || selectedModel == 'parcel' || selectedModel == 'custom'"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  class="top-padding-medium"
                  name="parcel_number"
                  v-model="configurations.parcel_number"
                  label="Número de parcelas"
                  mask="parcel"
                  :disabled="disableInputNumberParcel"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  >
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                rules="required"
                name="parcel_with_discounts"
                class="col-xs"
                v-if="selectedModel == 'parcel' || selectedModel == 'complete' || selectedModel == 'custom'"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  class="top-padding-medium left-padding-small"
                  name="parcel_with_discounts"
                  v-model="configurations.parcel_with_discounts"
                  label="Número de parcelas com descontos"
                  mask="parcel"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  >
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                rules="required"
                name="parcel_with_no_fees"
                class="col-xs"
                v-if="selectedModel == 'parcel' || selectedModel == 'complete' || selectedModel == 'custom'"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  class="top-padding-medium left-padding-small"
                  name="parcel_with_no_fees"
                  v-model="configurations.parcel_with_no_fees"
                  label="Número de parcelas sem juros"
                  mask="parcel"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  >
                </base-input>
              </validation-provider>
 
               <validation-provider
                tag="div"
                name="parcel_with_increase"
                class="col-xs"
                v-if="selectedModel == 'parcel' || selectedModel == 'complete' || selectedModel == 'custom'"
                style="pointer-events: none;"
                >
                <base-input
                  type="text"
                  class="top-padding-medium left-padding-small"
                  name="parcel_with_increase"
                  :value="parcelIncrease(configurations.parcel_number, configurations.parcel_with_discounts, configurations.parcel_with_no_fees)"
                  label="Número de parcelas com juros"
                  mask="parcel"      
                 >
                </base-input>
              </validation-provider>
            </div>

            {# PERCENT DISCOUNT #} 
            <div 
              class="row no-space-xs bottom-xs top-margin-large" 
              ref="discount_parcels"
              v-if="selectedModel == 'parcel' || selectedModel == 'complete' || selectedModel == 'custom'"
            >
              <div class="col-xs">
                <div class="content-box">
                  <base-select
                    name="discount_parcels"
                    v-model="configurations.discount_parcels"
                    label="Desconto em parcelas"
                  >
                    <option
                      v-for="(discount, index) in Type_Discount.getEnumList()"
                      :key="index"
                      :value="index"
                    >
                      { discount }
                    </option>
                  </base-select>
                </div>
              </div>
              <validation-provider
                tag="div"
                class="col-xs left-padding-small"
                rules="required"
                name="discount_parcels_value"
                v-slot="{ errors, valid }">
                <base-input
                  name="discount_parcels_value"
                  v-model="configurations.discount_parcels_value"
                  :mask="'percentage'"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                </base-input>
              </validation-provider>
            </div>

            {# PERCENT INCREASE #}
            <div 
              class="row no-space-xs bottom-xs top-margin-large" 
              ref="increase"
              v-if="(selectedModel == 'parcel' || selectedModel == 'complete' || selectedModel == 'custom') && increaseinput"
            >
              <div class="col-xs">
                <div class="content-box">
                  <base-select
                    name="increase_type"
                    v-model="configurations.increase_type"
                    label="Juros"
                  >
                    <option
                      v-for="(increase, index) in Type_Addition.getEnumList()"
                      :key="index"
                      :value="index"
                    >
                      { increase }
                    </option>
                  </base-select>
                </div>
              </div>

              <validation-provider
                tag="div"
                class="col-xs left-padding-small"
                rules="required"
                name="increase_value"
                v-slot="{ errors, valid }">
                <base-input
                  name="increase_value"
                  v-model="configurations.increase_value"
                  :mask="'percentage'"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                </base-input>
              </validation-provider>
            </div>

            {# PERCENT DISCOUNT MONEY #}
            <div 
              class="row no-space-xs bottom-xs top-margin-large"
              ref="cash_discount"
              v-if="selectedModel == 'complete' || selectedModel == 'billet' || selectedModel == 'custom'"
            >
              <div class="col-xs">
                <div class="content-box">
                  <base-select
                    name="discount_type"
                    v-model="configurations.discount_type"
                    label="Desconto à vista"
                  >
                    <option
                      v-for="(discount, index) in Type_Desconto.getEnumList()"
                      :key="index"
                      :value="index"
                      :disabled="index == 1 && selectedModel != 'custom'"
                    >
                      { discount }
                    </option>
                  </base-select>
                </div>
              </div>
              <validation-provider
                tag="div"
                class="col-xs left-padding-small"
                rules="required"
                name="discount_value"
                v-slot="{ errors, valid }">
                <base-input
                  name="discount_value"
                  v-model="configurations.discount_value"
                  :mask="discountMask"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                </base-input>
              </validation-provider>
            </div>

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

{% endblock %}

