<template>
  <modal
    name="show-last-time-offers"
    :scrollable="true"
    :reset="true"
    :adaptive="true"
    height="auto"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    @before-open='init'
  >
    <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="bullhorn" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Aproveite</div>
          <div class="akkurat-bold max-header-text title">Oferta de última hora</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 v-if="offers.length > 0">
    <b-row>


<b-col md='12' class="text-center container-offer" >

<img :src="offers[currentOfferIndex].banner_url" alt="">



</b-col>


    </b-row>

<b-row class="add-to-cart">

<b-col md='4' offset-md="2" class="text-center container-quantity">
<label for="">Quantidade</label>
 <input-qty
              :small="true"
              v-model="quantity"
            />

</b-col>

<b-col md='6' class="text-left container-btn-add-to-order">

 <b-button class="btn btn-success radius-theme "   @click="addToOrder">
             <font-awesome-icon class="icon" icon='shopping-basket' /> Adicionar ao pedido
            </b-button>
</b-col>

</b-row>
</div>
<hr width='40%'>
    <b-row>

<b-col md="12" class="text-right">

<b-button class="btn  radius-theme btn-primary" @click='next' >
            Continuar
            </b-button>

</b-col>

    </b-row>

  </modal>
</template>

<script>
import inputQty from "@/components/shared-components/inputs/inputQuantity";
export default {
    name: 'show-last-time-offers',
    components:{
        inputQty
    },
    data: () => {
        return {
            quantity: 1,
            currentOfferIndex: 0,
            offers: []
        }
    },
    methods:{
        init(){
            this.offers = this.$store.getters.getLastTimeOffers;
            this.currentOfferIndex = 0;
                this.quantity = 1;

        },
        addToOrder(){

this.$store.dispatch('updateOrder',{
  product_per_campaign: this.offers[this.currentOfferIndex].product_per_campaign,
  quantity: this.quantity
});
this.closeModal();

        },
        next(){
            if(this.currentOfferIndex < this.offers.length -1){
                this.currentOfferIndex++;
                this.quantity = 1;
            return;
            }  
                this.$router.push({ name: 'Checkout'});
        },
        closeModal(){
            this.$modal.hide('show-last-time-offers');
            this.$emit('closed');
        }
    }
}
</script>

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


.container-offer{
    img{
        max-height: 300px;
        margin: 20px 0px;
    }
}
.add-to-cart{
                       padding: 0px 40px;   
                       
                       label{
                           margin-bottom: 0px;
                           margin-left: -30px;
                       }
                       .container-btn-add-to-order{
                           padding-top: 5px;
                           margin-left: -20px;
                       }
                            }
.custom-body {
  margin: 10px;
}

.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 {
  margin: 10px;
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
}

.btn-default {
  background: #ff9b64;
}

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

.close-icon {
  cursor: pointer;
}
</style>
