<template>
  <div
    v-if="isOpen"
    class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]"
  >
    <div
      class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden"
    >
      <div class="bg-D h-8 w-full"></div>

      <div class="p-6 text-sm flex flex-col h-full relative">
        <!-- Header -->
        <div class="relative flex items-center justify-between pb-2 mb-2">
          <!-- Sosmed -->
          <div class="flex flex-col gap-4">
            <p class="flex items-center gap-2">
              <i class="fab fa-instagram text-red-500 text-xl"></i> tokomas_Jakartacitayam
            </p>
            <p class="flex items-center gap-2">
              <i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
            </p>
            <p class="flex items-center gap-2">
              <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
            </p>
          </div>

          <!-- Logo & tanggal (absolute di tengah) -->
          <div class="absolute inset-x-0 top-0 flex flex-col items-center">
            <img :src="logo" alt="Logo" class="h-15" />
            <!-- ==== MODIFIKASI: Tanggal sekarang dinamis ==== -->
            <p class="mt-1 text-center">{{ getCurrentDate() }}</p>
            <!-- ==== END MODIFIKASI ==== -->
          </div>

          <!-- Data Pembeli -->
          <div
            class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10"
          >
            <div class="text-right font-semibold pr-3">Nama Pembeli</div>
            <!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
            <inputField
              v-model="namaPembeli"
              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
            />
            <!-- ==== END MODIFIKASI ==== -->
            <div class="text-right font-semibold pr-3">Nomor Telepon</div>
            <!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
            <inputField
              v-model="nomorTelepon"
              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
            />
            <!-- ==== END MODIFIKASI ==== -->
            <div class="text-right font-semibold pr-3">Alamat</div>
            <!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
            <inputField
              v-model="alamat"
              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
            />
            <!-- ==== END MODIFIKASI ==== -->
          </div>
        </div>

        <!-- Nomor Transaksi -->
        <!-- ==== MODIFIKASI: Kode transaksi dinamis ==== -->
        <p class="mt-1 text-sm">{{ generateTransactionCode() }}</p>
        <!-- ==== END MODIFIKASI ==== -->

       <table class="w-full border-D mt-0 text-sm table-fixed">
  <thead>
    <tr class="border-b border-D">
      <th class="w-[260px] py-2 border-r border-D">Item</th>
      <th class="w-[70px] border-r border-D">Posisi</th>
      <th class="w-[60px] border-r border-D">Berat</th>
      <th class="w-[60px] border-r border-D">Kadar</th>
      <th class="w-[140px] border-r border-D">Harga Satuan</th>
      <th class="w-[60px] border-r border-D">Jumlah</th>
      <th class="w-[140px]">Total Harga</th>
    </tr>
  </thead>
  <tbody>
    <!-- ==== MODIFIKASI: Loop pesanan dari props ==== -->
    <tr v-for="(item, index) in pesanan" :key="index" class="text-center">
      <td class="flex items-center gap-2 p-2 border-r border-D">
        <img :src="item.produk.foto?.[0]?.url || ''" class="w-12 h-12 object-cover" />
        {{ item.produk.nama }}
      </td>
      <td class="border-r border-D">{{ item.posisi || 'Brankas' }}</td>
      <td class="border-r border-D">{{ item.produk.berat || '-' }}</td>
      <td class="border-r border-D">{{ item.produk.kadar || '-' }}</td>
      <td class="border-r border-D">Rp{{ item.harga_deal.toLocaleString() }}</td>
      <td class="border-r border-D">1</td>
      <td>Rp{{ item.harga_deal.toLocaleString() }}</td>
    </tr>
    <!-- ==== END MODIFIKASI ==== -->

    <!-- Baris Ongkos + Total -->
    <tr class="align-top">
      <td colspan="2" rowspan="2" class="p-2 text-left align-top">
        <p class="font-semibold">PERHATIAN</p>
        <ol class="list-decimal ml-4 text-xs space-y-1">
          <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
          <li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li>
          <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
          <li>Surat ini harap dibawa pada saat menjual kembali.</li>
        </ol>
      </td>

      <td colspan="2" rowspan="2" class="p-2 text-center align-top">
        <div class="flex flex-col items-center justify-center h-full">
          <p><strong>Sales</strong></p>
          <!-- ==== MODIFIKASI: Sales dropdown dinamis ==== -->
          <inputSelect
            v-model="selectedSales"
            :options="salesOptions"
            class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
          />
          <!-- ==== END MODIFIKASI ==== -->
        </div>
      </td>

      <td colspan="2"  class="p-2 text-right text-sm font-semibold align-top border-r">
        <div class="space-y-2">
          <p>Ongkos bikin</p>
          <p class="text-red-500 text-xs">diluar harga jual</p>
          <p>Total</p>
        </div>
      </td>

      <td class="p-2 text-sm align-top">
        <div class="space-y-2">
          <div class="flex items-center">
            <p>Rp</p>
            <!-- ==== MODIFIKASI: Ongkos bikin input ==== -->
            <inputField
              v-model.number="ongkosBikin"
              type="number"
              class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
            />
            <!-- ==== END MODIFIKASI ==== -->
          </div>
          <div class="flex items-center">
            <p>Rp</p>
            <!-- ==== MODIFIKASI: Total dinamis ==== -->
            <p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}</p>
            <!-- ==== END MODIFIKASI ==== -->
          </div>
        </div>
      </td>
    </tr>

    <!-- Baris Tombol -->
    <tr>
      <td></td>
      <td></td>
      <td class="p-2 text-center">
        <div class="flex gap-2">
          <!-- ==== MODIFIKASI: Tombol Batal dengan emit close ==== -->
          <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">
            Batal
          </button>
          <!-- ==== END MODIFIKASI ==== -->
          <!-- ==== MODIFIKASI: Tombol Simpan dengan validasi ==== -->
          <button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">
            Simpan
          </button>
          <!-- ==== END MODIFIKASI ==== -->
        </div>
      </td>
    </tr>
  </tbody>
</table>

      </div>

      <!-- Pesan bawah -->
      <p
        class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md"
      >
        Terima kasih sudah berbelanja dengan kami
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import logo from '@/../images/logo.png'
import inputField from '@/components/inputField.vue'
import inputSelect from '@/components/inputSelect.vue'
// ==== TAMBAHAN: Import axios ====
import axios from 'axios'
// ==== END TAMBAHAN ====

// ==== MODIFIKASI: Props sekarang menerima pesanan dan total ====
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false,
  },
  pesanan: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  }
})
// ==== END MODIFIKASI ====

// ==== TAMBAHAN: Define emits ====
const emit = defineEmits(['close', 'confirm'])
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Reactive variables untuk form ====
const namaPembeli = ref('')
const nomorTelepon = ref('')
const alamat = ref('')
const ongkosBikin = ref(0)
const selectedSales = ref(null)
const salesOptions = ref([])
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Computed untuk grand total ====
const grandTotal = computed(() => {
  return props.total + (ongkosBikin.value || 0)
})
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Fungsi untuk generate tanggal ====
const getCurrentDate = () => {
  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']

  const now = new Date()
  const dayName = days[now.getDay()]
  const day = String(now.getDate()).padStart(2, '0')
  const month = months[now.getMonth()]
  const year = now.getFullYear()

  return `${dayName}/${day}-${month}-${year}`
}
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Fungsi untuk generate kode transaksi ====
const generateTransactionCode = () => {
  const now = new Date()
  const timestamp = now.getTime().toString().slice(-6)
  return `TRS-${timestamp}`
}
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Fetch sales data ====
const fetchSales = async () => {
  try {
    const response = await axios.get('/api/sales', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    })

    salesOptions.value = response.data.map(sales => ({
      value: sales,
      label: sales.nama
    }))

    // Set default sales jika ada
    if (salesOptions.value.length > 0) {
      selectedSales.value = salesOptions.value[0].value
    }
  } catch (error) {
    console.error('Error fetching sales:', error)
  }
}
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Handle simpan dengan validasi ====
const handleSimpan = () => {
  // Validasi input wajib
  if (!namaPembeli.value.trim()) {
    alert('Nama pembeli harus diisi!')
    return
  }

  if (!nomorTelepon.value.trim()) {
    alert('Nomor telepon harus diisi!')
    return
  }

  if (!alamat.value.trim()) {
    alert('Alamat harus diisi!')
    return
  }

  if (!selectedSales.value) {
    alert('Sales harus dipilih!')
    return
  }

  // Emit data ke parent
  emit('confirm', {
    namaPembeli: namaPembeli.value,
    nomorTelepon: nomorTelepon.value,
    alamat: alamat.value,
    ongkosBikin: ongkosBikin.value || 0,
    selectedSales: selectedSales.value
  })
}
// ==== END TAMBAHAN ====

// ==== TAMBAHAN: Fetch sales saat component mounted ====
onMounted(() => {
  if (props.isOpen) {
    fetchSales()
  }
})
// ==== END TAMBAHAN ====
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
.pt-serif-regular-italic {
  font-family: "PT Serif", serif;
  font-weight: 400;
}

</style>
