<template>
  <div class="my-6">
    <hr class="border-B mb-5" />
    <div class="flex flex-row mb-3 overflow-x-auto">
      <input type="date" v-model="tanggalDipilih"
        class="mt-1 block rounded-md shadow-sm sm:text-sm bg-A text-D border-B focus:border-C focus:ring focus:outline-none focus:ring-D focus:ring-opacity-50 p-2" />
      <InputSelect class="ml-3" :options="opsiSales" v-model="salesDipilih" />
    </div>
    <div class="mt-5 overflow-x-auto">
      <table class="w-full border-collapse border border-C rounded-md">
        <thead>
          <tr class="bg-C text-D rounded-t-md">
            <th class="border-x border-C px-3 py-3">Nama Produk</th>
            <th class="border-x border-C px-3 py-3">Item Terjual</th>
            <th class="border-x border-C px-3 py-3">Total Berat</th>
            <th class="border-x border-C px-3 py-3">Total Pendapatan</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="loading">
            <td colspan="5" class="p-4">
              <div class="flex items-center justify-center w-full h-30">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-D"></div>
                <span class="ml-2 text-gray-600">Memuat data...</span>
              </div>
            </td>
          </tr>
          <tr v-else-if="!produk.length">
            <td colspan="5" class="p-4 text-center">Tidak ada data untuk ditampilkan.</td>
          </tr>
          <template v-else v-for="item in produk" :key="item.nama_produk">
            <tr class="hover:bg-B">
              <td class="border-x border-C px-3 py-2 text-center">{{ item.nama_produk }}</td>
              <td class="border-x border-C px-3 py-2 text-center">{{ item.jumlah_item_terjual }}</td>
              <td class="border-x border-C px-3 py-2 text-center">{{ item.berat_terjual }} gr</td>
              <td class="border-x border-C px-3 py-2 text-center">Rp {{ item.pendapatan }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import InputSelect from './InputSelect.vue';
import axios from 'axios';

const tanggalDipilih = ref('');
const data = ref(null);
const loading = ref(false);

const produk = computed(() => data.value?.produk || []);

const salesDipilih = ref(null);
const opsiSales = ref([
  { label: 'Semua Sales', value: null, selected: true },
]);

const fetchSales = async () => {
  try {
    const response = await axios.get('/api/sales');
    const salesData = response.data;
    opsiSales.value = [{ label: 'Semua Sales', value: null }, ...salesData.map(sales => ({
      label: sales.nama,
      value: sales.id,
    }))];
  } catch (error) {
    console.error('Gagal mengambil data sales:', error);
  }
};

const fetchData = async (date) => {
  if (!date) return;

  loading.value = true;

  try {
    const response = await axios.get(`/api/detail-laporan?tanggal=${date}`);
    data.value = response.data;;
  } catch (error) {
    console.error('Gagal mengambil data laporan:', error);
    data.value = null;
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  const today = new Date().toISOString().split('T')[0];
  tanggalDipilih.value = today;

  fetchSales();
});

watch(tanggalDipilih, (newDate) => {
  fetchData(newDate);
}, { immediate: true });
</script>