<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="success" class="mr-auto" @click="addInfo">بروزرسانی</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <CCol>
<!--              <h5 style="margin-bottom: 16px"></h5>-->
              <CCol sm="12">
                <el-checkbox v-model="storeInfo.useSpecialMenu" label="نمایش منو سرآشپز"/>
              </CCol>
              <CCol class="mt-2" sm="6">
                <CInput
                    v-if="$auth.user.permissions.includes('development')"
                    :class="validation.updateApp ? 'err' : null"
                    class="input-direction"
                    label="ورژن اپلیکیشن"
                    :description="validation.updateApp ? validation.updateApp.msg : null"
                    v-model="storeInfo.updateApp"
                />
              </CCol>
            </CCol>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <CCol>
              <h5 style="margin-bottom: 16px">پیام مدیر</h5>
              <CCol sm="12">
                <CInput
                    :class="validation.message ? 'err' : null"
                    label="پیام روز"
                    :description="validation.message ? validation.message.msg : null"
                    v-model="storeInfo.message"
                />
              </CCol>
            </CCol>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6">
        <CCard>
          <CCardBody>
            <CCol>
              <h5 style="margin-bottom: 16px">اطلاعات عمومی</h5>
              <CCol sm="12">
                <CTextarea
                    :class="validation.caption ? 'err' : null"
                    label="توضیحات"
                    :description="validation.caption ? validation.caption.msg : null"
                    v-model="storeInfo.caption"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    class="input-direction"
                    :class="validation.email ? 'err' : null"
                    label="ایمیل"
                    :description="validation.email ? validation.email.msg : null"
                    v-model="storeInfo.email"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    class="input-direction"
                    :class="validation.tel ? 'err' : null"
                    label="تلفن"
                    :description="validation.tel ? validation.tel.msg : null"
                    v-model="storeInfo.tel"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    :class="validation.address ? 'err' : null"
                    label="آدرس"
                    :description="validation.address ? validation.address.msg : null"
                    v-model="storeInfo.address"
                />
              </CCol>

            </CCol>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6">
        <CCard>
          <CCardBody>
            <CCol>
              <h5 style="margin-bottom: 16px">شبکه های اجتماعی</h5>
              <CCol sm="12">
                <CInput
                    class="input-direction"
                    :class="validation.socials ? 'err' : null"
                    label="واتساپ"
                    :description="validation.socials ? validation.socials.msg : null"
                    v-model="storeInfo.socials.whatsaap"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    class="input-direction"
                    :class="validation.socials ? 'err' : null"
                    label="تویتر"
                    :description="validation.socials ? validation.socials.msg : null"
                    v-model="storeInfo.socials.twitter"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    class="input-direction"
                    :class="validation.socials ? 'err' : null"
                    label="فیس بوک"
                    :description="validation.socials ? validation.socials.msg : null"
                    v-model="storeInfo.socials.facebook"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    :class="validation.socials ? 'err' : null"
                    class="input-direction"
                    label="اینستاگرام"
                    :description="validation.socials ? validation.socials.msg : null"
                    v-model="storeInfo.socials.instagram"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    :class="validation.socials ? 'err' : null"
                    class="input-direction"
                    label="گوگل پلاس"
                    :description="validation.socials ? validation.socials.msg : null"
                    v-model="storeInfo.socials.googlePlus"
                />
              </CCol>
            </CCol>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
    <CRow>
      <CCard>
        <CCardBody>
          <h5 style="margin-bottom: 16px">تنظیمات هزینه ارسال و مالیات</h5>
          <CCol>
            <CCol sm="6">
              <el-checkbox v-model="storeInfo.tax" label="گرفتن مالیات از مشتری"/>
            </CCol>
            <CCol sm="6">
              <el-checkbox v-model="storeInfo.shippingType" label="هزینه ارسال ثابت باشد"/>
            </CCol>
            <CCol sm="6">
              <CInput
                  :class="validation.socials ? 'err' : null"
                  label="هزینه ارسال به ریال(به ازای هر کیلومتر در صورت ثابت نبودن)"
                  placeholder=""
                  :description="validation.shippingCost ? validation.shippingCost.msg : null"
                  v-model="storeInfo.shippingCost"
              />
            </CCol>
            <el-divider/>
            <CCol sm="6">
              <CInput
                  :class="validation.limitPrice ? 'err' : null"
                  label="حداقل مبلغ خرید(ریال)"
                  placeholder=""
                  :description="validation.limitPrice ? validation.limitPrice.msg : null"
                  v-model="storeInfo.limitPrice"
              />
            </CCol>
          </CCol>
        </CCardBody>
      </CCard>
    </CRow>
    <CRow>
      <CCard>
        <CCardBody>
          <h5 style="margin-bottom: 16px">تنظیمات امتیازات</h5>
          <CCol>
            <CRow>
              <CCol sm="12">
                <el-checkbox class="mb-4" v-model="storeInfo.usePointWhenPay" label="اجازه استفاده از امتیاز هنگام پرداخت"/>
              </CCol>
              <CCol sm="12" class="mb-3">
                <span>به ازای هر</span>
                <CInput
                    type="number"
                    style="display: inline-block"
                    :class="validation.totalPricePoint ? 'err' : null"
                    placeholder="قیمت به ریال وارد شود"
                    :description="validation.totalPricePoint ? validation.totalPricePoint.msg : null"
                    v-model="storeInfo.totalPricePoint"
                />
                <span><b>ریال</b> خرید مقدار</span>
                <CInput
                    type="number"
                    style="display: inline-block"
                    :class="validation.pointForBuy ? 'err' : null"
                    placeholder=""
                    :description="validation.pointForBuy ? validation.pointForBuy.msg : null"
                    v-model="storeInfo.pointForBuy"
                />
                <span>امتیاز به مشتری داده شود</span>
              </CCol>
              <CCol sm="12" class="mb-3">
                <span>هر</span>
                <CInput
                    type="number"
                    style="display: inline-block"
                    :class="validation.pointForChange ? 'err' : null"
                    placeholder=""
                    :description="validation.pointForChange ? validation.pointForChange.msg : null"
                    v-model="storeInfo.pointForChange"
                />
                <span>امتیاز برابر با</span>
                <CInput
                    type="number"
                    style="display: inline-block"
                    :class="validation.priceForChange ? 'err' : null"
                    placeholder=""
                    :description="validation.priceForChange ? validation.priceForChange.msg : null"
                    v-model="storeInfo.priceForChange"
                />
                <span><b>ریال</b> می باشد</span>
              </CCol>
              <el-divider/>
              <CCol sm="6">
                <CInput
                    :class="validation.userRegistrationScore ? 'err' : null"
                    label="امتیاز ثبت نام"
                    placeholder=""
                    :description="validation.userRegistrationScore ? validation.userRegistrationScore.msg : null"
                    v-model="storeInfo.userRegistrationScore"
                />
<!--                <CInput-->
<!--                    :class="validation.userEmailVerifyScore ? 'err' : null"-->
<!--                    label="امتیاز وارد کردن ایمیل"-->
<!--                    placeholder=""-->
<!--                    :description="validation.userEmailVerifyScore ? validation.userEmailVerifyScore.msg : null"-->
<!--                    v-model="storeInfo.userEmailVerifyScore"-->
<!--                />-->
                <CInput
                    :class="validation.pointBirthDate ? 'err' : null"
                    label="امتیاز تاریخ تولد"
                    placeholder=""
                    :description="validation.pointBirthDate ? validation.pointBirthDate.msg : null"
                    v-model="storeInfo.pointBirthDate"
                />
              </CCol>
              <CCol sm="6">
                <CInput
                    :class="validation.pointMarriageDate ? 'err' : null"
                    label="امتیاز تاریخ ازدواج"
                    placeholder=""
                    :description="validation.pointMarriageDate ? validation.pointMarriageDate.msg : null"
                    v-model="storeInfo.pointMarriageDate"
                />
                <CInput
                    :class="validation.invitePoint ? 'err' : null"
                    label="امتیاز دعوت کردن"
                    placeholder=""
                    :description="validation.invitePoint ? validation.invitePoint.msg : null"
                    v-model="storeInfo.invitePoint"
                />
              </CCol>
            </CRow>
          </CCol>
        </CCardBody>
      </CCard>
    </CRow>
    <CRow>
      <CCard>
        <CCardBody>
          <h5 style="margin-bottom: 16px">تنظیمات ساعت کار رستوران</h5>
          <CCol>
            <CRow>
              <CCol sm="6">
                <el-checkbox v-model="storeInfo.closeStore" label="فروشگاه تعطیل است"/>
              </CCol>
              <CRow v-if="!storeInfo.closeStore" class="mb-5">
                <CCol sm="6">
                  <CCol col="md-3" class="mb-2">
                    <span>ساعت شروع</span>
                  </CCol>
                  <CCol col="md-9">
                    <date-picker type="time" format="HH:mm" display-format="HH:mm" clearable v-model="storeInfo.firstStartTime"></date-picker>
                    <p class="text-danger" v-if="validation.firstStartTime">
                      {{ validation.firstStartTime.msg }}
                    </p>
                  </CCol>
                </CCol>
                <CCol sm="6">
                  <CCol col="md-3" class="mb-2">
                    <span>ساعت پایان</span>
                  </CCol>
                  <CCol col="md-9">
                    <date-picker type="time" format="HH:mm" display-format="HH:mm" clearable v-model="storeInfo.firstEndTime"></date-picker>
                    <p class="text-danger" v-if="validation.firstEndTime">
                      {{ validation.firstEndTime.msg }}
                    </p>
                  </CCol>
                </CCol>
              </CRow>
              <CRow v-if="!storeInfo.closeStore">
                <el-divider/>
                <CCol sm="6">
                  <CCol col="md-3" class="mb-2">
                    <span>ساعت شروع</span>
                  </CCol>
                  <CCol col="md-9">
                    <date-picker type="time" format="HH:mm" display-format="HH:mm" clearable v-model="storeInfo.secondStartTime"></date-picker>
                    <p class="text-danger" v-if="validation.secondStartTime">
                      {{ validation.secondStartTime.msg }}
                    </p>
                  </CCol>
                </CCol>
                <CCol sm="6">
                  <CCol col="md-3" class="mb-2">
                    <span>ساعت پایان</span>
                  </CCol>
                  <CCol col="md-9">
                    <date-picker type="time" format="HH:mm" display-format="HH:mm" clearable v-model="storeInfo.secondEndTime"></date-picker>
                    <p class="text-danger" v-if="validation.secondEndTime">
                      {{ validation.secondEndTime.msg }}
                    </p>
                  </CCol>
                </CCol>
              </CRow>
            </CRow>
          </CCol>
        </CCardBody>
      </CCard>
    </CRow>
    <CRow>
        <CCard>
          <CCardHeader>
            <h5>مشخص کردن مکان رستوران روی نقشه</h5>
          </CCardHeader>
          <CCardBody class="text-center">
            <template>
              <no-ssr>
                <mapir class="d-inline-flex" id="map" :min-zoom="12" :max-zoom="18" :zoom="15" logo-position="top-left" :center="storeInfo.location.coordinates || center" @click="mapOnClick" :apiKey="apiKey">
                  <mapNavigationControl position="top-right"/>
                  <mapGeolocateControl position="top-right"/>
                  <mapMarker
                      :coordinates.sync="storeInfo.location.coordinates || center"
                      color="red"
                      @click="markerOnClick"
                      :draggable="true"
                      @dragend="getlatLng"
                  />
                </mapir>
              </no-ssr>
            </template>
          </CCardBody>
        </CCard>
    </CRow>
  </div>
</template>

<script>
import moment from 'moment-jalaali'

let mapirVue = {}
if (process.client)
  mapirVue = require('mapir-vue')


export default {
  components: {
    'mapir': mapirVue.mapir,
    'mapMarker': mapirVue.mapMarker,
    'mapNavigationControl': mapirVue.mapNavigationControl,
    'mapGeolocateControl': mapirVue.mapGeolocateControl,
  },
  data() {
    return {
      apiKey: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImRiYjIwMmRhYzAxYzFjNzgwYjgxNWQyZDgyMWNmNmY1Njk0MThhMGE3N2Q1M2Y0OTZkYzQzYTgxMmNmN2U3ZWJjNzI5MjY5YjkxMjA4MTYyIn0.eyJhdWQiOiIxNDk3OSIsImp0aSI6ImRiYjIwMmRhYzAxYzFjNzgwYjgxNWQyZDgyMWNmNmY1Njk0MThhMGE3N2Q1M2Y0OTZkYzQzYTgxMmNmN2U3ZWJjNzI5MjY5YjkxMjA4MTYyIiwiaWF0IjoxNjI3MzI2Mzc0LCJuYmYiOjE2MjczMjYzNzQsImV4cCI6MTYyOTkxODM3NCwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.hyKNSy4fmPps6yIdm33Wof-mES9ujh5lmI3VFWyecbkNCm9ATPwsZ9s53A3a1wPJmHfLBXpCcob5NGL-GjZlVfqfRBiReRMr_iniCjUOnqENfFwVEJutxI-xrzVe7PZzOgx1Vr6WwSUHvQ36eJSS1lBlHlqCgwRbkG0hs4YdZsKhzhfYdlAluNw9djjUAMbRWZVL0EluP9CYko4w8tB0KHUZMZYGQcevCfb_3OU9ygHo7B--Z5aTPfm7IK4eP0gHsZ_t857B3tu3ZJB1mkgxc2R9gZUflKqj1ZqkYiR0uMGP-571enXh6pYQLXL2k-gOxLIedCaE6XytxVXhENnotA',
      title: 'اطلاعات فروشگاه',
      list_title: 'لیست',
      // base data
      storeInfo: null,
      center: [49.6848857, 34.0821617],
      // validation
      validation: {}
    }
  },
  methods: {
    mapOnClick(e) {
      this.storeInfo.location = {
        type: 'Point',
        coordinates: [e.actualEvent.lngLat.lng , e.actualEvent.lngLat.lat]
      }
    },
    markerOnClick(e) {

    },
    getlatLng(e) {

    },
    addInfo() {
      this.validation = {}
      this.storeInfo.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
      this.$axios.post(`/api/admin/store/${this.$route.params.branch}`, this.storeInfo)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'تغییرات با موفقیت انجام شد'
            })
            this.$nuxt.refresh()
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422){
              this.$message({
                type: 'warning',
                message: 'پارامترها را بررسی کنید'
              })
              this.validation = err.response.data.validation;
            } else console.log(err.response.data);
          });
    },
    jDate(date) {
      return moment(date, 'X').format('jYYYY/jMM/jDD')
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, error , params}) {
    try {
      const store = await $axios.get(`/api/admin/store/${params.branch}`)
      return {
        storeInfo: store.data
      }

    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اطلاعات مورد نظر پیدا نشد",
        });
    }
  }
}
</script>


<style lang="scss">
.el-button:focus {
  outline-color: #39f !important;
}

#map {
  width: 100vh;
  height: 50vh;
}

.holder-logo{
  left: 0;
}
.mapboxgl-ctrl-attrib-button{
  display: none;
}
</style>
