<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-learning-page', params: { page: 1 } }"
        >برگشت به صفحه قبل</CButton
      >
      <CButton size="sm" color="success" style="margin-right: 10px" :disabled="pending" @click="upload">ایجاد</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="formData.title"
                label="عنوان"
                horizontal
                :description="validation.title ? validation.title.msg : null"
                :class="validation.title ? 'err' : null"
              />

              <CTextarea
                v-model="formData.short_description"
                label="توضیح کوتاه"
                horizontal
                rows="4"
                :description="validation.short_description ? validation.short_description.msg : null"
                :class="validation.short_description ? 'err' : null"
              />

              <CRow form class="form-group" :class="validation.description ? 'err' : null">
                <CCol tag="label" sm="3" class="col-form-label">توضیحات</CCol>
                <CCol sm="9">
                  <client-only>
                    <ckeditor v-model="formData.description" :config="editorConfig"></ckeditor>
                  </client-only>
                  <small v-if="validation.description" class="form-text text-muted w-100">
                    {{ validation.description.msg }}
                  </small>
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <h1>تصویر:</h1>
            <el-divider />
            <CRow>
              <CCol col="12" class="mb-3">
                <img :src="formData.cover" alt="" style="width: 100%; max-width: 500px" />
              </CCol>
              <CCol col="1">
                <span>کاور</span>
              </CCol>
              <CCol col="11">
                <input ref="cover" type="file" @change="imagePreview" />
              </CCol>
              <CCol col="11" class="mr-auto mt-3">
                <small v-if="validation.cover" class="form-text alert-danger w-100">
                  {{ validation.cover.msg }}
                </small>
              </CCol>
            </CRow>

            <h1 class="mt-5">ویدیو:</h1>
            <el-divider />
            <CRow>
              <CCol v-if="formData.video" col="12" class="mb-3">
                <video :src="formData.video" controls autoplay muted style="width: 100%"></video>
              </CCol>
              <CCol col="1">
                <span>ویدیو</span>
              </CCol>
              <CCol col="11">
                <input ref="video" type="file" @change="videoPreview" />
              </CCol>
              <CCol col="11" class="mr-auto mt-3">
                <small v-if="validation.video" class="form-text alert-danger w-100">
                  {{ validation.video.msg }}
                </small>
                <small v-else class="form-text text-muted w-100">
                  فایل ویدیو را انتخاب کنید.(ویدیو اجباری نیست)
                  <br />
                  فرمت های قابل قبول: mp4 wmv avi
                </small>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
import axiosUploadProcess from '@/mixins/axiosUploadProcess'

export default {
  name: 'AddminAddNewLearnning',
  mixins: [axiosUploadProcess],
  layout: 'admin',
  data() {
    return {
      title: 'افزودن آموزش',
      formData: {
        title: '',
        short_description: '',
        description: '',
        cover: '',
        video: ''
      },
      editorConfig: {
        language: 'fa',
        extraPlugins: ['bidi', 'justify']
      },
      validation: {},
      pending: false
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  methods: {
    upload() {
      this.pending = true
      this.validation = {}
      const data = new FormData()
      data.append('title', this.formData.title)
      data.append('short_description', this.formData.short_description)
      data.append('description', this.formData.description)
      data.append('cover', this.$refs.cover.files[0])
      if (this.$refs.video.files[0]) data.append('video', this.$refs.video.files[0])

      this.$axios
        .post(`/api/admin/learning`, data, this.axiosConfig)
        .then(response => {
          this.pending = false
          if (response.data) {
            this.$message({
              message: 'آیتم با موفقیت ثبت شد.',
              type: 'success'
            })
            this.$router.push({ name: 'admin-learning-page', params: { page: 1 } })
          }
        })
        .catch(error => {
          this.pending = false
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    },
    imagePreview(event) {
      this.formData.cover = URL.createObjectURL(event.target.files[0])
    },
    videoPreview(event) {
      this.formData.video = URL.createObjectURL(event.target.files[0])
    }
  }
}
</script>
