<script setup lang="ts">
import { ref } from 'vue'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from '~/components/pub/ui/dialog'
import { Input } from '~/components/pub/ui/input'

const props = defineProps<{
  open: boolean
  histories: Array<{
    no_sep: string
    tgl_sep: string
    no_rujukan: string
    diagnosis: string
    pelayanan: string
    kelas: string
  }>
}>()

const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
}>()

const search = ref('')

const filteredHistories = computed(() => {
  const histories = props.histories || []
  return histories.filter((p) => p.no_sep.includes(search.value))
})
</script>

<template>
  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
    <DialogTrigger as-child></DialogTrigger>
    <DialogContent class="max-w-[50%]">
      <DialogHeader>
        <DialogTitle>History SEP</DialogTitle>
      </DialogHeader>

      <!-- Input Search -->
      <div class="mb-2 max-w-[50%]">
        <Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
      </div>

      <!-- Table -->
      <div class="overflow-x-auto rounded-lg border">
        <table class="w-full text-sm">
          <thead class="bg-gray-100">
            <tr class="text-left">
              <th class="p-2">NO. SEP</th>
              <th class="p-2">TGL. SEP</th>
              <th class="p-2">NO. RUJUKAN</th>
              <th class="p-2">DIAGNOSIS AWAL</th>
              <th class="p-2">JENIS PELAYANAN</th>
              <th class="p-2">KELAS RAWAT</th>
            </tr>
          </thead>
          <tbody class="font-normal">
            <tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
              <td class="p-2">{{ p.no_sep }}</td>
              <td class="p-2">{{ p.tgl_sep }}</td>
              <td class="p-2">{{ p.no_rujukan }}</td>
              <td class="p-2">{{ p.diagnosis }}</td>
              <td class="p-2">{{ p.pelayanan }}</td>
              <td class="p-2">{{ p.kelas }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Footer -->
      <DialogFooter>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
