<template>
  <f7-page name="chatgroups" @page:beforein="init">
    <div class="wrapper">
      <f7-navbar title="Football Blogging"></f7-navbar>
      <f7-block>
        <f7-link @click="gotoGroup">Start 247footballchat Blogging</f7-link>

        <f7-block>
          <h4>This Month Top Bloggers</h4>
          <f7-row>
            <f7-col width="50" medium="25"
              ><p v-for="(score, index) in monthblogger" :key="index">
                {{ score.name }}
              </p></f7-col
            >
            <f7-col width="50" medium="25"
              ><p v-for="(score, index) in monthblogger" :key="index">
                {{ score.scores }}
              </p></f7-col
            >
          </f7-row>

          <h4>This Week Top Bloggers</h4>
          <f7-row>
            <f7-col width="50" medium="25"
              ><p v-for="(score, index) in weekblogger" :key="index">
                {{ score.name }}
              </p></f7-col
            >
            <f7-col width="50" medium="25"
              ><p v-for="(score, index) in weekblogger" :key="index">
                {{ score.scores }}
              </p></f7-col
            >
          </f7-row>

          <h4>Today's Top Bloggers</h4>
          <f7-row>
            <f7-col width="50" medium="25"
              ><p v-for="(score, index) in todayblogger" :key="index">
                {{ score.name }}
              </p></f7-col
            >
            <f7-col width="50" medium="25"
              ><p v-for="(score, index) in todayblogger" :key="index">
                {{ score.scores }}
              </p></f7-col
            >
          </f7-row>
        </f7-block>
      </f7-block>
    </div>
    <div class="wrapper">
      <h4><b>Paid Adverts</b></h4>
      <span>
        To place your adverts below send mail to support@247footballchat.com
      </span>
    </div>
    <f7-block>
      <f7-row no-gap>
        <f7-col>
          <p v-for="(advert, index) in advert_country" :key="index">
            <f7-link :href="advert.url" external v-if="index % 2 == 0">
              <img
                class="image--cover"
                :src="advert.image"
                :alt="advert.alternate"
              />
            </f7-link>
            <span v-if="index % 2 == 0"><br />{{ advert.textMesage }}</span>
          </p>
        </f7-col>

        <f7-col>
          <p v-for="(advert, index) in advert_country" :key="index">
            <f7-link :href="advert.url" external v-if="index % 2 > 0">
              <img
                class="image--cover"
                :src="advert.image"
                :alt="advert.alternate"
              />
            </f7-link>
            <span v-if="index % 2 > 0"><br />{{ advert.textMesage }}</span>
          </p></f7-col
        >
      </f7-row>
    </f7-block>

    <f7-block>
      <f7-row no-gap>
        <f7-col>
          <p v-for="(advert, index) in advert_default" :key="index">
            <f7-link :href="advert.url" external v-if="index % 2 == 0">
              <img
                class="image--cover"
                :src="advert.image"
                :alt="advert.alternate"
              />
            </f7-link>
            <span v-if="index % 2 == 0"><br />{{ advert.textMesage }}</span>
          </p></f7-col
        >

        <f7-col>
          <p v-for="(advert, index) in advert_default" :key="index">
            <f7-link :href="advert.url" external v-if="index % 2 > 0">
              <img
                class="image--cover"
                :src="advert.image"
                :alt="advert.alternate"
              />
            </f7-link>
            <span v-if="index % 2 > 0"><br />{{ advert.textMesage }}</span>
          </p></f7-col
        >
      </f7-row>
    </f7-block>
    <div class="wrapper">
      <p>To place your adverts here send mail to support@247footballchat.com</p>
    </div>
  </f7-page>
</template>

<script>
import firebase from "firebase";
export default {
  data() {
    return {
      userCountry: null,
      text1: "Join Chatme24 to meet new friends",
      text2: "Join Penpal America to meet new friends",
      weekblogger: [],
      monthblogger: [],
      todayblogger: [],
    };
  },
  watch: {},
  methods: {
    advertrouter(group) {
      this.$f7router.navigate("https://247sms.com", External);
    },
    gotoJoinGroup(payload) {
      this.$store.dispatch("addGroupMember");
      this.$store.commit("setAlertMessage", "You have been added to the group");
    },
    gotoGroup(group) {
      this.$f7router.navigate("/chatgroup/");
    },
    init() {
      this.$store.commit("setShowTabs", true);
      //console.log("Country3");
      //      this.$store.dispatch("getMyGroups");
      //this.$store.commit("setUserCountry", null);
      //this.$store.dispatch("getUserCountry");
      //this.blog(userCountryBlog);

      var mycountry = "";
      this.$f7ready((f7) => {
        //console.log("country2", this.userCountry);
        firebase
          .database()
          .ref("users")
          .child(firebase.auth().currentUser.uid)
          .once("value", (snapshot) => {
            mycountry = snapshot.val().country;
            // console.log("nosa country", snapshot.val().country);

            var postData = {
              country: mycountry,
            };

            const self = this;
            const app = self.$f7;
            app.request.post(
              "https://chatme24.com//statistics//todayblogger.php",
              postData,
              function (data) {
                var obj = JSON.parse(data);
                //console.log(obj);
                self.todayblogger = obj;
                //console.log(self.todayblogger.name);
              }
            );

            app.request.post(
              "https://chatme24.com//statistics//weekblogger.php",
              postData,
              function (data) {
                var obj = JSON.parse(data);
                //console.log(obj);
                self.weekblogger = obj;
                //console.log(self.todayblogger.name);
              }
            );

            app.request.post(
              "https://chatme24.com//statistics//monthblogger.php",
              postData,
              function (data) {
                var obj = JSON.parse(data);
                //console.log(obj);
                self.monthblogger = obj;
                //console.log(self.todayblogger.name);
              }
            );
          });
      });
    },
  },
  computed: {
    advert_default() {
      //console.log("advert logs", advert_default);
      return this.$store.getters.advert_default;
    },
    advert_country() {
      return this.$store.getters.advert_country;
    },

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

  mounted() {},
  created() {
    this.init();
  },
};
</script>

<style scoped>
.wrapper {
  text-align: center;
}
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.image--cover {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
</style>