<template>
  <div class="electionCandidate">
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-elections',query: {page: 1} }">برگشت به
        صفحه قبل
      </CButton>
      <CButton v-if="$route.params.details === 'new'" size="sm" color="success" class="mr-1" @click="post">افزودن
      </CButton>
      <CButton v-else size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow style="display : flex ; flex-direction: column">
      <CRow>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CRow>
                <CCol sm="12">
                  <CInput
                      label="عنوان"
                      :class="validation.title ? 'err' : null"
                      :description="validation.title ? validation.title.msg : null"
                      v-model="election.title"
                  />
                </CCol>
                <CCol sm="12">
                  <CTextarea
                      :class="validation.description ? 'err' : null"
                      label="توضیحات"
                      :description="validation.description ? validation.description.msg : null"
                      v-model="election.description"
                  />
                </CCol>
                <el-divider></el-divider>
                <CCol sm="12">
                  <h6>تاریخ شروع</h6>
                  <date-picker format="YYYY-MM-DD" display-format="jMMMM jD" v-model="election.startDate"></date-picker>
                  <p class="text-danger" v-if="validation.startDate">{{ validation.startDate.msg }}</p>
                </CCol>
                <CCol sm="12" class="mt-3">
                  <h6>تاریخ پایان</h6>
                  <date-picker format="YYYY-MM-DD" display-format="jMMMM jD" v-model="election.endDate"></date-picker>
                  <p class="text-danger" v-if="validation.endDate">{{ validation.endDate.msg }}</p>
                </CCol>
              </CRow>
            </CCardBody>
          </CCard>
        </CCol>

        <CCol lg="6">
          <CCard>
            <CCardBody>

              <CCol sm="12">
                <h6>{{ this.$route.params.details !== "new" ? "دسته بندی" : "انتخاب دسته بندی" }}</h6>
                <el-select
                    filterable
                    clearable
                    style="width : 100%"
                    v-model="catId"
                    placeholder="انتخاب دسته بندی">
                  <el-option
                      v-for="item in categories"
                      v-if="availableCategory(item._id)"
                      :key="item._id"
                      :label="item.title"
                      :value="item._id"
                  >
                    <!-- <span>{{setTitle(item)}}</span> -->
                  </el-option>
                </el-select>
                <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.catId">
                  {{ validation.catId.msg }}</p>
              </CCol>
              <el-divider></el-divider>

              <el-checkbox label="نمایش داده شود" v-model="election.publish"/>

            </CCardBody>
          </CCard>
        </CCol>

        <CCol sm="12" v-if="$route.params.details !== 'new'">
          <CCard>
            <CCardBody>
              <CRow>

                <CCol>
                  <div class="d-flex">

                    <h4 style="display: inline-block;">لیست کاندیداها</h4>
                    <el-button type="success" size="small" @click="detailsCandidate(false)" class="mr-auto">افزودن
                    </el-button>
                  </div>

                  <el-divider></el-divider>
                  <el-table
                      style="width: 100%;"
                      :data="election.candidates"
                  >
                    <el-table-column
                        type="index"
                        label="#"
                    >
                    </el-table-column>

                    <el-table-column
                        label="عکس"
                    >
                      <template slot-scope="scope">
                        <img :src="scope.row.profilePic" width="50px" alt="">
                      </template>
                    </el-table-column>

                    <el-table-column
                        label="نام"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.firstName + ' ' + scope.row.lastName }}
                      </template>
                    </el-table-column>

                    <el-table-column
                        label="ویرایش"
                        width="120"
                    >
                      <template slot-scope="scope">
                        <CButton color="danger" variant="outline" :key="scope.row._id+1" @click="removeCandidate(scope.row._id)">
                          <i class="far fa-trash-alt"></i>
                        </CButton>
                        <CButton color="success" variant="outline" :key="scope.row._id"
                                 @click="detailsCandidate(scope.row)">
                          <i class="far fa-eye"></i>
                        </CButton>
                      </template>
                    </el-table-column>

                  </el-table>
                  <p class="text-danger" v-if="validation.options">{{ validation.options.msg }}</p>
                </CCol>

              </CRow>
            </CCardBody>
          </CCard>
        </CCol>

        <CCol sm="12" v-if="$route.params.details !== 'new'">
          <CCard>
            <CCardBody>
              <CRow>

                <CCol lg="6">
                  <h4>لیست رای دهندگان</h4>
                  <el-divider></el-divider>
                  <el-table
                      style="width: 100%;"
                      :data="election.voters"
                  >
                    <el-table-column
                        type="index"
                        label="#"
                    >
                    </el-table-column>

                    <el-table-column
                        label="نام"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.firstName + ' ' + scope.row.lastName }}
                      </template>
                    </el-table-column>

                    <el-table-column
                        prop="username"
                        label="نام کاربری"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="password"
                        label="کلمه عبور"
                    >
                    </el-table-column>

                    <el-table-column
                        label="وضعیت رای"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.voted" type="success">رای داده</el-tag>
                        <el-tag v-else type="danger">رای نداده</el-tag>
                      </template>
                    </el-table-column>

                    <el-table-column
                        label="ویرایش"
                        width="65"
                    >
                      <template slot-scope="scope">
                        <CButton color="danger" variant="outline" :key="scope.row._id+1" @click="removeVoter(scope.row._id)">
                          <i class="far fa-trash-alt"></i>
                        </CButton>
                      </template>
                    </el-table-column>

                  </el-table>
                </CCol>

                <CCol lg="6">
                  <h4>افزودن رای دهنده</h4>
                  <el-divider></el-divider>
                  <CRow style="flex-direction: column;">
                    <CCol>
                      <CInput
                          label="نام"
                          :class="validation.firstName ? 'err' : null"
                          :description="validation.firstName ? validation.firstName.msg : null"
                          v-model="newVoter.firstName"
                      />
                    </CCol>
                    <CCol>
                      <CInput
                          label="نام خانوادگی"
                          :class="validation.lastName ? 'err' : null"
                          :description="validation.lastName ? validation.lastName.msg : null"
                          v-model="newVoter.lastName"
                      />
                    </CCol>
                    <CCol>
                      <CInput
                          label="نام کاربری"
                          :class="validation.username ? 'err' : null"
                          :description="validation.username ? validation.username.msg : null"
                          v-model="newVoter.username"
                      />
                    </CCol>
                    <CCol>
                      <CInput
                          label="کد ملی"
                          :class="validation.nationalCode ? 'err' : null"
                          :description="validation.nationalCode ? validation.nationalCode.msg : null"
                          v-model="newVoter.nationalCode"
                      />
                    </CCol>
                    <CCol>
                      <CInput
                          label="شماره موبایل"
                          :class="validation.mobileNumber ? 'err' : null"
                          :description="validation.mobileNumber ? validation.mobileNumber.msg : null"
                          v-model="newVoter.mobileNumber"
                      />
                    </CCol>
                    <CCol>
                      <CInput
                          label="شغل"
                          :class="validation.job ? 'err' : null"
                          :description="validation.job ? validation.job.msg : null"
                          v-model="newVoter.job"
                      />
                    </CCol>

                    <CCol>
                      <CButton color="success" variant="outline" @click="addVoter">افزودن</CButton>
                    </CCol>
                  </CRow>
                </CCol>
              </CRow>
            </CCardBody>
          </CCard>
        </CCol>

        <CCol sm="12" v-if="$route.params.details !== 'new'">
          <CCard>
            <CCardBody>
              <h4>نتایج انتخابات</h4>
              <el-divider></el-divider>
              <div class="survey-item2" v-for="(item, index) in election.candidates" :key="item._id+2">
                <h4>{{ item.firstName + ' ' + item.lastName }}</h4>
                <el-progress :percentage="progress(item)" style="direction: rtl" color="#CC0000"></el-progress>
              </div>
            </CCardBody>
          </CCard>
        </CCol>

        <!-------------------------- candidate modal --------------------------------------------->
        <el-dialog title="اطلاعات کاندیدا" :visible.sync="showCandidate">
          <CContainer style="border: solid 1px;padding: 25px;border-radius: 15px;">
            <CRow style="flex-direction: column;">
              <CCol>
                <CInput
                    label="نام"
                    :class="validation.firstName ? 'err' : null"
                    :description="validation.firstName ? validation.firstName.msg : null"
                    v-model="candidateDetail.firstName"
                />
              </CCol>
              <CCol>
                <CInput
                    label="نام خانوادگی"
                    :class="validation.lastName ? 'err' : null"
                    :description="validation.lastName ? validation.lastName.msg : null"
                    v-model="candidateDetail.lastName"
                />
              </CCol>
              <CCol>
                <CInput
                    label="کد ملی"
                    :class="validation.nationalCode ? 'err' : null"
                    :description="validation.nationalCode ? validation.nationalCode.msg : null"
                    v-model="candidateDetail.nationalCode"
                />
              </CCol>
              <CCol>
                <CTextarea
                    label="رزومه"
                    :class="validation.resume ? 'err' : null"
                    :description="validation.resume ? validation.resume.msg : null"
                    v-model="candidateDetail.resume"
                />
              </CCol>
              <CCol>
                <span>تاریخ تولد</span>
                <date-picker clearable format="YYYY-MM-DD" display-format="jMMMM jD"
                             v-model="candidateDetail.bornDate"></date-picker>
              </CCol>
              <CCol>
                <h4>عکس</h4>
                <el-divider/>
                <CCol>
                  <img :src="candidateDetail.profilePic" style="width: 100%;max-width: 500px;" alt=""/>
                </CCol>
                <input type="file" ref="profilePic" @change="imagePreview"/>
                <p style="margin-top: 5px !important;" class="form-err text-danger" v-if="validation.profilePic">
                  {{ validation.profilePic.msg }}</p>
                <p class="mt-3 text-muted">
                  عکس 400*300 باشد. در غیر این صورت اتوماتیک بریده می شود.
                </p>
              </CCol>

              <CButton color="success" variant="outline"
                       @click="candidateDetailType === 'add' ? addCandidate() : updateCandidate(candidateDetail._id)">{{ candidateDetailType === 'add' ? 'افزودن' : 'بروزرسانی' }}
              </CButton>
            </CRow>
          </CContainer>
        </el-dialog>

      </CRow>
    </CRow>
  </div>
</template>

<script>
export default {
  data() {
    return {
      election: null,
      categories: null,
      validation: {},
      newOption: '',
      showCandidate: false,
      candidateDetail: {},
      candidateDetailType: '',
      newVoter: {
        firstName: '',
        lastName: '',
        username: '',
        nationalCode: '',
        mobileNumber: '',
        jon: '',
      }
    }
  },
  computed: {
    title() {
      return this.$route.params.details === "new" ? "افزودن انتخابات جدید" : "مشاهده انتخابات"
    },
    catId: {
      get() {
        if (this.$route.params.details === 'new') {
          return this.election.catId
        } else {
          return this.election.catId._id
        }
      },
      set(value) {
        if (this.$route.params.details === 'new') {
          this.election.catId = value
        } else {
          this.election.catId._id = value
        }
      }
    }
  },
  methods: {
    progress(answerItem) {
      const availableOptions = this.election.candidates.map(item => item._id)
      let filteredAnswers = this.election.votes.filter(item => availableOptions.includes(item.candidate))
      let num = filteredAnswers.filter(item => item.candidate === answerItem._id).length
      return Number(((num * 100 / filteredAnswers.length) || 0).toFixed(0))
    },
    imagePreview(e) {
      this.candidateDetail.profilePic = URL.createObjectURL(e.target.files[0]);
    },
    detailsCandidate(candidate) {
      this.showCandidate = !this.showCandidate;
      if (candidate) {
        this.candidateDetailType = 'update';
        this.candidateDetail = candidate;
      } else {
        this.candidateDetailType = 'add';
        this.candidateDetail = {
          firstName: '',
          lastName: '',
          bornDate: '',
          education: '',
          nationalCode: '',
          resume: '',
          profilePic: '',
        }
      }
    },
    availableCategory(id) {
      return this.$auth.user.permissions.includes('superAdmin') || this.$auth.user.specialPermissions.includes(id)
    },
    post() {
      this.validation = {}
      this.$axios
          .post(`/api/admin/election`, this.election)
          .then((response) => {
            this.$message({
              type: "success",
              message: "نظرسنجی با موفقیت ایجاد شد."
            })
            this.$router.push({name: 'admin-elections-details', params: {details: response.data._id}})
          })
          .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.validation = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
            } else console.log(err.response.data)
          })
    },
    update() {
      this.validation = {}
      this.$axios.put(`/api/admin/election/${this.election._id}`, {...this.election, catId: this.catId})
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد."
            })
          })
          .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.validation = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
            } else console.log(err.response.data)
          });
    },
    addCandidate() {
      this.validation = {}
      const data = new FormData();
      data.append("firstName", this.candidateDetail.firstName);
      data.append("lastName", this.candidateDetail.lastName);
      data.append("bornDate", this.candidateDetail.bornDate);
      data.append("education", this.candidateDetail.education);
      data.append("nationalCode", this.candidateDetail.nationalCode);
      data.append("resume", this.candidateDetail.resume);
      data.append("profilePic", this.$refs.profilePic.files[0]);

      this.$axios.post(`/api/admin/election/candidate/${this.$route.params.details}`, data)
          .then((response) => {
            this.showCandidate = false;
            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.validation = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
            } else console.log(err.response.data)
          })
    },
    updateCandidate(id) {
      const data = new FormData();
      data.append("firstName", this.candidateDetail.firstName);
      data.append("lastName", this.candidateDetail.lastName);
      data.append("bornDate", this.candidateDetail.bornDate);
      data.append("education", this.candidateDetail.education);
      data.append("nationalCode", this.candidateDetail.nationalCode);
      data.append("resume", this.candidateDetail.resume);
      data.append("candidateId", id);
      if (this.$refs.profilePic.files[0]) data.append("profilePic", this.$refs.profilePic.files[0]);

      this.validation = {}
      this.$axios.put(`/api/admin/election/candidate/${this.$route.params.details}`, data)
          .then((response) => {
            this.showCandidate = false;
            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.validation = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
            } else console.log(err.response.data)
          })
    },
    removeCandidate(id) {
      this.$confirm("کاندیدا حذف شود؟", "اخطار", {
        confirmButtonText: "بله",
        cancelButtonText: "لغو",
        type: "warning"
      })
          .then(() => {
            this.$axios.delete(`/api/admin/election/candidate/${this.$route.params.details}/${id}`)
                .then((response) => {
                  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.validation = err.response.data.validation
                    this.$message({
                      type: 'warning',
                      message: 'پارامترها رو بررسی کنید'
                    })
                  } else console.log(err.response.data)
                })
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "عملیات لغو شد"
            })
          })
    },
    addVoter() {
      this.validation = {}
      this.$axios.post(`/api/admin/election/voter/${this.$route.params.details}`, this.newVoter)
          .then((response) => {
            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.validation = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
            } else console.log(err.response.data)
          })
    },
    removeVoter(id) {
      this.$confirm("رای دهنده حذف شود؟", "اخطار", {
        confirmButtonText: "بله",
        cancelButtonText: "لغو",
        type: "warning"
      })
          .then(() => {
            this.$axios.delete(`/api/admin/election/voter/${this.$route.params.details}/${id}`)
                .then((response) => {
                  this.$message({
                    type: "success",
                    message: "رای دهنده با موفقیت حذف شد."
                  })
                  this.election.voters = this.election.voters.filter(item => item._id !== id)
                })
                .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.validation = err.response.data.validation
                    this.$message({
                      type: 'warning',
                      message: 'پارامترها رو بررسی کنید'
                    })
                  } else console.log(err.response.data)
                })
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "عملیات لغو شد"
            })
          })
    },
  },
  head() {
    return {
      title: this.title,
    }
  },
  layout: "admin",
  async asyncData({$axios, params, error}) {
    try {
      const categories = await $axios.get('/api/admin/category/getParent')

      if (params.details !== 'new') {
        const election = await $axios.get(`/api/admin/election/${params.details}`)
        return {
          categories: categories.data,
          election: election.data
        }
      } else {
        return {
          categories: categories.data,
          election: {
            title: '',
            description: '',
            catId: '',
            startDate: '',
            endDate: '',
            publish: true,
          }
        }
      }
    } 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">
.electionCandidate .el-dialog {
  @media (max-width: 768px) {
    width: 90%;
  }
}
</style>

<style lang="scss">
.survey-item2 {
  padding: 20px 0;

  .el-radio-group {
    direction: ltr;

    .el-radio__input.is-checked .el-radio__inner {
      background: red;
      border-color: red;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: red;
    }

    .el-radio__label {

      &:hover {
        color: red;
      }
    }

    .el-radio__inner {
      border: 1px solid #666666;
    }

    .el-radio__inner:hover {
      border-color: red;
    }
  }

  .comment-btn {
    display: flex;
    justify-content: flex-end;

    button {
      &:disabled {
        border-color: #666666;
        background-color: #666666;
        color: white;
        border-radius: 5px;
      }
    }
  }

  .el-checkbox-group {
    direction: ltr;
    text-align: right;

    .el-checkbox__inner {

      border: 1px solid #666666;

      &:hover {
        border-color: red;
      }
    }
  }


  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: red;
    border-color: red;
  }

  .el-checkbox__label {

    &:hover {
      color: red;
    }
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: red;
  }

  .el-progress {
    font-family: 'sansNum', sans-serif;

    .el-progress-bar__inner {
      right: 0;
    }

    .el-progress__text {
      margin-right: 10px;
    }
  }


}
</style>
