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

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


{% block page_title %}
Tambah Barang
{% endblock %}


{% block content %}

<div class="mb-4">

    <h3 class="fw-bold text-success mb-1">
        Tambah Data Barang
    </h3>

    <p class="text-muted mb-0">
        Masukkan data master barang yang akan digunakan oleh Gudang dan Kasir.
    </p>

</div>


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

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

        <form
            method="POST"
            action="/admin/barang/tambah"
        >


            <!-- ========================= -->
            <!-- IDENTITAS BARANG -->
            <!-- ========================= -->

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


            <div class="row g-3">

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

                    <label class="form-label">
                        Kode Barang
                    </label>

                    <input
                        type="text"
                        name="kode_barang"
                        class="form-control"
                        placeholder="Contoh: BRG001"
                        required
                    >

                    <small class="text-muted">
                        Kode harus unik untuk setiap barang.
                    </small>

                </div>


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

                    <label class="form-label">
                        Nama Barang
                    </label>

                    <input
                        type="text"
                        name="nama_barang"
                        class="form-control"
                        placeholder="Contoh: Aqua 600 ml"
                        required
                    >

                </div>


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

                    <label class="form-label">
                        Kategori
                    </label>

                    <input
                        type="text"
                        name="kategori"
                        class="form-control"
                        placeholder="Contoh: Minuman"
                        required
                    >

                </div>

            </div>


            <hr class="my-4">


            <!-- ========================= -->
            <!-- SATUAN BARANG -->
            <!-- ========================= -->

            <h5 class="fw-bold mb-2">
                Satuan Barang
            </h5>

            <p class="text-muted">
                Satuan besar digunakan saat barang masuk dari Gudang,
                sedangkan Kasir dapat menjual menggunakan satuan besar
                maupun satuan kecil.
            </p>


            <div class="row g-3">

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

                    <label class="form-label">
                        Satuan Besar
                    </label>

                    <select
                        name="satuan_besar"
                        class="form-select"
                        required
                    >

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

                        <option value="Karung">
                            Karung
                        </option>

                        <option value="Karton">
                            Karton
                        </option>

                        <option value="Pak">
                            Pak
                        </option>

                        <option value="Bal">
                            Bal
                        </option>

                        <option value="Dus">
                            Dus
                        </option>

                    </select>

                </div>


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

                    <label class="form-label">
                        Satuan Kecil
                    </label>

                    <select
                        name="satuan_kecil"
                        class="form-select"
                        required
                    >

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

                        <option value="Box">
                            Box
                        </option>

                        <option value="Pak">
                            Pak
                        </option>

                        <option value="Pcs">
                            Pcs
                        </option>

                        <option value="Bungkus">
                            Bungkus
                        </option>

                        <option value="Kaleng">
                            Kaleng
                        </option>

                        <option value="Kg">
                            Kg
                        </option>

                        <option value="Renceng">
                            Renceng
                        </option>

                        <option value="Botol">
                            Botol
                        </option>

                    </select>

                </div>


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

                    <label class="form-label">
                        Isi per Satuan Besar
                    </label>

                    <input
                        type="number"
                        name="isi_per_satuan"
                        class="form-control"
                        min="1"
                        placeholder="Contoh: 24"
                        required
                    >

                    <small class="text-muted">
                        Contoh: 1 Dus = 24 Botol.
                    </small>

                </div>

            </div>


            <div class="alert alert-success mt-4 mb-0">

                <strong>Contoh:</strong>

                jika satuan besar adalah
                <strong>Dus</strong>,

                satuan kecil adalah
                <strong>Botol</strong>,

                dan isi per satuan adalah
                <strong>24</strong>,

                maka sistem memahami:

                <strong>1 Dus = 24 Botol.</strong>

            </div>


            <hr class="my-4">


            <!-- ========================= -->
            <!-- HARGA BARANG -->
            <!-- ========================= -->

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


            <div class="row g-3">

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

                    <label class="form-label">
                        Harga Modal
                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            Rp
                        </span>

                        <input
                            type="number"
                            name="harga_modal"
                            class="form-control"
                            min="0"
                            step="1"
                            placeholder="70000"
                            required
                        >

                    </div>

                    <small class="text-muted">
                        Harga modal per satuan besar.
                    </small>

                </div>


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

                    <label class="form-label">
                        Harga Jual Satuan Besar
                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            Rp
                        </span>

                        <input
                            type="number"
                            name="harga_jual_besar"
                            class="form-control"
                            min="0"
                            step="1"
                            placeholder="85000"
                            required
                        >

                    </div>

                </div>


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

                    <label class="form-label">
                        Harga Jual Satuan Kecil
                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            Rp
                        </span>

                        <input
                            type="number"
                            name="harga_jual_kecil"
                            class="form-control"
                            min="0"
                            step="1"
                            placeholder="4000"
                            required
                        >

                    </div>

                </div>

            </div>


            <hr class="my-4">


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

            <div class="alert alert-warning">

                <strong>Catatan Stok:</strong>

                stok awal barang otomatis

                <strong>0</strong>.

                Penambahan stok dilakukan melalui
                <strong>transaksi Barang Masuk oleh Gudang</strong>,

                agar setiap perubahan stok memiliki histori transaksi
                dan dapat digunakan sebagai dataset penelitian ANN.

            </div>


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

            <div class="d-flex justify-content-end gap-2">

                <a
                    href="/admin/barang"
                    class="btn btn-secondary"
                >
                    Kembali
                </a>

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

            </div>

        </form>

    </div>

</div>

{% endblock %}