{% extends "layouts/admin_base.html" %}

{% block title %}
Dataset ANN - Inventori ANN
{% endblock %}

{% block page_title %}
Dataset ANN
{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold text-success mb-1">
            Dataset Artificial Neural Network
        </h3>
        <p class="text-muted mb-0">
            Dataset input ANN Prediksi Barang Keluar yang digunakan
            pada proses training dan testing.
        </p>
    </div>
</div>

<div class="alert alert-success border-0 shadow-sm">
    <strong>Dataset telah disinkronkan dengan model ANN.</strong>
    Data harian dibentuk dari histori Barang Masuk dan Barang Keluar
    untuk merekonstruksi stok. ANN menggunakan 7 fitur histori
    Barang Keluar, sedangkan target (Y) adalah Barang Keluar pada
    tanggal target.
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Record ANN</div>
                <div class="fs-3 fw-bold text-success">
                    {{ jumlah_record }}
                </div>
                <small class="text-muted">
                    Record setelah pembentukan lag 7 hari
                </small>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Data Training</div>
                <div class="fs-3 fw-bold text-primary">
                    {{ jumlah_training }}
                </div>
                <small class="text-muted">
                    Bagian awal data secara kronologis
                </small>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Data Testing</div>
                <div class="fs-3 fw-bold text-warning">
                    {{ jumlah_testing }}
                </div>
                <small class="text-muted">
                    Bagian akhir data secara kronologis
                </small>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Barang dalam Dataset</div>
                <div class="fs-3 fw-bold text-success">
                    {{ jumlah_barang_dataset }}
                </div>
                <small class="text-muted">
                    Berdasarkan filter yang aktif
                </small>
            </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">Informasi Metodologi ANN</h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-lg-4">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small">Periode Histori</div>
                    <strong>
                        {% if tanggal_data_awal and tanggal_data_akhir %}
                            {{ tanggal_data_awal.strftime('%d/%m/%Y') }}
                            s.d.
                            {{ tanggal_data_akhir.strftime('%d/%m/%Y') }}
                        {% else %}
                            Belum tersedia
                        {% endif %}
                    </strong>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small">Pembagian Data</div>
                    <strong>80% Training : 20% Testing</strong>
                    <div class="small text-muted">
                        Split kronologis, bukan random.
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small">Arsitektur ANN</div>
                    <strong>7 Input → 32 → 16 → 1 Output</strong>
                    <div class="small text-muted">
                        ReLU · Adam · StandardScaler
                    </div>
                </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">Filter Dataset</h5>
    </div>

    <div class="card-body">
        <form method="GET" action="/admin/dataset-ann">
            <div class="row g-3 align-items-end">
                <div class="col-lg-4">
                    <label class="form-label fw-semibold">Barang</label>
                    <select name="barang_id" class="form-select">
                        <option value="">Semua Barang</option>
                        {% for item in barang %}
                            <option
                                value="{{ item.id }}"
                                {% if barang_id|string == item.id|string %}
                                    selected
                                {% endif %}
                            >
                                {{ item.kode_barang }} - {{ item.nama_barang }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-lg-3">
                    <label class="form-label fw-semibold">
                        Tanggal Target Awal
                    </label>
                    <input
                        type="date"
                        name="tanggal_awal"
                        class="form-control"
                        value="{{ tanggal_awal }}"
                    >
                </div>

                <div class="col-lg-3">
                    <label class="form-label fw-semibold">
                        Tanggal Target Akhir
                    </label>
                    <input
                        type="date"
                        name="tanggal_akhir"
                        class="form-control"
                        value="{{ tanggal_akhir }}"
                    >
                </div>

                <div class="col-lg-2 d-grid gap-2">
                    <button type="submit" class="btn btn-success">
                        Terapkan
                    </button>
                    <a
                        href="/admin/dataset-ann"
                        class="btn btn-outline-secondary btn-sm"
                    >
                        Reset
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <h5 class="fw-bold mb-1">
                    Dataset Input dan Target ANN
                </h5>
                <small class="text-muted">
                    {{ dataset|length }} record sesuai filter.
                </small>
            </div>

            <a
                href="/admin/dataset-ann/export?barang_id={{ barang_id }}&tanggal_awal={{ tanggal_awal }}&tanggal_akhir={{ tanggal_akhir }}"
                class="btn btn-outline-success"
            >
                Export Dataset Excel
            </a>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle mb-0 small">
                <thead class="table-light text-center align-middle">
                    <tr>
                        <th>No</th>
                        <th>Tanggal Target</th>
                        <th>Kode</th>
                        <th class="text-start">Nama Barang</th>
                        <th>Stok Awal</th>
                        <th>Masuk</th>
                        <th>Keluar</th>
                        <th>Stok Akhir</th>
                        <th>X1<br>Lag-1</th>
                        <th>X2<br>Lag-2</th>
                        <th>X3<br>Lag-3</th>
                        <th>X4<br>Lag-7</th>
                        <th>X5<br>Rata 3</th>
                        <th>X6<br>Rata 7</th>
                        <th>X7<br>Hari</th>
                        <th>Y<br>Target Keluar</th>
                        <th>Data</th>
                    </tr>
                </thead>

                <tbody>
                    {% if dataset %}
                        {% for item in dataset %}
                            <tr>
                                <td class="text-center">{{ loop.index }}</td>
                                <td class="text-center">
                                    {{ item.tanggal.strftime('%d/%m/%Y') }}
                                </td>
                                <td>
                                    <strong>{{ item.kode_barang }}</strong>
                                </td>
                                <td>{{ item.nama_barang }}</td>
                                <td class="text-center">{{ item.stok_awal }}</td>
                                <td class="text-center">{{ item.barang_masuk }}</td>
                                <td class="text-center">{{ item.barang_keluar }}</td>
                                <td class="text-center">{{ item.stok_akhir }}</td>
                                <td class="text-center">{{ item.keluar_lag_1 }}</td>
                                <td class="text-center">{{ item.keluar_lag_2 }}</td>
                                <td class="text-center">{{ item.keluar_lag_3 }}</td>
                                <td class="text-center">{{ item.keluar_lag_7 }}</td>
                                <td class="text-center">
                                    {{ "%.2f"|format(item.rata_keluar_3_hari) }}
                                </td>
                                <td class="text-center">
                                    {{ "%.2f"|format(item.rata_keluar_7_hari) }}
                                </td>
                                <td class="text-center">
                                    {{ item.hari_index }}
                                    <div class="text-muted">
                                        {{ item.hari_nama }}
                                    </div>
                                </td>
                                <td class="text-center fw-bold text-success">
                                    {{ item.target_barang_keluar }}
                                    {{ item.satuan_kecil }}
                                </td>
                                <td class="text-center">
                                    {% if item.jenis_data == "Training" %}
                                        <span class="badge bg-primary">
                                            Training
                                        </span>
                                    {% else %}
                                        <span class="badge bg-warning text-dark">
                                            Testing
                                        </span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="17" class="text-center py-5 text-muted">
                                Tidak ada dataset ANN sesuai filter.
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if contoh_perhitungan %}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-success text-white py-3">
        <h5 class="fw-bold mb-1">
            Contoh Perhitungan ANN untuk BAB III
        </h5>
        <small>
            Contoh satu record yang dibentuk dengan metode yang sama
            seperti proses training sistem.
        </small>
    </div>

    <div class="card-body">
        <div class="alert alert-light border">
            <strong>{{ contoh_perhitungan.kode_barang }}</strong>
            - {{ contoh_perhitungan.nama_barang }}
            · Tanggal target
            <strong>
                {{ contoh_perhitungan.tanggal.strftime('%d/%m/%Y') }}
            </strong>
            · Data
            <strong>{{ contoh_perhitungan.jenis_data }}</strong>
        </div>

        <h6 class="fw-bold">1. Nilai Input (X) dan Target (Y)</h6>

        <div class="table-responsive mb-4">
            <table class="table table-bordered table-sm align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Variabel</th>
                        <th>Keterangan</th>
                        <th class="text-center">Nilai</th>
                    </tr>
                </thead>
                <tbody>
                    {% for fitur in contoh_perhitungan.fitur %}
                        <tr>
                            <td class="fw-bold">{{ fitur.kode }}</td>
                            <td>{{ fitur.nama }}</td>
                            <td class="text-center">
                                {{ fitur.nilai }}
                            </td>
                        </tr>
                    {% endfor %}
                    <tr class="table-success">
                        <td class="fw-bold">Y</td>
                        <td>Target Barang Keluar</td>
                        <td class="text-center fw-bold">
                            {{ contoh_perhitungan.target_barang_keluar }}
                            {{ contoh_perhitungan.satuan_kecil }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="alert alert-secondary">
            <strong>Rumus StandardScaler:</strong>
            z = (x - mean) / standar deviasi
        </div>

        {% if contoh_perhitungan.model_tersedia %}
            <h6 class="fw-bold">
                2. Normalisasi Input Menggunakan StandardScaler
            </h6>

            <div class="table-responsive mb-4">
                <table class="table table-bordered table-sm align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Variabel</th>
                            <th class="text-end">Nilai Asli</th>
                            <th class="text-end">Mean Training</th>
                            <th class="text-end">Std Training</th>
                            <th class="text-end">Nilai Normalisasi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for fitur in contoh_perhitungan.fitur_normalisasi %}
                            <tr>
                                <td class="fw-bold">{{ fitur.kode }}</td>
                                <td class="text-end">
                                    {{ "%.4f"|format(fitur.nilai_asli) }}
                                </td>
                                <td class="text-end">
                                    {{ "%.4f"|format(fitur.mean) }}
                                </td>
                                <td class="text-end">
                                    {{ "%.4f"|format(fitur.std) }}
                                </td>
                                <td class="text-end fw-bold text-success">
                                    {{ "%.6f"|format(fitur.nilai_normalisasi) }}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <h6 class="fw-bold">3. Arsitektur Jaringan</h6>
            <div class="alert alert-info">
                <strong>7 Input → Hidden Layer 1 (32 neuron) →
                Hidden Layer 2 (16 neuron) → 1 Output.</strong>
                Aktivasi hidden layer menggunakan ReLU dan proses
                optimasi menggunakan Adam.
            </div>

            <div class="row g-3">
                <div class="col-md-6">
                    <div class="border rounded p-3 h-100">
                        <div class="text-muted small">
                            Target Aktual (Y)
                        </div>
                        <div class="fs-4 fw-bold">
                            {{ contoh_perhitungan.target_barang_keluar }}
                            {{ contoh_perhitungan.satuan_kecil }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="border rounded p-3 h-100">
                        <div class="text-muted small">
                            Output Prediksi Model
                        </div>
                        <div class="fs-4 fw-bold text-success">
                            {{ "%.4f"|format(contoh_perhitungan.prediksi_model) }}
                            {{ contoh_perhitungan.satuan_kecil }}
                        </div>
                    </div>
                </div>
            </div>

            {% if contoh_perhitungan.hidden1_neuron1 %}
            <hr class="my-4">
            <h5 class="fw-bold text-success mb-3">
                Detail Forward Propagation untuk Perhitungan Manual BAB III
            </h5>
            <div class="alert alert-light border">
                Angka bobot, bias, hasil normalisasi, dan output di bawah
                diambil langsung dari model ANN hasil training. Rumus dasar
                setiap neuron adalah <strong>Z = Σ(input × bobot) + bias</strong>,
                kemudian hidden layer menggunakan <strong>ReLU = max(0, Z)</strong>.
            </div>

            <h6 class="fw-bold">4. Hidden Layer 1 — Contoh Neuron H1-1</h6>
            <div class="table-responsive mb-2">
                <table class="table table-bordered table-sm align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Input</th>
                            <th class="text-end">Nilai Normalisasi</th>
                            <th class="text-end">Bobot ke H1-1</th>
                            <th class="text-end">Input × Bobot</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in contoh_perhitungan.hidden1_neuron1.kontribusi %}
                        <tr>
                            <td class="fw-bold">{{ item.kode }}</td>
                            <td class="text-end">{{ "%.6f"|format(item.input) }}</td>
                            <td class="text-end">{{ "%.6f"|format(item.bobot) }}</td>
                            <td class="text-end">{{ "%.6f"|format(item.hasil_kali) }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="alert alert-secondary">
                Bias H1-1 = <strong>{{ "%.6f"|format(contoh_perhitungan.hidden1_neuron1.bias) }}</strong><br>
                Z H1-1 = Σ(Input × Bobot) + Bias =
                <strong>{{ "%.6f"|format(contoh_perhitungan.hidden1_neuron1.z) }}</strong><br>
                ReLU(Z) = <strong>{{ "%.6f"|format(contoh_perhitungan.hidden1_neuron1.aktivasi) }}</strong>
            </div>

            <details class="mb-4">
                <summary class="fw-semibold text-success" style="cursor:pointer;">
                    Lihat ringkasan seluruh 32 neuron Hidden Layer 1
                </summary>
                <div class="table-responsive mt-2">
                    <table class="table table-bordered table-sm">
                        <thead class="table-light"><tr><th>Neuron</th><th>Z</th><th>ReLU(Z)</th></tr></thead>
                        <tbody>
                            {% for item in contoh_perhitungan.hidden1_ringkas %}
                            <tr><td>H1-{{ item.neuron }}</td><td>{{ "%.6f"|format(item.z) }}</td><td>{{ "%.6f"|format(item.aktivasi) }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>

            <h6 class="fw-bold">5. Hidden Layer 2 — Contoh Neuron H2-1</h6>
            <p class="text-muted small">
                H2-1 menerima 32 nilai aktivasi dari Hidden Layer 1. Tabel rinci
                dapat dibuka untuk melihat substitusi lengkap.
            </p>
            <details class="mb-2">
                <summary class="fw-semibold" style="cursor:pointer;">
                    Lihat 32 kontribusi H1 → H2-1
                </summary>
                <div class="table-responsive mt-2">
                    <table class="table table-bordered table-sm">
                        <thead class="table-light"><tr><th>Input</th><th>Aktivasi H1</th><th>Bobot</th><th>Hasil Kali</th></tr></thead>
                        <tbody>
                            {% for item in contoh_perhitungan.hidden2_neuron1.kontribusi %}
                            <tr><td>{{ item.kode }}</td><td>{{ "%.6f"|format(item.input) }}</td><td>{{ "%.6f"|format(item.bobot) }}</td><td>{{ "%.6f"|format(item.hasil_kali) }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>
            <div class="alert alert-secondary">
                Bias H2-1 = <strong>{{ "%.6f"|format(contoh_perhitungan.hidden2_neuron1.bias) }}</strong><br>
                Z H2-1 = <strong>{{ "%.6f"|format(contoh_perhitungan.hidden2_neuron1.z) }}</strong><br>
                ReLU(Z) = <strong>{{ "%.6f"|format(contoh_perhitungan.hidden2_neuron1.aktivasi) }}</strong>
            </div>

            <details class="mb-4">
                <summary class="fw-semibold text-success" style="cursor:pointer;">
                    Lihat ringkasan seluruh 16 neuron Hidden Layer 2
                </summary>
                <div class="table-responsive mt-2">
                    <table class="table table-bordered table-sm">
                        <thead class="table-light"><tr><th>Neuron</th><th>Z</th><th>ReLU(Z)</th></tr></thead>
                        <tbody>
                            {% for item in contoh_perhitungan.hidden2_ringkas %}
                            <tr><td>H2-{{ item.neuron }}</td><td>{{ "%.6f"|format(item.z) }}</td><td>{{ "%.6f"|format(item.aktivasi) }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>

            <h6 class="fw-bold">6. Perhitungan Output ANN</h6>
            <div class="table-responsive mb-2">
                <table class="table table-bordered table-sm">
                    <thead class="table-light"><tr><th>Input Output</th><th>Aktivasi H2</th><th>Bobot Output</th><th>Hasil Kali</th></tr></thead>
                    <tbody>
                        {% for item in contoh_perhitungan.output_manual.kontribusi %}
                        <tr><td>{{ item.kode }}</td><td>{{ "%.6f"|format(item.input) }}</td><td>{{ "%.6f"|format(item.bobot) }}</td><td>{{ "%.6f"|format(item.hasil_kali) }}</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="alert alert-info">
                Bias output = <strong>{{ "%.6f"|format(contoh_perhitungan.output_manual.bias) }}</strong><br>
                Output normalisasi = Σ(H2 × Bobot) + Bias =
                <strong>{{ "%.6f"|format(contoh_perhitungan.output_manual.output_scaled) }}</strong><br>
                Denormalisasi Y = (Output × Std Y) + Mean Y<br>
                = ({{ "%.6f"|format(contoh_perhitungan.output_manual.output_scaled) }} ×
                {{ "%.6f"|format(contoh_perhitungan.output_manual.std_y) }}) +
                {{ "%.6f"|format(contoh_perhitungan.output_manual.mean_y) }}<br>
                = <strong>{{ "%.4f"|format(contoh_perhitungan.output_manual.output_asli) }} {{ contoh_perhitungan.satuan_kecil }}</strong>
            </div>

            <h6 class="fw-bold">7. Perbandingan Hasil Prediksi dengan Target Aktual</h6>
            <div class="row g-3">
                <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="text-muted small">Target Aktual (Y)</div><div class="fs-4 fw-bold">{{ contoh_perhitungan.target_barang_keluar }} {{ contoh_perhitungan.satuan_kecil }}</div></div></div>
                <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="text-muted small">Prediksi ANN</div><div class="fs-4 fw-bold text-success">{{ "%.4f"|format(contoh_perhitungan.output_manual.output_asli) }} {{ contoh_perhitungan.satuan_kecil }}</div></div></div>
                <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="text-muted small">Absolute Error |Y - Ŷ|</div><div class="fs-4 fw-bold text-warning">{{ "%.4f"|format(contoh_perhitungan.error_absolut) }} {{ contoh_perhitungan.satuan_kecil }}</div></div></div>
            </div>
            <div class="alert alert-success mt-3 mb-0">
                <strong>Kesimpulan contoh:</strong> proses di atas menunjukkan alur satu record
                dari normalisasi X1–X7, forward propagation pada dua hidden layer,
                output terstandardisasi, denormalisasi, hingga perbandingan prediksi
                dengan target aktual. Nilai ini dapat dijadikan contoh perhitungan
                implementasi ANN pada BAB III.
            </div>
            {% endif %}
        {% else %}
            <div class="alert alert-warning mb-0">
                Model ANN belum tersedia atau belum dapat dibaca.
                Lakukan Training ANN agar nilai mean, standar deviasi,
                hasil normalisasi, dan output model dapat ditampilkan.
            </div>
        {% endif %}
    </div>
</div>
{% endif %}

<div class="alert alert-warning">
    <strong>Catatan metodologi:</strong>
    Barang Masuk dan stok historis digunakan untuk membentuk kondisi
    persediaan yang konsisten. Namun target ANN pada implementasi ini
    adalah <strong>Barang Keluar</strong>. Prediksi stok masa depan
    kemudian dihitung dari stok aktual dikurangi akumulasi prediksi
    Barang Keluar, tanpa mengasumsikan restock yang belum tercatat.
</div>

{% endblock %}