<template>
    <mainLayout>
      <div class="p-6 grid grid-cols-3 gap-6">
        <!-- Left Section -->
        <div class="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200 flex flex-col">
          <KasirForm />
        </div>

        <!-- Right Section -->
        <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
          <KasirTransaksiList :transaksi="transaksi" @detail="lihatDetail" />
        </div>
      </div>
    </mainLayout>
  </template>

  <script setup>
  import { ref, onMounted } from "vue"
    import axios from "axios"

  import mainLayout from '../layouts/mainLayout.vue'
  import KasirForm from '../components/KasirForm.vue'
  import KasirTransaksiList from '../components/KasirTransaksiList.vue'

  const transaksi = ref([])

  onMounted(async () => {
  try {
    const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
    
    transaksi.value = res.data
  } catch (err) {
    console.error("Gagal fetch transaksi:", err)
  }
})

const lihatDetail = (trx) => {
  alert(`Detail transaksi: ${trx.kode}`)
}
</script>
