<template>
  <f7-page name="about">
    <f7-navbar title="Pay4me Program" back-link="Back"></f7-navbar>
    <f7-block-title>
      <b>Join Our Pay4me Program</b>
    </f7-block-title>

    <f7-block strong v-if="user_country=='Nigeria'">
      <p>The Pay4me features once activated allows members to send you real money in forms of Bronze, Silver or Gold. For your country, Bronze is N1,000.00, Silver is N3,000 and Gold is N5,000</p>
      <p>Whenever you earn total of N10,000 or more in a month, you will be paid between 1st to 7th of following month. Note for any money earn we charge 25% admin fees. This means if a member sends you Bronze of N1,000, we will credit your account with N750.</p>
    </f7-block>
    <f7-block v-else>
      <p>The Pay4me features once activated allows members to send you real money in forms of Bronze, Silver or Gold. For your country, Bronze is $2.00, Silver is $5.00 and Gold is $10.00</p>
      <p>Whenever you earn total of $50.00 or more in a month, you will be paid between 1st to 7th of following month. Note for any money earn we charge 25% admin fees. This means if a member sends you Bronze of $2.00, we will credit your account with $1.50</p>
    </f7-block>

    <div>
      <f7-block v-if="this.subscribe_affiliate">
        <p>
          <font color="green">Your Affiliate Account is Active</font>
        </p>
        <f7-button fill color="red" @click="deactivateAffiliate">DeActivate Program</f7-button>
      </f7-block>

      <f7-block v-else>
        <div class="list media-list">
          <f7-list>
            <f7-list-item
              checkbox
              title="I agree with the above conditions."
              name="affiliate-checkbox"
              color="green"
              @change="onCheckBoxChange"
            ></f7-list-item>
          </f7-list>
        </div>
        <f7-button fill @click="activateAffiliate">Activate Program</f7-button>
      </f7-block>
    </div>
  </f7-page>
</template>
<script>
export default {
  data() {
    return {
      agreement: false
    };
  },
  computed: {
    user_country() {
      return this.$store.getters.user_country;
    },
    subscribe_affiliate() {
      return this.$store.getters.subscribe_affiliate;
    }
  },
  methods: {
    onCheckBoxChange: function(e) {
      var self = this;
      var value = e.target.value;
      if (e.target.checked) {
        self.agreement = true;
      } else {
        self.agreement = false;
      }
    },
    deactivateAffiliate() {
      var dialog = this.$f7.dialog
        .create({
          title: "Delete Pay4me?",
          text:
            "Your Pay4me including your earns for the month  will be deleted. Confirm if you want to continue with deleting your Pay4me Account.",
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: (dialog, index) => {
            if (index == 1) {
              const app = this.$f7;
              //var payload = {};
              //payload.profileMessage = response;
              this.$store.dispatch("deleteAffiliate");
              this.$f7.dialog.close();
              app.panel.close();
              this.$store.dispatch("getUserAffiliate");
            } else {
            }
          },
          on: {
            open: function() {
              //console.log("OPEN");
            }
          }
        })
        .open();
    },
    activateAffiliate() {
      if (this.agreement) {
        if (this.user_country == "Nigeria") {
          //Nigeria
          this.$f7.popover.close();
          var dialog = this.$f7.dialog
            .create({
              title: "Bank Details",
              text: "",
              content:
                "<div class='dialog-input-field item-input'>" +
                "<div class='item-input-wrap'>" +
                "<input class='dialog-input' type='text' placeholder='Bank Name' required />" +
                "</div>" +
                "</div>" +
                "<div class='dialog-input-field item-input'>" +
                "<div class='item-input-wrap'>" +
                "<input class='dialog-input account-number' type='text' placeholder='Account - Number' required />" +
                "</div>" +
                "</div>" +
                "<div class='dialog-input-field item-input'>" +
                "<div class='item-input-wrap'>" +
                "<input class='dialog-input account-name' type='text' placeholder='Account Name' required />" +
                "</div>" +
                "</div>",

              buttons: [{ text: "Cancel", close: true }, { text: "Submit" }],
              onClick: (dialog, index) => {
                //console.log("nosa");
                //console.log(dialog.$el.find(".dialog-input").val());
                var bank_name = dialog.$el
                  .find(".dialog-input")
                  .val()
                  .trim();
                var account_number = dialog.$el
                  .find(".account-number")
                  .val()
                  .trim();
                var account_name = dialog.$el
                  .find(".account-name")
                  .val()
                  .trim();
                // console.log("bank name", bank_name);
                //console.log("account number", account_number);
                // console.log("account name", account_name);
                if (bank_name.length >= 2) {
                  if (account_number.length == 10) {
                    if (account_name.length >= 2) {
                      //program affiliate record
                      var payload = {};
                      payload.bank_name = bank_name;
                      payload.account_number = account_number;
                      payload.account_name = account_name;
                      payload.paypal = "";
                      // console.log("payload", JSON.stringify(payload));
                      this.$store.dispatch("processAffiliate", payload);
                      this.$f7.dialog.close();
                      this.$store.dispatch("getUserAffiliate");
                    } else {
                      this.$store.commit(
                        "setAlertMessage",
                        "Account Name too short"
                      );
                    }
                  } else {
                    this.$store.commit(
                      "setAlertMessage",
                      "Account Number is too short or too long"
                    );
                  }
                } else {
                  //console.log("response", response);
                  if (index == 1) {
                    this.$store.commit(
                      "setAlertMessage",
                      "Bank Name too short"
                    );
                  }
                }
              },
              on: {
                open: function() {
                  //console.log("OPEN");
                }
              }
            })
            .open();
          //Nigeria ends here
        } else {
          //non Nigeria
          //console.log("Non Nigeria Affiliate");
          //non nigeria ends here

          this.$f7.popover.close();
          var dialog = this.$f7.dialog
            .create({
              title: "Paypal Details",
              text: "",
              content:
                "<div class='dialog-input-field item-input'>" +
                "<div class='item-input-wrap'>" +
                "<input class='dialog-input' type='text' placeholder='PayPay Details' required />" +
                "</div>" +
                "</div>",
              buttons: [{ text: "Cancel", close: true }, { text: "Submit" }],
              onClick: (dialog, index) => {
                //console.log("nosa");
                //console.log(dialog.$el.find(".dialog-input").val());
                var paypal = dialog.$el
                  .find(".dialog-input")
                  .val()
                  .trim();
                if (paypal.length >= 2) {
                  var payload = {};
                  payload.bank_name = "";
                  payload.account_number = "";
                  payload.account_name = "";
                  payload.paypal = paypal;
                  this.$store.dispatch("processAffiliate", payload);
                  this.$f7.dialog.close();
                  this.$store.dispatch("getUserAffiliate");
                } else {
                  //console.log("response", response);
                  if (index == 1) {
                    this.$store.commit(
                      "setAlertMessage",
                      "Your PayPal Details are too Short"
                    );
                  }
                }
              },
              on: {
                open: function() {
                  //console.log("OPEN");
                }
              }
            })
            .open();
        }
      } else {
        this.$store.commit(
          "setAlertMessage",
          "Check I agree button to continue..."
        );
      }
    }
  },
  created() {
    this.$store.dispatch("getUserCountry");
    this.$store.dispatch("getUserAffiliate");
  }
};
</script>