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

    <f7-block strong v-if="user_country=='Nigeria'">
      <p>The Gift features once activated allows members to send you real money. We have three categories of Gifts: Bronze, Silver or Gold. For your country, Bronze is N1,000.00, Silver is N3,000 and Gold is N5,000</p>
      <p>You get paid on Friday Whenever your earnings reach N5,000 or more. Note for any money you 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 Gift features once activated allows members to send you real money. We have three categories of Gifts: Bronze, Silver or Gold. For your country, Bronze is $2.00, Silver is $5.00 and Gold is $10.00</p>
      <p>You get paid on Friday Whenever your earnings reach $25.00 or more. Note for any money you earn we charge 25% admin fees. This means if a member sends you Bronze of $2.0, 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 Gift Feature?",
          text:
            "Your Gifts including your earns for the month  will be deleted. Confirm if you want to continue with deleting your Gift 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>