<template>
  <reco-modal 
  v-on:backButtonClicked="backButtonClicked" 
  :withBackButton="true" 
  :withDoneButton="false"
  title="Confirm credit charge"
  background="#34495e">
    <ion-content slot="content">
        <div class="charge-following">You are going to be charged for the following:</div>
        <div class="transaction-container">
            <div class="subject">{{ template.subject }}</div>
            <div class="monthly-text" v-if="template.paid_on_monthly_basis"><i>paid on monthly basis</i></div>
            <div class="description">{{ template.description }}</div>
            <div class="amount-container">
                <div>
                    <div class="credits-amount" :style="amountBackground"><span>{{ template.amount }}</span></div>
                    <div class="textual-amount">{{ template.amount }} credits</div>
                </div>
            </div>
        </div>
        <div class="confirm-text">Please confirm, if you would like to make this credit payment.</div>
        <div class="buttons-container">
            <div class="cancel" @click="cancelCreditCharge">Cancel</div>
            <div class="confirm" @click="confirmCreditCharge">Confirm</div>
        </div>
    </ion-content>
  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';
import Pin from '@/assets/pin.png'

export default {
  name: 'RecoCreditChargeModal',
  components: {
    RecoModal
  },
  props: {
    template: {
        type: Object
    }
  },
  computed: {
    amountBackground() {
        return 'background-image:url('+this.pin+')';
    }
  },
  data() {
    return {
      pin: Pin,
    };
  }
}
</script>
<style scoped lang="scss">
  .charge-following, .confirm-text {
    padding: 20px;
  }

    .transaction-container {
        padding: 20px 10px;
        background:#ecf0f1;

        .subject {
            color:#2c3e50;
            font-weight: bold;
            font-size:16px;
        }

        .description {
            color: #95a5a6;
            padding-top:8px;
            font-size:14px;
        }

        .monthly-text {
            color:#c0392b;
            font-weight: bold;
            font-size:14px;
            padding-top:5px;
        }
    }

    .amount-container {
        display: flex;
        justify-content: center;
        padding-top:20px;

        .credits-amount {
            display:flex;
            align-items: center;
            justify-content: center;
            width:80px;
            height:80px;
            background-position: center;
            background-size:cover;
            font-size:25pt;
            color:#fff;

            span {
                padding-bottom:10px;
            }
        }

        .textual-amount {
            color:#34495e;
            font-weight: bold;
            padding-top:5px;
        }
    }

    .buttons-container {
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        display:flex;
        padding:20px;

        .cancel {
            width:50%;
            border:1px solid #34495e;
            color: #34495e;
            border-radius: 10px;
            text-align:center;
            margin-right:8px;
            padding:8px 0px;
        }

        .confirm {
            width:50%;
            background-color: #34495e;
            color:#fff;
            border-radius: 10px;
            text-align:center;
            margin-left:8px;
            padding:8px 0px;
        }
    }
</style>