<template>
  <div class="page page-offers">
    <Toolbar @showlogin="showLoginModal" @showreferral="showReferral"/>
    <zc-dialog v-if="showLoginSignupModal" v-bind="loginDialog" @onClose="showLoginSignupModal=false">
      <Login @done="handleLogin"></Login>
    </zc-dialog>
    <zc-dialog v-if="showReferralModal" v-bind="loginDialog" @onClose="showReferralModal=false">
      <Referral
        referralType="zap"
        :zapRequestId="parseInt(zapRequestId)"
      />
    </zc-dialog>
    <section v-if="!isMobile" class="breadcrumb">
      <div class="container">
        <router-link :to="{name: 'HomePage'}">Home</router-link> /
        Offers
      </div>
    </section>
    <section class="offers-filter-selections">
      <div class="container">
        <div class="offers-title">
          Offers in {{User.city}}
          {{filteredOffers.length ? `- ${filteredOffers.length} offers` : ''}}
        </div>
        <div class="offer-pills">
          <template v-for="val, type in offerFilters">
            <div class="pill" v-for="filter in offerFilters[type]">
              {{filter}} {{type == 'tenure' ? 'months' : ''}}
              <div class="remove" @click="setFilter(type, filter)">&times;</div>
            </div>
          </template>
        </div>
      </div>
    </section>
    <section class="offers-list">
      <div class="container">
        <div class="offer-filters" v-if="!isMobile">
          <div class="filter">
            By Car
            <br>
            <br>
            <template v-if="maxCars != Car.items.length">
              <input placeholder="Search for a car" class="car-filter-input" v-model='carName'/>
              <br>
              <br>
            </template>
            <div class="filter-options" v-if="index < maxCars" v-for="car,index in filteredCars" @click="setFilter('cargroup', car.cargroup_name)" :key="car.id">
              <Checkbox :ticked="offerFilters.cargroup.includes(car.cargroup_name)"/>
                {{car.cargroup_name}}
            </div>
            <template v-if="filteredCars.length > maxCars">
              <span @click="maxCars = Car.items.length" class="more-cars">+ {{filteredCars.length - maxCars}} more</span>
            </template>
          </div>
          <br>
          <div class="filter">
            By Segment
            <br>
            <br>
            <div class="filter-options" @click="setFilter('cartype', 'Hatchback')">
              <Checkbox :ticked="offerFilters.cartype.includes('Hatchback')"/>
              Hatchback
            </div>
            <div class="filter-options" @click="setFilter('cartype', 'Sedan')">
              <Checkbox :ticked="offerFilters.cartype.includes('Sedan')"/>
              Sedan
            </div>
            <div class="filter-options" @click="setFilter('cartype', 'SUV')">
              <Checkbox :ticked="offerFilters.cartype.includes('SUV')"/>
              SUV
            </div>
          </div>
          <br>
          <div class="filter">
            By Subscription Length
            <br>
            <br>
            <div class="filter-options" @click="setFilter('tenure', 6)">
              <Checkbox :ticked="offerFilters.tenure.includes(6)"/>
              6 months
            </div>
            <div class="filter-options" @click="setFilter('tenure', 12)">
              <Checkbox :ticked="offerFilters.tenure.includes(12)"/>
              12 months
            </div>
            <div class="filter-options" @click="setFilter('tenure', 24)">
              <Checkbox :ticked="offerFilters.tenure.includes(24)"/>
              24 months
            </div>
            <div class="filter-options" @click="setFilter('tenure', 36)">
              <Checkbox :ticked="offerFilters.tenure.includes(36)"/>
              36 months
            </div>
          </div>
        </div>
        <div class="offer-results">
          <div class="loading" v-if="filterLoading">
            <div class="loader"/>
            <br>
            Please wait while we fetch the latest offers
          </div>
          <template v-else-if="filteredOffers.length" v-for="offer in filteredOffers" class="exclusive-offer-item">
            <OfferItem :image="offer.ZapOfferCarousalImage" :tagline="offer.tag_line" :description="offer.description" :promo="offer.coupon" @click="showOffer = offer"/>
          </template>
          <div class="loading" v-else>
            <template v-if="User.userDetails && User.userDetails.email && User.userDetails.email.includes('@zoomcar.com')">
              <img :src="require('~/assets/icons/missing_zoom.png')"/>
              <strong>Oh Poop!</strong>
              All offers are gone
            </template>
            <template v-else>
              <img :src="require('~/assets/icons/missing.png')"/>
              We’re sorry! There are no offers according to the filters you’ve put. Please remove few filters or reload to find offers in your city.
            </template>
            <!-- {{errorMessage || 'No offers Available'}} -->
          </div>
        </div>
      </div>
      <div class="filters-button" :class="showFilters ? 'expanded' : ''" v-if="isMobile" @click="showFilters = true">
        <div class="title">
          <p>Filters <sup style='color: #4a90e2' v-if='filterCount > 0'>{{filterCount}}</sup></p>
          <div style='display: flex; flex-direction: row; font-size: 12px;'>
            <p style='padding-right: 20px;' v-if='showFilters' @click.stop='resetFilters'>Reset</p>
            <p v-if='showFilters' @click.stop='showFilters = false'>Done</p>
          </div>
        </div>
        <div class="offer-filters" v-if="showFilters">
          <div class="filter" :class="activeFilter == 'cargroup' ? 'active-filter' : ''" @click="activeFilter='cargroup'">
            Car
            <div class="filter-options" v-if="activeFilter=='cargroup'">
              <div class="option"  v-for="car,index in filteredCars" @click="setFilter('cargroup', car.cargroup_name)" :key="car.id">
                <Checkbox :ticked="offerFilters.cargroup.includes(car.cargroup_name)"/>
                  {{car.cargroup_name}}
              </div>
            </div>
          </div>
          <div class="filter" :class="activeFilter == 'cartype' ? 'active-filter' : ''" @click="activeFilter='cartype'">
            Segment
            <div class="filter-options" v-if="activeFilter=='cartype'">
              <div class="option" @click="setFilter('cartype', 'Hatchback')">
                <Checkbox :ticked="offerFilters.cartype.includes('Hatchback')"/>
                Hatchback
              </div>
              <div class="option" @click="setFilter('cartype', 'Sedan')">
                <Checkbox :ticked="offerFilters.cartype.includes('Sedan')"/>
                Sedan
              </div>
              <div class="option" @click="setFilter('cartype', 'SUV')">
                <Checkbox :ticked="offerFilters.cartype.includes('SUV')"/>
                SUV
              </div>
            </div>
          </div>
          <div class="filter" :class="activeFilter == 'tenure' ? 'active-filter' : ''" @click="activeFilter='tenure'">
            Tenure
            <div class="filter-options" v-if="activeFilter=='tenure'">
              <div class="option" @click="setFilter('tenure', 6)">
                <Checkbox :ticked="offerFilters.tenure.includes(6)"/>
                6 months
              </div>
              <div class="option" @click="setFilter('tenure', 12)">
                <Checkbox :ticked="offerFilters.tenure.includes(12)"/>
                12 months
              </div>
              <div class="option" @click="setFilter('tenure', 24)">
                <Checkbox :ticked="offerFilters.tenure.includes(24)"/>
                24 months
              </div>
              <div class="option" @click="setFilter('tenure', 36)">
                <Checkbox :ticked="offerFilters.tenure.includes(36)"/>
                36 months
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="spec-table-wrap" v-if="showOffer">
      <div class="ovl" @click="showOffer = 0"></div>
      <div class="offer-content">
        <OfferItem @dismiss="showOffer = 0" :detailedImage="showOffer.ZapOfferCreativeImage" :image="showOffer.ZapOfferCarousalImage" :tagline="showOffer.tag_line" :description="showOffer.description" :terms="showOffer.tnc" :promo="showOffer.coupon" :showButton="true" />
      </div>
    </div>

    <Footer />
  </div>
</template>

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

import OfferPage from './offers';
export default OfferPage;
</script>
