<template>
  <mainLayout>
    <div class="p-6">
      <p class="font-serif italic text-[25px] text-D mb-4">Laporan</p>

      <div class="mb-4">
        <ul class="flex flex-wrap text-center" role="tablist">
          <li v-for="tab in tabs" class="mr-2" role="presentation">
            <button :class="[
              'inline-block p-2 border-b-2 rounded-t-lg',
              activeTab === tab.id
                ? 'border-D text-D'
                : 'border-transparent text-D hover:text-D/50 hover:border-D',
            ]" @click="activeTab = tab.id" type="button" role="tab" aria-controls="ringkasan-content"
              :aria-selected="activeTab === tab.id">
              {{ tab.name }}
            </button>
          </li>
        </ul>
      </div>

      <div>
        <div v-if="activeTab === 'ringkasan'" id="ringkasan-content" role="tabpanel">
          <RingkasanLaporanB />
        </div>

        <div v-if="activeTab === 'detail-nampan'" id="detail-content" role="tabpanel">
          <DetailPerNampan />
        </div>

        <div v-if="activeTab === 'detail-produk'" id="detail-content" role="tabpanel">
          <DetailPerProduk />
        </div>
      </div>
    </div>
  </mainLayout>
</template>

<script setup>
import { ref } from 'vue';
import RingkasanLaporanA from '../components/RingkasanLaporanA.vue';
import RingkasanLaporanB from '../components/RingkasanLaporanB.vue';
import mainLayout from '../layouts/mainLayout.vue';
import DetailPerNampan from '../components/DetailPerNampan.vue';
import DetailPerProduk from '../components/DetailPerProduk.vue';

const activeTab = ref('ringkasan');

const tabs = [
  { name: 'Ringkasan Laporan', id: 'ringkasan' },
  { name: 'Detail per Nampan', id: 'detail-nampan' },
  { name: 'Detail per Produk', id: 'detail-produk' },
];
</script>