<template :key="$route.meta.name">
  <div class="main_component">
    <div class="card">
        <div class="card-body">
            <div class="row topnavdesign">
                <div class="col-md-6"><h2>{{ details.title }}</h2></div>
                <div class="col-md-6 text-end">
                    <router-link to="/admin/ticket/" class="btn btn-primary">
                <i class="fa-solid fa-arrow-left"></i> Ticket List
                </router-link>
                </div>
            </div><hr>
            <div class="row mt-4">
                <div class="col-md-9">
                    <div class="card">
                    <div class="card-header" v-html="details.message"></div>
                    <div class="card-body">
                        <strong><h2 class="mt-4">Comments</h2></strong>
                        <div class="media mt-4" v-for="(commentData, index) in comments">
                        <div class="media-body">
                            <div class="row">
                            <div class="col-md-8 d-flex mt-2">
                                <a class="mr-3" :src="getImage('uploads/avater.png')">
                                <img
                                    class="rounded-circle imgsize no-print"
                                    :src="getImage('uploads/avater.png')"
                                />
                                </a>
                                <h5>
                                <strong class="text-muted">{{ commentData.users.name }}</strong>
                                </h5>
                                <span class="text-muted">-{{ commentData.created_at }}</span>
                            </div>
                            <div class="col-md-4 no-print">
                                <div class="pull-right reply text-end">
                                <a
                                    @click="closeSingleReply(commentData)"
                                    class="text-primary"
                                    style="cursor: pointer"
                                >
                                    <span><i class="fa fa-reply"></i> reply</span>
                                </a>
                                </div>
                            </div>
                            </div>
                            <div class="Commentsize" v-html="commentData.comment"></div>
                            <div
                            class="media mt-4 messagesize"
                            v-for="(subComment, scindex) in commentData.sub_comments"
                            >
                            <div class="media-body">
                                <div class="row">
                                <div class="col-12 d-flex mt-2">
                                    <a class="pr-3" href="#">
                                    <img
                                        class="rounded-circle no-print"
                                        :src="getImage('images/avater.png')"
                                    />
                                    </a>
                                    <h5>
                                    <strong class="text-muted">{{ subComment.users.name }}</strong>
                                    </h5>
                                    <span
                                    ><span class="text-muted"
                                        >-{{ subComment.created_at }}</span
                                    ></span
                                    >
                                </div>
                                </div>
                                <div class="Commentsize" v-html="subComment.comment"></div>
                            </div>
                            </div>
                            <div
                            class="media mt-4 no-print"
                            v-if="
                                parseInt(commentData.open_reply) === 1 &&
                                parseInt(details.status) === 1
                            "
                            >
                            <a class="pr-3">
                                <img class="rounded-circle" :src="getImage('uploads/avater.png')" />
                            </a>
                            <div class="media-body Commentsize">
                                <form @submit.prevent="CommentSubmit(commentData)">
                                <div class="form-group">
                                    <editor   :id="`reply_${commentData.id}`" v-model="commentData.message" v-validate="'required'" api-key="no-api-key" name="message" :init="tinyMCESetup" />

                                </div>
                                <div class="form-group mt-2">
                                    <button class="btn btn-xs btn-outline-primary" type="submit">
                                    Reply
                                    </button>
                                    <a
                                    class="btn btn-xs btn-outline-danger"
                                    @click="closeSingleReply(commentData)"
                                    >Cancel</a
                                    >
                                </div>
                                </form>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div
                        class="media mt-4 no-print"
                        v-if="parseInt(details.status) === 1 && showCommentBox"
                        >
                        <img class="mr-3 rounded-circle" :src="getImage('uploads/avater.png')" />
                        <div class="media-body Commentsize">
                            <form @submit.prevent="CommentSubmit(formData)">
                            <div class="form-group">
                                <editor  id="d1" v-model="formData.message" v-validate="'required'" api-key="no-api-key" name="message" :init="tinyMCESetup" />
                            </div>
                            <div class="form-group mt-2">
                                <button class="btn btn-xs btn-outline-primary" type="submit">
                                Comment
                                </button>
                            </div>
                            </form>
                        </div>
                        </div>

                        <!-- end  -->
                    </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card mb-4">
                        <div class="card-header">
                            <div class="row">
                            <div class="col-md-9">
                                <strong>Files</strong>
                            </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <template v-if="details.files">
                                <a :href="getImage(details.files)" target="_blank"><img style="height: 75px; width: 65px;" :src="getImage(details.files)">
                                </a>
                            </template>
                            <div v-else>
                                not found any file
                            </div>

                        </div>
                    </div>
                    <div class="card mb-4">
                        <div class="card-header">
                            <div class="row">
                            <div class="col-md-9">
                                <strong>Details</strong>
                            </div>
                            <div class="col-md-3 text-end">
                                <button class="btn btn-sm btn-danger" title="delete ticket" @click="deleteTicket(details.id)">
                                <i class="fa fa-trash"></i>
                                </button>
                            </div>
                            </div>
                        </div>
                        <div class="card-body" v-if="details.users !== undefined">
                            <span class="btn btn-default btn-outline-dark ml-1 mt-1 text_bold">
                            <span><i class="fa fa-clock"></i> {{ details.created_at }}</span> </span
                            ><br />
                            <span class="btn btn-default btn-outline-dark ml-1 mt-1 text_bold">
                            <strong>Created By : </strong>{{ details.users.name }} </span
                            ><br />
                            <span class="btn btn-default btn-outline-dark ml-1 mt-1 text_bold">
                            <strong>Contact : </strong>{{ details.phone }} </span
                            ><br />
                            <span class="btn btn-default btn-outline-dark ml-1 mt-1 text_bold">
                            <strong>Ticket ID : </strong>{{ details.ticket_id }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import DataTable from "../../components/dataTable";
import Pagination from "../../plugins/pagination/pagination";
import PageTop from "../../components/pageTop";
import Editor from "@tinymce/tinymce-vue";
import axios from "axios";
export default {
  name: "ticket_details",
  components: { PageTop, Pagination, DataTable, Editor },

  data() {
    return {
      details: {},
      comments: [],
      formData: {
        message: "",
      },
      showCommentBox: true,
      options: {
        menubar: false,
        statusbar: false,
        convert_urls: false,
        height: 150,
        images_upload_url: '/api/image',
      },
      detailsId : '',
      commentTollbar: "bold italic | bullist numlist | link image media",
    };
  },
  watch : {
    '$route.params' : function(){
        if(this.$route.params.id !== undefined
        && this.detailsId !== this.$route.params.id){
            this.detailsId = this.$route.params.id;
        }
    },
    'detailsId' : function(){
        this.getComments(this.detailsId);
        this.showData()
    }
  },
  methods: {
    showData() {
      const _this = this;
      axios
        .get(`/api/ticket/${this.$route.params.id}`)
        .then((response) => {
        _this.$set(_this, 'details', response.data.result);

        })
        .catch((error) => {
          console.error("Failed to fetch ticket details", error);
        });
    },
    deleteTicket: function (id) {
      const _this = this;
      _this.deleteInformation(
        1,
        id,
        false,
        function (retData) {
          _this.$router.push({ path: "/admin/ticket" });
        },
        false
      );
    },
    getComments: function (ticket_id) {
      const _this = this;
      console.log(ticket_id);
      this.$store.commit("httpRequest", true);
      _this
        .axios({
          method: "get",
          url: `${_this.urlGenerate("api/comment")}?ticket_id=${ticket_id}`,
        })
        .then(function (response) {
          var retData = response.data;
          _this.$store.commit("httpRequest", false);
          if (parseInt(retData.status) === 2000) {
            _this.comments = retData.result;
          } else {
            _this.$store.state.dataList = [];
            _this.$toastr(retData.type, retData.message, "Warning");
          }
        })
        .catch(function (error) {
          var retData = error.response.data;
          _this.$toastr("error", retData.message, "Error");
        });
    },
    CommentSubmit: function (formObject) {
      const _this = this;
      _this.$set(formObject, "ticket_id", _this.$route.params.id);
      this.$validator.validate().then((valid) => {
        if (valid) {
          this.$store.commit("httpRequest", true);
          _this
            .axios({
              method: "post",
              url: `${_this.urlGenerate("api/comment")}`,
              data: formObject,
            })
            .then(function (response) {
              var retData = response.data;
              _this.$store.commit("httpRequest", false);
              if (parseInt(retData.status) === 2000) {
                _this.showCommentBox = true;
                formObject.message = "";
                _this.closeReply();
                _this.getComments(_this.$route.params.id);
              }
            })
            .catch(function (error) {
              var retData = error.response.data;
              _this.$toastr("error", retData.message, "Error");
            });
        }
      });
    },

    openReply: function (comment) {
      const _this = this;
      _this.closeReply(function (ret) {
        if (parseInt(comment.open_reply) === 1) {
          comment.open_reply = 0;
          _this.showCommentBox = true;
        } else {
          comment.open_reply = 1;
          _this.showCommentBox = false;
        }
      });
    },
    closeSingleReply: function (comment) {
      const _this = this;
      comment.message = "";
      if (parseInt(comment.open_reply) === 1) {
        comment.open_reply = 0;
        _this.showCommentBox = true;
      } else {
        comment.open_reply = 1;
        _this.showCommentBox = false;
      }
    },
    closeReply: function (callback = false) {
      const _this = this;
      $.each(_this.comments, function (index, value) {
        value.open_reply = 0;
      });
      if (typeof callback === "function") {
        callback(true);
      }
    },
  },
  mounted() {
    if(this.$route.params.id !== undefined){
        this.detailsId = this.$route.params.id;
    }
  },
};
</script>
<style scoped>
.headercolor {
  background-color: rgb(218, 218, 218);
}
img {
  width: 45px;
}
.messagesize {
  margin-left: 50px;
}
.Commentsize {
  margin-left: 60px;
}
.topnavdesign{
    padding: 10px 0px 10px 0px;
    background: #fff;
    margin-left: 0;
    margin-right: 0px;
}
</style>
