<template>
  <div class="bg-img-in">
    <user-dashboard-container page-class="complaint" panel-title="ثبت شکایت" class="panelx">
      <div class="row">
        <div class="col-lg-6 col-sm-12 p-3">
      
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.678 47.133">
              <g transform="translate(111.26 -6.5)">
                <g transform="translate(-129.36 -45)">
                  <path
                    d="M31.039,152.2l-2.864,10.174H26.792l-2.173-8.4-2.272,8.4H20.964L18.1,152.2h1.087l2.469,8.89,2.469-8.89h.988l2.371,8.89,2.568-8.89Z"
                    transform="translate(0 -70.408)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M40.8,162.4h-.988v-1.383a3.128,3.128,0,0,1-2.963,1.58,3.874,3.874,0,0,1-1.778-.4,4.451,4.451,0,0,1-1.383-.988A3.7,3.7,0,0,1,33,160.034a3.963,3.963,0,0,1-.3-1.482,3.155,3.155,0,0,1,.3-1.383,5.6,5.6,0,0,1,.79-1.284A3.758,3.758,0,0,1,35.071,155a4.613,4.613,0,0,1,1.679-.3,3.874,3.874,0,0,1,1.778.4,2.745,2.745,0,0,1,1.185,1.185V154.8H40.7l.1,7.606Zm-.988-3.753a2.69,2.69,0,0,0-.889-2.074,2.843,2.843,0,0,0-2.074-.889,3.064,3.064,0,0,0-2.173.889,2.843,2.843,0,0,0-.889,2.074,2.69,2.69,0,0,0,.889,2.074,3.064,3.064,0,0,0,2.173.889,2.843,2.843,0,0,0,2.074-.889,2.69,2.69,0,0,0,.889-2.074"
                    transform="translate(-0.179 -70.438)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M46.662,155.688a2.08,2.08,0,0,0-1.284.494,1.576,1.576,0,0,0-.691.889,2.135,2.135,0,0,0-.1,1.087V162.4H43.6V154.9h.988v1.086a2.162,2.162,0,0,1,.889-.988,3.155,3.155,0,0,1,1.383-.3Z"
                    transform="translate(-0.313 -70.438)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M51.662,155.688a2.08,2.08,0,0,0-1.284.494,1.576,1.576,0,0,0-.691.889,2.135,2.135,0,0,0-.1,1.087V162.4H48.6V154.9h.988v1.086a2.162,2.162,0,0,1,.889-.988,3.155,3.155,0,0,1,1.383-.3Z"
                    transform="translate(-0.374 -70.438)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M61.2,162.4h-.988v-1.383a3.128,3.128,0,0,1-2.963,1.58,3.874,3.874,0,0,1-1.778-.4,4.451,4.451,0,0,1-1.383-.988,3.7,3.7,0,0,1-.691-1.185,3.963,3.963,0,0,1-.3-1.482,3.155,3.155,0,0,1,.3-1.383A4.439,4.439,0,0,1,55.471,155a4.613,4.613,0,0,1,1.679-.3,3.874,3.874,0,0,1,1.778.4,2.745,2.745,0,0,1,1.185,1.185V154.8H61.1l.1,7.606Zm-.988-3.753a2.69,2.69,0,0,0-.889-2.074,2.843,2.843,0,0,0-2.074-.889,3.064,3.064,0,0,0-2.173.889,2.843,2.843,0,0,0-.889,2.074,2.69,2.69,0,0,0,.889,2.074,3.064,3.064,0,0,0,2.173.889,2.843,2.843,0,0,0,2.074-.889,2.4,2.4,0,0,0,.889-2.074"
                    transform="translate(-0.43 -70.438)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M70.617,162.4h-.988v-3.951a3.7,3.7,0,0,0-.1-1.087,2.05,2.05,0,0,0-.593-.988,1.809,1.809,0,0,0-1.679-.593,4.2,4.2,0,0,0-1.086.2,5.473,5.473,0,0,0-.79.593,1.985,1.985,0,0,0-.4.79,4.052,4.052,0,0,0-.1,1.087V162.4H63.9V154.9h.988v1.086a2.779,2.779,0,0,1,2.371-1.284,3.963,3.963,0,0,1,1.482.3,3.407,3.407,0,0,1,1.185.889,2.253,2.253,0,0,1,.593,1.185,3.288,3.288,0,0,1,.1,1.383Z"
                    transform="translate(-0.562 -70.438)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M76.946,155.756H75.168v6.618H74.18v-6.618H72.6v-.889h1.58V152.2h.988v2.667h1.778Z"
                    transform="translate(-0.669 -70.408)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M85.31,154.9l-4.445,10.174h-.988l1.185-2.864L78.1,154.9h1.087l2.469,5.926,2.469-5.926Z"
                    transform="translate(-0.736 -70.441)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M98.323,159.6a2.69,2.69,0,0,1-.889,2.074,3.064,3.064,0,0,1-2.173.889,3.3,3.3,0,0,1-2.272-.889,2.7,2.7,0,0,1-.889-2.173h1.086a2.178,2.178,0,0,0,.593,1.482,2.074,2.074,0,0,0,3.556-1.482,1.861,1.861,0,0,0-.2-.79,1.772,1.772,0,0,0-.494-.691,1.593,1.593,0,0,0-.691-.4c-.3-.1-.691-.2-.988-.3a6.137,6.137,0,0,1-.988-.3,3.468,3.468,0,0,1-.79-.494,1.537,1.537,0,0,1-.593-.79,1.954,1.954,0,0,1-.2-1.087,2.487,2.487,0,0,1,.889-1.975,3.187,3.187,0,0,1,2.074-.79,2.936,2.936,0,0,1,1.975.79,2.758,2.758,0,0,1,.79,1.975H97.038a1.878,1.878,0,0,0-.494-1.284,2.36,2.36,0,0,0-1.383-.494,2.081,2.081,0,0,0-1.284.494,1.878,1.878,0,0,0-.494,1.284,1.485,1.485,0,0,0,.4,1.087,2.6,2.6,0,0,0,1.482.691,11.743,11.743,0,0,0,1.383.4,3.548,3.548,0,0,1,.988.691,3.48,3.48,0,0,1,.691,2.074"
                    transform="translate(-0.908 -70.404)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M108,159.045h-6.815a2.112,2.112,0,0,0,.889,1.778,2.937,2.937,0,0,0,1.975.79,2.985,2.985,0,0,0,1.58-.494,2.513,2.513,0,0,0,1.087-1.185H107.8a3.967,3.967,0,1,1-7.507-2.568,3.866,3.866,0,0,1,.988-1.58,3.738,3.738,0,0,1,2.766-1.185,3.956,3.956,0,0,1,2.864,1.185,5,5,0,0,1,1.086,3.26m-.988-.988a2.668,2.668,0,0,0-.988-1.679,2.892,2.892,0,0,0-3.753,0,2.908,2.908,0,0,0-.988,1.778h5.729Z"
                    transform="translate(-1.006 -70.437)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M113.462,155.688a1.878,1.878,0,0,0-1.284.494,1.97,1.97,0,0,0-.79,1.975V162.4H110.4V154.9h.988v1.086a2.162,2.162,0,0,1,.889-.988,3.155,3.155,0,0,1,1.383-.3Z"
                    transform="translate(-1.132 -70.438)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M122.008,154.9l-3.161,7.507h-1.087L114.6,154.9h1.087l2.667,6.223,2.568-6.223Z"
                    transform="translate(-1.184 -70.441)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M135.1,157.168h-1.185a2.869,2.869,0,0,0-1.087-1.087,2.787,2.787,0,0,0-1.482-.4,3.452,3.452,0,0,0-2.173.79,2.69,2.69,0,0,0-.889,2.074,2.91,2.91,0,0,0,2.963,2.963,2.787,2.787,0,0,0,1.482-.4,3.14,3.14,0,0,0,1.185-1.087H135a4.228,4.228,0,0,1-1.482,1.778,3.459,3.459,0,0,1-2.173.593,4.56,4.56,0,0,1-2.963-1.086,3.476,3.476,0,0,1-1.185-2.864,3.587,3.587,0,0,1,1.185-2.766,3.517,3.517,0,0,1,2.864-1.086,3.843,3.843,0,0,1,2.272.691,3.633,3.633,0,0,1,1.58,1.877"
                    transform="translate(-1.339 -70.437)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M145,159.047h-6.815a2.112,2.112,0,0,0,.889,1.778,2.937,2.937,0,0,0,1.975.79,2.985,2.985,0,0,0,1.58-.494,2.513,2.513,0,0,0,1.087-1.185H144.8a4.281,4.281,0,0,1-3.753,2.667,3.88,3.88,0,0,1-2.766-1.087,3.737,3.737,0,0,1-1.185-2.766,3.587,3.587,0,0,1,1.185-2.766,3.738,3.738,0,0,1,2.766-1.185,3.956,3.956,0,0,1,2.864,1.185A3.809,3.809,0,0,1,145,159.047m-.988-.988a2.669,2.669,0,0,0-.988-1.679,2.893,2.893,0,0,0-3.753,0,2.908,2.908,0,0,0-.988,1.778h5.729Z"
                    transform="translate(-1.46 -70.439)"
                    fill="#065495"
                  ></path>
                  <rect width="3.26" height="10.667" transform="translate(140.282 62.137)" fill="#065495"></rect>
                  <rect width="4.346" height="1.58" transform="translate(139.788 59.075)" fill="#065495"></rect>
                  <path
                    d="M60.6,136.944a6.1,6.1,0,0,0,5.926,6.025H68.5v.988a.556.556,0,0,1-.691.593H66.329v3.161a6,6,0,0,0,5.433-5.926V132.4H65.045a4.577,4.577,0,0,0-4.445,4.544m8,2.667H64.748a.885.885,0,0,1-.889-.889h0V136.45a.885.885,0,0,1,.889-.889H68.6Z"
                    transform="translate(-0.522 -70.165)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M124.26,138.781V129.2H121v7.7a5.986,5.986,0,0,0,6.025,6.025h12.84v-3.26H125.148a.885.885,0,0,1-.889-.889"
                    transform="translate(-1.262 -70.125)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M78.433,139.215V132.4h-3.26v11.655a.661.661,0,0,1-.593.691H73v3.161a5.935,5.935,0,0,0,5.433-5.531,3.9,3.9,0,0,0,2.766.691H96.31v-3.26H79.025c-.3-.1-.593-.3-.593-.593"
                    transform="translate(-0.674 -70.165)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M115.907,143.561a.885.885,0,0,1-.889.889H103.66V132.4H100.4v15.31h13.927a4.848,4.848,0,0,0,4.84-4.84h0V132.4h-3.259Z"
                    transform="translate(-1.01 -70.165)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M109.88,132.361a1.58,1.58,0,1,0-1.58-1.58h0a1.56,1.56,0,0,0,1.58,1.58"
                    transform="translate(-1.107 -70.125)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M55.98,144.9a1.58,1.58,0,1,0,1.58,1.58h0a1.56,1.56,0,0,0-1.58-1.58"
                    transform="translate(-0.445 -70.318)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M52.68,144.9a1.58,1.58,0,1,0,1.58,1.58h0a1.56,1.56,0,0,0-1.58-1.58h0"
                    transform="translate(-0.405 -70.318)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M54.65,132.4v6.618a.661.661,0,0,1-.593.691h-16.1a.556.556,0,0,1-.593-.691V132.4H34.1v11.161a.885.885,0,0,1-.889.889H21.66V132.4H18.4v15.31H31.339c3.951,0,5.729-2.074,5.926-5.334a4.086,4.086,0,0,0,1.877.494H52.773c3.062-.1,5.136-2.864,5.136-5.926V132.4Z"
                    transform="translate(-0.004 -70.165)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M124.988,153.882H124V152.4h.988Zm0,8.494H124v-7.507h.988Z"
                    transform="translate(-1.3 -70.41)"
                    fill="#065495"
                  ></path>
                </g>
                <g>
                  <path
                    d="M46.766,6.5A23.566,23.566,0,1,0,70.333,30.066,23.553,23.553,0,0,0,46.766,6.5m0,45.119a21.553,21.553,0,1,1,21.6-21.553,21.532,21.532,0,0,1-21.6,21.553"
                    transform="translate(-2.915)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M75.868,20.943V38.253a1.977,1.977,0,0,1-.857,1.671L68.584,44.38h0l-6.427-4.413A2.033,2.033,0,0,1,61.3,38.3V20.943a17.97,17.97,0,0,1,14.568,0"
                    transform="translate(-24.689 -7.373)"
                    fill="#065495"
                  ></path>
                  <path
                    d="M54.139,60.793A18.041,18.041,0,0,1,42.827,28.7V45.239a2.733,2.733,0,0,0,1.2,2.314l8.741,6.042a2.53,2.53,0,0,0,2.785,0l8.784-6.042a2.733,2.733,0,0,0,1.2-2.314v-16.5a18.057,18.057,0,0,1-11.4,32.05"
                    transform="translate(-10.287 -12.688)"
                    fill="#065495"
                  ></path>
                </g>
              </g>
            </svg>

            <p>مشتری گرامی شما میتوانید شکایت خود را از طریق فرم زیر با ما در میان بگذارید</p>
          
        </div>
        <div class="col-lg-6 col-sm-12 p-3">
          <p>{{ config.complaint }}</p>
        </div>
        

        <div class="col-lg-4 col-sm-12 mt-4">
          <el-input v-model="form.fullName" :class="validation.fullName ? 'err' : null" placeholder="نام و نام خانوادگی"></el-input>
        </div>
        <div class="col-lg-4 col-sm-12 mt-4">
          <el-input v-model="form.national" :class="validation.national ? 'err' : null" placeholder="کد ملی"></el-input>
        </div>
        <div class="col-lg-4 col-sm-12 mt-4">
          <el-input v-model="form.phoneNumber" :class="validation.phoneNumber ? 'err' : null" placeholder="شماره تلفن"></el-input>
        </div>

        <div class="col-lg-4 col-sm-12 mt-4">
          <el-input v-model="form.email" :class="validation.email ? 'err' : null" placeholder="ایمیل"></el-input>
        </div>
        <div class="col-lg-4 col-sm-12 mt-4">
          <el-input v-model="form.deviceNumber" :class="validation.deviceNumber ? 'err' : null" placeholder="شماره سریال دستگاه"></el-input>
        </div>
        <div class="col-lg-4 col-sm-12 mt-4">
          <el-input v-model="form.receptionCode" :class="validation.receptionCode ? 'err' : null" placeholder="کد پذیرش (اختیاری)"></el-input>
        </div>

        <div class="col-lg-12 col-sm-12 mt-4">
          <el-input v-model="form.caption" :class="validation.caption ? 'err' : null" type="textarea" :rows="5" placeholder="توضیحات"> </el-input>
        </div>

        <div class="col-lg-4 col-sm-12 mt-4">
          <h5 class="mb-2">انتخاب نحوه پاسخ دهی:</h5>
          <el-switch
            v-model="form.callType"
            inactive-color="#03fc3d"
            active-color="#0367fc"
            style="display: flex; justify-content: space-evenly"
            active-text="تماس تلفنی"
            inactive-text="ارسال ایمیل"
          >
          </el-switch>
        </div>

        <div class="col-lg-4 col-sm-12 mt-4">
          <h5 class="mb-2">انتخاب نوع کالا:</h5>
          <el-switch
            v-model="form.brand"
            inactive-color="#03fc3d"
            active-color="#0367fc"
            style="display: flex; justify-content: space-evenly"
            active-text="پاناتک"
            inactive-text="وریتی"
          >
          </el-switch>
        </div>

        <div class="col-lg-12 col-sm-12 mt-4 d-flex" style="justify-content: center">
          <el-button type="primary" @click="sendForm" round>ارسال</el-button>
        </div>
      </div>
    </user-dashboard-container>
  </div>
</template>

<script>
export default {
  name: 'PublicComplaint',

  data() {
    return {
     form:{
      fullName: null,
      national: null,
      phoneNumber: null,
      deviceNumber: null,
      email: null,
      receptionCode: null,
      caption: null,
      callType: true,
      brand:true
     },
      validation: {},
      hasValidationError: false,
      waiting:true
    }
  },
  computed: {
    config() {
      return this.$config
    }
  },
  mounted() {},
  methods: {
    sendForm() {
  

      this.validation = {}
      this.hasValidationError = false
      this.waiting = true


      this.$axios
        .post('/api/public/complaint', this.form)
        .then(response => {
          this.waiting = false

          
          this.$message({
              type: 'success',
              message: "با موفقیت ثبت شد"
            })

          this.form = {
            fullName: '',
      national: '',
      phoneNumber: '',
      deviceNumber: '',
      email: '',
      receptionCode: '',
      caption: '',
      callType: true,
          }
        }).catch(error => {
    

          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.hasValidationError = true
            this.waiting = false
          } else
            this.$message({
              type: 'error',
              message: error.response.data.message
            })
        })
      


    }
  }
}
</script>
<style lang="scss" scoped>
.err{
      box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    border: 2px solid rgba(255, 0, 0, 0.2);
    border-radius: 8px;
}
.bg-img-in {
  background: url(@/static/assets/img/home/bg3.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: groove;
}
.panelx {
  margin-top: 20%;
  margin-left: auto;
  margin-right: auto;
  width: 80% !important;
}

.el-switch__label--right {
  margin-right: 10px !important;
}

.el-switch__label--left {
  margin-left: 10px !important;
}
</style>
