<template>
  <div v-if="loading" class="text-center py-5">
    <CSpinner color="primary" class="mb-3" />
    <p class="text-body-secondary">Memuat data material...</p>
  </div>

  <div v-else-if="data.length === 0" class="text-center py-5">
    <h6 class="text-body-secondary">Tidak ada data material</h6>
    <p class="text-body-secondary small">Belum ada material yang terdaftar.</p>
  </div>

  <template v-else>
    <CTable>
      <CTableHead>
        <CTableRow>
          <CTableHeaderCell scope="col" style="width: 50px">No</CTableHeaderCell>
          <CTableHeaderCell>Barcode</CTableHeaderCell>
          <CTableHeaderCell>Material</CTableHeaderCell>
          <CTableHeaderCell>Type</CTableHeaderCell>
          <CTableHeaderCell class="text-center">Aksi</CTableHeaderCell>
        </CTableRow>
      </CTableHead>

      <CTableBody>
        <CTableRow v-for="(item, index) in data" :key="item.barcode_id">
          <CTableHeaderCell scope="row">{{
            (currentPage - 1) * perPage + index + 1
          }}</CTableHeaderCell>
          <CTableDataCell>{{ item.barcode_id }}</CTableDataCell>
          <CTableDataCell>{{ item.material_name }}</CTableDataCell>
          <CTableDataCell>
            <CBadge :color="item.type === 'serialized' ? 'success' : 'primary'">
              {{ item.type }}
            </CBadge>
          </CTableDataCell>
          <CTableDataCell class="text-center">
            <CButton size="sm" color="info" class="me-1" @click="$emit('detail', item)"
              >Detail</CButton
            >
            <CButton size="sm" color="warning" class="me-1" @click="$emit('transfer', item)"
              >Transfer</CButton
            >
            <CButton size="sm" color="danger" @click="$emit('return', item)">Return</CButton>
          </CTableDataCell>
        </CTableRow>
      </CTableBody>
    </CTable>

    <div class="d-flex justify-content-between align-items-center mt-3">
      <div class="d-flex align-items-center gap-2">
        <span>Tampil</span>
        <CFormSelect
          style="width: auto"
          :value="perPage"
          @change="$emit('update:perPage', Number($event.target.value))"
        >
          <option :value="15">15</option>
          <option :value="25">25</option>
          <option :value="50">50</option>
          <option :value="100">100</option>
        </CFormSelect>
        <span> dari {{ totalItems }} data </span>
      </div>
      <CPagination class="mb-0" v-if="totalPages > 1">
        <CPaginationItem :disabled="currentPage == 1" @click="$emit('page', currentPage - 1)">
          Previous
        </CPaginationItem>

        <CPaginationItem
          v-for="page in totalPages"
          :key="page"
          :active="page == currentPage"
          @click="$emit('page', page)"
        >
          {{ page }}
        </CPaginationItem>

        <CPaginationItem
          :disabled="currentPage == totalPages"
          @click="$emit('page', currentPage + 1)"
        >
          Next
        </CPaginationItem>
      </CPagination>
    </div>
  </template>
</template>

<script setup>
const props = defineProps({
  data: Array,
  totalPages: Number,
  currentPage: Number,
  perPage: Number,
  totalItems: Number,
  loading: Boolean,
})
defineEmits(['detail', 'transfer', 'return', 'page', 'update:perPage'])
</script>
