<template>
  <modal name="details-incentives-modal" size="lg" >
    <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="award" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div class="inline-block akkurat-regular min-header-text">
            Conquiste brindes em sua compra. 
            </div>
            <div class="akkurat-bold max-header-text"> Programa de incentivos</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>
      
<b-row>

<b-col class="products" md='12'>

      <b-row v-for="row in conquested" :key="row.id">
        <b-col md='12' class="text-success"> Você já conquistou: </b-col>
        <b-col md="10">
          <span class="name bressay-bold-italic text-left">{{row.product_per_campaign.product.name}} </span>

         
        </b-col>

        <b-col md="2" class="align-middle text-right">
          <font-awesome-icon class='shopping-basket' icon="shopping-basket" />
        </b-col>
      </b-row>

<hr v-if="unconquested.length > 0">

<b-row v-for="row in unconquested" :key="row.id">
        <b-col md='12' class="text-danger"> Conquiste ainda: </b-col>
        <b-col md="10">
          <span class="name bressay-bold-italic text-left">{{row.product_per_campaign.product.name}} </span>
        <br>
        <strong> Some no mínimo </strong><span v-if="row.min_amount_order > 0"> R$ {{parseFloat(row.min_amount_order) | formatCoin}} </span>
        <span v-if="row.min_amount_order > 0 && row.min_quantity > 0"> e </span>
        <span v-if="row.min_quantity > 0"> {{row.min_quantity}} unidades </span>
  <span> no pedido.</span>
         </b-col>

        <b-col md="2" class="align-middle text-right">
          <font-awesome-icon class='shopping-basket' icon="shopping-basket" />
        </b-col>
      </b-row>

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

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

        <b-col md="2" class="align-middle text-right" @click="addProduct(row)">
          <font-awesome-icon class='shopping-basket' icon="shopping-basket" />
        </b-col>
      </b-row>

 <b-alert variant="success" class="text-center" :show=" incentives.length === 0">sem itens para incentivo.</b-alert>    


</b-col>


</b-row>

      <b-row class="footer">
        <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: 'details-incentives-modal',
  
  data: () => ({
    file: null,
    products: []
  }),
    computed: {
    incentives() {
      
    

      return this.$store.state.orderCreate.incentives;
    },
    conquested(){
        return this.$store.getters.getConqueredIncentives;
    },
    unconquested(){

      let incentives = this.$store.state.orderCreate.incentives;
      let conquested = this.$store.getters.getConqueredIncentives;
  
var unconquested =  incentives.filter(incentive => conquested.map(conquest => conquest.id).indexOf(incentive.id) === -1);


        return unconquested;
    }
  },
  methods: {
    closeModal() {
      this.$modal.hide('details-incentives-modal');
    },
  },
};
</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: #275389;
}

.rounded-div{
    background: rgba(65, 132, 229, 0.5);
  svg {
    color: rgb(65, 132, 229);
  }
}

.close-icon{
    cursor: pointer;
}
.footer{
  bottom: 15px;
  width: 100%;
  position: absolute;
}
.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: rgb(65, 132, 229);
    position: absolute;
    text-align: center;
    bottom: 1px;
    right: 15px;
     
    }
  }
}
</style>
