<template>
  <div class="contact--page page">
    <section class="s1">
      <div class="container">
        <div class="row" >
          <div class="col-12 col-md-6 message rounded">
            <l-map :zoom="15" :center="[35.7114463, 51.4165909]">
              <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
              <l-marker :lat-lng="[35.7114463, 51.4165909]"></l-marker>
            </l-map>
          </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>
<style>
.leaflet-container{
  height: 20rem;
  border-radius: 10px;
}
.rounded{
  height: 20rem;
  border-radius: 10px;
}
</style>