<template>
    <v-container fluid class="body-color">

      <!-- ****** Edit Chapter detail  ****** -->

      <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable>
        <v-card class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>

              <label class="title text-xs-center">Edit Chapter</label>

              <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>
            </v-flex>
          </v-layout>
          <v-card-text>
            <v-layout wrap>
              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">

                    <label class="right">Select Class:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-select
                      small
                      :items="addclass"
                      label="Select Class"
                      v-model="editedCourse.classId"
                      item-text="classNum"
                      item-value="_id"
                      name="Select Class"

                      @change="getCourses(editedCourse.classId)"

                      class="mr-2"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Select Course:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-select
                      :items="courseData"
                      label="Select Course"
                      v-model="editedCourse.courseId"

                      item-text="courseName"

                      item-value="_id"
                      required
                      class="ml-2"
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm12 md11 lg11>
                <v-card-actions class="hidden-xs-only hidden-sm-only">
                  <v-spacer></v-spacer>
                  <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>
                </v-card-actions>
                <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                  <v-spacer></v-spacer>
                  <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-dialog>

      <!-- DIALOG BOX -  EDIT CHAPTER-->

      <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable>
        <v-card class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">Edit Chapter</label>

              <v-icon
                size="24"
                class="right"
                @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
              >cancel</v-icon>

            </v-flex>
          </v-layout>
          <v-card-text>
            <v-layout wrap>

              <!-- CHAPTER NAME -->

              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">

                    <label class="right">Chapter Name:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-text-field
                      v-model="editChapter.chapterName"
                      placeholder="fill your Title"
                      type="text"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- DESCRIPTION -->

              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Description:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-text-field
                      placeholder="fill your Description"
                      v-model="editChapter.description"
                      type="text"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- UPLOAD PPT -->

              <!-- <v-flex xs12>

                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Upload PPT:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <UploadFiles
                      @fileSelected="fileSelected($event,'uploadPPT')"
                      label="Add PPT"

                      reference="EditPpt"
                      id="editPptInput"
                      :trigger="trigger"

                    ></UploadFiles>
                  </v-flex>
                </v-layout>

              </v-flex>-->

              <!-- UPLOAD PDF -->
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Upload PDF:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">

                    <UploadPdf
                      @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"

                      label="Add PDF"

                      reference="editPdf"
                      id="editPdfInput"

                      :emptyPdf="emptyPdf"

                    ></UploadPdf>

                  </v-flex>
                </v-layout>
              </v-flex>

            </v-layout>

            <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">

              <v-layout
                wrap
                v-for="(editChapterPoint,index) in editChapter.chapterPoints"
                :key="index"
              >
                <v-flex xs12 sm12 md4 class="pt-4 subheading">
                  <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
                  <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
                </v-flex>
                <v-layout>
                  <v-flex xs10 sm10 sm5 md9 class="ml-3">
                    <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
                  </v-flex>
                  <v-flex xs2 class="pt-4">

                    <v-icon @click="deleteUrl(index)">cancel</v-icon>

                  </v-flex>
                </v-layout>
              </v-layout>

            </v-flex>-->

            <v-flex xs12>
              <div v-for="(updateImage,index) in updates" :key="index">
                <v-layout wrap>
                  <v-flex xs12 sm12 md4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
                    <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
                  </v-flex>
                  <v-layout>
                    <v-flex xs10 sm12 md9 class="ml-3">
                      <v-text-field
                        v-model="updateImage.value"
                        placeholder="Upload new Chapter Points"
                        required
                      ></v-text-field>
                    </v-flex>
                    <v-flex xs2 class="pt-4">
                      <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
                      <v-icon @click="update">add_circle</v-icon>
                    </v-flex>
                  </v-layout>
                </v-layout>
              </div>
            </v-flex>

            <v-layout>
              <v-flex xs12 sm12 md11 lg11>
                <v-card-actions class="hidden-xs-only hidden-sm-only">
                  <v-spacer></v-spacer>

                  <v-btn
                    round
                    dark
                    @click="saveChapter"
                    :loading="editLoading"
                    class="add-button mr-4"
                  >Save</v-btn>
                </v-card-actions>
                <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                  <v-spacer></v-spacer>
                  <v-btn
                    round
                    dark
                    @click="saveChapter"
                    :loading="editLoading"
                    class="add-button"
                  >Save</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-dialog>

      <!-- ADD NEW CHAPTER-->

      <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>
        <v-card class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">Add Chapter Detail</label>

              <v-icon
                size="24"
                class="right"
                @click="addChapterDialog = false;  trigger = 'reset'; emptyPdf = 'reset' "
              >cancel</v-icon>

            </v-flex>
          </v-layout>
          <v-card-text>
            <v-layout wrap>
              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Chapter Name:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-text-field
                      v-model="addChapterItem.chapterName"
                      placeholder="fill your Title"
                      type="text"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Description:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-text-field
                      placeholder="fill your Description"
                      v-model="addChapterItem.description"
                      type="text"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- UPLOAD PPT -->

              <!-- <v-flex xs12>

                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Upload PPT:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <UploadFiles
                      @fileSelected="fileSelected($event,'uploadPPT')"
                      label="Add PPT"

                      reference="newChapterPpt"
                      id="newChapterPptInput"
                      :trigger="trigger"

                    ></UploadFiles>
                  </v-flex>
                </v-layout>

              </v-flex>-->

              <!-- UPLOAD PDF -->
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Upload PDF:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">

                    <UploadPdf
                      @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"

                      label="Add PDF"

                      reference="newChapterPdf"
                      id="newChapterPdfInput"

                      :emptyPdf="emptyPdf"

                    ></UploadPdf>

                  </v-flex>
                </v-layout>
              </v-flex>

            </v-layout>
            <v-flex xs12>
              <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Chapter Points:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md6 class="ml-3">
                    <v-text-field
                      placeholder="fill your Chapter Points"
                      v-model="chapterPoints.value"
                      type="text"
                      name="link"
                      required
                    ></v-text-field>
                  </v-flex>
                  <v-flex xs2 class="pt-4">
                    <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
                    <v-icon @click="addChapterPoint()">add_circle</v-icon>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
            <v-layout>
              <v-flex xs12 sm12 md11 lg11>
                <v-card-actions class="hidden-xs-only hidden-sm-only">
                  <v-spacer></v-spacer>
                  <v-btn
                    round
                    dark
                    @click="submitChapter"
                    :loading="editLoading"
                    class="add-button mr-4"
                  >Submit</v-btn>

                </v-card-actions>
                <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                  <v-spacer></v-spacer>
                  <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-dialog>
  
      <!-- ****** PROFILE Gallery ******  -->
  
      <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
        <v-card flat class="card-style pa-3" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">View Course Detail</label>
              <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
            </v-flex>
          </v-layout>
          <v-card-text>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex xs12>
                  <v-layout>
                    <v-flex xs4 sm6>
                      <h5 class="right my-1">
                        <b>Chapter Name:</b>
                      </h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                      <h5 class="my-1">{{ editedItem.chapterName }}</h5>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm6>
                      <h5 class="right my-1">
                        <b>Description:</b>
                      </h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                      <h5 class="my-1">{{ editedItem.description }}</h5>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs5 sm6>
                      <h5 class="right my-1">

                        <b>Chapter Points:</b>

                      </h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                      <h5 class="my-1">
                        <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
                          <li>{{ chapterPoint}}</li>
                        </ul>
                      </h5>
                    </v-flex>
                  </v-layout>

                  <!-- LINK TO PDF -->
                  <v-layout row justify-center>
                    <v-flex xs6>
                      <div style="width: 100%;">
                        <a
                          :href="editedItem.pdfFileUrl"
                          target="_blank"
                          style="text-decoration: none!important;"
                        >
                          <v-btn flat block>

                            <span>
                              <h5>
                                <b>Open PDF</b>
                              </h5>
                            </span>

                          </v-btn>
                        </a>
                      </div>
                    </v-flex>
                  </v-layout>

                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-card>
      </v-dialog>
  
      <!-- ****** Course Detail TABLE ****** -->

      <v-container grid-list-lg class="pa-0">
        <v-layout row wrap>
          <!-- <v-btn
            fab
            dark
            class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"

            small

            @click="addCourseDetailDialog = true"
          >
            <v-icon dark>add</v-icon>
          </v-btn>-->
          <v-flex xs12 sm4>
            <v-btn block round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
              <v-icon class="white--text pr-1" size="20">add</v-icon>
              <span class="hidden-sm-and-down">Add Course Detail</span>
              <span class="hidden-md-and-up">Add</span>
            </v-btn>
          </v-flex>
  
          <v-flex xs12 sm4 md2>
            <v-select
              :items="addclass"
              label="Select Class"
              v-model="getCourse.classId"
              item-text="classNum"
              item-value="_id"
              name="Select Class"
              @change="getCourses(getCourse.classId)"
              required
            ></v-select>
          </v-flex>
          <v-flex xs12 sm4 md2>
            <v-select
              :items="courseData"
              label="Select Course"
              v-model="getCourse.courseId"
              item-text="courseName"
              item-value="_id"
              required
              @change="getCourseDetailsList(getCourse.courseId)"
            ></v-select>
          </v-flex>
  
          <v-flex xs12 sm1 v-if="show">
            <v-btn icon large flat @click="show = false;showSearch = true;">
              <v-avatar size="27">
                <img src="/static/icon/search.png" alt="icon" />
              </v-avatar>
            </v-btn>
          </v-flex>
  
          <v-flex xs12 sm3 md3 v-if="showSearch">
            <div style="display: inline-block;width: 70%;">
              <v-text-field

                autofocus

                v-model="search"
                label="Search"
                prepend-inner-icon="search"
                color="primary"
              ></v-text-field>
            </div>
            <div style="display: inline-block;">
              <v-icon @click="closeSearch" color="error">close</v-icon>
            </div>
          </v-flex>
        </v-layout>
      </v-container>

      <v-data-table
        :headers="headers"
        :items="CourseDetailsList"
        :pagination.sync="pagination"
        :search="search"
        item-key="_id"
      >
        <template slot="items" slot-scope="props">

          <tr class="tr" @click="courseTableRow(props.item._id)">

            <td class="td td-row">{{ props.index + 1}}</td>
            <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>

            <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>

            <td class="td td-row text-xs-center">

              <div style="vertical-align: top;">

                <v-tooltip top>
                  <v-icon
                    slot="activator"

                    style="cursor:pointer;font-size:22px;position: relative;top: -4px; "

                    class="mr-3"
                    @click="addChapters(props.item)"
                  >add_circle_outline</v-icon>
                  <span>Add</span>
                </v-tooltip>
                <v-tooltip top>

                  <img
                    slot="activator"
                    style="cursor:pointer; width:25px; height:25px; "
                    class="mr-3"

                    @click="props.expanded = !props.expanded"

                    src="/static/icon/view.png"
                  />
                  <span>View</span>
                </v-tooltip>
                <v-tooltip top>
                  <img
                    slot="activator"
                    style="cursor:pointer; width:20px; height:18px; "
                    class="mr-3"
                    @click="editItem(props.item)"
                    src="/static/icon/edit.png"
                  />
                  <span>Edit</span>

                </v-tooltip>

                <v-tooltip top>
                  <img
                    slot="activator"
                    style="cursor:pointer; width:20px; height:20px; "
                    class="mr-3"
                    @click="deleteItem(props.item)"
                    src="/static/icon/delete.png"
                  />
                  <span>Delete</span>
                </v-tooltip>

              </div>

            </td>
          </tr>
        </template>

        <!-- CHAPTERS IN A COURSE -->

        <template slot="expand">

          <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
            <template slot="items" slot-scope="props">
              <tr class="tr" @click="props.expanded = !props.expanded">
                <td class="td td-row">{{ props.index + 1}}</td>
                <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
                <td class="text-xs-center td td-row">{{ props.item.description }}</td>
                <td class="text-xs-center td td-row">
                  <v-tooltip top>

                    <v-icon
                      slot="activator"
                      style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
                      class="mr-3"

                      @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"

                    >video_call</v-icon>
                    <span>Live Session</span>
                  </v-tooltip>
                  <v-tooltip top>

                    <img
                      slot="activator"
                      style="cursor:pointer; width:25px; height:25px; "
                      class="mr-3"
                      @click="profile(props.item)"
                      src="/static/icon/view.png"
                    />
                    <span>View</span>
                  </v-tooltip>
                  <v-tooltip top>
                    <img
                      slot="activator"
                      style="cursor:pointer; width:20px; height:18px; "
                      class="mr-3"
                      @click="editChapterItem(props.item)"
                      src="/static/icon/edit.png"
                    />
                    <span>Edit</span>
                  </v-tooltip>

                  <v-tooltip top>

                    <img

                      slot="activator"

                      style="cursor:pointer; width:20px; height:20px; "
                      class="mr-3"
                      @click="deleteChapters(props.item)"
                      src="/static/icon/delete.png"
                    />
                    <span>Delete Chapter</span>

                  </v-tooltip>
                </td>

              </tr>

            </template>

          </v-data-table>
        </template>
  
        <v-alert
          slot="no-results"
          :value="true"
          color="error"
          icon="warning"
        >Your search for "{{ search }}" found no results.</v-alert>
      </v-data-table>
      <!-- ****** ADD Course Detail  ****** -->

      <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>

        <v-card flat class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">Add Course Details</label>

              <v-icon
                size="24"
                class="right"
                @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "
              >cancel</v-icon>

            </v-flex>
          </v-layout>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-container fluid>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md7 class="ml-3">
                    <v-select
                      :items="addclass"
                      label="Select Class"
                      v-model="addCourseDetail.classId"
                      item-text="classNum"
                      item-value="_id"
                      name="Select Class"
                      :rules="clsssRules"
                      @change="getCourses(addCourseDetail.classId)"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md7 class="ml-3">
                    <v-select
                      :items="courseData"
                      label="Select Course"
                      v-model="addCourseDetail.courseId"

                      item-text="courseName"

                      item-value="_id"
                      :rules="courseRules"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Chapter Name:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md7 class="ml-3">
                    <v-text-field
                      v-model="addCourseDetail.chapterName"
                      placeholder="fill your Title"
                      name="name"
                      type="text"
                      :rules="chapterNameRules"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- DESCRIPTION -->

              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Description:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md7 class="ml-3">
                    <v-text-field
                      placeholder="fill your Description"
                      :rules="descriptionRules"
                      v-model="addCourseDetail.description"
                      type="text"
                      name="email"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- UPLOAD PPT -->

              <!-- <v-flex xs12>

                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Upload PPT:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md7 class="ml-3">
                    <UploadFiles
                      @fileSelected="fileSelected($event,'uploadPPT')"
                      label="Add PPT"

                      reference="newCoursePpt"
                      id="newCoursePptInput"
                      :trigger="trigger"

                    ></UploadFiles>
                  </v-flex>
                </v-layout>

              </v-flex>-->

              <!-- UPLOAD PDF -->
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Upload PDF:</label>
                  </v-flex>
                  <v-flex xs8 sm8 md7 class="ml-3">

                    <UploadPdf
                      @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"

                      label="Add PDF"

                      reference="newCoursePdf"
                      id="newCoursePdfInput"

                      :emptyPdf="emptyPdf"

                    ></UploadPdf>

                  </v-flex>
                </v-layout>
              </v-flex>

              <v-layout>
                <v-flex xs12>
                  <div v-for="(chapterPoints,index) in finds" :key="index">
                    <v-layout>
                      <v-flex xs4 class="pt-4 subheading">
                        <label class="right">Chapter Points:</label>
                      </v-flex>
                      <v-flex xs8 sm8 md6 class="ml-3">
                        <v-text-field
                          placeholder="fill your Chapter Points"
                          v-model="chapterPoints.value"
                          type="text"

                          required
                        ></v-text-field>
                      </v-flex>
                      <v-flex xs2 class="pt-4">
                        <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
                        <v-icon @click="addFind">add_circle</v-icon>
                      </v-flex>
                    </v-layout>
                  </div>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs12 sm12>
                  <v-layout class="right">

                    <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn>

                    <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
          </v-form>
        </v-card>
      </v-dialog>
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
      >{{ text }}</v-snackbar>
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
    </v-container>
  </template>
  
  <script>
  import http from "@/Services/http.js";

  import UploadFiles from "@/pages/Common/UploadFiles.vue";

  import UploadPdf from "@/pages/Common/UploadPdf.vue";
  import AllApiCalls from "@/Services/AllApiCalls.js";

  
  export default {

    mixins: [AllApiCalls],

    components: {

      UploadFiles,

      UploadPdf,

    },

    data: () => ({
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      loading: false,
      color: "",
      date: null,
      search: "",
      show: true,
      addCourseDetailDialog: false,
      showSearch: false,
      showLoader: false,
      editCourseDetailDialog: false,

      editChapterDetailDialog: false,

      viewProfileGallery: false,
      valid: true,
      editLoading: false,
      addclass: [],
      courseData: [],
      addSection: [],
      getCourse: {},
      finds: [{ value: "" }],

      findsChapterPoint: [{ value: "" }],

      updates: [],

      youTubeLink: {},
      addCourseDetail: {
        chapters: [
          {
            chapterName: "",
            description: "",

            chapterPoints: [],
          },
        ],

      },
      chapters: [],
      pagination: {

        rowsPerPage: 10,

      },
      editFiles: [],
      files: [],
      courseData: [],
      token: "",

      courseId: "",

      clsssRules: [(v) => !!v || " Class is required"],
      courseRules: [(v) => !!v || " Course is required"],
      chapterNameRules: [(v) => !!v || " Tilte is required"],
      descriptionRules: [(v) => !!v || " Description is required"],

      headers: [
        {
          align: "",
          text: "No",
          sortable: false,

          value: "index",

        },
        {
          text: "Class Name",
          value: "classNum",
          sortable: false,

          align: "center",

        },
        {
          text: "Course Name",
          value: "courseName",
          sortable: false,

          align: "center",

        },

        { text: "Action", value: "", sortable: false, align: "center" },

      ],
      CourseDetailsList: [],
      editedIndex: -1,
      editedItem: {},

      editedCourse: {},

      editChapter: {

        chapterPoints: [],

      },

      index: "",
      addChapterItem: {},

      addChapterItemObj: {},

      addChapterDialog: false,

      showData: false,

    }),
    methods: {
      getCourses(classId) {
        this.showLoader = true;
        http()
          .get("/getCourseesList", {
            params: {

              classId: classId,
            },

          })

          .then((response) => {

            this.editChapter.courseId = "";

            this.courseData = response.data.data;

            // console.log("this.courseData", this.courseData);

            this.showLoader = false;
          })

          .catch((err) => {

            console.log("err====>", err);
            this.showLoader = false;
          });
      },
      getCourseDetailsList() {
        this.showLoader = true;
        http()
          .get("/getParticularCourseDetail", {
            params: {

              courseId: this.getCourse.courseId,
            },

          })

          .then((response) => {

            this.CourseDetailsList = response.data.data;

            if (this.CourseDetailsList.length === 0) {
              this.showLoader = false;
              this.snackbar = true;
              this.text = "Data not found!";
              this.color = "error";
              return;
            }
            this.showData = true;

            if (response.data.data[0]) {
              this.chapters = response.data.data[0].chapters;
            }

            this.showLoader = false;
          })

          .catch((error) => {

            // console.log("err====>", err);
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },

      courseTableRow(id) {

        this.courseId = id;
      },
      addChapters(item) {

        this.editedIndex = this.CourseDetailsList.indexOf(item);

        this.addChapterItemObj = Object.assign({}, item);
        this.addChapterItem.courseDetailId = this.addChapterItemObj._id;

        this.addChapterDialog = true;

      },
      submitChapter() {
        this.addChapterItem.chapterPoints = [];
        for (let i = 0; i < this.findsChapterPoint.length; i++) {
          this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
        }

        this.loading = true;
        http()
          .put("/addChapters", this.addChapterItem)

          .then((response) => {

            this.addChapterDialog = false;
            this.loading = false;
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";

            this.addChapterItem = {};
            this.removeChapterPoint();

            this.getCourseDetailsList();

          })

          .catch((error) => {

            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
            this.loading = false;
          });
      },

      profile(item) {

        console.log("chaper - ", item);

        this.editedIndex = this.chapters.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.viewProfileGallery = true;
      },

      editItem(item) {
        this.editedIndex = this.CourseDetailsList.indexOf(item);
        this.editedCourse = Object.assign({}, item);

        this.editCourseDetailDialog = true;
      },

      editChapterItem(item) {
        this.editedIndex = this.chapters.indexOf(item);
        this.editChapter = Object.assign({}, item);

        this.updates = [];
        for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
          this.updates.push({ value: this.editChapter.chapterPoints[i] });
        }

        this.editChapterDetailDialog = true;

      },
      deleteItem(item) {
        let deleteGallery = {

          courseDetailId: item._id,

        };
        http()
          .delete(

            "/deleteCourseDetail",

            confirm("Are you sure you want to delete this?") && {
              params: deleteGallery,
              headers: {

                Authorization: "Bearer " + this.token,
              },

            }
          )

          .then((response) => {

            this.snackbar = true;

            this.text = "Successfully delete Course Details";

            this.color = "green";
            this.getCourseDetailsList();
          })

          .catch((error) => {

            // console.log(error);
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
          });
      },

      deleteChapters(item) {
        // console.log("item", item);
        let deleteChapters = {
          courseDetailId: this.courseId,

          chapterId: item._id,

        };
        http()

          .put(
            "/deleteChapters",
            confirm("Are you sure you want to delete this?") && deleteChapters
          )

          .then((response) => {

            this.snackbar = true;

            this.text = "Successfully delete Chapters";

            this.color = "green";
            this.getCourseDetailsList();

          })

          .catch((error) => {

            // console.log(error);

            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
          });
      },
      close() {
        this.editCourseDetailDialog = false;
      },
      closeProfileGallery() {
        this.viewProfileGallery = false;
      },
      submit() {
        let chapters = [];
        var chapterPoints = [];
        for (let i = 0; i < this.finds.length; i++) {
          chapterPoints.push(this.finds[i].value);

          // console.log("this.finds[i].value", this.finds[i].value);

          chapters = [
            {
              chapterName: this.addCourseDetail.chapterName,
              description: this.addCourseDetail.description,

              chapterPoints: chapterPoints,
              uploadPdf: this.pdfFile,

              uploadPpt: this.pptFile,
            },

          ];
        }
        if (this.$refs.form.validate()) {

          // console.log("this.addCourseDetail", this.addCourseDetail);

          var courseDetailsData = {
            classId: this.addCourseDetail.classId,
            courseId: this.addCourseDetail.courseId,

            chapters: chapters,

          };
          this.loading = true;
          http()
            .post("/createCourseDetail", courseDetailsData)

            .then((response) => {

              this.addCourseDetailDialog = false;
              this.loading = false;
              this.snackbar = true;
              this.text = response.data.message;
              this.color = "green";
              this.clear();

              this.trigger = "reset";
              this.emptyPdf = "reset";

              this.removeAddFind();

            })

            .catch((error) => {

              this.snackbar = true;
              this.text = error.response.data.message;
              this.color = "error";
              this.loading = false;
            });
        }
      },
      clear() {
        this.$refs.form.reset();

      },

      saveChapter() {
        this.editedItem.courseDetailId = this.editedItem._id;

        // console.log("this.updates", this.updates);

        var chapterPoints = [];

        for (let i = 0; i < this.updates.length; i++) {

          chapterPoints.push(this.updates[i].value);

        }

        var updateData = {
          courseDetailId: this.courseId,
          chapterId: this.editChapter._id,
          chapterName: this.editChapter.chapterName,
          description: this.editChapter.description,

          chapterPoints: chapterPoints,
          uploadPdf: this.pdfFile,

          uploadPpt: this.pptFile,

        };

        this.editLoading = true;
        http()

          .put("/updateChapters", updateData)

          .then((response) => {

            this.editChapterDetailDialog = false;

            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";
            this.editLoading = false;

            // this.removeUpdatePoints();

            this.trigger = "reset";
            this.emptyPdf = "reset";

            this.getCourseDetailsList();

          })

          .catch((error) => {

            this.editLoading = false;
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
          });
      },

      save() {

        var updateData = {
          courseDetailId: this.editedCourse._id,
          courseId: this.editedCourse.courseId,

          classId: this.editedCourse.classId,

        };
        this.editLoading = true;
        http()
          .put("/updateCourseDetail", updateData)

          .then((response) => {

            this.getCourseDetailsList();
            this.editCourseDetailDialog = false;
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";
            this.editLoading = false;
            // this.editChapterPointName = "";
            this.editFiles = [];
          })

          .catch((error) => {

            this.editLoading = false;
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
          });
      },

      getAllClasses() {
        http()
          .get("/getClassesList", {

            headers: { Authorization: "Bearer " + this.token },

          })

          .then((response) => {

            this.addclass = response.data.data;
          })

          .catch((err) => {

            // console.log("err====>", err);
          });
      },

      removeChapterPoint: function () {

        this.findsChapterPoint = [{ value: "" }];
      },

      removeAddFind: function () {

        this.finds = [{ value: "" }];
      },

      addFind: function () {

        this.finds.push({ value: "" });
      },

      addChapterPoint: function () {

        this.findsChapterPoint.push({ value: "" });
      },

      update: function () {

        this.updates.push({ value: "" });

      },

      // removeUpdatePoints: function() {
      //   this.updates = [{ value: "" }];
      // },

      deleteFind: function (index) {

        this.finds.splice(index, 1);
        if (index === 0) this.addFind();
      },

      deleteChapterPoint: function (index) {

        this.findsChapterPoint.splice(index, 1);
        if (index === 0) this.addChapterPoint();
      },

      deleteUpdate: function (index) {

        this.updates.splice(index, 1);
        if (index === 0) this.update();
      },

      deleteUrl: function (index, youTubelinkId, id) {

        this.editChapter.chapterPoints.splice(index, 1);

        if (index === 0) this.update();

      },
      displaySearch() {
        this.show = false;
        this.showSearch = true;
      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";

      },

    },
    mounted() {
      this.token = this.$store.state.token;
      this.getAllClasses();

    },

  };
  </script>