<template>
  <modal name="promotions-modal" size="lg" :scrollable="true" adaptive height="auto">
    <div>
      <b-row class="d-flex justify-content-between mb-2 mt-1">
        <b-col class="d-flex modal-text-color ml-2" cols="8">
          <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
            <font-awesome-icon icon="shopping-basket" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div
              class="inline-block akkurat-regular min-header-text"
            >Existem {{promotions.length + promotionsProgressive.length}} promoções disponíveis e {{featuredOffers.length}} Ofertas</div>
            <div class="akkurat-bold max-header-text">Promoções & Ofertas</div>
          </div>
        </b-col>
        <b-col class="d-flex justify-content-end mr-2 mt-1">
          <span class="close-icon" @click="closeModal">
            <font-awesome-icon icon="times" class="align-self-center" />
          </span>
        </b-col>
      </b-row>


<div class="list-promotions">
  <b-tabs>
    <b-tab title="Ofertas" active>
   
   <b-col class="products" md='12'>

      <b-row v-for="row in featuredOffers" :key="row.id">
        <b-col md="10">
          <span class="name bressay-bold-italic text-left">{{row.product_per_campaign.product.name}} </span>

          <span class="price akkurat-light-regular text-left"> de R$ {{row.product_per_campaign.regular_price}} por R$ {{row.catalog_value}}</span>
        </b-col>

        <b-col md="2" class="align-middle text-right" @click="addProduct(row.product_per_campaign)">
          <font-awesome-icon class='shopping-basket' icon="shopping-basket" />
        </b-col>
      </b-row>
 <b-alert variant="success" class="text-center" :show="featuredOffers.length === 0">não há Ofertas de produto.</b-alert>    


</b-col>


    </b-tab>

    <b-tab title="Promoções">

      <b-row>


        <b-col md="12" >
          <div v-for="promotion in promotions" :key="promotion.id">
            <strong>{{promotion.name}}:</strong>

            <p
              class="details"
              v-html="'Compre: '+  toStringProductsPromotion(promotion.promotion_has_buy_product_per_campaign,promotion.buy_type)"
            >Compre</p>

            <p
              class="details"
            v-html="'Leve: ' + toStringProductsPromotion(promotion.promotion_has_take_product_per_campaign, promotion.take_type, promotion.discount_type)"
            >
             </p>
          </div>

          <div v-for="promotionProgressive in promotionsProgressive">
            <div v-html="toStringProductsPromotionProgressive(promotionProgressive)"></div>
          </div>
        </b-col>
      </b-row>


    </b-tab>

  </b-tabs>
</div>



      <b-row>
        <b-col class="d-flex justify-content-center my-3 px-3">
          <b-button class="btn shadow-none border-0 btn-default btn-blue" @click="closeModal">Fechar</b-button>
        </b-col>
      </b-row>
    </div>
  </modal>
</template>

<script>
export default {
  name: "promotions-modal",

  data: () => ({
    file: null
  }),
  computed: {
    promotions() {
      return this.$store.state.orderCreate.promotions;
    },
    promotionsProgressive() {
      return this.$store.state.orderCreate.promotions_progressive;
    },
    featuredOffers(){
     return this.$store.getters.getFeaturedOffers;
    }
  },
  methods: {
    closeModal() {
      this.$modal.hide("promotions-modal");
    },
     addProduct(productPerCampaign) {
      console.log(productPerCampaign);
      this.$store.dispatch("updateOrder", {
        product_per_campaign: productPerCampaign,
        quantity: 1
      });
    },
    toStringProductsPromotion(products, stringToJoin, discount_type) {
      var productsNames = [];
      let strToJoin = stringToJoin === "AND" ? " <i>E</i> " : " <i>OU</i> ";
      products.forEach(product => {
        if (typeof product.quantity === "undefined") {
          let name = product.product_per_campaign.product.name;
          let discountText =
            discount_type === "PERCENT"
              ? product.discount + "%"
              : "R$ " +
                this.$options.filters.formatCoin(parseFloat(product.discount));
          let textWithDiscount = name + " (<strong>" +product.product_per_campaign.product.code + "</strong>)" + " com " + discountText + " de desconto";

          productsNames.push(textWithDiscount);
        } else {
          productsNames.push(
            product.quantity + " " + product.product_per_campaign.product.name + " (<strong>" +product.product_per_campaign.product.code + "</strong>)"
          );
        }
      });

      return productsNames.join(strToJoin);
    },
    toStringProductsPromotionProgressive(promotion) {
      console.log(promotion);
      var str =
        "<strong>Desconto progressivo para ";
        

        promotion.products_per_campaigns.forEach( (productPerCampaign,index) => {

          str += productPerCampaign.product.name +
        " ( " +
        productPerCampaign.product.code +
        " ) </strong><br>";

          str+="<ul>";

      promotion.range.forEach(range => {
        let discount = 0;
        let productPrice = parseFloat(
         productPerCampaign.catalog_value
        );

        if (range.discount_type === "PERCENT") {
          discount = (productPrice * parseFloat(range.discount)) / 100;
        } else {
          discount = parseFloat(range.discount);
        }

        str +=
          "<li>Compre " +
          range.quantity +
          " e a unidade sai por R$ " +
          this.$options.filters.formatCoin(productPrice - discount) +
          "</li>";
      });

      str += "</ul>";
          if(index <  promotion.products_per_campaigns.length -1){
            str+="<p class='text-center'> <strong>E</strong> </p>"
          }
        });

      return str;
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/css/main.scss";

.modal-text-color {
  color: #3e3e3e;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}

.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #ff9b64;
}

.rounded-div {
  background: #cb2d2d80 0% 0% no-repeat padding-box;
  svg {
    color: #cb2d2d;
  }
}

.close-icon {
  cursor: pointer;
}

.list-promotions {
  padding: 0px 40px;
}

.products {
  .row:not(:last-child) {
    border-bottom: 1px solid #979797;
  }

  .row {
    margin: 0px !important;

    padding: 6px 0px;

    .name {
     // display: block;
      letter-spacing: 0;
      color: #3e3e3e;
      font-size: 0.8em;
    }

    .price {
     // display: block;
      letter-spacing: 0;
      color: #2c2c2c;
      font-size: 0.8em;
    }
    .shopping-basket{
      color: #278937;
    position: absolute;
    text-align: center;
    bottom: 1px;
    right: 15px;
      &:hover{
        cursor: pointer;
           background: #5ea569;
   padding: 3px;
   height: 28px;
   width: 28px;
   border-radius: 50%;
      }
    }
  }
  }
</style>
