{% extends "base.html" %}

{% block title %}Pembelian - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Transaksi Pembelian Stok{% endblock %}

{% block content %}
<!-- Quick Actions -->
<div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-3 mb-4">
    <div class="flex-1">
        <button onclick="openPurchaseModal()" 
                class="w-full sm:w-auto bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg font-bold transition-all shadow-lg text-sm sm:text-base">
            <i class="fas fa-dolly-flatbed mr-1 sm:mr-2"></i>Input Pembelian Baru
        </button>
    </div>
    <div class="flex-1 sm:flex-initial">
        <form method="GET" class="flex gap-2">
            <div class="relative flex-1 sm:flex-initial">
                <input type="text" name="search" value="{{ search }}" 
                       placeholder="Cari faktur..." 
                       class="w-full sm:w-48 pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
            </div>
        </form>
    </div>
</div>

<!-- Purchase History Table -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-green-50 to-green-100">
        <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">
            <i class="fas fa-history text-green-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
            Riwayat Pembelian
        </h3>
    </div>

    <!-- Desktop Table View -->
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No. Faktur</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Supplier</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Total</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for purchase in purchases.items %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ purchase.nomor_faktur }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ purchase.tanggal.strftime('%d/%m/%Y') }}</td>
                    <td class="px-4 py-3 text-sm text-gray-900">{{ purchase.supplier.nama }}</td>
                    <td class="px-4 py-3 text-sm font-semibold text-gray-900">Rp {{ "{:,.0f}".format(purchase.total) }}</td>
                    <td class="px-4 py-3">
                        {% if purchase.status == 'Lunas' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Lunas</span>
                        {% else %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Belum Lunas</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        <div class="flex justify-center gap-2">
                            <button onclick="viewDetailPurchase({{ purchase.id }})" class="text-blue-600 hover:text-blue-800" title="Detail">
                                <i class="fas fa-eye"></i>
                            </button>
                            
                            <!-- Tombol Edit -->
                            <button onclick="editPurchaseEntry({{ purchase.id }})" class="text-orange-600 hover:text-orange-800" title="Edit">
                                <i class="fas fa-edit"></i>
                            </button>
                            
                            <!-- Tombol Hapus -->
                            <a href="{{ url_for('delete_purchase', id=purchase.id) }}" 
                            onclick="return confirm('Hapus transaksi ini? Stok akan dikurangi kembali dan Arus Kas akan dihapus.')" 
                            class="text-red-600 hover:text-red-800" title="Hapus">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-500">Belum ada transaksi pembelian</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if purchases.pages > 1 %}
    <div class="p-3 sm:p-4 lg:p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-xs sm:text-sm text-gray-600 text-center sm:text-left">
                {{ purchases.per_page * (purchases.page - 1) + 1 }} - 
                {{ [purchases.per_page * purchases.page, purchases.total]|min }} dari {{ purchases.total }}
            </p>
            <div class="flex space-x-1 sm:space-x-2">
                {% if purchases.has_prev %}
                <a href="?page={{ purchases.prev_num }}{% if search %}&search={{ search }}{% endif %}" class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200"><i class="fas fa-chevron-left"></i></a>
                {% endif %}
                {% for page_num in purchases.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        <a href="?page={{ page_num }}{% if search %}&search={{ search }}{% endif %}" class="px-2 sm:px-3 py-1 text-sm border rounded {% if page_num == purchases.page %}bg-blue-600 text-white border-blue-600{% else %}border-gray-300 hover:bg-gray-100 active:bg-gray-200{% endif %}">{{ page_num }}</a>
                    {% endif %}
                {% endfor %}
                {% if purchases.has_next %}
                <a href="?page={{ purchases.next_num }}{% if search %}&search={{ search }}{% endif %}" class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200"><i class="fas fa-chevron-right"></i></a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- ================= MODAL INPUT PEMBELIAN ================= -->
<div id="purchaseModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4">
    <div class="bg-white w-full h-full lg:rounded-xl lg:shadow-2xl lg:w-full lg:max-w-6xl lg:max-h-[95vh] lg:m-4 flex flex-col overflow-hidden">
        <div class="p-3 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700 text-white flex-shrink-0 flex justify-between items-center">
            <h3 class="text-lg font-bold"><i class="fas fa-dolly-flatbed mr-2"></i>Input Pembelian</h3>
            <button type="button" onclick="closePurchaseModal()" class="text-white hover:text-gray-200">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <form method="POST" action="{{ url_for('add_purchase') }}" class="flex-grow flex flex-col overflow-hidden">
            <div class="p-4 flex-grow overflow-y-auto bg-gray-50">
                <!-- Header Inputs -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 bg-white p-4 rounded-lg shadow-sm">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">Supplier *</label>
                        <select name="supplier_id" id="supplier_select" required class="w-full border rounded p-2 text-sm">
                            {% for supplier in suppliers %}
                            <option value="{{ supplier.id }}">{{ supplier.nama }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">No. Faktur *</label>
                        <input type="text" name="nomor_faktur" required class="w-full border rounded p-2 text-sm" placeholder="Contoh: INV-001">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">Tanggal *</label>
                        <input type="date" name="tanggal" value="{{ today_date }}" required class="w-full border rounded p-2 text-sm">
                    </div>
                </div>

                <!-- Product Search -->
                <div class="mb-4 bg-white p-4 rounded-lg shadow-sm">
                    <label class="block text-xs font-bold text-gray-700 uppercase mb-2">Cari Produk</label>
                    <div class="relative">
                        <input type="text" id="product_search_input" placeholder="Ketik nama produk / kode barang..." 
                               class="w-full border border-green-300 rounded p-2.5 text-sm focus:ring-2 focus:ring-green-500" autocomplete="off">
                        <div id="product_dropdown" class="hidden absolute z-50 w-full mt-1 bg-white border rounded shadow-xl max-h-60 overflow-y-auto"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">* Klik produk untuk menambahkan ke tabel</p>
                </div>

                <!-- Items Table -->
                <div class="bg-white rounded-lg shadow-sm overflow-x-auto border">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-100 border-b">
                            <tr>
                                <th class="p-3 text-left">Produk</th>
                                <th class="p-3 w-32 text-center">Qty (Fisik)</th>
                                <th class="p-3 w-40 text-right">Harga Beli</th>
                                <th class="p-3 w-36 text-right">H. Jual Ecer <span class="text-gray-400 font-normal text-xs">(opsional)</span></th>
                                <th class="p-3 w-36 text-right">H. Jual Grosir <span class="text-gray-400 font-normal text-xs">(opsional)</span></th>
                                <th class="p-3 w-40 text-right">Subtotal</th>
                                <th class="p-3 w-16 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="purchase_items_body" class="divide-y divide-gray-100">
                            <tr id="empty_row"><td colspan="7" class="p-8 text-center text-gray-400">Belum ada produk dipilih</td></tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- Hidden Inputs Container -->
                <div id="hidden_inputs"></div>
            </div>

            <!-- Footer -->
            <div class="p-4 bg-white border-t flex flex-col gap-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">Metode Bayar</label>
                        <select name="metode_pembayaran" id="metode_pembayaran" class="w-full border rounded p-2 text-sm bg-gray-50">
                            <option value="Tunai">Tunai (Lunas)</option>
                            <option value="Tempo">Tempo (Hutang)</option>
                        </select>
                    </div>
                    <div id="dp_container" class="hidden">
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">Uang Muka (DP)</label>
                        <input type="number" name="uang_muka_dp" value="0" class="w-full border rounded p-2 text-sm font-semibold text-green-700">
                    </div>
                </div>
                
                <div class="flex justify-between items-center pt-2">
                    <div>
                        <span class="text-sm text-gray-600 block">Total Pembelian:</span>
                        <span id="total_display" class="text-2xl font-bold text-green-700">Rp 0</span>
                    </div>
                    <div class="flex gap-3">
                        <button type="button" onclick="closePurchaseModal()" class="px-5 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-100 font-semibold text-gray-600 transition-colors">Batal</button>
                        <button type="submit" class="px-6 py-2.5 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 shadow-md transition-colors">
                            <i class="fas fa-save mr-2"></i>Simpan Transaksi
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ================= MODAL DETAIL PEMBELIAN ================= -->
<div id="detailModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 hidden p-4">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl overflow-hidden flex flex-col max-h-[90vh]">
        <div class="p-4 border-b bg-blue-600 text-white flex justify-between items-center">
            <h3 class="font-bold text-lg">Detail Pembelian</h3>
            <button onclick="closeModal('detailModal')" class="text-white hover:text-gray-200"><i class="fas fa-times"></i></button>
        </div>
        
        <div class="p-6 overflow-y-auto">
            <!-- Info Header -->
            <div class="grid grid-cols-2 gap-4 mb-6 text-sm bg-gray-50 p-4 rounded-lg border">
                <div>
                    <p class="text-gray-500 text-xs uppercase font-bold">No. Faktur</p>
                    <p class="font-bold text-gray-800 text-base" id="det_faktur">-</p>
                </div>
                <div>
                    <p class="text-gray-500 text-xs uppercase font-bold">Tanggal</p>
                    <p class="font-bold text-gray-800" id="det_tanggal">-</p>
                </div>
                <div>
                    <p class="text-gray-500 text-xs uppercase font-bold">Supplier</p>
                    <p class="font-bold text-gray-800" id="det_supplier">-</p>
                    <p class="text-xs text-gray-500" id="det_kontak"></p>
                </div>
                <div>
                    <p class="text-gray-500 text-xs uppercase font-bold">Status Pembayaran</p>
                    <span id="det_status" class="px-2 py-1 rounded text-xs font-bold inline-block mt-1">-</span>
                    <p class="text-xs mt-1" id="det_metode"></p>
                </div>
            </div>

            <!-- Table Items -->
            <div class="border rounded-lg overflow-hidden mb-6">
                <table class="w-full text-sm">
                    <thead class="bg-gray-100 text-gray-600">
                        <tr>
                            <th class="p-3 text-left">Barang</th>
                            <th class="p-3 text-center">Qty</th>
                            <th class="p-3 text-right">Harga Beli</th>
                            <th class="p-3 text-right">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody id="det_items_body" class="divide-y divide-gray-100"></tbody>
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td colspan="3" class="p-3 text-right font-bold text-gray-600">TOTAL PEMBELIAN</td>
                            <td class="p-3 text-right font-bold text-gray-900 text-lg" id="det_total">Rp 0</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="p-2 text-right text-sm text-gray-500">Sudah Dibayar</td>
                            <td class="p-2 text-right text-sm text-green-600 font-semibold" id="det_bayar">Rp 0</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="p-2 text-right text-sm text-gray-500">Sisa Hutang</td>
                            <td class="p-2 text-right text-sm text-red-600 font-semibold" id="det_sisa">Rp 0</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        
        <div class="p-4 border-t bg-gray-50 text-right">
            <button onclick="closeModal('detailModal')" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 text-sm font-semibold shadow">Tutup</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Include Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
let purchaseItems = [];
let searchTimeout;

$(document).ready(function() {
    $('#supplier_select').select2({
        dropdownParent: $('#purchaseModal'),
        width: '100%'
    });
});

// === MODAL FUNCTIONS ===
function openPurchaseModal() {
    // Gunakan fungsi global dari base.html agar transisinya benar
    openModal('purchaseModal'); 
    
    // Beri sedikit delay agar input fokus setelah animasi modal selesai
    setTimeout(() => {
        const searchInput = document.getElementById('product_search_input');
        if (searchInput) searchInput.focus();
    }, 300);
    
    // Render item jika list masih kosong (inisialisasi tabel)
    if (purchaseItems.length === 0) {
        renderPurchaseItems();
    }
}

function closePurchaseModal() {
    // Gunakan fungsi global dari base.html
    closeModal('purchaseModal');
}

// === SEARCH LOGIC ===
const productSearchInput = document.getElementById('product_search_input');
if (productSearchInput) {
    productSearchInput.addEventListener('input', function(e) {
        const query = e.target.value.trim();
        clearTimeout(searchTimeout);
        if (query.length < 2) {
            document.getElementById('product_dropdown').classList.add('hidden');
            return;
        }
        searchTimeout = setTimeout(() => searchProduct(query), 300);
    });
}

function searchProduct(query) {
    fetch('/api/products/autocomplete', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ query: query, type: 'product' }) // Hanya produk fisik
    })
    .then(response => response.json())
    .then(data => {
        const dropdown = document.getElementById('product_dropdown');
        dropdown.innerHTML = '';
        
        if (data.success && data.products.length > 0) {
            data.products.forEach(product => {
                // Tampilkan info produk
                const item = document.createElement('div');
                item.className = 'p-3 hover:bg-green-50 cursor-pointer border-b text-sm transition-colors';
                item.innerHTML = `
                    <div class="font-bold text-gray-800">${product.nama}</div>
                    <div class="text-xs text-gray-500 flex justify-between mt-1">
                        <span>Kode: ${product.kode}</span>
                        <span>Satuan: ${product.satuan} | HPP: Rp ${product.harga_ecer}</span> 
                        <!-- Note: harga_ecer di sini sbg placeholder, realnya pake harga beli terakhir jika ada -->
                    </div>
                `;
                item.onclick = () => addProductToPurchase(product);
                dropdown.appendChild(item);
            });
            dropdown.classList.remove('hidden');
        } else {
            dropdown.innerHTML = '<div class="p-3 text-sm text-gray-500 text-center">Produk tidak ditemukan</div>';
            dropdown.classList.remove('hidden');
        }
    });
}

function addProductToPurchase(product) {
    document.getElementById('product_search_input').value = '';
    document.getElementById('product_dropdown').classList.add('hidden');
    
    const existing = purchaseItems.find(i => i.id === product.id);
    if(existing) {
        alert("Produk sudah ada di list.");
        return;
    }

    // Masukkan data satuan dari hasil pencarian API
    purchaseItems.push({
        id: product.id,
        nama: product.nama,
        qty: 1,
        harga_beli: 0,
        harga_jual_ecer: '',
        harga_jual_grosir: '',
        harga_ecer_current: product.harga_ecer || 0,
        harga_grosir_current: product.harga_grosir || 0,
        satuan_base: product.satuan,
        units: product.units || []
    });

    renderPurchaseItems();
}

// === RENDER TABLE ===
function renderPurchaseItems() {
    const tbody = document.getElementById('purchase_items_body');
    const hiddenContainer = document.getElementById('hidden_inputs');
    
    tbody.innerHTML = '';
    hiddenContainer.innerHTML = '';

    if (purchaseItems.length === 0) {
        tbody.innerHTML = '<tr id="empty_row"><td colspan="7" class="p-8 text-center text-gray-400">Belum ada produk dipilih</td></tr>';
        document.getElementById('total_display').textContent = 'Rp 0';
        return;
    }

    purchaseItems.forEach((item, index) => {
        // Cek apakah satuan_base ada, jika tidak gunakan 'Pcs' sebagai fallback
        const baseUnit = item.satuan_base || 'Pcs';
        
        // Buat pilihan satuan (Satuan Dasar + Satuan Konversi)
        let unitOptions = `<option value="${baseUnit}" data-konversi="1">${baseUnit}</option>`;
        
        if (item.units && item.units.length > 0) {
            item.units.forEach(u => {
                unitOptions += `<option value="${u.nama}" data-konversi="${u.qty}">${u.nama}</option>`;
            });
        }

        const subtotal = item.qty * item.harga_beli;
        const row = document.createElement('tr');
        row.className = "border-b hover:bg-gray-50";
        row.innerHTML = `
            <td class="p-3">
                <span class="font-semibold text-gray-800">${item.nama}</span>
            </td>
            <td class="p-3">
                <div class="flex gap-1">
                    <input type="number" id="qty_${index}" value="${item.qty}" min="1" 
                           class="w-16 border rounded p-1.5 text-center text-sm"
                           oninput="updateSingleItem(${index})">
                    <select id="unit_${index}" onchange="updateSingleItem(${index})" 
                            class="border rounded text-xs p-1.5 bg-gray-50 focus:ring-1 focus:ring-green-500">
                        ${unitOptions}
                    </select>
                </div>
            </td>
            <td class="p-3">
                <input type="number" id="price_${index}" value="${item.harga_beli}" min="0"
                       class="w-full border rounded p-1.5 text-right text-sm"
                       oninput="updateSingleItem(${index})">
            </td>
            <td class="p-3">
                <input type="number" id="ecer_${index}" value="${item.harga_jual_ecer}" min="0"
                       class="w-full border rounded p-1.5 text-right text-sm border-amber-200 focus:ring-amber-400"
                       placeholder="${(item.harga_ecer_current||0).toLocaleString('id-ID')}"
                       oninput="updateSingleItem(${index})">
                <p class="text-xs text-gray-400 mt-0.5 text-right">saat ini: ${(item.harga_ecer_current||0).toLocaleString('id-ID')}</p>
            </td>
            <td class="p-3">
                <input type="number" id="grosir_${index}" value="${item.harga_jual_grosir}" min="0"
                       class="w-full border rounded p-1.5 text-right text-sm border-purple-200 focus:ring-purple-400"
                       placeholder="${(item.harga_grosir_current||0).toLocaleString('id-ID')}"
                       oninput="updateSingleItem(${index})">
                <p class="text-xs text-gray-400 mt-0.5 text-right">saat ini: ${(item.harga_grosir_current||0).toLocaleString('id-ID')}</p>
            </td>
            <td class="p-3 text-right font-bold text-gray-700" id="subtotal_${index}">
                Rp ${subtotal.toLocaleString('id-ID')}
            </td>
            <td class="p-3 text-center">
                <button type="button" onclick="removePurchaseItem(${index})" class="text-red-500 p-1.5">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });

    updateHiddenInputs();
    recalculateGrandTotal();
}

function updateSingleItem(index) {
    const qtyInput = document.getElementById(`qty_${index}`);
    const priceInput = document.getElementById(`price_${index}`);
    const subtotalEl = document.getElementById(`subtotal_${index}`);

    const qty = parseFloat(qtyInput.value) || 0;
    const price = parseFloat(priceInput.value) || 0;

    // Update Data Array
    purchaseItems[index].qty = qty;
    purchaseItems[index].harga_beli = price;
    const ecerInput = document.getElementById(`ecer_${index}`);
    const grosirInput = document.getElementById(`grosir_${index}`);
    purchaseItems[index].harga_jual_ecer = ecerInput ? ecerInput.value : '';
    purchaseItems[index].harga_jual_grosir = grosirInput ? grosirInput.value : '';

    // Update UI Subtotal
    const subtotal = qty * price;
    subtotalEl.textContent = 'Rp ' + subtotal.toLocaleString('id-ID');

    // Update Grand Total
    recalculateGrandTotal();
    updateHiddenInputs();
}

function recalculateGrandTotal() {
    let total = 0;
    purchaseItems.forEach(item => {
        total += (item.qty * item.harga_beli);
    });
    document.getElementById('total_display').textContent = 'Rp ' + total.toLocaleString('id-ID');
}

function updateHiddenInputs() {
    const container = document.getElementById('hidden_inputs');
    container.innerHTML = '';
    
    purchaseItems.forEach((item, index) => {
        const unitSelect = document.getElementById(`unit_${index}`);
        
        // Ambil nilai dari dropdown
        const selectedUnit = unitSelect ? unitSelect.value : (item.satuan_base || 'Pcs');
        const konversiFaktor = unitSelect ? unitSelect.options[unitSelect.selectedIndex].getAttribute('data-konversi') : 1;

        container.innerHTML += `
            <input type="hidden" name="product_id[]" value="${item.id}">
            <input type="hidden" name="qty[]" value="${item.qty}">
            <input type="hidden" name="satuan[]" value="${selectedUnit}">
            <input type="hidden" name="konversi[]" value="${konversiFaktor}">
            <input type="hidden" name="harga_beli[]" value="${item.harga_beli}">
            <input type="hidden" name="harga_jual_ecer[]" value="${item.harga_jual_ecer || ''}">
            <input type="hidden" name="harga_jual_grosir[]" value="${item.harga_jual_grosir || ''}">
        `;
    });
}

function removePurchaseItem(index) {
    purchaseItems.splice(index, 1);
    renderPurchaseItems();
}

// === DETAIL MODAL FUNCTION ===
function viewDetailPurchase(id) {
    // Tampilkan loading di modal
    document.getElementById('det_items_body').innerHTML = '<tr><td colspan="4" class="p-4 text-center">Memuat data...</td></tr>';
    openModal('detailModal');

    fetch(`/purchases/detail/${id}`)
        .then(res => res.json())
        .then(data => {
            if(!data.success) { alert("Gagal: " + data.message); return; }

            // Isi informasi header
            document.getElementById('det_faktur').textContent = data.nomor_faktur;
            document.getElementById('det_tanggal').textContent = data.tanggal_indo;
            document.getElementById('det_supplier').textContent = data.supplier_nama;
            document.getElementById('det_kontak').textContent = data.supplier_contact;
            
            const statusEl = document.getElementById('det_status');
            statusEl.textContent = data.status;
            statusEl.className = data.status === 'Lunas' 
                ? 'px-2 py-1 bg-green-100 text-green-800 rounded text-xs font-bold inline-block mt-1'
                : 'px-2 py-1 bg-red-100 text-red-800 rounded text-xs font-bold inline-block mt-1';
            
            document.getElementById('det_metode').textContent = "Metode: " + data.metode;
            document.getElementById('det_total').textContent = 'Rp ' + data.total.toLocaleString('id-ID');
            document.getElementById('det_bayar').textContent = 'Rp ' + data.terbayar.toLocaleString('id-ID');
            document.getElementById('det_sisa').textContent = 'Rp ' + data.sisa.toLocaleString('id-ID');

            // Isi tabel barang
            let html = '';
            data.items.forEach(item => {
                html += `
                    <tr class="border-b border-gray-50">
                        <td class="p-3">
                            <div class="font-medium text-gray-900">${item.nama_barang}</div>
                            <div class="text-xs text-gray-500">${item.kode_barang}</div>
                        </td>
                        <td class="p-3 text-center">${item.qty} ${item.satuan_dipilih}</td>
                        <td class="p-3 text-right">Rp ${item.harga_beli.toLocaleString('id-ID')}</td>
                        <td class="p-3 text-right font-semibold">Rp ${item.subtotal.toLocaleString('id-ID')}</td>
                    </tr>
                `;
            });
            document.getElementById('det_items_body').innerHTML = html;
        })
        .catch(err => {
            console.error(err);
            alert("Terjadi kesalahan saat mengambil data.");
        });
}

// --- FUNGSI EDIT PEMBELIAN ---
function editPurchaseEntry(id) {
    fetch(`/purchases/detail/${id}`)
        .then(res => res.json())
        .then(data => {
            if(!data.success) { alert("Gagal: " + data.message); return; }

            const modal = document.getElementById('purchaseModal');
            const form = modal.querySelector('form');
            
            // 1. Ubah Judul & Action
            modal.querySelector('h3').innerHTML = '<i class="fas fa-edit mr-2"></i>Edit Pembelian';
            form.action = `/purchases/edit/${id}`;

            // 2. Isi Header
            $('#supplier_select').val(data.supplier_id).trigger('change');
            form.querySelector('[name="nomor_faktur"]').value = data.nomor_faktur;
            form.querySelector('[name="tanggal"]').value = data.tanggal_raw;
            form.querySelector('[name="metode_pembayaran"]').value = data.metode;

            if(data.metode === 'Tempo') {
                document.getElementById('dp_container').classList.remove('hidden');
                form.querySelector('[name="uang_muka_dp"]').value = data.terbayar;
            } else {
                document.getElementById('dp_container').classList.add('hidden');
            }

            // 3. Pindahkan data items ke variabel global 'purchaseItems'
            purchaseItems = data.items.map(item => ({
                id: item.product_id,
                nama: item.nama_barang,
                qty: item.qty,
                harga_beli: item.harga_beli,
                harga_jual_ecer: '',
                harga_jual_grosir: '',
                harga_ecer_current: item.harga_ecer || 0,
                harga_grosir_current: item.harga_grosir || 0,
                satuan_base: item.satuan_base,
                units: item.units_all,
                selected_satuan: item.satuan_dipilih
            }));

            // 4. Render tabel item dan buka modal
            renderPurchaseItems();
            
            // Setel dropdown satuan agar sesuai dengan data lama setelah render
            purchaseItems.forEach((item, index) => {
                const select = document.getElementById(`unit_${index}`);
                if(select) select.value = item.selected_satuan;
            });

            openPurchaseModal();
        })
        .catch(err => {
            console.error(err);
            alert("Gagal memuat data untuk diedit.");
        });
}

// Payment Method Toggle
document.getElementById('metode_pembayaran').addEventListener('change', function() {
    const dpDiv = document.getElementById('dp_container');
    if(this.value === 'Tempo') {
        dpDiv.classList.remove('hidden');
    } else {
        dpDiv.classList.add('hidden');
    }
});
</script>
{% endblock %}