{% extends "base.html" %}

{% block title %}Riwayat Opname - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Riwayat Stok Opname{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{{ url_for('stock_opname') }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-700 transition-all">
        <i class="fas fa-plus mr-2"></i>Buat Opname Baru
    </a>
</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <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-6 py-4">Tanggal & Jam</th>
                    <th class="px-6 py-4">Keterangan</th>
                    <th class="px-6 py-4">Petugas</th>
                    <th class="px-6 py-4 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for op in history %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 font-medium text-gray-900">
                        {{ op.tanggal.strftime('%d %b %Y') }}
                        <div class="text-xs text-gray-500">{{ op.tanggal.strftime('%H:%M') }} WIB</div>
                    </td>
                    <td class="px-6 py-4 text-gray-600">{{ op.keterangan }}</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-blue-50 text-blue-700 rounded text-xs font-semibold">
                            <i class="fas fa-user mr-1"></i>{{ op.user.nama_lengkap }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <button onclick="showDetail({{ op.id }})" class="text-blue-600 hover:text-blue-800 font-bold">
                            <i class="fas fa-eye mr-1"></i> Lihat Detail
                        </button>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="px-6 py-10 text-center text-gray-400">Belum ada riwayat stok opname.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- MODAL DETAIL -->
<div id="modalDetail" 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 max-h-[90vh] flex flex-col overflow-hidden">
        <div class="p-4 border-b bg-gray-800 text-white flex justify-between items-center">
            <h3 class="font-bold" id="modalTitle">Detail Opname</h3>
            <button onclick="closeModal('modalDetail')" class="text-white hover:text-gray-300 text-2xl">&times;</button>
        </div>
        <div class="p-4 bg-gray-50 border-b grid grid-cols-2 gap-4 text-sm">
            <div>
                <p class="text-gray-500">Tanggal:</p>
                <p id="detTanggal" class="font-bold text-gray-800"></p>
            </div>
            <div>
                <p class="text-gray-500">Petugas:</p>
                <p id="detPetugas" class="font-bold text-gray-800"></p>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto p-4">
            <table class="w-full text-xs sm:text-sm text-left">
                <thead class="bg-gray-100 sticky top-0">
                    <tr>
                        <th class="p-2 border">Produk</th>
                        <th class="p-2 border text-center">Sistem</th>
                        <th class="p-2 border text-center">Aktual</th>
                        <th class="p-2 border text-center">Selisih</th>
                    </tr>
                </thead>
                <tbody id="detItemsBody"></tbody>
            </table>
        </div>
        <div class="p-4 border-t bg-gray-50 text-right">
            <button onclick="closeModal('modalDetail')" class="px-6 py-2 bg-gray-600 text-white rounded-lg font-bold">Tutup</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function showDetail(id) {
        fetch(`/inventory/opname/detail/${id}`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('modalTitle').innerText = 'Detail: ' + data.keterangan;
                document.getElementById('detTanggal').innerText = data.tanggal;
                document.getElementById('detPetugas').innerText = data.petugas;

                let html = '';
                data.items.forEach(item => {
                    const colorClass = item.selisih > 0 ? 'text-green-600' : (item.selisih < 0 ? 'text-red-600' : 'text-gray-400');
                    const sign = item.selisih > 0 ? '+' : '';
                    
                    html += `
                        <tr class="border-b">
                            <td class="p-2">
                                <div class="font-bold">${item.nama}</div>
                                <div class="text-[10px] text-gray-500">${item.kode}</div>
                            </td>
                            <td class="p-2 text-center">${item.sistem}</td>
                            <td class="p-2 text-center font-bold">${item.aktual}</td>
                            <td class="p-2 text-center font-bold ${colorClass}">${sign}${item.selisih}</td>
                        </tr>
                    `;
                });
                document.getElementById('detItemsBody').innerHTML = html;
                openModal('modalDetail');
            });
    }
</script>
{% endblock %}