<template>
	<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
		<div class="container mx-auto px-1 lg:px-4">
			<div class="flex flex-wrap justify-end text-center">
				<Breadcrumbs :currentPage="currentRouteName" />
			</div>
          	<div class="flex flex-wrap justify-center text-center mb-12 pt-8">
				<div class="w-full lg:w-6/12 px-4">
					<h2 class="text-4xl font-semibold">CONTACT</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						reservation priority
					</p>
				</div>
			</div>
			<div class="flex flex-wrap items-center mt-16">
				<div class="container mx-auto px-4">
					<ul class="flex justify-center">
						<li class="ml-6" v-for="user in users">
							<a class="flex flex-wrap mb-4 btn btn-dark order-1 order-lg-0 me-2" @click="selectedUserRegister(user)">{{user.name}}</a>
						</li>
					</ul>
					<div class="items-center flex flex-wrap">
						<div class="w-full md:w-4/12 ml-auto mr-auto px-4">
							<div class="md:pr-12">
								<!-- <div class="text-pink-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-pink-300">
									<i class="fas fa-rocket text-xl"></i>
								</div> -->
								<h3 class="text-3xl font-semibold">{{organization.name}}</h3>
								<!-- <p class="mt-4 text-lg leading-relaxed text-medium-grey">
									The extension comes with three pre-built pages to help you get
									started faster. You can change the text and images and you're
									good to go.
								</p> -->
								<ul class="list-none mt-6">
									<li class="py-2">
										<div class="flex items-center">
											<div>
												<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
													<i class="fas fa-map-marker"></i>
												</span>
											</div>
											<div>
												<h4 class="text-dark-grey">
													{{organization.address}}
												</h4>
											</div>
										</div>
									</li>
									<li class="py-2">
										<div class="flex items-center">
											<div>
												<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
													<i class="fas fa-door-open"></i>
												</span>
											</div>
											<div>
												<h4 class="text-dark-grey" v-for="optime in organization.optime">{{optime}}</h4>
											</div>
										</div>
									</li>
									<li class="py-2">
										<div class="flex items-center">
											<div>
												<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
													<i class="fas fa-phone"></i>
												</span>
											</div>
											<div>
												<h4 class="text-dark-grey">{{organization.phone}}</h4>
											</div>
										</div>
									</li>
									<li class="py-2">
										<div class="flex items-center">
											<div>
												<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
													<i class="fas fa-fax"></i>
												</span>
											</div>
											<div>
												<h4 class="text-dark-grey">{{organization.fax}}</h4>
											</div>
										</div>
									</li>
									<li class="py-2">
										<div class="flex items-center">
											<div>
												<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
													<i class="fas fa-envelope"></i>
												</span>
											</div>
											<div>
												<h4 class="text-dark-grey">{{organization.username}}</h4>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="w-full md:w-7/12 ml-auto mr-auto px-4">
							<div style="width:100%; height:400px; margin-top:20px; clear:both; border:solid 1px gray; margin:10px;">				
								<iframe width="100%" height="100%" style="border:0" loading="lazy" :src="organization.map" allowfullscreen></iframe>								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
import UserService from "@/services/user.service";
import Breadcrumbs from "@/components/utils/Breadcrumbs.vue";
import AOS from "aos";
import { mapState } from "vuex";

export default {
  name: "Contact",
  data() {
    return {
	  content: "",
	  users: {},
	  organization: {},
    };
  },
//   computed: {
//     ...mapState(["isRTL"]),
//   },
  mounted() {
	AOS.init();
	this.$nextTick(function () {
		window.scrollTo(0, 0);
		// this.$refs.target?.scrollIntoView();
	});
    UserService.getPublicContent().then(
      (response) => {
        this.content = response.data;
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
	UserService.getUsers().then(
      (response) => {
		this.users = response.data;
		if(this.users.length > 0) this.organization = this.users[0];
		this.organization.optime = this.organization.optime.split(',');
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
	this.organization.map = "https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ65anG27SwoARTkmc4Fc_odA&key=AIzaSyBkW3r7uPOfcD9A0VugdO9NWY2WBd7064k"
  },
  methods: {
	selectedUserRegister: function (user) {
		this.organization = user;
		// this.organization.optime = user.optime.split(',');
    },

  },
  components: {
	Breadcrumbs
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),

    currentRouteName() {
      	return this.$route.path.substring(1);
    },
  },

};
</script>