<template>
	<div class="contact-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<div class="s1-Img-BG">
			<div
				class="parallax"
				:style="{
					background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
				}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
			</div>
		</div>

		<!---------------------------------- Section 2 ------------------------------------->
		<div class="s2">
			<div class="parallax">
				<div id="slides" class="row">
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col1 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t19 }}</h4>
							<p class="s2-desc staggerItem" style="margin-bottom: 0">ENGEMASA</p>
							<p class="s2-desc staggerItem" style="margin-top: 0">
								{{ content.s2.t20 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:+551633631500">+551633631500</a>
									</li>
									<li>
										<b>{{ content.s2.t10 }}: </b>
										<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
									</li>
									<li>
										<b>{{ content.s2.t23 }}: </b>
										<a href="www.engemasa.com.br">www.engemasa.com.br</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col2 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t15 }}</h4>
							<p class="s2-desc staggerItem" style="margin-bottom: 0">NPA</p>
							<p class="s2-desc staggerItem" style="margin-top: 0">
								{{ content.s2.t16 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:+8653287314976">+86 532 87314976</a>
									</li>
									<li>
										<b>{{ content.s2.t24 }}: </b>
										<a href="tel:+8653287314975">+86 532 87314975</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col3 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t17 }}</h4>
							<p class="s2-desc staggerItem">
								{{ content.s2.t18 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:82(55)5874570">82(55)5874570</a>
									</li>
									<li>
										<b>{{ content.s2.t24 }}: </b>
										<a href="tel:82(55)5873330">82(55)5873330</a>
									</li>
									<li>
										<b>{{ content.s2.t10 }}: </b>
										<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
									</li>
									<li>
										<b>{{ content.s2.t23 }}: </b>
										<a href="www.GasComp.kr">www.GasComp.kr</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!--          <div class="col-12 col-md-6 col-lg-4 s2-item slide">-->
					<!--            <div class="s2-img s2-Img-col2 anim-fadeInStagger">-->
					<!--              <h4 class="h4 staggerItem">{{ content.s2.t19 }}</h4>-->
					<!--              <p class="s2-desc staggerItem">-->
					<!--                {{ content.s2.t20 }}-->
					<!--              </p>-->
					<!--              <div class="s2-tel staggerItem">-->
					<!--                <ul>-->
					<!--                  <li>-->
					<!--                    <b>{{ content.s2.t9 }}: </b>-->
					<!--                    <a href="tel:+49021152295480">0049-021152295480</a>-->
					<!--                  </li>-->
					<!--                  <li>-->
					<!--                    <b>{{ content.s2.t10 }}: </b>-->
					<!--                    <a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>-->
					<!--                  </li>-->
					<!--                </ul>-->
					<!--              </div>-->
					<!--            </div>-->
					<!--          </div>-->
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col1 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t21 }}</h4>
							<p class="s2-desc staggerItem">
								{{ content.s2.t22 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:+8222083233840">+82-2-2083-2338-40</a>
									</li>
									<li>
										<b>{{ content.s2.t24 }}: </b>
										<a href="tel:+82220832341">+82-2-2083-2341</a>
									</li>
									<li>
										<b>{{ content.s2.t23 }}: </b>
										<a href="www.kdw.co.kr">www.kdw.co.kr</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col2 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t13 }}</h4>
							<p class="s2-desc staggerItem" style="margin-bottom: 0">HJ Metal Korea</p>
							<p class="s2-desc staggerItem" style="margin-top: 0">
								{{ content.s2.t14 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:+82325724081">+82 32 572 4081-2</a>
									</li>
									<li>
										<b>{{ content.s2.t24 }}: </b>
										<a href="tel:+82325724086">+82 32 572 4086</a>
									</li>
									<li>
										<b>{{ content.s2.t10 }}: </b>
										<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
									</li>
									<li>
										<b>{{ content.s2.t23 }}: </b>
										<a href="www.hjmk.co.kr">www.hjmk.co.kr</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col7 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t5 }}</h4>
							<p class="s2-desc staggerItem">
								{{ content.s2.t6 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t25 }}: </b>
										<a href="tel:03132747303">031-32747303</a>
									</li>
									<li>
										<b>{{ content.s2.t10 }}: </b>
										<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col6 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t3 }}</h4>
							<p class="s2-desc staggerItem">
								{{ content.s2.t4 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:06134491021">0613-4491021</a>
									</li>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:06134491022">0613-4491022</a>
									</li>

									<li>
										<b>{{ content.s2.t10 }}: </b>
										<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col5 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t1 }}</h4>
							<p class="s2-desc staggerItem">
								{{ content.s2.t2 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:06134427626">0613-4427626</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4 s2-item slide">
						<div class="s2-img s2-Img-col4 anim-fadeInStagger">
							<h4 class="h4 staggerItem">{{ content.s2.t11 }}</h4>
							<p class="s2-desc staggerItem">
								{{ content.s2.t12 }}
							</p>
							<div class="s2-tel staggerItem">
								<ul>
									<li>
										<b>{{ content.s2.t9 }}: </b>
										<a href="tel:02188612602">021-88612602</a>
									</li>
									<li>
										<b>{{ content.s2.t24 }}: </b>
										<a href="tel:02188612603">021-88612603</a>
									</li>
									<li>
										<b>{{ content.s2.t10 }}: </b>
										<a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!---------------------------------- Section 3 ------------------------------------->
		<div class="s3">
			<div class="parallax section">
				<div class="container">
					<div class="row">
						<div class="col-12 order-1 order-lg-0 col-lg-7 info anim-fadeInStagger">
							<div class="s3-title-col1 staggerItem">
								<h6 class="h6">{{ content.s3.t1 }}</h6>
							</div>
							<div class="s3-desc-col1 staggerItem">
								<p>
									{{ content.s3.t2 }}
								</p>
							</div>
							<div class="s3-input staggerItem">
								<form @submit.prevent="post">
									<div class="fromRow" :class="validation.name ? 'err' : null">
										<input v-model="message.name" class="input" name="name" type="text" :placeholder="content.s3.t3" />
										<p v-if="validation.name">{{ validation.name.msg }}</p>
									</div>
									<div class="formRow" :class="validation.email ? 'err' : null">
										<input
											v-model="message.email"
											class="input"
											name="email"
											type="text"
											:placeholder="content.s3.t4"
										/>
										<p v-if="validation.email">{{ validation.email.msg }}</p>
									</div>
									<div class="formRow" :class="validation.subject ? 'err' : null">
										<input
											v-model="message.subject"
											class="input"
											name="subject"
											type="text"
											:placeholder="content.s3.t5"
										/>
										<p v-if="validation.subject">{{ validation.subject.msg }}</p>
									</div>
									<div class="formRow" :class="validation.message ? 'err' : null">
										<textarea v-model="message.message" class="input" rows="6" :placeholder="content.s3.t6"></textarea>
										<p v-if="validation.message">{{ validation.message.msg }}</p>
									</div>
									<div class="btnSub">
										<button class="btn-link" type="submit">{{ content.s3.t7 }}</button>
										<!-- <nuxt-link >SUBMIT NOW</nuxt-link> -->
									</div>
								</form>
							</div>
						</div>
						<div class="col-12 order-0 mb-5 mb-lg-0 order-lg-1 col-lg-5 location anim-fadeInStagger">
							<div class="s3-title-col2 staggerItem">
								<h6 class="h6">{{ content.s3.t8 }}</h6>
							</div>

							<div class="s3-address staggerItem">
								<p>
									{{ content.s3.t9 }}
								</p>
							</div>

							<div class="email staggerItem">
								<i class="fas fa-envelope"></i>
								<span><a href="mailto:info[at]orisoxin.com">info[at]orisoxin.com</a></span>
							</div>

							<div class="tel staggerItem">
								<i class="fas fa-phone-alt"></i>
								<span><a href="tel:02188612602">021-88612602</a></span>
							</div>

							<div class="tel staggerItem">
								<i class="fas fa-fax"></i>
								<span><a href="tel:02188612603">021-88612603</a></span>
							</div>

							<div class="s3-title-col2-row2 staggerItem">
								<h6 class="h6">Map</h6>

								<div class="mapouter">
									<div class="gmap_canvas">
										<iframe
											src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3237.46662168324!2d51.394458715552624!3d35.76391253303978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e06f906e67b41%3A0x98bfda631d3b9527!2z2LTYsdqp2Kog2KfYsduM2LMg2Kfaqdiz24zZhg!5e0!3m2!1sen!2sfr!4v1632141129226!5m2!1sen!2sfr"
											width="400"
											height="200"
											style="border: 0"
											allowfullscreen=""
											loading="lazy"
										></iframe>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	if (process.client) require('slick-carousel')

	import {
		fadeInAnimation,
		fadeInStaggerAnimation,
		leftToRightAnimation,
		leftToRightStaggerAnimation,
		numberAnimation,
		progressAnimation,
		rightToLeftAnimation
	} from '@/utils/animations'

	export default {
		data() {
			return {
				message: {
					name: '',
					email: '',
					subject: '',
					message: '',
					locale: this.$route.params.lang
				},
				validation: {},
				defaultCover: '/img/GalleryPage/page-title.png'
			}
		},
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				rightToLeftAnimation(this.$gsap)
				// Address carousel
				$('#slides').slick({
					// autoplay: true,
					accessibility: false,
					arrows: true,
					dots: false,
					slidesToShow: 3,
					slidesToScroll: 1,
					infinite: false,
					autoplaySpeed: 2000,
					rtl: this.$route.params.lang === 'fa',
					responsive: [
						{
							breakpoint: 1200,
							settings: {
								slidesToShow: 2,
								slidesToScroll: 1
							}
						},
						{
							breakpoint: 769,
							settings: {
								slidesToShow: 1,
								slidesToScroll: 1,
								arrows: true
							}
						}
					]
				})
				//--------------------------------------------------------- Section 1
				this.$gsap
					.timeline({
						scrollTrigger: {
							trigger: '.s2',
							scrub: true,
							start: 'top top'
						}
					})
					.to($('.s1-Img-BG .parallax'), {
						duration: 9,
						opacity: 0,
						y: '50%'
					})
			})
		},
		methods: {
			post() {
				this.validation = {}
				this.$axios
					.post('/api/public/contact', this.message)
					.then(res => {
						this.$message({
							type: 'success',
							message: 'message sent successfully'
						})
						this.message = {
							name: '',
							email: '',
							subject: '',
							message: '',
							locale: this.$route.params.lang
						}
					})
					.catch(e => {
						if (e.response.status === 422) this.validation = e.response.data.validation
						else console.log(e)
					})
			}
		},
		computed: {
			content() {
				return this.$store.state.content.contact[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.contact
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mapouter {
		position: relative;
		text-align: right;
		height: 250px;
		width: 100%;
		margin-top: 20px;

		.gmap_canvas {
			overflow: hidden;
			background: none !important;
			height: 100%;
			width: 100%;

			iframe {
				width: 100%;
				height: 100%;
			}
		}
	}

	.slick-slide:nth-child(-n + 5) .s2-img h4 {
		margin-right: auto;
		text-align: left;
	}
	.slick-slide:nth-child(-n + 5) .s2-desc {
		text-align: left;
		margin-right: auto;
		direction: ltr;
		max-width: 100% !important;
	}
	//  .slick-slide .s8-tel{
	//   text-align: left;
	// }
	.slick-slide .s2-tel a:lang(fa) {
		direction: ltr !important;
	}
</style>
