<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <h5>On-Site</h5>
        <table class="table table-sm">
          <tr v-for="(onSiteFacility, i) in onSiteFacilities" :key="i">
            <td>
              {{ onSiteFacility.category + " " + onSiteFacility.description }}
            </td>
          </tr>
        </table>
      </div>
      <div class="col">
        <h5>Off-Site</h5>
        <table class="table table-sm">
          <tr v-for="(offSiteFacility, i) in offSiteFacilities" :key="i">
            <td>
              {{ offSiteFacility.category + " " + offSiteFacility.description }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
export default {
  data() {
    return {
      onSiteFacilities: [],
      offSiteFacilities: []
    };
  },
  props: {
    resortCode: ""
  },
  mounted() {
    this.getFacilities();
  },
  methods: {
    getFacilities() {
      this.getOnSite();
      this.getOffSite();
    },
    async getOnSite() {
      var onSiteObj = {
        id: this.resortCode,
        site: "On"
      };
      const response = await axios.post(
        "https://www.gomelo.co.za/api/v1/product/facilities",
        onSiteObj
      );
      if (response.status === 200) {
        response.data.forEach(facility => {
          if (facility.description !== null) {
            facility.description = "(" + facility.description + ")";
          } else {
            facility.description = "";
          }
        });
        this.onSiteFacilities = response.data;
      }
    },
    async getOffSite() {
      var offSiteObj = {
        id: this.resortCode,
        site: "Off"
      };
      const response = await axios.post(
        "https://www.gomelo.co.za/api/v1/product/facilities",
        offSiteObj
      );
      if (response.status === 200) {
        response.data.forEach(facility => {
          if (facility.description !== null) {
            facility.description = "(" + facility.description + ")";
          } else {
            facility.description = "";
          }
        });
        this.offSiteFacilities = response.data;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
