<template>
  <f7-page name="pay4me">
    <f7-navbar title="Acct Topup" back-link="Back">
      <f7-nav-right>
        <div class="wallet">
          Payout<br>${{ Number(user_payout).toLocaleString() }}
        </div>
        
        <div class="wallet">
          Gifts<br>{{ nFormatter(gift)}}
        </div>
        <div class="wallet">
          Wallet<br>{{ nFormatter(wallet) }}
        </div>
      
      </f7-nav-right>
    </f7-navbar>
    <f7-block-title>
      <b>Top Up Your Account</b>
    </f7-block-title>

    <f7-block strong>
      <p>
        Top up your Account to be able to chat and gift other users...
      </p>
    </f7-block>

    <f7-block>
      <f7-row class="grid-demo">
        <f7-col width="50" medium="25">
          <Rave
            :email="email"
            :amount="amount1"
            :reference="reference"
            :rave-key="raveKey"
            :callback="callback"
            :close="close"
            :metadata="meta"
            :subaccounts="subaccounts"
            :customerFirstname="fname"
            :customerLastname="lname"
            paymentOptions="card,barter,account,ussd"
            hostedPayemt="1"
            customTitle="Swift Alliance Ltd"
            currency="USD"
            country="US"
            style-class="paymentbtn"
          >
            <i class="f7-icons size-22">bag</i> <i> Bronze ($1.0)</i><br />
            <i style="font-size: 10px; color:yellow;'">Gives 10 points</i>
          </Rave></f7-col
        >
        <f7-col width="50" medium="25">
          <Rave
            :email="email"
            :amount="amount2"
            :reference="reference"
            :rave-key="raveKey"
            :callback="callback"
            :close="close"
            :metadata="meta"
            :subaccounts="subaccounts"
            :paymentPlan="plan"
            :customerFirstname="fname"
            :customerLastname="lname"
            paymentOptions="card,barter,account,ussd"
            hostedPayemt="1"
            customTitle="Swift Alliance Ltd"
            currency="USD"
            country="US"
            style-class="paymentbtn"
          >
            <i class="f7-icons size-22">bag_badge_minus</i>
            <i> Silver ($3.0)</i><br />
            <i style="font-size: 10px; color:yellow;'">Gives 30 points</i>
          </Rave></f7-col
        >
        <f7-col width="50" medium="25">
          <Rave
            :email="email"
            :amount="amount3"
            :reference="reference"
            :rave-key="raveKey"
            :callback="callback"
            :close="close"
            :metadata="meta"
            :subaccounts="subaccounts"
            :paymentPlan="plan"
            :customerFirstname="fname"
            :customerLastname="lname"
            paymentOptions="card,barter,account,ussd"
            hostedPayemt="1"
            customTitle="Swift Alliance Ltd"
            currency="USD"
            country="US"
            style-class="paymentbtn"
          >
            <i class="f7-icons size-22">bag_badge_plus</i>
            <i> Gold ($5.0)</i><br />
            <i style="font-size: 10px; color:yellow;'">Gives 50 points</i>
          </Rave></f7-col
        >
        <f7-col width="50" medium="25">
          <Rave
            :email="email"
            :amount="amount4"
            :reference="reference"
            :rave-key="raveKey"
            :callback="callback"
            :close="close"
            :metadata="meta"
            :subaccounts="subaccounts"
            :paymentPlan="plan"
            :customerFirstname="fname"
            :customerLastname="lname"
            paymentOptions="card,barter,account,ussd"
            hostedPayemt="1"
            customTitle="Swift Alliance Ltd"
            currency="USD"
            country="US"
            style-class="paymentbtn"
          >
            <i class="f7-icons size-22">bag_fill</i>
            <i> Dimond ($10.0)</i><br />
            <i style="font-size: 10px; color:yellow;'">Gives 100 points</i>
          </Rave></f7-col
        >

        <f7-col width="50" medium="25">
          <Rave
            :email="email"
            :amount="amount5"
            :reference="reference"
            :rave-key="raveKey"
            :callback="callback"
            :close="close"
            :metadata="meta"
            :subaccounts="subaccounts"
            :paymentPlan="plan"
            :customerFirstname="fname"
            :customerLastname="lname"
            paymentOptions="card,barter,account,ussd"
            hostedPayemt="1"
            customTitle="Swift Alliance Ltd"
            currency="USD"
            country="US"
            style-class="paymentbtn"
          >
            <i class="f7-icons size-22">bag_fill_badge_minus</i>
            <i> Platinum ($20.0)</i><br />
            <i style="font-size: 10px; color:yellow;'">Gives 200 points</i>
          </Rave></f7-col
        >
        <f7-col width="50" medium="25">
          <Rave
            :email="email"
            :amount="amount6"
            :reference="reference"
            :rave-key="raveKey"
            :callback="callback"
            :close="close"
            :metadata="meta"
            :subaccounts="subaccounts"
            :paymentPlan="plan"
            :customerFirstname="fname"
            :customerLastname="lname"
            paymentOptions="card,barter,account,ussd"
            hostedPayemt="1"
            customTitle="Swift Alliance Ltd"
            currency="USD"
            country="US"
            style-class="paymentbtn"
          >
            <i class="f7-icons size-22">bag_fill_badge_plus</i>
            <i>Rhodium ($50.0)</i><br />
            <i style="font-size: 10px; color:yellow;'">Gives 500 points</i>

            <i> </i> </Rave
        ></f7-col>
      </f7-row>
    </f7-block>

    <f7-block>
      <div align="center" v-if="payment_status">
        <span
          >Payment &nbsp; {{ payment_status }}. You can perform another account
          or start using your wallet from now</span
        >
      </div>
    </f7-block>
  </f7-page>
</template>

<script>
import Rave from "vue-ravepayment";
import firebase from "firebase";
import moment from "moment";
import message from "framework7-vue/components/message";

//import paystack from "vue-paystack";
export default {
  components: {
    //paystack
    Rave,
  },
  data() {
    return {
      raveKey: "FLWPUBK-581258c33a65e85bc6116e0596a71662-X",
      //raveKey: "FLWPUBK_TEST-661c78c02fd3395e2bbd31b17fc61920-X",
      email: "",
      amount1: 1,
      amount2: 3,
      amount3: 5,
      amount4: 10,
      amount5: 20,
      amount6: 50,
      plan: 107036,
      fname: "",
      lname: "",
      subaccounts: [],
      country: "US",
      currency: "USD",
      meta: [
        {
          metaname: "Swift",
          metavalue: "Swift Alliance",
        },
      ],
      sub: [
        {
          id: "1324",
        },
        {
          id: "1221",
        },
      ],

      payment_status: null,
      friend: null,
      friend_Details: null,
    };
  },
  computed: {
    wallet() {
      return this.$store.getters.wallet;
    },

    user_payout() {
      return this.$store.getters.user_payout;
    },

    gift() {
      return this.$store.getters.gift;
    },

    user() {
      return this.$store.getters.user;
    },
    reference() {
      //console.log(this.$store.getters.reference);
      return this.$store.getters.reference;
    },
    user_details() {
      return this.$store.getters.user_details;
    },
    user_country() {
      return this.$store.getters.user_country;
    },
  },
  methods: {

    nFormatter(num) {
     if (num >= 1000000000) {
        return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
     }
     if (num >= 1000000) {
        return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
     }
     if (num >= 1000) {
        return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
     }
     return num;
},

    callback: function (response) {
      //console.log(response);
      //generate a new reference
      var payload = {};
      payload.email = this.user[0].email;
      payload.domain = this.user[0].domain;
      payload.name = this.user[0].name;
      this.$store.dispatch("getReference", payload);
      if (
        (response.respcode == "00" &&
          response.respmsg == "Approved. Successful") ||
        (response.respcode == "00" && response.respmsg == "Approved") ||
        (response.respcode == "00" && response.respmsg == "Approved by Financial Institution") ||
        (response.respcode == "00" && response.status == "successful")||
        (response.status == "successful")
      ) {
       // console.log("correct", response.respcode);
        this.payment_status = response.status;
       // console.log("payment_status", response.data.data.status);
       // console.log("Give value to customer", response.data.data.amount);
        var flt_amount = response.data.data.amount;
        var user_email = this.user[0].email;
        var flt_status = response.data.data.status;
        var flt_message = response.respmsg;
        var charged_amount = response.tx.charged_amount;
        var flt_currency = response.tx.currency;
        var paymentId = response.tx.id;
        var txRef = response.tx.txRef;

        //send to mysal database
        //console.log("http");
        var postData = {
          email: user_email,
          payment_amount: flt_amount,
          payment_status: flt_status,
          payment_message: flt_message,
          charged_amount: charged_amount,
          currency: flt_currency,
          paymentId: paymentId,
          txRef: txRef,
          domain: payload.domain,
        };

        //console.log("postData", postData);

        this.$f7.request.post(
          "https://penpalamerica.com/penpal/penpalflutterpayment.php",
          postData,
          function (data) {
            //console.log("Load was performed", data);
          }
        );
      }

      //check if it is different response received from customer
      if (
       
        (response.data.data.responsecode == "00" && response.data.data.responsemessage == "Approved by Financial Institution") 
      ) {
        //console.log("correct", response.data.data.responsecode );
        this.payment_status = response.tx.status;
        //console.log("payment_status", response.tx.status);
        //console.log("Give value to customer", response.tx.amount);
        var flt_amount = response.tx.amount;
        var user_email = this.user[0].email;
        var flt_status = response.tx.status;
        var flt_message = response.data.data.responsemessage;
        var charged_amount = response.tx.charged_amount;
        var flt_currency = response.tx.currency;
        var paymentId = response.tx.id;
        var txRef = response.tx.txRef;

        //send to mysal database
        //console.log("http");
        var postData = {
          email: user_email,
          payment_amount: flt_amount,
          payment_status: flt_status,
          payment_message: flt_message,
          charged_amount: charged_amount,
          currency: flt_currency,
          paymentId: paymentId,
          txRef: txRef,
          domain: payload.domain,
        };

        //console.log("postData", postData);

        this.$f7.request.post(
          "https://penpalamerica.com/penpal/penpalflutterpayment.php",
          postData,
          function (data) {
          //  console.log("Load was performed", data);
          }
        );
      }

    },
    close: async function (response) {
      var payload = {};
      payload.email = this.user[0].email;
      payload.domain = this.user[0].domain;
      payload.name = this.user[0].name;
      await this.$store.dispatch("getWallet", payload);
     
      //this.payment_status = response.status;
      //console.log("payment_status", response.data.data.status);
      //console.log("Payment closed", this.payment_status);
      //console.log("Payment response", response);
      //console.log("Payment refernce", this.reference);
    },
  },

  async created() {
    // console.log("email", this.user[0].email);
    // let param = this.$f7route.params.frd; // decodeURIComponent(this.$f7route.params.frd);
    // this.friend = JSON.parse(param);
    // this.friend_Details = this.friend;
    // console.log("in payme", this.friend);
    var payload = {};
    payload.email = this.user[0].email;
    payload.domain = this.user[0].domain;
    payload.name = this.user[0].name;

    //console.log("payload", payload);
    this.$store.dispatch("getReference", payload);
    //this.$store.dispatch("getUserDetails");
    this.fname = payload.name;
    this.email = payload.email;
    await this.$store.dispatch("getWallet", payload);
    //this.$store.dispatch("getUserCountry");
  },
};
</script>


<style scoped>
.paymentbtn {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition-duration: 0.4s;
}

.paymentbtn:hover {
  background-color: #4caf50; /* Green */
  color: white;
}

.wallet {
  margin-right: 16px;
  font-size: 12px;
}
.grid-demo div[class*="col"] {
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 16px;
  font-size: 12px;
}
.grid-resizable-demo {
  --f7-grid-row-gap: 16px;
}
.grid-resizable-demo div[class*="col"] {
  margin-bottom: 0;
}
.grid-resizable-demo .demo-col-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-22 {
  font-size: 16px;
}

.color-red {
  color: #ff0000;
}

.color-blue {
  color: #0000ff;
}
</style>