<script setup>
import DashboardLayout from '@/Layouts/DashboardLayout.vue';
import Card from '@/Components/Card.vue';
import Icon from '@/Components/Icon.vue';
import Builder from '@/Components/DataTable/Builder.vue';
import Th from '@/Components/DataTable/Th.vue';
import VueJsonPretty from "vue-json-pretty";
</script>

<template>
  <DashboardLayout
    title="Logging Activity"
  >
    <Card class="bg-white dark:bg-gray-700 dark:text-gray-200">
      <template #header>
        <div class="flex items-center space-x-2 bg-gray-200 dark:bg-gray-800 p-2">
          <p class="lowercase first-letter:capitalize font-semibold">
            Logging for Today
          </p>
        </div>
      </template>

      <template #body>
        <Builder
          :url="route('superuser.activity.logging')"
        >
          <template #thead="table">
            <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
              <Th
                :table="table"
                :sort="false"
                name="id"
                class="border p-2 text-center"
              >
                ID
              </Th>

              <Th
                :table="table"
                :sort="true"
                name="level_name"
                class="border px-3 py-2 text-center whitespace-nowrap"
              >
                Level Name
              </Th>

              <Th
                :table="table"
                :sort="true"
                name="message"
                class="border px-3 py-2 text-center whitespace-nowrap"
              >
                Message
              </Th>

              <Th
                :table="table"
                :sort="true"
                name="context"
                class="border px-3 py-2 text-center whitespace-nowrap"
              >
                Context
              </Th>

              <Th
                :table="table"
                :sort="true"
                name="logged_at"
                class="border px-3 py-2 text-center whitespace-nowrap"
              >
               Logged At
              </Th>
            </tr>
          </template>



          <template #tbody="{ data }">
            <TransitionGroup
              enterActiveClass="transition-all duration-100"
              leaveActiveClass="transition-all duration-50"
              enterFromClass="opacity-0 -scale-y-100"
              leaveToClass="opacity-0 -scale-y-100"
            >
              <tr
                v-for="(rec, i) in data"
                :key="i"
                class="dark:hover:bg-gray-600 dark:border-gray-800 transition-all duration-300"
              >
                <td class="px-2 py-1 border border-inherit text-center">
                  {{ rec.id }}
                </td>

                <td class="px-2 py-1 border border-inherit ">
                  {{ rec.level_name }}
                </td>

                <td class="px-2 py-1 border border-inherit ">
                  {{ rec.message }}
                </td>

                <td class="px-2 py-1 border border-inherit ">
                    <vue-json-pretty :data="JSON.parse(rec.context)" />
                </td>

                <td class="px-2 py-1 border border-inherit ">
                  {{ rec.logged_at }}
                </td>
              </tr>
            </TransitionGroup>
          </template>
        </Builder>
      </template>
    </Card>
  </DashboardLayout>
</template>

<style>
@import 'vue-json-pretty/lib/styles.css';
</style>

