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

{% block content %}

  <div class="container-fluid">
    <div class="row medium-space-xs">
      <div class="col-xs-12 col-md-8">
        <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">
                <div class="bottom-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">
                      { 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">
                <div class="row stretch-xs small-space-xs">
                  <div class="col-xs-6">
                    <div class="content-box">
                      <img :src="no_image" class="image-cover">
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <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">
                          { dinamicPrice }
                          </span>
                        </div>
                        <base-button full class="top-margin-large">
                          {{ text_buy }}
                        </base-button>
                      </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-4">
        <base-card class="padding-large">
          <validation-provider
            tag="div"
            rules="required"
            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"
            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"
              >
              <option
                v-for="(value, key) in Type_Status"
                :key="key"
                :value="key"
              >
                { value }
              </option>
            </base-select>
          </validation-provider>

          <div v-show="!Number(configurations.advanced_config)">
            <div class="top-padding-large">
              <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'">
              <base-button
                v-for="(info, key) in stringContains"
                :key="key"
                apperance="outline"
                size="small"
                :disabled="info.disabled"
                class="right-margin-small bottom-margin-small"
                @click.native="addElement(info.text)"
              >
                <span>{info.name}</span>
              </base-button>
            </div>

            <validation-provider
              tag="div"
              rules="required"
              name="parcel_number"
              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="number"
                :error="errors[0]"
                :valid="valid"
                :disabled="disableForm"
                >
              </base-input>
            </validation-provider>

            <div class="row no-space-xs bottom-xs top-margin-large">
              <div class="col-xs">
                <div class="content-box">
                  <base-select
                    name="discount_type"
                    v-model="configurations.discount_type"
                    label="Desconto"
                  >
                    <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 %}

