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

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

{% block page_title %}
Barang Keluar
{% endblock %}


{% block content %}

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

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

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

    <a
        href="/kasir/barang-keluar/import"
        class="btn btn-outline-success"
    >
        Import Excel
    </a>
</div>


<form
    method="POST"
    action="/kasir/barang-keluar/simpan"
    id="formTransaksi"
>


<!-- ====================================================== -->
<!-- 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">

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

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

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

            </div>


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

                <label class="form-label fw-semibold">
                    Nama Pelanggan
                </label>

                <input
                    type="text"
                    name="nama_pelanggan"
                    class="form-control"
                    placeholder="Opsional"
                >

            </div>


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

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

                <input
                    type="text"
                    name="keterangan"
                    class="form-control"
                    placeholder="Opsional"
                >

            </div>

        </div>

    </div>

</div>



<!-- ====================================================== -->
<!-- DAFTAR 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">
                    Daftar Barang
                </h5>

                <small class="text-muted">
                    Pilih barang, satuan, dan jumlah penjualan.
                </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"
                id="tabelBarang"
            >

                <thead class="table-light">

                    <tr>

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

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

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

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

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

                        <th style="min-width: 170px;">
                            Stok
                        </th>

                        <th style="width: 80px;">
                            Aksi
                        </th>

                    </tr>

                </thead>


                <tbody id="bodyBarang">

                    <tr class="baris-barang">

                        <td>

                            <select
                                name="barang_id[]"
                                class="form-select select-barang"
                                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 }}"

                                    data-harga-besar="{{ item.harga_jual_besar }}"

                                    data-harga-kecil="{{ item.harga_jual_kecil }}"
                                >
                                    {{ item.kode_barang }}
                                    -
                                    {{ item.nama_barang }}
                                </option>

                                {% endfor %}

                            </select>

                        </td>


                        <td>

                            <select
                                name="jenis_satuan[]"
                                class="form-select select-satuan"
                                required
                            >

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

                            </select>

                        </td>


                        <td>

                            <input
                                type="number"
                                name="jumlah[]"
                                class="form-control input-jumlah"
                                min="1"
                                value="1"
                                required
                            >

                        </td>


                        <td>

                            <div class="harga-display">
                                Rp 0
                            </div>

                        </td>


                        <td>

                            <div
                                class="subtotal-display fw-bold text-success"
                                data-subtotal="0"
                            >
                                Rp 0
                            </div>

                        </td>


                        <td>

                            <div class="stok-display text-muted">
                                -
                            </div>

                        </td>


                        <td class="text-center">

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

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>



<!-- ====================================================== -->
<!-- PEMBAYARAN -->
<!-- ====================================================== -->

<div class="row g-4">


    <div class="col-lg-7">

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

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

                <h5 class="fw-bold mb-3">
                    Pembayaran
                </h5>


                <div class="mb-3">

                    <label class="form-label fw-semibold">
                        Uang Bayar
                    </label>

                    <input
                        type="number"
                        name="bayar"
                        id="inputBayar"
                        class="form-control"
                        min="0"
                        step="1"
                        value="0"
                        required
                    >

                </div>


                <div class="alert alert-light border mb-0">

                    <div class="d-flex justify-content-between mb-2">

                        <span>
                            Total
                        </span>

                        <strong
                            class="text-success"
                            id="totalDisplay"
                        >
                            Rp 0
                        </strong>

                    </div>


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

                        <span>
                            Kembalian
                        </span>

                        <strong id="kembalianDisplay">
                            Rp 0
                        </strong>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <div class="col-lg-5">

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

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

                <h5 class="fw-bold mb-3">
                    Ringkasan
                </h5>


                <div class="mb-3">

                    <div class="text-muted">
                        Jumlah Jenis Barang
                    </div>

                    <div
                        class="fs-4 fw-bold text-success"
                        id="jumlahJenisDisplay"
                    >
                        1
                    </div>

                </div>


                <div class="d-grid">

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

                </div>


                <small class="text-muted d-block mt-2">
                    Pastikan barang, satuan, jumlah,
                    dan pembayaran sudah benar.
                </small>

            </div>

        </div>

    </div>

</div>


</form>


{% endblock %}



{% block script %}

<script>

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

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

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

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

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


        // ==================================================
        // FORMAT RUPIAH
        // ==================================================
        function formatRupiah(nilai) {

            return "Rp " +
                Number(nilai).toLocaleString(
                    "id-ID"
                );

        }


        // ==================================================
        // UPDATE SATU BARIS
        // ==================================================
        function updateBaris(baris) {

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

            const selectSatuan =
                baris.querySelector(
                    ".select-satuan"
                );

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

            const hargaDisplay =
                baris.querySelector(
                    ".harga-display"
                );

            const subtotalDisplay =
                baris.querySelector(
                    ".subtotal-display"
                );

            const stokDisplay =
                baris.querySelector(
                    ".stok-display"
                );


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


            if (
                !selectBarang.value
                ||
                !option
            ) {

                selectSatuan.innerHTML = `
                    <option value="">
                        -- Pilih --
                    </option>
                `;

                hargaDisplay.textContent =
                    "Rp 0";

                subtotalDisplay.textContent =
                    "Rp 0";

                subtotalDisplay.dataset.subtotal =
                    0;

                stokDisplay.textContent =
                    "-";

                hitungTotal();

                return;
            }


            const satuanBesar =
                option.dataset.satuanBesar;

            const satuanKecil =
                option.dataset.satuanKecil;

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

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

            const hargaBesar =
                parseFloat(
                    option.dataset.hargaBesar || 0
                );

            const hargaKecil =
                parseFloat(
                    option.dataset.hargaKecil || 0
                );


            const satuanSebelumnya =
                selectSatuan.value;


            selectSatuan.innerHTML = `

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

                <option value="besar">
                    ${satuanBesar}
                </option>

                <option value="kecil">
                    ${satuanKecil}
                </option>

            `;


            if (
                satuanSebelumnya === "besar"
                ||
                satuanSebelumnya === "kecil"
            ) {

                selectSatuan.value =
                    satuanSebelumnya;

            }


            const stokBesar =
                isi > 0
                ? Math.floor(
                    stok / isi
                )
                : 0;

            const sisaKecil =
                isi > 0
                ? stok % isi
                : stok;


            stokDisplay.innerHTML = `

                ${stok}
                ${satuanKecil}

                <br>

                <small class="text-muted">
                    ${stokBesar}
                    ${satuanBesar}
                    +
                    ${sisaKecil}
                    ${satuanKecil}
                </small>

            `;


            let harga = 0;


            if (
                selectSatuan.value === "besar"
            ) {

                harga =
                    hargaBesar;

            }


            if (
                selectSatuan.value === "kecil"
            ) {

                harga =
                    hargaKecil;

            }


            const jumlah =
                parseInt(
                    inputJumlah.value || 0
                );


            const subtotal =
                harga
                * jumlah;


            hargaDisplay.textContent =
                formatRupiah(
                    harga
                );


            subtotalDisplay.textContent =
                formatRupiah(
                    subtotal
                );


            subtotalDisplay.dataset.subtotal =
                subtotal;


            hitungTotal();

        }


        // ==================================================
        // HITUNG TOTAL
        // ==================================================
        function hitungTotal() {

            let total = 0;


            document
                .querySelectorAll(
                    ".subtotal-display"
                )
                .forEach(
                    function (item) {

                        total +=
                            parseFloat(
                                item.dataset.subtotal || 0
                            );

                    }
                );


            document.getElementById(
                "totalDisplay"
            ).textContent =
                formatRupiah(
                    total
                );


            const bayar =
                parseFloat(
                    inputBayar.value || 0
                );


            let kembalian =
                bayar - total;


            if (
                kembalian < 0
            ) {

                kembalian = 0;

            }


            document.getElementById(
                "kembalianDisplay"
            ).textContent =
                formatRupiah(
                    kembalian
                );


            document.getElementById(
                "jumlahJenisDisplay"
            ).textContent =
                document.querySelectorAll(
                    ".baris-barang"
                ).length;

        }


        // ==================================================
        // EVENT SATU BARIS
        // ==================================================
        function pasangEvent(baris) {

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

            const selectSatuan =
                baris.querySelector(
                    ".select-satuan"
                );

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

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


            selectBarang.addEventListener(
                "change",
                function () {

                    selectSatuan.value = "";

                    updateBaris(
                        baris
                    );

                }
            );


            selectSatuan.addEventListener(
                "change",
                function () {

                    updateBaris(
                        baris
                    );

                }
            );


            inputJumlah.addEventListener(
                "input",
                function () {

                    updateBaris(
                        baris
                    );

                }
            );


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

                    baris.remove();

                    aturTombolHapus();

                    hitungTotal();

                }
            );

        }


        // ==================================================
        // ATUR TOMBOL HAPUS
        // ==================================================
        function aturTombolHapus() {

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


            semuaBaris.forEach(
                function (baris) {

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


                    tombol.disabled =
                        semuaBaris.length <= 1;

                }
            );

        }


        // ==================================================
        // TAMBAH BARANG
        // ==================================================
        btnTambahBarang.addEventListener(
            "click",
            function () {

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


                const barisBaru =
                    barisPertama.cloneNode(
                        true
                    );


                barisBaru.querySelector(
                    ".select-barang"
                ).value = "";


                barisBaru.querySelector(
                    ".select-satuan"
                ).innerHTML = `
                    <option value="">
                        -- Pilih --
                    </option>
                `;


                barisBaru.querySelector(
                    ".input-jumlah"
                ).value = 1;


                barisBaru.querySelector(
                    ".harga-display"
                ).textContent =
                    "Rp 0";


                const subtotalDisplay =
                    barisBaru.querySelector(
                        ".subtotal-display"
                    );


                subtotalDisplay.textContent =
                    "Rp 0";


                subtotalDisplay.dataset.subtotal =
                    0;


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


                bodyBarang.appendChild(
                    barisBaru
                );


                pasangEvent(
                    barisBaru
                );


                aturTombolHapus();

                hitungTotal();

            }
        );


        // ==================================================
        // EVENT BARIS AWAL
        // ==================================================
        document
            .querySelectorAll(
                ".baris-barang"
            )
            .forEach(
                function (baris) {

                    pasangEvent(
                        baris
                    );

                }
            );


        // ==================================================
        // EVENT PEMBAYARAN
        // ==================================================
        inputBayar.addEventListener(
            "input",
            hitungTotal
        );


        // ==================================================
        // KONFIRMASI SIMPAN TRANSAKSI
        // ==================================================
        formTransaksi.addEventListener(
            "submit",
            function (event) {

                const konfirmasi =
                    confirm(
                        "Simpan transaksi penjualan ini?\n\n" +
                        "Setelah disimpan, stok barang akan berkurang."
                    );


                if (!konfirmasi) {

                    event.preventDefault();

                }

            }
        );


        // ==================================================
        // INISIALISASI
        // ==================================================
        aturTombolHapus();

        hitungTotal();

    }
);

</script>

{% endblock %}