<script>
import Layout from "../../layouts/main";
import PageHeader from "../../components/page-header";

import { tasksChart, tasks } from "./data-tasklist";
import { required } from "vuelidate/lib/validators";

/**
 * Task-list component
 */
export default {
  components: { Layout, PageHeader },
  data() {
    return {
      tasksChart: tasksChart,
       inprogressTasks: "",
      upcomingTasks: "",
      completedTasks: "",
      title: "Task List",
      items: [
        {
          text: "Tasks",
          href: "/",
        },
        {
          text: "Task List",
          active: true,
        },
      ],
       taskList: {
        name: "",
      },
      myFiles: [],
      selected: "",
      selected2: "",
      submitted: false,
      showModal: false,
    };
  },
  validations: {
    taskList: {
      name: { required },
    },
  },
  mounted() {
    this.isMountData();
    // all tasks
  },
  methods: {
    onFileChange(event) {
      for (var i = 0; i < event.target.files.length; i++) {
        this.myFiles.push(
          "/images/users/" + event.target.files[i].name
        );
      }
    },

    handleSubmit() {
      this.submitted = true;

      // stop here if form is invalid
      this.$v.$touch();
      if (this.$v.$invalid) {
        return;
      } else {
        this.tasks.push({
          index: this.tasks.length + 1,
          taskType: this.selected,
          name: this.taskList.name,
          images: this.myFiles,
          status: this.selected2,
          checked: false,
        });
        this.isMountData();
        this.showModal = false;
        this.taskList = {};
        this.selected = "";
        this.selected2 = "";
        this.myFiles = [];
      }
      this.submitted = false;
    },

    isMountData() {
      this.tasks = tasks;
      this.inprogressTasks = tasks.filter((t) => t.taskType === "inprogress");
      this.upcomingTasks = tasks.filter((t) => t.taskType === "upcoming");
      this.completedTasks = tasks.filter((t) => t.taskType === "completed");
    },
  },
};
</script>

<template>
  <Layout>
    <PageHeader :title="title" :items="items" />
    <div class="row">
      <div class="col-lg-8">
        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-start">
              <h4 class="card-title mb-4">Upcoming</h4>
              <b-button
                class="btn btn-success ms-auto"
                @click="showModal = true"
                >Add Task</b-button
              >
            </div>
            <b-modal title="Add Task" v-model="showModal" hide-footer>
              <form @submit.prevent="handleSubmit">
                <div class="row">
                  <div class="col-12">
                    <div class="mb-3">
                      <label for="name">Event Name</label>
                      <input
                        id="name"
                        v-model="taskList.name"
                        type="text"
                        class="form-control"
                        placeholder="Insert name"
                        :class="{
                          'is-invalid': submitted && $v.taskList.name.$error,
                        }"
                      />
                      <div
                        v-if="submitted && !$v.taskList.name.required"
                        class="invalid-feedback"
                      >
                        This value is required.
                      </div>
                    </div>
                  </div>
                  <div class="mb-3">
                    <label for="file">File</label>
                    <input
                      id="file"
                      type="file"
                      multiple
                      class="form-control"
                      @change="onFileChange($event)"
                    />
                  </div>
                  <div class="col-12">
                    <div class="mb-3">
                      Task Type
                      <b-form-select
                        v-model="selected"
                        class="mb-3 form-select"
                      >
                        <b-form-select-option value="upcoming"
                          >Upcoming</b-form-select-option
                        >
                        <b-form-select-option value="inprogress"
                          >In-progress</b-form-select-option
                        >
                        <b-form-select-option value="completed"
                          >Completed</b-form-select-option
                        >
                      </b-form-select>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="mb-3">
                      Task Status
                      <b-form-select
                        v-model="selected2"
                        class="mb-3 form-select"
                      >
                        <b-form-select-option value="Approved"
                          >Approved</b-form-select-option
                        >
                        <b-form-select-option value="Waiting"
                          >Waiting</b-form-select-option
                        >
                        <b-form-select-option value="Pending"
                          >Pending</b-form-select-option
                        >
                        <b-form-select-option value="Complete"
                          >Complete</b-form-select-option
                        >
                      </b-form-select>
                    </div>
                  </div>
                </div>
                <div class="text-end mt-3">
                  <b-button variant="light">Close</b-button>
                  <b-button type="submit" variant="success" class="ms-1"
                    >Create event</b-button
                  >
                </div>
              </form>
            </b-modal>
            <div class="table-responsive mb-0">
              <table class="table table-nowrap align-middle mb-0">
                <tbody>
                  <tr v-for="task of upcomingTasks" :key="task.index">
                    <td style="width: 40px">
                      <b-form-checkbox
                        class="form-check"
                        v-model="task.checked"
                      >
                      </b-form-checkbox>
                    </td>
                    <td>
                      <h5 class="text-truncate font-size-14 m-0">
                        <a href="javascript: void(0);" class="text-dark">{{
                          task.name
                        }}</a>
                      </h5>
                    </td>
                    <td>
                      <div class="avatar-group">
                        <div
                          class="avatar-group-item"
                          v-for="(data, index) of task.images"
                          :key="index"
                        >
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              :src="`${data}`"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="text-center">
                        <span
                          class="badge rounded-pill font-size-11"
                          :class="{
                            'badge-soft-success': task.status === 'Complete',
                            'badge-soft-warning': task.status === 'Pending',
                            'badge-soft-primary': task.status === 'Approved',
                            'badge-soft-secondary': task.status === 'Waiting',
                          }"
                          >{{ task.status }}</span
                        >
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-start">
              <h4 class="card-title mb-4">In Progress</h4>
              <b-button
                class="btn btn-success ms-auto"
                @click="showModal = true"
                >Add Task</b-button
              >
            </div>
            <div class="table-responsive mb-0">
              <table class="table table-nowrap table-centered">
                <tbody>
                  <tr v-for="task of inprogressTasks" :key="task.index">
                    <td style="width: 40px">
                       <b-form-checkbox
                        class="form-check" v-model="task.checked">
                      </b-form-checkbox>
                    </td>
                    <td>
                      <h5 class="text-truncate font-size-14 m-0">
                        <a href="javascript: void(0);" class="text-dark">{{
                          task.name
                        }}</a>
                      </h5>
                    </td>
                    <td>
                      <div class="avatar-group">
                        <div
                          class="avatar-group-item"
                          v-for="(data, index) of task.images"
                          :key="index"
                        >
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              :src="`${data}`"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="text-center">
                        <span
                          class="badge rounded-pill font-size-11"
                          :class="{
                            'badge-soft-success': task.status === 'Complete',
                            'badge-soft-warning': task.status === 'Pending',
                            'badge-soft-primary': task.status === 'Approved',
                            'badge-soft-secondary': task.status === 'Waiting',
                          }"
                          >{{ task.status }}</span
                        >
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-start">
              <h4 class="card-title mb-4">Completed</h4>
              <b-button
                class="btn btn-success ms-auto"
                @click="showModal = true"
                >Add Task</b-button
              >
            </div>
            <div class="table-responsive mb-0">
              <table class="table table-nowrap table-centered">
                <tbody>
                  <tr v-for="task of completedTasks" :key="task.index">
                    <td style="width: 40px">
                       <b-form-checkbox
                        class="form-check" v-model="task.checked">
                      </b-form-checkbox>
                    </td>
                    <td>
                      <h5 class="text-truncate font-size-14 m-0">
                        <a href="javascript: void(0);" class="text-dark">{{
                          task.name
                        }}</a>
                      </h5>
                    </td>
                    <td>
                      <div class="avatar-group">
                        <div
                          class="avatar-group-item"
                          v-for="(data, index) of task.images"
                          :key="index"
                        >
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              :src="`${data}`"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="text-center">
                        <span
                          class="badge rounded-pill font-size-11"
                          :class="{
                            'badge-soft-success': task.status === 'Complete',
                            'badge-soft-warning': task.status === 'Pending',
                            'badge-soft-primary': task.status === 'Approved',
                            'badge-soft-secondary': task.status === 'Waiting',
                          }"
                          >{{ task.status }}</span
                        >
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- end col -->

      <div class="col-lg-4">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-3">Tasks</h4>

            <apexchart
              class="apex-charts"
              type="line"
              height="280"
              :series="tasksChart.series"
              :options="tasksChart.chartOptions"
            ></apexchart>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Recent Tasks</h4>

            <div class="table-responsive">
              <table class="table table-nowrap align-middle mb-0">
                <tbody>
                  <tr>
                    <td>
                      <h5 class="text-truncate font-size-14 m-0">
                        <a href="#" class="text-dark">Brand logo design</a>
                      </h5>
                    </td>
                    <td>
                      <div class="avatar-group">
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-4.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-5.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <h5 class="text-truncate font-size-14 m-0">
                        <a href="#" class="text-dark"
                          >Create a Blog Template UI</a
                        >
                      </h5>
                    </td>
                    <td>
                      <div class="avatar-group">
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-1.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-2.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-3.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <div class="avatar-xs">
                              <span
                                class="avatar-title rounded-circle bg-info text-white font-size-16"
                              >
                                D
                              </span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <h5 class="text-truncate font-size-14 m-0">
                        <a href="#" class="text-dark"
                          >Redesign - Landing page</a
                        >
                      </h5>
                    </td>
                    <td>
                      <div class="avatar-group">
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-8.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <img
                              src="/images/users/avatar-7.jpg"
                              alt=""
                              class="rounded-circle avatar-xs"
                            />
                          </a>
                        </div>
                        <div class="avatar-group-item">
                          <a href="javascript: void(0);" class="d-inline-block">
                            <div class="avatar-xs">
                              <span
                                class="avatar-title rounded-circle bg-danger text-white font-size-16"
                              >
                                P
                              </span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- end table responsive -->
          </div>
        </div>
      </div>
    </div>
    <!-- end row -->
  </Layout>
</template>
