<template>
  <div>
    <main>
      <div
        class="relative pt-16 pb-32 flex content-center items-center justify-center"
        style="min-height: 75vh;"
      >
      <!-- style='background-image: require("@/assets/img/landing/top-main.jpg");' -->
        <div
          class="absolute top-0 w-full h-full bg-center bg-cover" style=""
          :style="{'background-image': 'url(' + require('@/assets/img/landing/top-main.jpg') + ')'}"
        >
          <span
            id="blackOverlay"
            class="w-full h-full absolute opacity-75 bg-black"
          ></span>
        </div>
        <div class="container relative mx-auto">
          <div class="items-center flex flex-wrap">
            <div class="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center">
              <div class="pr-12">
                <h1 class="text-white font-semibold text-5xl">
                  Treat the mind before treating the disease.
                </h1>
                <p class="mt-4 text-lg text-gray-300">
                  Every disease comes from the mind, only you can treat yourself. We just help you to overcome your disease.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div
          class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden"
          style="height: 70px;"
        >
          <svg
            class="absolute bottom-0 overflow-hidden"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none"
            version="1.1"
            viewBox="0 0 2560 100"
            x="0"
            y="0"
          >
            <polygon
              class="text-gray-100 fill-current"
              points="2560 0 2560 100 0 100"
            ></polygon>
          </svg>
        </div>
      </div>

      <section class="pb-20 bg-gray-100 -mt-24">
        <div class="container mx-auto px-4">
          <div class="flex flex-wrap">
            <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
              <div
                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
              >
                <div class="px-4 py-5 flex-auto">
                  <div
                    class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-medium"
                  >
                    <i class="fas fa-award"></i>
                  </div>
                  <h6 class="text-xl font-semibold">benefits</h6>
                  <p class="mt-2 mb-4 text-gray-600">
                    Advantages description
                  </p>
                </div>
              </div>
            </div>
            <div class="w-full md:w-4/12 px-4 text-center">
              <div
                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
              >
                <div class="px-4 py-5 flex-auto">
                  <div
                    class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-medium"
                  >
                    <i class="fas fa-retweet"></i>
                  </div>
                  <h6 class="text-xl font-semibold">benefits</h6>
                  <p class="mt-2 mb-4 text-gray-600">
                    Advantages description
                  </p>
                </div>
              </div>
            </div>
            <div class="pt-6 w-full md:w-4/12 px-4 text-center">
              <div
                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
              >
                <div class="px-4 py-5 flex-auto">
                  <div
                    class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-medium"
                  >
                    <i class="fas fa-fingerprint"></i>
                  </div>
                  <h6 class="text-xl font-semibold">benefits</h6>
                  <p class="mt-2 mb-4 text-gray-600">
                    Advantages description
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="flex flex-wrap justify-center text-center mb-24">
            <div class="w-full lg:w-6/12 px-4">
              <div class="flex items-center justify-center space-x-2" v-if="!reviewsLoaded">
                <div class="spinner-border animate-spin inline-block w-12 h-12 border-4 rounded-full bg-red-medium text-red-medium" role="status">
                  <span class="visually-hidden">..................</span>
                </div>
              </div>
  			      <div data-aos="fade-up" data-aos-delay="100" v-if="reviewsLoaded">
  				      <SwiperReviews :reviews="reviewsItems"/>
			        </div>
			        <!-- the plugin needs an id to interact with, best with an empty div -->
			        <div ref="googlereviews"><div id='map-plug'></div></div>
            </div>
          </div>
        </div>
      </section>
      
    </main>
  </div>
</template>
<script>
// import NavbarComponent from "../components/Navbar.vue";
import UserService from "@/services/user.service";
import LandingService from "@/services/landing.service";
import * as constant from '@/assets/js/constant.js'

import SwiperReviews from "@/views/landing/custom/LandingSwiperReviews.vue";
import AOS from "aos";

export default {
  name: "landing-page",
  data() {
    return {
	  content: "",
	  noticeItems: [],
	  reviewsItems: [],
	  reviewsLoaded: false,
	  clinicItems: constant.CLINIC_ITEMS
    };
  },
  mounted() {
    AOS.init();
    this.$store.dispatch('auth/logout');
    
    this.$nextTick(function () {
      window.scrollTo(0, 0);
      // this.$refs.target?.scrollIntoView();
    });
    this.initLoad();
      UserService.getPublicContent().then(
        (response) => {
          this.content = response.data;
        },
        (error) => {
          this.content =
            (error.response &&
              error.response.data &&
              error.response.data.message) ||
            error.message ||
            error.toString();
        }
    );
    
    for(var i=0; i<2; i++){
      var indicator = {
        no: i,
        title: 'sample-title',
        startday: 'sample-start',
        endday: 'sample-end',
        name: 'sample-name'
      };
      this.noticeItems.push(indicator);
    };

  },
  methods: {
	initLoad() {
		LandingService.reviews().then(
			(response) => {
				this.reviewsItems= response;
				this.reviewsLoaded = true;
			},
			(error) => {
				this.content =
					(error.response &&
					error.response.data &&
					error.response.data.message) ||
					error.message ||
					error.toString();
			}
		);
	// 	this.$store.dispatch("landing/yelp").then(
    //     (response) => {
	// 		console.log(response);
	// 	// 	this.reviewsItems.push(reviewItem);
    //     //   this.$router.push("/admin");
    //     },
    //     (error) => {
    //       this.loading = false;
    //       this.message =
    //         (error.response &&
    //           error.response.data &&
    //           error.response.data.message) ||
    //         error.message ||
    //         error.toString();
    //     }
    //   );


		// var businessId = 'medihand-acupuncture-clinic-pico-rivera-2';
		// var apiKey = 'TKZgETJ1yg3sruR1QOzrbtP31RbSmRWe7nCQnzadI-UFgG2lTiYxSLGCmDedFIYhrFMI6hSquCnx8ClTAhAiX1c5iK4fNxjtrDpoUTgeaAKI8HTqyz4g9HAQYyZ7YnYx';
		
    	// axios.get('/api/home/yelp/' + businessId + '/' + apiKey)
        // .then(response => {
        //   // JSON responses are automatically parsed.
        //   for (var i = 0; i < response.data.reviews.length; i++) {
		// 		var reviewItem = {
		// 				social : 1,
		// 				profile_photo_url : response.data.reviews[i].user.image_url,
		// 				author_name : response.data.reviews[i].user.name,
		// 				date : response.data.reviews[i].time_created,
		// 				rating : response.data.reviews[i].rating,
		// 				text : response.data.reviews[i].text
		//         }
		// 		reviewItem.time = Date.parse(response.data.reviews[i].time_created);
		// 		this.reviewsItems.push(reviewItem);
	    //     }
		// 	this.reviewsLoaded = true;
        // })
        // .catch(e => {
		// 	console.log(e)
        // //   this.errors.push(e)
        // })
    },
    openEditModal(item) {
      this.options = {
        onChangeJSON: function (json) {
          console.log(json);
          item.values = json;
        }
      }
      this.message = item.values;
      this.messageTitle = item.name;
      this.editModal = true;
    },
    
  },
  components: {
	//   Swiper,
	//   SwiperSlide
	  SwiperReviews: SwiperReviews,
	},
}
</script>
