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

{% block title %}
Barang Masuk - Inventori ANN
{% endblock %}

{% block page_title %}
Barang Masuk
{% endblock %}


{% block content %}

<!-- ====================================================== -->
<!-- HEADER -->
<!-- ====================================================== -->

<div class="d-flex justify-content-between align-items-center mb-4">

    <div>
        <h3 class="fw-bold text-success mb-1">
            Transaksi Barang Masuk
        </h3>

        <p class="text-muted mb-0">
            Catat penerimaan beberapa jenis barang dalam satu transaksi.
        </p>
    </div>


    <a
        href="/gudang/barang-masuk/import"
        class="btn btn-outline-success"
    >
        Import Excel
    </a>

</div>


<!-- ====================================================== -->
<!-- INFORMASI -->
<!-- ====================================================== -->

<div class="alert alert-success border-0 shadow-sm">

    <strong>Informasi:</strong>

    Jumlah barang dimasukkan menggunakan
    <strong>satuan besar</strong> seperti Dus, Karton, Box, Bal, atau Pak.

    Sistem akan otomatis mengonversinya ke satuan terkecil
    dan menambah stok Master Barang.

</div>


<!-- ====================================================== -->
<!-- FORM -->
<!-- ====================================================== -->

<form
    method="POST"
    action="/gudang/barang-masuk"
    id="formBarangMasuk"
>

    <!-- ================================================== -->
    <!-- INFORMASI TRANSAKSI -->
    <!-- ================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white py-3">

            <h5 class="fw-bold mb-0">
                Informasi Transaksi
            </h5>

        </div>


        <div class="card-body p-4">

            <div class="row g-3">

                <!-- TANGGAL -->

                <div class="col-md-4">

                    <label class="form-label fw-semibold">
                        Tanggal Transaksi
                    </label>

                    <input
                        type="datetime-local"
                        name="tanggal"
                        class="form-control"
                        value="{{ tanggal_hari_ini }}"
                        required
                    >

                </div>


                <!-- NOMOR FAKTUR -->

                <div class="col-md-4">

                    <label class="form-label fw-semibold">
                        Nomor Faktur
                    </label>

                    <input
                        type="text"
                        name="nomor_faktur"
                        class="form-control"
                        placeholder="Contoh: FKT-001"
                    >

                    <small class="text-muted">
                        Boleh dikosongkan.
                    </small>

                </div>


                <!-- KETERANGAN -->

                <div class="col-md-4">

                    <label class="form-label fw-semibold">
                        Keterangan
                    </label>

                    <input
                        type="text"
                        name="keterangan"
                        class="form-control"
                        placeholder="Contoh: Pembelian stok mingguan"
                    >

                    <small class="text-muted">
                        Boleh dikosongkan.
                    </small>

                </div>

            </div>

        </div>

    </div>



    <!-- ================================================== -->
    <!-- DETAIL BARANG -->
    <!-- ================================================== -->

    <div class="card border-0 shadow-sm mb-4">

        <div class="card-header bg-white py-3">

            <div class="d-flex justify-content-between align-items-center">

                <div>

                    <h5 class="fw-bold mb-1">
                        Detail Barang
                    </h5>

                    <small class="text-muted">
                        Satu transaksi dapat berisi beberapa jenis barang.
                    </small>

                </div>


                <button
                    type="button"
                    class="btn btn-outline-success"
                    id="btnTambahBarang"
                >
                    + Tambah Barang
                </button>

            </div>

        </div>


        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-bordered align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th style="width: 40px;" class="text-center">
                                No
                            </th>

                            <th style="min-width: 280px;">
                                Barang
                            </th>

                            <th style="min-width: 130px;">
                                Satuan Besar
                            </th>

                            <th style="min-width: 140px;">
                                Isi / Satuan
                            </th>

                            <th style="min-width: 140px;">
                                Stok Saat Ini
                            </th>

                            <th style="min-width: 150px;">
                                Jumlah Masuk
                            </th>

                            <th style="min-width: 180px;">
                                Hasil Konversi
                            </th>

                            <th style="width: 80px;" class="text-center">
                                Aksi
                            </th>

                        </tr>

                    </thead>


                    <tbody id="detailBarang">

                        <!-- ================================= -->
                        <!-- BARIS PERTAMA -->
                        <!-- ================================= -->

                        <tr class="baris-barang">

                            <td class="nomor-baris text-center">
                                1
                            </td>


                            <!-- BARANG -->

                            <td>

                                <select
                                    name="barang_id[]"
                                    class="form-select barang-select"
                                    required
                                >

                                    <option value="">
                                        -- Pilih Barang --
                                    </option>

                                    {% for item in barang %}

                                    <option
                                        value="{{ item.id }}"
                                        data-kode="{{ item.kode_barang }}"
                                        data-nama="{{ item.nama_barang }}"
                                        data-satuan-besar="{{ item.satuan_besar }}"
                                        data-satuan-kecil="{{ item.satuan_kecil }}"
                                        data-isi="{{ item.isi_per_satuan }}"
                                        data-stok="{{ item.stok_kecil }}"
                                    >
                                        {{ item.kode_barang }}
                                        -
                                        {{ item.nama_barang }}
                                    </option>

                                    {% endfor %}

                                </select>

                            </td>


                            <!-- SATUAN BESAR -->

                            <td>

                                <span class="satuan-besar text-muted">
                                    -
                                </span>

                            </td>


                            <!-- ISI -->

                            <td>

                                <span class="isi-satuan text-muted">
                                    -
                                </span>

                            </td>


                            <!-- STOK -->

                            <td>

                                <span class="stok-sekarang text-muted">
                                    -
                                </span>

                            </td>


                            <!-- JUMLAH MASUK -->

                            <td>

                                <div class="input-group">

                                    <input
                                        type="number"
                                        name="jumlah_besar[]"
                                        class="form-control jumlah-besar"
                                        min="1"
                                        step="1"
                                        placeholder="0"
                                        required
                                    >

                                    <span class="input-group-text label-satuan">
                                        -
                                    </span>

                                </div>

                            </td>


                            <!-- KONVERSI -->

                            <td>

                                <strong class="hasil-konversi text-success">
                                    -
                                </strong>

                            </td>


                            <!-- HAPUS BARIS -->

                            <td class="text-center">

                                <button
                                    type="button"
                                    class="btn btn-outline-danger btn-sm btn-hapus-baris"
                                    disabled
                                >
                                    ×
                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>



    <!-- ================================================== -->
    <!-- TOMBOL SIMPAN -->
    <!-- ================================================== -->

    <div class="card border-0 shadow-sm">

        <div class="card-body">

            <div class="d-flex justify-content-between align-items-center">

                <div>

                    <strong class="text-success">
                        Stok akan diperbarui otomatis.
                    </strong>

                    <br>

                    <small class="text-muted">
                        Pastikan barang dan jumlah sudah benar sebelum
                        transaksi disimpan.
                    </small>

                </div>


                <div class="d-flex gap-2">

                    <a
                        href="/gudang"
                        class="btn btn-secondary"
                    >
                        Batal
                    </a>


                    <button
                        type="submit"
                        class="btn btn-success"
                    >
                        Simpan Transaksi
                    </button>

                </div>

            </div>

        </div>

    </div>

</form>


{% endblock %}



{% block script %}

<script>

document.addEventListener("DOMContentLoaded", function () {

    const detailBarang =
        document.getElementById("detailBarang");

    const btnTambahBarang =
        document.getElementById("btnTambahBarang");

    const formBarangMasuk =
        document.getElementById("formBarangMasuk");


    // =====================================================
    // UPDATE NOMOR BARIS
    // =====================================================

    function updateNomorBaris() {

        const semuaBaris =
            detailBarang.querySelectorAll(".baris-barang");

        semuaBaris.forEach(function (baris, index) {

            baris.querySelector(
                ".nomor-baris"
            ).textContent = index + 1;

        });


        // Tombol hapus hanya aktif jika baris lebih dari satu
        semuaBaris.forEach(function (baris) {

            const tombolHapus =
                baris.querySelector(".btn-hapus-baris");

            tombolHapus.disabled =
                semuaBaris.length === 1;

        });

    }



    // =====================================================
    // UPDATE INFORMASI BARANG
    // =====================================================

    function updateInformasiBarang(baris) {

        const select =
            baris.querySelector(".barang-select");

        const option =
            select.options[select.selectedIndex];

        const satuanBesar =
            baris.querySelector(".satuan-besar");

        const isiSatuan =
            baris.querySelector(".isi-satuan");

        const stokSekarang =
            baris.querySelector(".stok-sekarang");

        const labelSatuan =
            baris.querySelector(".label-satuan");

        const hasilKonversi =
            baris.querySelector(".hasil-konversi");


        if (!select.value) {

            satuanBesar.textContent = "-";

            isiSatuan.textContent = "-";

            stokSekarang.textContent = "-";

            labelSatuan.textContent = "-";

            hasilKonversi.textContent = "-";

            return;

        }


        const satuanBesarValue =
            option.dataset.satuanBesar;

        const satuanKecil =
            option.dataset.satuanKecil;

        const isi =
            parseInt(option.dataset.isi || "0");

        const stok =
            parseInt(option.dataset.stok || "0");


        // -------------------------------------------------
        // HITUNG STOK BESAR + SISA KECIL
        // -------------------------------------------------

        let stokBesar = 0;
        let sisaKecil = stok;

        if (isi > 0) {

            stokBesar =
                Math.floor(stok / isi);

            sisaKecil =
                stok % isi;

        }


        satuanBesar.textContent =
            satuanBesarValue;


        isiSatuan.textContent =
            "1 " +
            satuanBesarValue +
            " = " +
            isi +
            " " +
            satuanKecil;


        stokSekarang.innerHTML =
            "<strong>" +
            stokBesar +
            " " +
            satuanBesarValue +
            "</strong>" +
            "<br>" +
            "<small>" +
            sisaKecil +
            " " +
            satuanKecil +
            "</small>";


        labelSatuan.textContent =
            satuanBesarValue;


        hitungKonversi(baris);

    }



    // =====================================================
    // HITUNG KONVERSI
    // =====================================================

    function hitungKonversi(baris) {

        const select =
            baris.querySelector(".barang-select");

        const inputJumlah =
            baris.querySelector(".jumlah-besar");

        const hasil =
            baris.querySelector(".hasil-konversi");


        if (!select.value) {

            hasil.textContent = "-";

            return;

        }


        const option =
            select.options[select.selectedIndex];


        const isi =
            parseInt(
                option.dataset.isi || "0"
            );


        const satuanKecil =
            option.dataset.satuanKecil || "";


        const jumlahBesar =
            parseInt(
                inputJumlah.value || "0"
            );


        if (
            jumlahBesar <= 0
            || isi <= 0
        ) {

            hasil.textContent = "-";

            return;

        }


        const jumlahKecil =
            jumlahBesar * isi;


        hasil.textContent =
            jumlahKecil +
            " " +
            satuanKecil;

    }



    // =====================================================
    // PASANG EVENT KE SATU BARIS
    // =====================================================

    function pasangEventBaris(baris) {

        const select =
            baris.querySelector(".barang-select");

        const inputJumlah =
            baris.querySelector(".jumlah-besar");

        const tombolHapus =
            baris.querySelector(".btn-hapus-baris");


        // Ketika barang dipilih
        select.addEventListener(
            "change",
            function () {

                updateInformasiBarang(baris);

            }
        );


        // Ketika jumlah berubah
        inputJumlah.addEventListener(
            "input",
            function () {

                hitungKonversi(baris);

            }
        );


        // Hapus baris
        tombolHapus.addEventListener(
            "click",
            function () {

                const semuaBaris =
                    detailBarang.querySelectorAll(
                        ".baris-barang"
                    );


                if (semuaBaris.length > 1) {

                    baris.remove();

                    updateNomorBaris();

                }

            }
        );

    }



    // =====================================================
    // BARIS PERTAMA
    // =====================================================

    const barisPertama =
        detailBarang.querySelector(".baris-barang");

    pasangEventBaris(
        barisPertama
    );



    // =====================================================
    // TAMBAH BARANG
    // =====================================================

    btnTambahBarang.addEventListener(
        "click",
        function () {

            const barisPertama =
                detailBarang.querySelector(".baris-barang");

            const barisBaru =
                barisPertama.cloneNode(true);


            // Reset select
            const select =
                barisBaru.querySelector(".barang-select");

            select.value = "";


            // Reset jumlah
            const jumlah =
                barisBaru.querySelector(".jumlah-besar");

            jumlah.value = "";


            // Reset informasi
            barisBaru.querySelector(
                ".satuan-besar"
            ).textContent = "-";


            barisBaru.querySelector(
                ".isi-satuan"
            ).textContent = "-";


            barisBaru.querySelector(
                ".stok-sekarang"
            ).textContent = "-";


            barisBaru.querySelector(
                ".label-satuan"
            ).textContent = "-";


            barisBaru.querySelector(
                ".hasil-konversi"
            ).textContent = "-";


            detailBarang.appendChild(
                barisBaru
            );


            pasangEventBaris(
                barisBaru
            );


            updateNomorBaris();

        }
    );



    // =====================================================
    // CEK BARANG DUPLIKAT SEBELUM SUBMIT
    // =====================================================

    formBarangMasuk.addEventListener(
        "submit",
        function (event) {

            const selects =
                detailBarang.querySelectorAll(
                    ".barang-select"
                );


            const barangTerpilih = [];


            for (const select of selects) {

                if (!select.value) {

                    event.preventDefault();

                    alert(
                        "Masih ada barang yang belum dipilih."
                    );

                    return;

                }


                if (
                    barangTerpilih.includes(
                        select.value
                    )
                ) {

                    event.preventDefault();

                    alert(
                        "Barang yang sama tidak boleh dimasukkan dua kali dalam satu transaksi."
                    );

                    return;

                }


                barangTerpilih.push(
                    select.value
                );

            }


            const yakin = confirm(
                "Yakin ingin menyimpan transaksi Barang Masuk?\n\n" +
                "Stok barang akan langsung bertambah."
            );


            if (!yakin) {

                event.preventDefault();

            }

        }
    );


    updateNomorBaris();

});

</script>

{% endblock %}