{% extends "base.html" %}
{% block title %}Stok Opname - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Stok Opname (Audit Stok){% endblock %}

{% block content %}
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <div class="p-4 bg-gray-800 text-white flex justify-between items-center">
        <h3 class="font-bold"><i class="fas fa-clipboard-check mr-2"></i>Penyesuaian Stok Barang</h3>
        <span class="text-xs">Satuan yang digunakan adalah <b>Unit Terkecil</b></span>
    </div>

    <form action="{{ url_for('process_opname') }}" method="POST">
        <div class="p-4 bg-gray-50 border-b">
            <label class="block text-xs font-bold text-gray-600 uppercase mb-1">Keterangan Opname</label>
            <input type="text" name="keterangan_umum" placeholder="Contoh: Opname Gudang Feb" required
                   class="w-full sm:w-1/2 border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="bg-gray-100 text-gray-700 uppercase font-bold border-b">
                    <tr>
                        <th class="px-4 py-3">Produk</th>
                        <th class="px-4 py-3 text-center">Stok Sistem</th>
                        <th class="px-4 py-3 text-center w-48">Stok Fisik (Aktual)</th>
                        <th class="px-4 py-3 text-center">Selisih</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for p in products %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <div class="font-bold text-gray-800">{{ p.nama_barang }}</div>
                            <div class="text-xs text-gray-500">{{ p.kode_barang }} | {{ p.satuan }}</div>
                            <div class="text-[10px] text-blue-600 italic">{{ p.stok_display }}</div>
                        </td>
                        <td class="px-4 py-3 text-center font-mono text-gray-600">
                            {{ p.stok }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            <input type="hidden" name="product_id[]" value="{{ p.id }}">
                            <!-- Pastikan name adalah 'stok_aktual[]' -->
                            <input type="number" name="stok_aktual[]" 
                                   class="w-full border-2 border-blue-100 rounded-lg px-3 py-2 text-center font-bold focus:border-blue-500 focus:ring-0 stok-input"
                                   data-sistem="{{ p.stok }}"
                                   placeholder="0">
                        </td>
                        <td class="px-4 py-3 text-center font-bold text-gray-400 selisih-display">
                            0
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="p-6 bg-gray-50 border-t flex justify-end gap-4">
            <button type="submit" class="px-8 py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 shadow-lg">
                <i class="fas fa-save mr-2"></i>SIMPAN & ADJUST STOK
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.querySelectorAll('.stok-input').forEach(input => {
        // Gunakan event 'input' agar update real-time saat mengetik
        input.addEventListener('input', function() {
            const row = this.closest('tr');
            const display = row.querySelector('.selisih-display');
            
            // Ambil nilai sistem dari atribut data
            const sistem = parseInt(this.getAttribute('data-sistem')) || 0;
            
            // Ambil nilai yang diketik (kosongkan jika bukan angka)
            const aktualRaw = this.value;
            
            if (aktualRaw !== "") {
                const aktual = parseInt(aktualRaw);
                const selisih = aktual - sistem;

                display.innerText = (selisih > 0 ? '+' : '') + selisih;

                if (selisih > 0) {
                    display.className = 'px-4 py-3 text-center font-bold text-green-600 selisih-display';
                } else if (selisih < 0) {
                    display.className = 'px-4 py-3 text-center font-bold text-red-600 selisih-display';
                } else {
                    display.className = 'px-4 py-3 text-center font-bold text-gray-400 selisih-display';
                }
            } else {
                display.innerText = "0";
                display.className = 'px-4 py-3 text-center font-bold text-gray-400 selisih-display';
            }
        });
    });
</script>
{% endblock %}