<template>
    <div class="contact--page page">
      <section class="s1">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-6 message">
              <form class="form form_1" @submit.prevent="send">
                <div class="title">
                  <p>برای ما پیام بگذارید:</p>
                </div>
                <div class="formRow" :class="validation.full_name ? 'err' : null">
                  <input v-model="formData.full_name" type="text" placeholder="نام و نام خانوادگی" />
                  <p v-if="validation.full_name">{{ validation.full_name.msg }}</p>
                </div>
                <div class="formRow" :class="validation.email ? 'err' : null">
                  <input v-model="formData.email" type="text" class="email" placeholder="ایمیل" />
                  <p v-if="validation.email">{{ validation.email.msg }}</p>
                </div>
                <div class="formRow" :class="validation.message ? 'err' : null">
                  <textarea v-model="formData.message" rows="3" placeholder="پیام"></textarea>
                  <p v-if="validation.message">{{ validation.message.msg }}</p>
                </div>
                <div class="btnRow">
                  <button class="btn btn-primary" type="submit">ارسال پیام</button>
                </div>
              </form>
            </div>
            <div class="col-12 col-md-6 mt-5 mt-md-0 contact">
              <div class="info">
                <ul>
                  <li>
                    <p>
                      <i class="fal fa-map-marker-alt"></i>
                      <span> {{ config.address }} </span>
                    </p>
                  </li>
                  <li>
                    <a :href="`tel: ${config.contactTel}`">
                      <i class="fal fa-phone"></i>
                      <span>{{ config.contactTel }}</span>
                    </a>
                  </li>
                  <li>
                    <a :href="`mailto: ${config.contactEmail}`">
                      <i class="fal fa-envelope"></i>
                      <span>{{ config.contactEmail }}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ContactUsPage',
    data() {
      return {
        formData: {
          full_name: '',
          email: '',
          message: ''
        },
        validation: {}
      }
    },
    head() {
      return {
        title: 'آسان سرویس | ارتباط با ما'
      }
    },
    computed: {
      config() {
        return this.$config
      }
    },
    methods: {
      send() {
        this.validation = {}
        this.$axios
          .post(`/api/public/contact`, this.formData)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'پیام شما با موفقیت ارسال شد.'
            })
            this.formData = {
              full_name: '',
              email: '',
              message: ''
            }
          })
          .catch(err => {
            if (err.response.status === 422) this.validation = err.response.data.validation
            else {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            }
          })
      }
    }
  }
  </script>