<template>
  <div class="component-coupon">
    <div class="modal-header">
      APPLY COUPON/REFERRAL
      <div class="close" @click="$emit('close')">
        &times;
      </div>
    </div>
    <div class="coupon-field">
      <div class="coupon-input">
        <input :disabled="appliedCoupon.length != 0" v-model="code" placeholder="Enter coupon code" @change="couponStatus = ''">
        <div v-if="!appliedCoupon && code.length" class="apply coupon-button" @click="$segment('couponApplication',{type: 'given'}); applyCoupon()">
          <div class="loader" v-if="User.offerProcessing || User.loading"/>
          <div v-else>APPLY</div>
        </div>
        <div v-if="appliedCoupon" class="edit coupon-button" @click="removeCoupon">
          <div class="loader" v-if="User.offerProcessing || User.loading"/>
          <div v-else>REMOVE</div>
        </div>
      </div>
      <span v-if="!User.offerProcessing && !User.loading" :class="`coupon-${couponStatus}`">{{couponMessage}}</span>
    </div>
    <div class="available-coupons">
      <template v-if="Offer.couponOffers(cargroupId).length">
        <div class="title">
          Available Coupons
        </div>
        <div class="coupon-list">
          <div v-for="offer in Offer.couponOffers(cargroupId)" :key="offer.id" class="coupon">
            <div class="details">
              <p class="promo">{{offer.coupon}}</p>
              <p class="description">{{offer.tag_line}}</p>
            </div>
            <div v-if="!appliedCoupon" class="available-coupon-button" @click="applyFeaturedOffer(offer.coupon)">
              APPLY
            </div>
          </div>
        </div>
      </template>
      <div v-else class="no-coupons">
        <img :src="require('~/assets/icons/no-coupons.png')" alt="">
        <br>
        <strong>Nothing here!!</strong>
        More offers coming soon
      </div>
    </div>
  </div>
</template>

<script>
import './coupon.scss';

import Coupon from './coupon';
export default Coupon;
</script>

