<template>
  <div class="contact--page page--container">
    <div class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12 order-1 order-lg-0 col-lg-8 right">
            <h1>نظرات و پیشنهادات</h1>
            <p>اگر هر سوالی در رابطه با کافه رستوران برگ دارید:</p>

            <form class="form" @submit.prevent="upload">
              <div class="form--row" :class="validation.name ? 'err' : null">
                <input type="text" v-model="formData.name" placeholder="نام">
                <p v-if="validation.name">{{ validation.name.msg }}</p>
              </div>

              <div class="form--row" :class="validation.phone ? 'err' : null">
                <input type="text" v-model="formData.phone" placeholder="شماره تلفن" id="phoneNumber">
                <p v-if="validation.phone">{{ validation.phone.msg }}</p>
              </div>

              <div class="form--row" :class="validation.email ? 'err' : null">
                <input type="email" v-model="formData.email" placeholder="ایمیل">
                <p v-if="validation.email">{{ validation.email.msg }}</p>
              </div>

              <div class="form--row" :class="validation.message ? 'err' : null">
                <input type="text" v-model="formData.message" placeholder="پیام">
                <p v-if="validation.message">{{ validation.message.msg }}</p>
              </div>

              <button>
                <span>ارسال</span>
                <IconsLeftArrow/>
              </button>
            </form>
          </div>
          <div class="col-12 order-0 order-lg-1 col-lg-4 left">
            <div class="container-fluid">
              <div class="row">
                <div class="col-12 mb-5 mb-lg-0 col-lg">
                  <IconsLocation/>
                  <p v-if="storeInfo">{{storeInfo.address}}</p>
                </div>
                <div class="col-6 col-lg">
                  <IconsPhone/>
                  <a v-if="storeInfo" :href="`tel: ${storeInfo.tel}`">{{storeInfo.tel}}</a>
                </div>
                <div class="col-6 col-lg">
                  <IconsMail/>
                  <a v-if="storeInfo" :href="`mailto: ${storeInfo.email}`">{{storeInfo.email}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        email: '',
        message: ''
      },
      storeInfo : null,
      validation: {}
    }
  },
  methods: {
    upload() {
      this.validation = {}
      const data = this.formData

      this.$axios.post('/api/public/contact', data)
          .then(response => {
            this.$alert(response.data.message, 'ثبت موفق', {
              confirmButtonText: 'باشه',
              callback: action => {
                this.formData = {
                  name: '',
                  phone: '',
                  email: '',
                  message: ''
                }
              }
            })
          })
          .catch(error => {
            if (error.response.status === 422) {
              this.validation = error.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$alert(error.response.data.error.message, 'خطا', {
                confirmButtonText: 'باشه'
              })
            }
          })
    }
  },
  mounted() {
  },
  created() {
    if (process.client) $('body').attr('class', 'contactPage--theme')
  },
  async asyncData({$axios, error}) {
    try {
      const storeInfo = await $axios.get('/api/public/storeInfo')
      return {
        storeInfo: storeInfo.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: 'شما اجازه دسترسی به این صفحه را ندارید لطفا دوباره وارد شوید'
        })
      } else {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
        });
      }
    }
  }
}
</script>

