{% extends "layouts/admin_base.html" %}
{% block title %}Prediksi ANN - Inventori ANN{% endblock %}
{% block page_title %}Prediksi ANN{% endblock %}
{% block content %}
<div class="mb-4">
    <h2 class="fw-bold text-success mb-1">Prediksi Kebutuhan & Persediaan Barang</h2>
    <p class="text-muted mb-0">ANN mempelajari pola histori kebutuhan/barang keluar. Histori barang masuk dan perubahan stok digunakan untuk membentuk kondisi persediaan historis, kemudian sistem memproyeksikan sisa stok beberapa hari ke depan.</p>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted mb-2">Jumlah Barang</div><h3 class="fw-bold text-success mb-0">{{ jumlah_barang }}</h3></div></div></div>
    <div class="col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted mb-2">Transaksi Barang Masuk</div><h3 class="fw-bold text-success mb-0">{{ jumlah_transaksi_masuk }}</h3></div></div></div>
    <div class="col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted mb-2">Transaksi Barang Keluar</div><h3 class="fw-bold text-success mb-0">{{ jumlah_transaksi_keluar }}</h3></div></div></div>
    <div class="col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted mb-2">Periode Histori</div><div class="fw-bold">{% if tanggal_awal and tanggal_akhir %}{{ tanggal_awal.strftime('%d/%m/%Y') }}<br><span class="text-muted fw-normal">s.d.</span> {{ tanggal_akhir.strftime('%d/%m/%Y') }}{% else %}-{% endif %}</div></div></div></div>
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3"><h5 class="fw-bold mb-0">Training Model ANN</h5></div>
    <div class="card-body p-4">
        <div class="alert alert-info">Training menggunakan histori harian seluruh barang dalam satuan terkecil. Sistem menggunakan data barang masuk, barang keluar, dan stok historis. Pembagian data dilakukan secara kronologis: 80% training dan 20% testing.</div>
        {% if model_info %}
        <div class="alert alert-success">
            <div class="fw-bold mb-2">Model ANN sudah tersedia.</div>
            <div class="row g-2">
                <div class="col-md-3"><small class="text-muted">Jumlah Data</small><br><strong>{{ model_info.jumlah_data }}</strong></div>
                <div class="col-md-3"><small class="text-muted">MAE</small><br><strong>{{ '%.2f'|format(model_info.mae) }}</strong></div>
                <div class="col-md-3"><small class="text-muted">RMSE</small><br><strong>{{ '%.2f'|format(model_info.rmse) }}</strong></div>
                <div class="col-md-3"><small class="text-muted">R²</small><br><strong>{% if model_info.r2 is not none %}{{ '%.4f'|format(model_info.r2) }}{% else %}-{% endif %}</strong></div>
            </div>
        </div>
        {% else %}<div class="alert alert-warning">Model ANN belum dilatih. Klik tombol di bawah untuk memulai training.</div>{% endif %}
        <form method="POST" action="/admin/prediksi-ann/training" onsubmit="return konfirmasiTraining();">
            <button type="submit" class="btn btn-success px-4" id="btnTraining">{% if model_info %}Training Ulang ANN{% else %}Training ANN{% endif %}</button>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3"><h5 class="fw-bold mb-0">Prediksi Kebutuhan & Sisa Stok Beberapa Hari ke Depan</h5></div>
    <div class="card-body p-4">
        {% if model_info %}
        <div class="alert alert-secondary"><strong>Cara membaca hasil:</strong> ANN memprediksi kebutuhan barang selama periode yang dipilih. Prediksi sisa stok dihitung dari stok aktual dikurangi akumulasi kebutuhan yang diprediksi. Untuk menjaga proyeksi tetap konservatif, barang masuk masa depan tidak dianggap tersedia sebelum transaksi Gudang benar-benar dicatat.</div>
        <form method="POST" action="/admin/prediksi-ann/proses" class="row g-3 align-items-end">
            <div class="col-md-4"><label class="form-label fw-semibold">Periode Prediksi</label><select name="jumlah_hari" class="form-select"><option value="3" {% if jumlah_hari == 3 %}selected{% endif %}>3 Hari</option><option value="7" {% if not jumlah_hari or jumlah_hari == 7 %}selected{% endif %}>7 Hari</option><option value="14" {% if jumlah_hari == 14 %}selected{% endif %}>14 Hari</option><option value="30" {% if jumlah_hari == 30 %}selected{% endif %}>30 Hari</option></select></div>
            <div class="col-md-4"><button type="submit" class="btn btn-success px-4">Proses Prediksi</button></div>
        </form>
        {% else %}<p class="text-muted mb-0">Prediksi stok akan tersedia setelah training ANN berhasil.</p>{% endif %}
    </div>
</div>

{% if hasil_prediksi %}
<div class="row g-3 mb-4">
    <div class="col-md-4"><div class="card border-success shadow-sm"><div class="card-body"><div class="text-muted">Aman</div><h3 class="text-success fw-bold mb-0">{{ ringkasan_prediksi.aman }}</h3></div></div></div>
    <div class="col-md-4"><div class="card border-warning shadow-sm"><div class="card-body"><div class="text-muted">Menipis</div><h3 class="text-warning fw-bold mb-0">{{ ringkasan_prediksi.menipis }}</h3></div></div></div>
    <div class="col-md-4"><div class="card border-danger shadow-sm"><div class="card-body"><div class="text-muted">Berpotensi Habis</div><h3 class="text-danger fw-bold mb-0">{{ ringkasan_prediksi.habis }}</h3></div></div></div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
            <div>
                <h5 class="fw-bold mb-1">Hasil Prediksi {{ jumlah_hari }} Hari</h5>
                <small class="text-muted"><span id="jumlahHasil">{{ hasil_prediksi|length }}</span> dari {{ hasil_prediksi|length }} barang ditampilkan.</small>
            </div>
            <div style="min-width: 320px; max-width: 430px; width: 100%;">
                <label for="cariBarangPrediksi" class="form-label fw-semibold mb-1">Cari Barang</label>
                <div class="input-group">
                    <span class="input-group-text">🔎</span>
                    <input type="text" id="cariBarangPrediksi" class="form-control" placeholder="Cari kode atau nama barang..." autocomplete="off">
                    <button type="button" id="resetCariPrediksi" class="btn btn-outline-secondary">Reset</button>
                </div>
            </div>
        </div>
    </div>
    <div id="pesanTidakDitemukan" class="alert alert-warning m-3 mb-0 d-none">Barang yang dicari tidak ditemukan pada hasil prediksi.</div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="tabelPrediksiBarang">
            <thead class="table-light"><tr><th>No</th><th>Kode</th><th>Nama Barang</th><th>Satuan</th><th class="text-end">Stok Sekarang</th><th class="text-end">Prediksi Kebutuhan</th><th class="text-end">Prediksi Sisa Stok</th><th>Status</th><th>Perkiraan Habis</th><th>Rekomendasi</th></tr></thead>
            <tbody>
            {% for item in hasil_prediksi %}
            <tr class="baris-prediksi" data-kode="{{ item.kode_barang|lower }}" data-nama="{{ item.nama_barang|lower }}"><td>{{ loop.index }}</td><td class="fw-semibold">{{ item.kode_barang }}</td><td>{{ item.nama_barang }}</td><td>{{ item.satuan_kecil }}</td><td class="text-end">{{ item.stok_sekarang }}</td><td class="text-end fw-semibold">{{ item.prediksi_kebutuhan }}</td><td class="text-end fw-bold">{{ item.stok_prediksi }}</td><td><span class="badge text-bg-{{ item.status_class }}">{{ item.status }}</span></td><td>{% if item.tanggal_habis %}<span class="text-danger fw-semibold">{{ item.tanggal_habis.strftime('%d/%m/%Y') }}</span>{% else %}-{% endif %}</td><td><small>{{ item.rekomendasi }}</small></td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<script>
function konfirmasiTraining() {
    const tombol = document.getElementById('btnTraining');
    const setuju = confirm('Mulai training ANN menggunakan histori barang masuk, barang keluar, dan stok?');
    if (setuju) { tombol.disabled = true; tombol.innerText = 'Sedang Training...'; }
    return setuju;
}

document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('cariBarangPrediksi');
    const reset = document.getElementById('resetCariPrediksi');
    const jumlahHasil = document.getElementById('jumlahHasil');
    const pesanKosong = document.getElementById('pesanTidakDitemukan');
    const rows = Array.from(document.querySelectorAll('.baris-prediksi'));

    if (!input || rows.length === 0) return;

    function filterBarang() {
        const keyword = input.value.trim().toLowerCase();
        let terlihat = 0;

        rows.forEach(function (row) {
            const kode = row.dataset.kode || '';
            const nama = row.dataset.nama || '';
            const cocok = !keyword || kode.includes(keyword) || nama.includes(keyword);

            row.style.display = cocok ? '' : 'none';
            if (cocok) terlihat += 1;
        });

        if (jumlahHasil) jumlahHasil.textContent = terlihat;
        if (pesanKosong) pesanKosong.classList.toggle('d-none', terlihat !== 0);
    }

    input.addEventListener('input', filterBarang);

    if (reset) {
        reset.addEventListener('click', function () {
            input.value = '';
            filterBarang();
            input.focus();
        });
    }
});
</script>
{% endblock %}