<template>
  <div>
    <div class="card shadow-sm border-0 mh-v100">
      <div
        class="card-header d-flex justify-content-between flex-wrap p-4 bg-white border-bottom-0"
      >
        <div>
          <h1 class="mb-0 fw-bold h2">{{ trans("em.mytags") }}</h1>
        </div>
        <div>
          <Tag-component :organiser_id="organiser_id"> </Tag-component>
        </div>
      </div>
      <div class="card-header p-4 bg-white border-bottom-0 pt-1">
        <div class="row">
          <div class="col-md-3 mb-3 position-relative">
            <label class="form-label" for="exampleFormControlSelect1"
              >{{ trans("em.search") }} {{ trans("em.any") }}</label
            >
            <input
              class="form-control"
              type="text"
              v-model="search"
              :placeholder="trans('em.search')"
              @keyup="searchTags()"
            />
            <span
              v-if="isLoading"
              class="position-absolute end-0 top-50 translate-middle-y me-3"
            >
              <i class="fas fa-spinner fa-spin"></i>
            </span>
          </div>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table text-wrap">
          <thead class="table-light text-nowrap">
            <tr>
              <th class="border-top-0 border-bottom-0">
                {{ trans("em.name") }}
              </th>
              <th class="border-top-0 border-bottom-0">
                {{ trans("em.type") }}
              </th>
              <th class="border-top-0 border-bottom-0">
                {{ trans("em.actions") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in tags"
              :item="item"
              :index="index"
              :key="item.id"
            >
              <td :data-title="trans('em.name')">
                <div class="d-flex align-items-center">
                  <img 
                    :src="getImageUrl(item.image)"
                    :alt="item.title"
                    class="rounded img-4by3-md"
                  />

                  <div class="ms-3 lh-1">
                    <h5 class="mb-1">{{ item.title }}</h5>
                    <small class="text-muted strong">{{ item.sub_title }}</small>
                  </div>
                </div>
              </td>
              <td class="align-middle" :data-title="trans('em.type')">
                {{ item.type }}
              </td>
              <td
                class="align-middle text-nowrap"
                :data-title="trans('em.actions')"
              >
                <div class="btn-group">
                  <button
                    type="button"
                    class="btn btn-sm btn-primary"
                    @click="edit_index = index"
                  >
                    <i class="fas fa-edit"></i> {{ trans("em.edit") }}
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-danger"
                    @click="deleteTag(item.id)"
                  >
                    <i class="fas fa-trash"></i> {{ trans("em.delete") }}
                  </button>
                </div>
                <Tag-component
                  v-if="edit_index == index"
                  :edit_tag="item"
                ></Tag-component>
              </td>
            </tr>
            <tr v-if="tags.length <= 0">
              <td class="text-center align-middle">{{ trans("em.no_tags") }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="px-4 pb-4" v-if="tags.length > 0">
        <pagination-component
          v-if="pagination.last_page > 1"
          :pagination="pagination"
          :offset="pagination.total"
          :path="'/dashboard/mytags'"
          @paginate="getTags"
        >
        </pagination-component>
      </div>
    </div>
  </div>
</template>

<script>
import TagComponent from "./Tag.vue";
import PaginationComponent from "../../../../../../eventmie-pro/resources/js/common_components/Pagination.vue";
import mixinsFilters from "../../../../mixins.js";
import _ from "lodash";

export default {
  props: ["organiser_id", "page"],

  components: {
    TagComponent,
    PaginationComponent,
  },

  mixins: [mixinsFilters],

  data() {
    return {
      tags: [],
      edit_index: null,
      pagination: {
        current_page: 1,
      },
      search: "",
      isLoading: false,
    };
  },
  computed: {
    current_page() {
      if (typeof this.page === "undefined") return 1;
      return this.page;
    },
  },
  methods: {
    searchTags: _.debounce(function () {
      this.pagination.current_page = 1;
      this.$router
        .push({
          query: Object.assign({}, this.$route.query, { page: 1 }),
        })
        .catch(() => {});
      this.getTags();
    }, 500),

    getTags(newPage) {
      this.pagination.current_page =
        newPage ||
        parseInt(this.$route.query.page) ||
        this.pagination.current_page;
      this.isLoading = true;
      axios
        .post(
          `${route("eventmie.tags")}?page=${
            this.pagination.current_page
          }&search=${encodeURIComponent(this.search)}&organiser_id=${
            this.organiser_id
          }`
        )
        .then((res) => {
          console.log("Tags Data:", res.data.tags); // Debug
          this.$set(this, "tags", res.data.tags.data);
          this.pagination = {
            total: res.data.tags.total,
            per_page: res.data.tags.per_page,
            current_page: res.data.tags.current_page,
            last_page: res.data.tags.last_page,
            from: res.data.tags.from,
            to: res.data.tags.to,
          };
          this.$router
            .push({
              query: Object.assign({}, this.$route.query, {
                page: this.pagination.current_page,
              }),
            })
            .catch(() => {});
        })
        .catch((error) => {
          Vue.helpers.axiosErrors(error);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    deleteTag(tag_id) {
      this.showConfirm(trans("em.delete_tag_ask")).then((res) => {
        if (res) {
          axios
            .post(route("eventmie.tags_delete"), {
              tag_id: tag_id,
            })
            .then((res) => {
              if (res.data.status) {
                this.getTags();
                this.showNotification(
                  "success",
                  trans("em.delete_tag_succcess")
                );
              }
            })
            .catch((error) => {
              Vue.helpers.axiosErrors(error);
            });
        }
      });
    },
  },

  mounted() {
    this.pagination.current_page = parseInt(this.current_page) || 1;
    this.getTags();
  },
};
</script>