<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import InvoiceOrdersPagination
  from "@/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue";
import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
import CollectedOrderInvoicesOverview
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoices/CollectedOrderInvoicesOverview.vue";
import { customer_id, searchAndSelectCustomer, isCustomerSelected } from "@/components/shop/POSDepartmentProcess.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import CollectedOrderInvoices from "@/views/dashboards/superUserDashboard/CollectedOrderInvoices.vue";
import VehiclesPagination from "@/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue";
import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
const props = defineProps({
  queued: {
    type: Object,
    required: true,
  },
  succeeded: {
    type: Object,
    required: true,
  },
  failed: {
    type: Object,
    required: true,
  },
  inProgress: {
    type: Object,
    required: true,
  },
  log: {
    type: Object,
    required: false,
  },
});


const emit = defineEmits(["closeModal", "saveChanges"]);

const closeModal = () => {
  emit("closeModal");
}

// Listen for esc key to close the modal
const handleKeydown = (event) => {
  if (event.key === "Escape") {
    closeModal();
  }
};
window.addEventListener("keydown", handleKeydown);

const ucFirst = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

</script>

<template>
  <div class="modal is-active" ref="modal">
    <div class="modal-background" @click="closeModal"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">{{SessionUser.objects.global.language.invoice}}</p>
        <button class="delete" aria-label="close" @click="closeModal"></button>
      </header>
      <section class="modal-card-body">
        <!-- Level -->
        <nav class="level">
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">{{SessionUser.objects.global.language.waiting}}</p>
              <p class="title">{{queued.length}}</p>
            </div>
          </div>
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">{{SessionUser.objects.global.language.in_progress}}</p>
              <p class="title">{{inProgress.length}}</p>
            </div>
          </div>
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">{{SessionUser.objects.global.language.succeeded}}</p>
              <p class="title">{{succeeded.length}}</p>
            </div>
          </div>
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">{{SessionUser.objects.global.language.failed}}</p>
              <p class="title">{{failed.length}}</p>
            </div>
          </div>
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">{{SessionUser.objects.global.language.total}}</p>
              <p class="title">{{queued.length + succeeded.length + failed.length + inProgress.length}}</p>
            </div>
          </div>
        </nav>
        <!-- Table logs -->
        <div class="table-container">
          <table class="table is-striped is-hoverable is-fullwidth">
            <thead>
              <tr>
                <th>{{SessionUser.objects.global.language.status}}</th>
                <th>{{ucFirst(SessionUser.objects.collectedOrderInvoices.meta.labels.single)}}</th>
                <th>{{SessionUser.objects.global.language.customer}}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in log" :key="index">
                <td>{{item.success ? SessionUser.objects.global.language.succeeded : SessionUser.objects.global.language.failed}}</td>
                <td class="is-clickable" @click="SessionUser.functions.redirectTo.superUser('/invoices/' + item.invoiceCollectionId, true)">{{item.invoiceCollectionId}}</td>
                <td>{{item.errorMessage}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <footer class="modal-card-foot">
      </footer>
    </div>
  </div>
</template>

<style scoped>

</style>