<template>
  <f7-page name="about">
    <f7-navbar title="Pay4me" back-link="Back"></f7-navbar>
    <f7-block-title>
      <b>Pay for Me</b>
    </f7-block-title>
    <f7-block strong>
      <p>You are about to do Pay4me for {{this.friend.name}}</p>
      <p>Select from the options below: Bronze, Silver or Gold</p>
    </f7-block>
    <!--
    <f7-block>
      <f7-button fill @click="payBronze">
        <font color="#cd7f32">Pay Bronze (N1,000)</font>
      </f7-button>
    </f7-block>
    <f7-block>
      <f7-button fill @click="paySilver">
        <font color="#C0C0C0">Pay Silver (N3,000)</font>
      </f7-button>
    </f7-block>
    <f7-block>
      <f7-button fill @click="payGold">
        <font color="#DAA520">Pay Gold (N5,000)</font>
      </f7-button>
    </f7-block>
    -->
    <div v-if="this.user_country=='Nigeria'">
      <f7-block>
        <Rave
          :email="email"
          :amount="amount1"
          :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="NGN"
          country="NG"
          style-class="paymentbtn"
        >
          <i>Pay for Bronze (N1,000)</i>
        </Rave>
      </f7-block>

      <f7-block>
        <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="NGN"
          country="NG"
          style-class="paymentbtn"
        >
          <i>Pay for Silver (N3,000)</i>
        </Rave>
      </f7-block>

      <f7-block>
        <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="NGN"
          country="NG"
          style-class="paymentbtn"
        >
          <i>Pay for Gold (N5,000)</i>
        </Rave>
      </f7-block>
    </div>

    <div v-else>
      <f7-block>
        <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>Pay for Bronze ($2.00)</i>
        </Rave>
      </f7-block>

      <f7-block>
        <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>Pay for Silver ($5.00)</i>
        </Rave>
      </f7-block>

      <f7-block>
        <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>Pay for Gold ($10.00)</i>
        </Rave>
      </f7-block>
    </div>

    <f7-block>
      <div align="center" v-if="payment_status">
        <span>Payment &nbsp; {{payment_status}}</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: 100,
      amount2: 3000,
      amount3: 5000,
      amount4: 2,
      amount5: 5,
      amount6: 10,
      plan: 1000,
      fname: "",
      lname: "",
      subaccounts: [],
      country: "NG",
      currency: "NGN",
      meta: [
        {
          metaname: "Swift",
          metavalue: "Swift Alliance"
        }
      ],
      sub: [
        {
          id: "1324"
        },
        {
          id: "1221"
        }
      ],

      payment_status: null,
      friend: null,
      friend_Details: null
    };
  },
  computed: {
    reference() {
      return this.$store.getters.reference;
    },
    user_details() {
      return this.$store.getters.user_details;
    },
    user_country() {
      return this.$store.getters.user_country;
    }
  },
  methods: {
    payBronze() {},
    paySilver() {},
    payGold() {},
    callback: function(response) {
      console.log(response);

      if (
        (response.respcode == "00" &&
          response.respmsg == "Approved. Successful") ||
        (response.respcode == "00" && response.respmsg == "Approved")
      ) {
        console.log("correct");
        this.payment_status = response.status;
        console.log("Give value to customer", response.data.data.amount);
        console.log("payout", this.friend.payout);
        var old_payout = this.friend.payout;
        var pay4me_amount = response.data.data.amount;
        var user_pay4me_amount = pay4me_amount * 0.75;
        var newpayout = old_payout + user_pay4me_amount;
        console.log("newpayout", newpayout);
        //this.$store.dispatch("getUserPayout");
        this.$store.dispatch("getReference");
        //this.$f7router.navigate("/pay4me/");
        this.payment_status = response.respmsg;

        //send to firebase
        var msg = "You just received Pay4me amount: " + user_pay4me_amount;
        this.$store.dispatch("sendMessage", {
          friend: this.friend,
          msg: msg,
          img: null
        });
        // update payout for receiver

        var user_uid = firebase.auth().currentUser.uid;
        firebase
          .database()
          .ref("users/" + this.friend.uid)
          .update({
            payout: newpayout
          });

        // update pay4me payout

        var user_uid = firebase.auth().currentUser.uid;
        firebase
          .database()
          .ref("pay4mePayout/" + user_uid)
          .push({
            friend_uid: this.friend.uid,
            friend_email: this.friend.email,
            oldPayout: this.friend.payout,
            pay4meAmount: pay4me_amount,
            userPay4meAmount: user_pay4me_amount,
            newPayout: newpayout,
            senderName: this.user_details.name,
            receiverName: this.friend.name
          });
        //send to mysal database
        //console.log("http");
        var postData = {
          userID: this.friend.uid,
          email: this.friend.email,
          oldPayout: this.friend.payout,
          pay4meAmount: pay4me_amount,
          userPay4meAmount: user_pay4me_amount,
          newPayout: newpayout,
          senderName: this.user_details.name,
          senderID: firebase.auth().currentUser.uid,
          receiverName: this.friend.name
        };

        this.$f7.request.post(
          "https://citygists.com/register/citygistspayout.php",
          postData,
          function(data) {
            console.log("Load was performed", data);
          }
        );
      }
    },
    close: function(response) {
      console.log("Payment closed", this.payment_status);
      console.log("Payment response", response);
      console.log("Payment refernce", this.reference);
    }
  },

  created() {
    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);
    this.$store.dispatch("getReference");
    this.$store.dispatch("getUserDetails");
    this.fname = this.user_details.name;
    this.email = this.user_details.email;
    this.$store.dispatch("getUserCountry");
  }
};
</script>


<style scoped>
.paymentbtn {
  color: #4169e1;
  font-weight: 800;
}
</style>