<template>
  <div class="page product-details--page latin-digits">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <h2 class="title">{{ productDetails.page_title }}</h2>
          <p>{{ productDetails.page_description }}</p>
          <div class="image-preview">
            <img :src="product.cover" class="anim-fadeIn" ref="preview" :alt="productDetails.name">
            <div class="images-carousel anim-fadeIn" v-if="product.images.length">
              <div id="images">
                <div class="imgBox">
                  <img class="selected" :src="product.cover" :alt="productDetails.name" @click="view(product.cover)">
                </div>
                <div class="imgBox" v-for="item in product.images" :key="item._id">
                  <img :src="item.image" :alt="productDetails.name" @click="view(item.image)">
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>

    <section class="s2" v-if="product.more_section">
      <div class="container">
        <div class="panel">
          <div class="parts p1">
            <h2 class="title title-shape-center">{{ staticData.t1 }}</h2>
          </div>

          <!-- image left -->
          <div class="parts row align-items-center">
            <div class="col-12 col-lg-6 order-1 order-lg-0">
              <h2 class="title title-subtitle">{{ productDetails.more_title1 }}</h2>
              <p>{{ productDetails.more_description1 }}</p>
            </div>
            <div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
              <div class="imgBox imgBox-shape anim-fadeIn">
                <div class="img">
                  <img :src="product.more_section_image1" :alt="productDetails.more_title1">
                </div>
              </div>
            </div>
          </div>

          <!-- image right -->
          <div class="parts row align-items-center">
            <div class="col-12 col-lg-6 mb-5 mb-lg-0">
              <div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
                <div class="img">
                  <img :src="product.more_section_image2" :alt="productDetails.more_title2">
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <h2 class="title title-subtitle">{{ productDetails.more_title2 }}</h2>
              <p>{{ productDetails.more_description2 }}</p>
            </div>
          </div>

        </div>
      </div>
    </section>

    <section class="s3"
             v-if="product.render_image1 ||
					product.render_image2 ||
					product.download_section">
      <div class="container">
        <div class="panel">
          <div class="parts p1" v-if="product.render_image1 || product.render_image1">
            <h2 class="title">{{ staticData.t2 }}</h2>
            <p>{{ staticData.t3 }}</p>
          </div>

          <div class="row parts p2" v-if="product.render_image1 || product.render_image2">
            <div class="col-12 col-sm-6 mb-5">
              <img :src="product.render_image1" class="anim-fadeIn" :alt="productDetails.name" v-if="product.render_image1">
              <p v-if="product.render_image1">{{ productDetails.render_caption1 }}</p>
            </div>
            <div class="col-12 col-sm-6 mb-5">
              <img :src="product.render_image2" class="anim-fadeIn" :alt="productDetails.name" v-if="product.render_image2">
              <p v-if="product.render_image2">{{ productDetails.render_caption2 }}</p>
            </div>
          </div>

          <div class="row parts p3" v-if="productDetails.chart_title">
            <div class="col-12">
              <h2 class="title">{{ productDetails.chart_title }}</h2>
              <p>{{ productDetails.chart_description }}</p>
            </div>
            <div class="col-12 mb-5 mt-5">
              <img :src="product.chart_image" class="anim-fadeIn" :alt="productDetails.name" v-if="product.chart_image">
            </div>
          </div>

          <div class="row parts p4" v-if="product.download_section">
            <div class="col-12">
              <h2>{{ staticData.t4 }}</h2>
              <div class="files">
                <div class="file anim-fadeIn" v-for="item in product.pdf_files" :key="item._id">
                  <pdf-icon/>
                  <p>{{ item.pdf_details[$route.params.lang].name }}</p>
                  <a :href="item.file[$route.params.lang]" :download="item.pdf_details[$route.params.lang].name" target="_blank" class="btn btn-primary-fill">{{ staticData.t5 }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s4">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t6 }}</nuxt-link>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
if (process.client) require('slick-carousel')
import {fadeInAnimation} from "~/mixins/animations"

export default {
  data() {
    return {
      product: null
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.products_details[this.$route.params.lang]
    },
    productDetails() {
      return this.product.product_details[this.$route.params.lang]
    }
  },
  methods: {
    view(image) {
      this.$refs.preview.src = image
      $('.product-details--page #images img').removeClass('selected')
      $(event.target).addClass('selected')
    }
  },
  mixins: [fadeInAnimation],
  mounted() {
    $('#images').slick({
      slidesToShow: 4,
      rtl: this.$route.params.lang === 'fa',
      infinite: false,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3
          }
        },
        {
          breakpoint: 575,
          settings: {
            slidesToShow: 2
          }
        }
      ]
    })
  },
  head() {
    return {
      title: this.product.product_details[this.$route.params.lang].name
    }
  },
  async asyncData({$axios, params, error}) {
    try {
      let product = await $axios.get(`/api/public/product/${params.product}`)
      let productCategories = await $axios.get(`/api/public/productCategories`)
      return {
        product: product.data,
        productCategories: productCategories.data
      }
    } catch (e) {
      error({status: 404, message: 'Page not found'})
    }
  }
}
</script>
