<script setup lang="ts">
import { ref, computed } from 'vue';
import { Head, useForm, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { 
    FileText, Search, Plus, Trash2, Edit2, CheckCircle, Send, 
    X, AlertTriangle, Eye, ArrowLeftRight, Store, User, Calendar
} from 'lucide-vue-next';

interface Ingredient {
    id: number;
    name: string;
    purchase_price: number | string;
    unit: string;
}

interface Outlet {
    id: number;
    name: string;
}

interface Supplier {
    id: number;
    name: string;
}

interface PurchaseOrderItem {
    id: number;
    purchase_order_id: number;
    ingredient_id: number;
    qty: number | string;
    price: number | string;
    subtotal: number | string;
    ingredient?: Ingredient;
}

interface PurchaseOrder {
    id: number;
    po_number: string;
    outlet_id: number;
    supplier_id: number;
    status: 'draft' | 'sent' | 'received' | 'cancelled';
    total_amount: number | string;
    notes: string | null;
    created_at: string;
    outlet?: Outlet;
    supplier?: Supplier;
    items?: PurchaseOrderItem[];
}

const props = defineProps<{
    purchaseOrders: PurchaseOrder[];
    outlets: Outlet[];
    suppliers: Supplier[];
    ingredients: Ingredient[];
    isCashier: boolean;
    filters: {
        outlet_id?: string;
        status?: string;
    };
}>();

// Filter states
const outletFilter = ref(props.filters.outlet_id || '');
const statusFilter = ref(props.filters.status || '');

const applyFilters = () => {
    router.get(
        route('purchase-orders.index'),
        { 
            outlet_id: outletFilter.value,
            status: statusFilter.value 
        },
        { preserveState: true, replace: true }
    );
};

// Modal states
const isFormModalOpen = ref(false);
const isDetailModalOpen = ref(false);
const editingPO = ref<PurchaseOrder | null>(null);
const selectedPO = ref<PurchaseOrder | null>(null);

// Forms
interface FormItemInput {
    ingredient_id: string | number;
    qty: number;
    price: number;
}

const form = useForm<{
    outlet_id: string | number;
    supplier_id: string | number;
    notes: string;
    items: FormItemInput[];
}>({
    outlet_id: props.outlets[0] ? props.outlets[0].id : '',
    supplier_id: props.suppliers[0] ? props.suppliers[0].id : '',
    notes: '',
    items: [
        { ingredient_id: '', qty: 1, price: 0 }
    ]
});

const openCreateModal = () => {
    editingPO.value = null;
    form.reset();
    form.clearErrors();
    form.outlet_id = props.outlets[0] ? props.outlets[0].id : '';
    form.supplier_id = props.suppliers[0] ? props.suppliers[0].id : '';
    form.notes = '';
    form.items = [{ ingredient_id: '', qty: 1, price: 0 }];
    isFormModalOpen.value = true;
};

const openEditModal = (po: PurchaseOrder) => {
    editingPO.value = po;
    form.clearErrors();
    form.outlet_id = po.outlet_id;
    form.supplier_id = po.supplier_id;
    form.notes = po.notes || '';
    
    // Map items
    form.items = po.items ? po.items.map(item => ({
        ingredient_id: item.ingredient_id,
        qty: Number(item.qty),
        price: Number(item.price)
    })) : [{ ingredient_id: '', qty: 1, price: 0 }];

    isFormModalOpen.value = true;
};

const openDetailModal = (po: PurchaseOrder) => {
    selectedPO.value = po;
    isDetailModalOpen.value = true;
};

const addFormItem = () => {
    form.items.push({ ingredient_id: '', qty: 1, price: 0 });
};

const removeFormItem = (idx: number) => {
    if (form.items.length > 1) {
        form.items.splice(idx, 1);
    }
};

const handleIngredientChange = (idx: number) => {
    const selectedId = Number(form.items[idx].ingredient_id);
    const ing = props.ingredients.find(i => i.id === selectedId);
    if (ing) {
        form.items[idx].price = Number(ing.purchase_price);
    }
};

const formSubtotal = computed(() => {
    return form.items.reduce((sum, item) => sum + (item.qty * item.price), 0);
});

const submitForm = () => {
    if (editingPO.value) {
        form.put(route('purchase-orders.update', editingPO.value.id), {
            onSuccess: () => {
                isFormModalOpen.value = false;
                form.reset();
            }
        });
    } else {
        form.post(route('purchase-orders.store'), {
            onSuccess: () => {
                isFormModalOpen.value = false;
                form.reset();
            }
        });
    }
};

// Status Action Triggers
const sendPO = (po: PurchaseOrder) => {
    if (confirm(`Apakah Anda yakin ingin mengirim PO "${po.po_number}" ke Pemasok?`)) {
        router.post(route('purchase-orders.send', po.id));
    }
};

const receivePO = (po: PurchaseOrder) => {
    if (confirm(`Apakah Anda yakin telah menerima kiriman barang dari PO "${po.po_number}"? Ini akan secara otomatis menambah stok bahan baku di outlet.`)) {
        router.post(route('purchase-orders.receive', po.id));
    }
};

const deletePO = (po: PurchaseOrder) => {
    if (confirm(`Hapus Purchase Order "${po.po_number}" secara permanen?`)) {
        router.delete(route('purchase-orders.destroy', po.id));
    }
};

const getStatusClass = (status: string) => {
    switch (status) {
        case 'draft': return 'bg-slate-500/10 text-slate-600 dark:text-slate-400 border-slate-500/20';
        case 'sent': return 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20';
        case 'received': return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20';
        case 'cancelled': return 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20';
        default: return 'bg-slate-500/10 text-slate-600 border-slate-500/20';
    }
};

const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('id-ID', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
};
</script>

<template>
    <Head title="Purchase Orders & GRN" />

    <AdminLayout>
        <div class="space-y-6">
            <!-- Header Section -->
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-50">Purchase Orders (PO) & Penerimaan Barang</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                        Pesan bahan baku ke Pemasok, kelola draf pembelian, dan lakukan konfirmasi penerimaan barang (GRN) untuk update stok otomatis.
                    </p>
                </div>
                <button
                    @click="openCreateModal"
                    class="px-4 py-2.5 bg-[#8c5a3c] hover:bg-[#734a31] text-white rounded-xl text-xs font-bold transition-all shadow-md flex items-center gap-2 cursor-pointer self-start"
                >
                    <Plus class="h-4.5 w-4.5" />
                    <span>Buat PO Baru</span>
                </button>
            </div>

            <!-- Filters Section -->
            <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm flex flex-col md:flex-row gap-4 items-end">
                <div class="w-full md:w-64" v-if="!isCashier">
                    <label class="block text-[10px] font-bold text-slate-450 dark:text-slate-500 uppercase mb-1.5">Filter Outlet</label>
                    <select
                        v-model="outletFilter"
                        @change="applyFilters"
                        class="w-full h-10 px-3 border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] text-slate-900 dark:text-slate-100"
                    >
                        <option value="">Semua Outlet</option>
                        <option v-for="ot in outlets" :key="ot.id" :value="String(ot.id)">{{ ot.name }}</option>
                    </select>
                </div>

                <div class="w-full md:w-48">
                    <label class="block text-[10px] font-bold text-slate-450 dark:text-slate-500 uppercase mb-1.5">Filter Status</label>
                    <select
                        v-model="statusFilter"
                        @change="applyFilters"
                        class="w-full h-10 px-3 border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] text-slate-900 dark:text-slate-100"
                    >
                        <option value="">Semua Status</option>
                        <option value="draft">Draft</option>
                        <option value="sent">Sent (Dikirim)</option>
                        <option value="received">Received (Diterima / GRN)</option>
                        <option value="cancelled">Cancelled (Batal)</option>
                    </select>
                </div>
            </div>

            <!-- Table Card -->
            <div class="bg-white dark:bg-slate-955 border border-slate-200 dark:border-slate-805 rounded-xl shadow-sm overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs border-collapse">
                        <thead>
                            <tr class="border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30 text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wider">
                                <th class="p-4">No. PO</th>
                                <th class="p-4">Outlet</th>
                                <th class="p-4">Pemasok</th>
                                <th class="p-4">Tanggal Buat</th>
                                <th class="p-4 text-right">Total Biaya</th>
                                <th class="p-4 text-center">Status</th>
                                <th class="p-4 text-right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 dark:divide-slate-800 text-slate-700 dark:text-slate-300">
                            <tr v-if="purchaseOrders.length === 0">
                                <td colspan="7" class="p-8 text-center text-slate-400 italic">
                                    Tidak ada data Purchase Order.
                                </td>
                            </tr>
                            <tr v-for="po in purchaseOrders" :key="po.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-900/10 transition-colors">
                                <td class="p-4 font-mono font-bold text-[#8c5a3c]">{{ po.po_number }}</td>
                                <td class="p-4 font-semibold">{{ po.outlet?.name }}</td>
                                <td class="p-4 font-semibold">{{ po.supplier?.name }}</td>
                                <td class="p-4 text-slate-500">{{ formatDate(po.created_at) }}</td>
                                <td class="p-4 text-right font-bold text-slate-900 dark:text-slate-100">Rp {{ Number(po.total_amount).toLocaleString('id-ID') }}</td>
                                <td class="p-4 text-center">
                                    <span :class="['px-2 py-0.5 border rounded-full text-[10px] font-bold uppercase tracking-wider', getStatusClass(po.status)]">
                                        {{ po.status }}
                                    </span>
                                </td>
                                <td class="p-4 text-right">
                                    <div class="flex items-center justify-end gap-1.5">
                                        <button
                                            @click="openDetailModal(po)"
                                            title="Detail Item"
                                            class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 rounded-lg cursor-pointer"
                                        >
                                            <Eye class="h-4 w-4" />
                                        </button>
                                        
                                        <!-- Actions depending on status -->
                                        <template v-if="po.status === 'draft'">
                                            <button
                                                @click="sendPO(po)"
                                                title="Kirim ke Supplier"
                                                class="p-1.5 hover:bg-indigo-50 dark:hover:bg-indigo-950/20 text-indigo-650 hover:text-indigo-700 rounded-lg cursor-pointer"
                                            >
                                                <Send class="h-4 w-4" />
                                            </button>
                                            <button
                                                @click="openEditModal(po)"
                                                title="Ubah PO"
                                                class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 hover:text-slate-850 dark:hover:text-slate-200 rounded-lg cursor-pointer"
                                            >
                                                <Edit2 class="h-4 w-4" />
                                            </button>
                                        </template>

                                        <template v-if="po.status === 'sent'">
                                            <button
                                                @click="receivePO(po)"
                                                title="Konfirmasi Barang Diterima (GRN)"
                                                class="p-1.5 hover:bg-emerald-50 dark:hover:bg-emerald-955/20 text-emerald-600 hover:text-emerald-700 rounded-lg cursor-pointer"
                                            >
                                                <CheckCircle class="h-4 w-4" />
                                            </button>
                                        </template>

                                        <button
                                            v-if="po.status === 'draft' || po.status === 'cancelled'"
                                            @click="deletePO(po)"
                                            title="Hapus"
                                            class="p-1.5 hover:bg-rose-50 dark:hover:bg-rose-955/20 text-rose-600 hover:text-rose-700 rounded-lg cursor-pointer"
                                        >
                                            <Trash2 class="h-4 w-4" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Create / Edit Form Modal -->
            <div v-if="isFormModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-sm">
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden transform transition-all">
                    <!-- Modal Header -->
                    <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
                        <h3 class="text-sm font-extrabold text-slate-900 dark:text-slate-100">
                            {{ editingPO ? 'Edit Purchase Order' : 'Buat Purchase Order Baru' }}
                        </h3>
                        <button @click="isFormModalOpen = false" class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg text-slate-400 cursor-pointer">
                            <X class="h-4 w-4" />
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <form @submit.prevent="submitForm" class="p-6 space-y-6">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-450 dark:text-slate-500 uppercase tracking-wider mb-1.5">Outlet Tujuan</label>
                                <select
                                    v-model="form.outlet_id"
                                    required
                                    :disabled="isCashier || !!editingPO"
                                    class="w-full h-10 px-3 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] text-slate-900 dark:text-slate-100 cursor-pointer"
                                >
                                    <option v-for="ot in outlets" :key="ot.id" :value="ot.id">{{ ot.name }}</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-[10px] font-bold text-slate-450 dark:text-slate-500 uppercase tracking-wider mb-1.5">Pilih Pemasok (Supplier)</label>
                                <select
                                    v-model="form.supplier_id"
                                    required
                                    :disabled="!!editingPO"
                                    class="w-full h-10 px-3 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] text-slate-900 dark:text-slate-100 cursor-pointer"
                                >
                                    <option v-for="s in suppliers" :key="s.id" :value="s.id">{{ s.name }}</option>
                                </select>
                            </div>
                        </div>

                        <!-- Item List Grid -->
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <label class="block text-[10px] font-bold text-slate-450 dark:text-slate-500 uppercase tracking-wider">Item Bahan Baku</label>
                                <button
                                    type="button"
                                    @click="addFormItem"
                                    class="px-2.5 py-1.5 bg-[#8c5a3c]/10 text-[#8c5a3c] hover:bg-[#8c5a3c]/20 text-[10px] font-bold rounded-lg transition-colors cursor-pointer flex items-center gap-1"
                                >
                                    <Plus class="h-3 w-3" />
                                    <span>Tambah Item</span>
                                </button>
                            </div>

                            <div class="space-y-3 max-h-56 overflow-y-auto pr-1">
                                <div v-for="(item, idx) in form.items" :key="idx" class="flex gap-3 items-end">
                                    <!-- Ingredient select -->
                                    <div class="flex-1">
                                        <select
                                            v-model="item.ingredient_id"
                                            required
                                            @change="handleIngredientChange(idx)"
                                            class="w-full h-10 px-2.5 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"
                                        >
                                            <option value="">Pilih bahan baku...</option>
                                            <option v-for="ing in ingredients" :key="ing.id" :value="ing.id">{{ ing.name }} ({{ ing.unit }})</option>
                                        </select>
                                    </div>

                                    <!-- Qty input -->
                                    <div class="w-24">
                                        <input
                                            type="number"
                                            v-model="item.qty"
                                            required
                                            min="0.0001"
                                            step="any"
                                            placeholder="Qty"
                                            class="w-full h-10 px-3 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100"
                                        />
                                    </div>

                                    <!-- Price input -->
                                    <div class="w-32">
                                        <input
                                            type="number"
                                            v-model="item.price"
                                            required
                                            min="0"
                                            placeholder="Harga Satuan"
                                            class="w-full h-10 px-3 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100"
                                        />
                                    </div>

                                    <!-- Delete button -->
                                    <button
                                        type="button"
                                        @click="removeFormItem(idx)"
                                        :disabled="form.items.length <= 1"
                                        class="h-10 w-10 border border-slate-200 dark:border-slate-700 rounded-xl flex items-center justify-center text-slate-450 hover:text-rose-600 disabled:opacity-30 cursor-pointer"
                                    >
                                        <Trash2 class="h-4 w-4" />
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Notes text -->
                        <div>
                            <label class="block text-[10px] font-bold text-slate-450 dark:text-slate-500 uppercase tracking-wider mb-1.5">Catatan Tambahan / Keterangan</label>
                            <textarea
                                v-model="form.notes"
                                placeholder="Contoh: Pengiriman paling lambat hari Selasa pagi..."
                                rows="2"
                                class="w-full p-3 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100"
                            ></textarea>
                        </div>

                        <!-- Modal Actions Footer -->
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100 dark:border-slate-800">
                            <div>
                                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Total Estimasi Biaya</span>
                                <h4 class="text-base font-black text-slate-900 dark:text-slate-100 mt-0.5">Rp {{ formSubtotal.toLocaleString('id-ID') }}</h4>
                            </div>

                            <div class="flex gap-3">
                                <button
                                    type="button"
                                    @click="isFormModalOpen = false"
                                    class="px-4 py-2 border border-slate-200 dark:border-slate-800 text-slate-750 dark:text-slate-300 text-xs font-bold rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
                                >
                                    Batal
                                </button>
                                <button
                                    type="submit"
                                    :disabled="form.processing"
                                    class="px-5 py-2 bg-[#8c5a3c] hover:bg-[#734a31] text-white text-xs font-bold rounded-xl cursor-pointer"
                                >
                                    {{ form.processing ? 'Menyimpan...' : (editingPO ? 'Simpan Perubahan' : 'Buat PO (Draft)') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Detail PO Modal -->
            <div v-if="isDetailModalOpen && selectedPO" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-sm animate-fade-in">
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl w-full max-w-xl overflow-hidden p-6 space-y-6 animate-in zoom-in-95 duration-200">
                    <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3">
                        <div class="flex items-center gap-2">
                            <FileText class="h-5 w-5 text-[#8c5a3c]" />
                            <div>
                                <h3 class="text-sm font-extrabold text-slate-900 dark:text-slate-100">Rincian Purchase Order</h3>
                                <p class="text-[10px] text-slate-400 font-mono">{{ selectedPO.po_number }}</p>
                            </div>
                        </div>
                        <button @click="isDetailModalOpen = false" class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg text-slate-400 cursor-pointer">
                            <X class="h-4 w-4" />
                        </button>
                    </div>

                    <div class="grid grid-cols-2 gap-4 text-xs">
                        <div class="space-y-1">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Outlet Penerima</span>
                            <p class="font-bold text-slate-850 dark:text-slate-200">{{ selectedPO.outlet?.name }}</p>
                        </div>
                        <div class="space-y-1">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Pemasok</span>
                            <p class="font-bold text-slate-850 dark:text-slate-200">{{ selectedPO.supplier?.name }}</p>
                        </div>
                        <div class="space-y-1">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Tanggal Dibuat</span>
                            <p class="text-slate-650 dark:text-slate-350">{{ formatDate(selectedPO.created_at) }}</p>
                        </div>
                        <div class="space-y-1">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Status PO</span>
                            <div>
                                <span :class="['px-2 py-0.5 border rounded-full text-[9px] font-bold uppercase tracking-wider', getStatusClass(selectedPO.status)]">
                                    {{ selectedPO.status }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Items Detail Table -->
                    <div class="space-y-2">
                        <label class="block text-[10px] font-extrabold text-slate-450 dark:text-slate-500 uppercase tracking-wider">Daftar Bahan Baku Pesanan</label>
                        <div class="border border-slate-150 dark:border-slate-800 rounded-xl overflow-hidden max-h-48 overflow-y-auto">
                            <table class="w-full text-left text-xs border-collapse">
                                <thead>
                                    <tr class="bg-slate-50 dark:bg-slate-900 border-b border-slate-150 dark:border-slate-800 text-slate-500 font-bold">
                                        <th class="p-2.5">Nama Bahan</th>
                                        <th class="p-2.5 text-center">Jumlah</th>
                                        <th class="p-2.5 text-right">Harga Satuan</th>
                                        <th class="p-2.5 text-right pr-3">Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 dark:divide-slate-800 text-slate-700 dark:text-slate-300">
                                    <tr v-for="item in selectedPO.items" :key="item.id">
                                        <td class="p-2.5 font-bold">{{ item.ingredient?.name }}</td>
                                        <td class="p-2.5 text-center">{{ Number(item.qty).toLocaleString('id-ID') }} {{ item.ingredient?.unit }}</td>
                                        <td class="p-2.5 text-right">Rp {{ Number(item.price).toLocaleString('id-ID') }}</td>
                                        <td class="p-2.5 text-right pr-3 font-bold">Rp {{ Number(item.subtotal).toLocaleString('id-ID') }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div v-if="selectedPO.notes" class="p-3 bg-slate-50 dark:bg-slate-950 rounded-xl border border-slate-100 dark:border-slate-800 text-xs">
                        <span class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-1">Catatan Tambahan</span>
                        <p class="text-slate-650 dark:text-slate-350 italic">"{{ selectedPO.notes }}"</p>
                    </div>

                    <div class="flex items-center justify-between border-t border-slate-100 dark:border-slate-800 pt-4">
                        <div>
                            <span class="text-[9px] text-slate-400 font-bold uppercase tracking-wider">Total Pembelian</span>
                            <h4 class="text-base font-black text-slate-900 dark:text-slate-100 mt-0.5">Rp {{ Number(selectedPO.total_amount).toLocaleString('id-ID') }}</h4>
                        </div>
                        <button
                            @click="isDetailModalOpen = false"
                            class="px-5 py-2 border border-slate-200 dark:border-slate-800 text-slate-500 rounded-xl text-xs font-bold hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
                        >
                            Tutup Detail
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
