<template>
    <div>
      <!-- Input Grid -->
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="flex flex-col gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
            <InputField
              v-model="kodeItem"
              type="text"
              placeholder="Masukkan kode item"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">Harga Jual</label>
            <InputField
              v-model="hargaJual"
              type="number"
              placeholder="Masukkan Harga Jual"
            />
          </div>
        </div>
        <div class="flex items-center justify-center">
          <div class="text-center">
            <span class="block text-gray-600 font-medium">Total:</span>
            <span class="text-3xl font-bold text-[#0f1d4a]">
              Rp{{ total.toLocaleString() }},-
            </span>
          </div>
        </div>
      </div>

      <!-- Buttons -->
      <div class="flex gap-4 mb-6">
        <button @click="tambahItem"
          class="px-4 py-2 rounded-md bg-[#f1ede8] text-[#0f1d4a] font-medium hover:bg-[#e4dfd8] transition">
          Tambah Item
        </button>
        <button
          class="px-6 py-2 rounded-md bg-[#c6a77d] text-[#0f1d4a] font-semibold hover:bg-[#b09065] transition">
          Lanjut
        </button>
      </div>

      <!-- Table -->
      <table class="w-full border-collapse border border-gray-200 text-sm rounded-lg overflow-hidden">
        <thead class="bg-gray-100 text-[#0f1d4a]">
          <tr>
            <th class="border border-gray-200 p-2">No</th>
            <th class="border border-gray-200 p-2">Item</th>
            <th class="border border-gray-200 p-2">Jml</th>
            <th class="border border-gray-200 p-2">Harga</th>
            <th class="border border-gray-200 p-2">Total</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50 text-center">
            <td class="border border-gray-200 p-2">{{ index + 1 }}</td>
            <td class="border border-gray-200 p-2">{{ item.kode }}</td>
            <td class="border border-gray-200 p-2">{{ item.jumlah }}</td>
            <td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
            <td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>




  <script setup>
  import { ref, computed } from 'vue'
import InputField from './InputField.vue'

  const kodeItem = ref('')
  const hargaJual = ref(null)
  const pesanan = ref([])

  const tambahItem = () => {
    if (!kodeItem.value || !hargaJual.value) return
    pesanan.value.push({
      kode: kodeItem.value,
      jumlah: 1,
      harga: parseFloat(hargaJual.value),
    })
    kodeItem.value = ''
    hargaJual.value = 0
  }

  const total = computed(() =>
    pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
  )
  </script>

