<template>
  <div class="page page-checkout">
    <Toolbar @showreferral="showReferral"/>
    <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> /
        <router-link :to="{name: 'SelectionPage'}">All Cars</router-link> /
        <template v-if="details && details.cargroup_name">
          <router-link :to="{name: 'CarDetailsPage', params: {id: details.cargroup_id}}">{{details.cargroup_name}}</router-link> /
          {{details && !details.loading ? 'Checkout' : 'Please wait'}}
        </template>
      </div>
    </section>

    <section class="body" v-if="details && !details.loading">
      <div class="container">
        <div class="car-details" id="payment-methods" ref="payment-methods">
          <div class="info">
            <div class="tnc-accept" v-if="!User.is_prebook_payment_done" @click="agreementAccepted = !agreementAccepted">
                <Checkbox :ticked="agreementAccepted"/>
                <div>
                  I have read and agree to the&nbsp;
                  <a href='#' @click.stop="showAgreement = true">Terms & Conditions</a>
                </div>
            </div>
            <Payment :isZapPayment="true" :zapPaymentParams="{'zapSubscriptionId': User.zapRequestId, 'zapPaymentAmount': chosenPayment == 'ZAP_SUBSCRIPTION' ? 1 : expectedAmount, 'paymentType': chosenPayment, 'tncAccepted': agreementAccepted}"/>
          </div>
        </div>
        <div class="summery">
          <section class="price-calculation">
            <section class="image" v-if="details.image_url">
              <img :src="details.image_url"/>
              {{details.name}}
            </section>
            <br>
            <table>
              <tbody>
                <tr>
                  <td>
                    <strong>Subscription Tenure</strong>
                  </td>
                  <td>
                    <strong>{{tenure}} months</strong>
                  </td>
                </tr>
              </tbody>
            </table>
            <br>
            <hr>
            <table>
              <tbody>
                <tr>
                  <td :class="appliedOfferCode ? 'coupon-code' : ''" @click="appliedOfferCode ? showOffer = appliedOffer : ''">
                    <span class="mdi mdi-sale toolbar-icon" v-if="appliedOfferCode"/>
                    {{appliedOfferCode.toUpperCase() || 'Coupons' }}
                    <span v-if="appliedOfferCode">&#9432;</span>
                  </td>
                  <td>
                    <strong class="coupon-button" @click="showCoupon = true">{{appliedOfferCode ? 'EDIT COUPON/REFERRAL' : 'APPLY COUPON/REFERRAL'}}</strong>
                  </td>
                </tr>
                <template v-if="tenureOffer && !User.loading">
                  <br>
                  <tr>
                    <td>
                      Special pricing applied
                    </td>
                    <td>
                      <strong class="coupon-button" @click="showOffer = tenureOffer">VIEW DETAILS</strong>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
            <br>
            <hr>
            <section>
              <template v-for="payment,key in zapPaymentTypes">
                <div
                  class="payment-types"
                  @click="handlePaymentTypeClick(payment.value)"
                  v-if="(zapRequestPayment.advance && zapRequestPayment.advance.preauth_charge_amount && key == 0) || (User.details && User.details.status == 'deposit_received' && key != 1 && key != 2) || (User.details && User.details.status == 'cargroup_selected' && key != 3)">
                  <span class='payment-title'>
                    <div class="radio" :class="chosenPayment == payment.value ? 'selected' : ''"></div>
                    <div class="title">
                      {{payment.string}}
                      <div class="recommended" v-if="payment.value == 'ZAP_SUBSCRIPTION'">
                        RECOMMENDED
                      </div>
                    </div>
                  </span>
                  <hr>
                  <div class="description">
                    <img :src="require(`~/assets/icons/${payment.value == 'ZAP_SUBSCRIPTION' ? 'instapay' : 'cash'}.svg`)"/>
                    <div v-html="payment.description"/>
                  </div>
                </div>
              </template>
            </section>
            <hr>
            <table v-if="zapRequestPayment">
              <tbody>
                <template v-if="(chosenPayment == 'ZAP_SUBSCRIPTION_DEPOSIT_CUM_ADVANCE' || chosenPayment == 'ZAP_SUBSCRIPTION_DEPOSIT')  && zapRequestPayment.deposit">
                  <tr>
                    <td>
                      Security Deposit
                    </td>
                    <td>₹{{zapRequestPayment.deposit.base_amount | currencyFormat}}</td>
                  </tr>
                  <tr v-if="zapRequestPayment.deposit.instant_discount">
                    <td>
                      Security Deposit Discount
                    </td>
                    <td>-₹{{zapRequestPayment.deposit.instant_discount | currencyFormat}}</td>
                  </tr>
                </template>
                <template v-if="(chosenPayment == 'ZAP_SUBSCRIPTION_DEPOSIT_CUM_ADVANCE' || chosenPayment == 'ZAP_SUBSCRIPTION_ADVANCE') && zapRequestPayment.advance">
                  <tr>
                    <td>
                      Advance Rental
                    </td>
                    <td>₹{{zapRequestPayment.advance.base_amount | currencyFormat}}</td>
                  </tr>
                  <tr v-if="zapRequestPayment.advance.instant_discount">
                    <td>
                      Advance Rental Discount
                    </td>
                    <td>-₹{{zapRequestPayment.advance.instant_discount | currencyFormat}}</td>
                  </tr>
                  <tr>
                    <td>
                      GST
                    </td>
                    <td>₹{{zapRequestPayment.advance.gst | currencyFormat}}</td>
                  </tr>
                  <tr v-if="zapRequestPayment.advance.deposit_payment_adjustments">
                    <td>
                      Security Discount Adjustment
                    </td>
                    <td>{{zapRequestPayment.advance.deposit_payment_adjustments < 0 ? '-' : ''}}₹{{-zapRequestPayment.advance.deposit_payment_adjustments | abs | currencyFormat}}</td>
                  </tr>
                </template>
                <template v-if="chosenPayment == 'ZAP_SUBSCRIPTION' && zapRequestPayment.advance">
                  <tr>
                    <td>
                      Advance Rental
                    </td>
                    <td>₹{{zapRequestPayment.advance.base_amount | currencyFormat}}</td>
                  </tr>
                  <tr v-if="zapRequestPayment.advance.instant_discount">
                    <td>
                      Advance Rental Discount
                    </td>
                    <td>-₹{{zapRequestPayment.advance.instant_discount | currencyFormat}}</td>
                  </tr>
                  <tr>
                    <td>
                      GST
                    </td>
                    <td>₹{{zapRequestPayment.advance.gst | currencyFormat}}</td>
                  </tr>
                  <tr v-if="zapRequestPayment.deposit.paid_amount">
                    <td>
                      Security Deposit Adjustment
                    </td>
                    <td>-₹{{zapRequestPayment.deposit.paid_amount | currencyFormat}}</td>
                  </tr>
                </template>
              </tbody>
              <tfoot>
                <tr>
                  <td>You Pay:</td>
                  <td>₹{{expectedAmount | abs | currencyFormat}}</td>
                </tr>
              </tfoot>
            </table>
            <p>
              Prices include
              <ul>
                <li>Maintenance</li>
                <li>Insurance</li>
                <li>24x7 road-side assistance</li>
                <li>Key Less Entry & other IoT devices</li>
              </ul>
              GST as applicable.
            </p>
          </section>

        </div>
      </div>
    </section>
    <section class="body" v-if="(details && details.loading) || !details">
      <div class="container">
        <div class="info" style="display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; text-align: center;">
          <div class="loader"></div>
          Please wait...<br>
          fetching car details
        </div>
      </div>
    </section>

    <div class="spec-coupon-wrap" v-if="showCoupon">
      <div class="ovl" @click="showCoupon = false"></div>
      <div class="ovl-content">
        <coupon class="ovl-content" :appliedCoupon="appliedOfferCode" @close="showCoupon = false"/>
      </div>
    </div>
    <div class="spec-coupon-wrap" v-if="showAgreement">
      <div class="ovl"></div>
      <div class="ovl-content">
        <div class="agreement">
          <div v-if="agreementData.agreement_version == 0">
            Please try again
          </div>
          <div class="loader" v-else-if="!agreementData.agreement_version"></div>
          <template v-else>
            <div class="agreement-text" v-html="agreementData.agreement_text">
            </div>
            <button class="btn btn-green" @click="showAgreement = false">
              OK
            </button>
          </template>
        </div>
      </div>
    </div>
    <!-- <div class="spec-coupon-wrap" v-if="User.paymentLink">
      <div class="ovl" @click.self="User.paymentLink = ''"></div>
      <iframe :src="User.paymentLink" class="paymentModal ovl-content">
      </iframe>
    </div> -->
    <div class="spec-coupon-wrap" v-if="showOffer">
      <div class="ovl" @click="showOffer = 0"></div>
      <OfferItem @dismiss="showOffer = 0" :detailedImage="showOffer.ZapOfferCreativeImage" :image="showOffer.ZapOfferCarousalImage" :tagline="showOffer.tag_line" :description="showOffer.description" :terms="showOffer.terms" :promo="showOffer.coupon" :showButton="true"/>
    </div>

    <div class="spec-coupon-wrap" v-if="paymentResponse.status || zapRequestPayment.pending">
      <div class="paymentMessageModal ovl-content">
        <img v-if="paymentResponse.status == 'success'" :src="require('~/assets/icons/tick.svg')" alt=""/>
        <h2>Payment {{paymentResponse.status == 'success' ? 'Successful' : paymentResponse.status == 'pending' ? 'Pending' : 'Failed'}}</h2>
        {{paymentStatus.statusText}}
        <br>
        <br>
        <router-link :to="paymentStatus.action">{{paymentResponse.status == 'failed' ? 'Try Again' : 'Click here to proceed'}}</router-link>
      </div>
    </div>
  </div>
</template>

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

import CarDetailsPage from './checkout';
export default CarDetailsPage;
</script>
<style type="text/css">
    .footer-content {
        display: none;
    }
</style>
