<template>
  <f7-page name="about" @page:beforein="initHome">
    <f7-navbar
      title="Club Standings"
      class="navbar color-theme-orange"
      back-link="Back"
    >
      <!-- <div slot="right" @click="lock()" v-if="moderator">Lock</div> -->
      <f7-nav-right>
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
          icon-ios="f7:search"
          icon-aurora="f7:search"
          icon-md="material:search"
          color="blue"
        ></f7-link>
      </f7-nav-right>
      <f7-searchbar
        class="searchbar-demo"
        expandable
        search-container=".search-list"
        search-in=".item-title"
        :disable-button="!$theme.aurora"
      ></f7-searchbar>
    </f7-navbar>
    <f7-list class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>

    <f7-block-title><b>Premiership</b></f7-block-title>
    <f7-block>
      <f7-row no-gap>
        <f7-col width="10"><b>SN</b></f7-col>
        <f7-col width="35"><b>Clubs</b></f7-col>
        <f7-col width="5"><b>P</b></f7-col>
        <f7-col width="5"><b>W</b></f7-col>
        <f7-col width="5"><b>D</b></f7-col>
        <f7-col width="5"><b>L</b></f7-col>
        <f7-col width="5"><b>GD</b></f7-col>
        <f7-col width="15"><b>PTS</b></f7-col>
        <f7-col width="15"><b>Last 5</b></f7-col>
      </f7-row>
      <f7-row no-gap v-for="(englishclub, index) in englishclubs" :key="index">
        <f7-col width="10">{{ englishclub.SN }}</f7-col>
        <f7-col width="35">{{ englishclub.team }}</f7-col>
        <f7-col width="5">{{ englishclub.P }}</f7-col>
        <f7-col width="5">{{ englishclub.W }}</f7-col>
        <f7-col width="5">{{ englishclub.D }}</f7-col>
        <f7-col width="5">{{ englishclub.L }}</f7-col>
        <f7-col width="5">{{ englishclub.GD }}</f7-col>
        <f7-col width="5">{{ englishclub.PTS }}</f7-col>
        <f7-col width="5" v-if="englishclub.P1 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P1 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P1 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="englishclub.P2 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P2 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P2 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="englishclub.P3 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P3 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P3 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="englishclub.P4 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P4 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P4 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="englishclub.P5 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P5 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="englishclub.P5 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-block-title><b>La Liga</b></f7-block-title>
    <f7-block>
      <f7-row no-gap>
        <f7-col width="10"><b>SN</b></f7-col>
        <f7-col width="35"><b>Clubs</b></f7-col>
        <f7-col width="5"><b>P</b></f7-col>
        <f7-col width="5"><b>W</b></f7-col>
        <f7-col width="5"><b>D</b></f7-col>
        <f7-col width="5"><b>L</b></f7-col>
        <f7-col width="5"><b>GD</b></f7-col>
        <f7-col width="15"><b>PTS</b></f7-col>
        <f7-col width="15"><b>Last 5</b></f7-col>
      </f7-row>
      <f7-row no-gap v-for="(spainclub, index) in spainclubs" :key="index">
        <f7-col width="5">{{ spainclub.SN }}</f7-col>
        <f7-col width="35">{{ spainclub.team }}</f7-col>
        <f7-col width="5">{{ spainclub.P }}</f7-col>
        <f7-col width="5">{{ spainclub.W }}</f7-col>
        <f7-col width="5">{{ spainclub.D }}</f7-col>
        <f7-col width="5">{{ spainclub.L }}</f7-col>
        <f7-col width="5">{{ spainclub.GD }}</f7-col>
        <f7-col width="5">{{ spainclub.PTS }}</f7-col>

        <f7-col width="5" v-if="spainclub.P1 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P1 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P1 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="spainclub.P2 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P2 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P2 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="spainclub.P3 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P3 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P3 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="spainclub.P4 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P4 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P4 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="spainclub.P5 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P5 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="spainclub.P5 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-block-title><b>France Ligue 1</b></f7-block-title>
    <f7-block>
      <f7-row no-gap>
        <f7-col width="10"><b>SN</b></f7-col>
        <f7-col width="35"><b>Clubs</b></f7-col>
        <f7-col width="5"><b>P</b></f7-col>
        <f7-col width="5"><b>W</b></f7-col>
        <f7-col width="5"><b>D</b></f7-col>
        <f7-col width="5"><b>L</b></f7-col>
        <f7-col width="5"><b>GD</b></f7-col>
        <f7-col width="15"><b>PTS</b></f7-col>
        <f7-col width="15"><b>Last 5</b></f7-col>
      </f7-row>
      <f7-row no-gap v-for="(franceclub, index) in franceclubs" :key="index">
        <f7-col width="10">{{ franceclub.SN }}</f7-col>
        <f7-col width="35">{{ franceclub.team }}</f7-col>
        <f7-col width="5">{{ franceclub.P }}</f7-col>
        <f7-col width="5">{{ franceclub.W }}</f7-col>
        <f7-col width="5">{{ franceclub.D }}</f7-col>
        <f7-col width="5">{{ franceclub.L }}</f7-col>
        <f7-col width="5">{{ franceclub.GD }}</f7-col>
        <f7-col width="5">{{ franceclub.PTS }}</f7-col>
        <f7-col width="5" v-if="franceclub.P1 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P1 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P1 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="franceclub.P2 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P2 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P2 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="franceclub.P3 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P3 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P3 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="franceclub.P4 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P4 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P4 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>

        <f7-col width="5" v-if="franceclub.P5 == '1'">
          <f7-icon material="check_circle" color="green"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P5 == '2'">
          <f7-icon material="remove_circle" color="gray"></f7-icon>
        </f7-col>
        <f7-col width="5" v-if="franceclub.P5 == '3'">
          <f7-icon material="cancel" color="red"></f7-icon>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script>
import firebase from "firebase";
import moment from "moment";

export default {
  data() {
    return {
      moderator: true,
      appState: 1,

      englishclubs: [],
      spainclubs: [],
      franceclubs: [],
      germanclubs: [],
      italyclubs: [],
    };
  },
  watch: {},

  computed: {
    contacts() {
      return this.$store.getters.contacts;
    },

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

  methods: {
    async checkInternet() {
      // console.log("members");
      if (window.hasOwnProperty("cordova")) {
        let network_status = await this.$store.dispatch("checkConnection");
        if (network_status == "offline") {
          this.$store.commit(
            "setAlertMessage",
            "It seems you are offline. Kindly check internet connection to continue..."
          );
        }
      }
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
    addFrd(frd) {
      var request = {};
      request.sender = firebase.auth().currentUser.uid;
      request.recipient = frd.uid;
      console.log("request", request);
      this.$store.dispatch("sendRequest", request);
    },
    gotoChat(frd) {
      var frd_string = JSON.stringify(frd);
      this.$f7router.navigate("/chat/" + encodeURIComponent(frd_string));
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
  },

  mounted() {
    this.$f7ready((f7) => {
      const self = this;
      const app = self.$f7;
      app.request.get(
        "https://chatme24.com/sportsupdate/goalalert/pullstandingeng.php",
        function (data) {
          var obj = JSON.parse(data);
          self.englishclubs = obj;
          console.log(obj);
        }
      );

      app.request.get(
        "https://chatme24.com/sportsupdate/goalalert/pullstandingspa.php",
        function (data) {
          var obj = JSON.parse(data);
          self.spainclubs = obj;
          //console.log(obj);
        }
      );

      app.request.get(
        "https://chatme24.com/sportsupdate/goalalert/pullstandingfrance.php",
        function (data) {
          var obj = JSON.parse(data);
          self.franceclubs = obj;
          // console.log(obj);
        }
      );
    });
  },
  created() {
    this.checkInternet();
  },
};
</script>

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