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

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

{% block page_title %}
Histori 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">
            Histori Barang Masuk
        </h3>

        <p class="text-muted mb-0">
            Lihat seluruh transaksi penerimaan barang Toko Grosir Cucu.
        </p>
    </div>

    <a
        href="/gudang/barang-masuk"
        class="btn btn-success"
    >
        + Transaksi Baru
    </a>

</div>


<!-- ====================================================== -->
<!-- FILTER -->
<!-- ====================================================== -->

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

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

        <form
            method="GET"
            action="/gudang/histori"
        >

            <div class="row g-3 align-items-end">

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

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

                    <input
                        type="text"
                        name="cari"
                        class="form-control"
                        value="{{ cari }}"
                        placeholder="Kode transaksi, faktur, atau keterangan..."
                    >

                </div>


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

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

                    <input
                        type="date"
                        name="tanggal_awal"
                        class="form-control"
                        value="{{ tanggal_awal }}"
                    >

                </div>


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

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

                    <input
                        type="date"
                        name="tanggal_akhir"
                        class="form-control"
                        value="{{ tanggal_akhir }}"
                    >

                </div>


                <div class="col-md-2 d-grid">

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

                </div>

            </div>


            {% if cari or tanggal_awal or tanggal_akhir %}

            <div class="mt-3">

                <a
                    href="/gudang/histori"
                    class="btn btn-outline-secondary btn-sm"
                >
                    Reset Filter
                </a>

            </div>

            {% endif %}

        </form>

    </div>

</div>


<!-- ====================================================== -->
<!-- TABEL HISTORI -->
<!-- ====================================================== -->

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

    <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">
                    Data Transaksi Masuk
                </h5>

                <small class="text-muted">
                    Total transaksi ditemukan: {{ histori|length }}
                </small>

            </div>

        </div>

    </div>


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

        <div class="table-responsive">

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

                <thead class="table-light">

                    <tr>

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

                        <th>
                            Kode Transaksi
                        </th>

                        <th>
                            Tanggal
                        </th>

                        <th>
                            Nomor Faktur
                        </th>

                        <th>
                            Keterangan
                        </th>

                        <th>
                            Petugas
                        </th>

                        <th class="text-center">
                            Jenis Barang
                        </th>

                        <th class="text-center">
                            Total Satuan Kecil
                        </th>

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

                    </tr>

                </thead>


                <tbody>

                    {% if histori %}

                        {% for item in histori %}

                        <tr>

                            <td class="text-center">
                                {{ loop.index }}
                            </td>


                            <td>

                                <strong class="text-success">
                                    {{ item.kode_transaksi }}
                                </strong>

                            </td>


                            <td>

                                {{ item.tanggal.strftime('%d/%m/%Y %H:%M') }}

                            </td>


                            <td>

                                {% if item.nomor_faktur %}

                                    {{ item.nomor_faktur }}

                                {% else %}

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

                                {% endif %}

                            </td>


                            <td>

                                {% if item.keterangan %}

                                    {{ item.keterangan }}

                                {% else %}

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

                                {% endif %}

                            </td>


                            <td>

                                {{ item.nama_petugas }}

                            </td>


                            <td class="text-center">

                                <span class="badge bg-success">

                                    {{ item.jumlah_jenis_barang }}
                                    Jenis

                                </span>

                            </td>


                            <td class="text-center">

                                <strong>
                                    {{ item.total_jumlah_kecil }}
                                </strong>

                            </td>


                            <td class="text-center">

                                <a
                                    href="/gudang/histori/{{ item.id }}"
                                    class="btn btn-outline-success btn-sm"
                                >
                                    Detail
                                </a>

                            </td>

                        </tr>

                        {% endfor %}


                    {% else %}

                        <tr>

                            <td
                                colspan="9"
                                class="text-center py-5"
                            >

                                <div class="text-muted">

                                    <div class="fs-5 mb-2">
                                        Belum ada transaksi barang masuk.
                                    </div>

                                    <small>
                                        Transaksi baru akan muncul setelah
                                        petugas Gudang menyimpan Barang Masuk.
                                    </small>

                                </div>

                            </td>

                        </tr>

                    {% endif %}

                </tbody>

            </table>

        </div>

    </div>

</div>


<!-- ====================================================== -->
<!-- CATATAN -->
<!-- ====================================================== -->

<div class="alert alert-light border shadow-sm mt-4">

    <strong class="text-success">
        Catatan:
    </strong>

    Total Satuan Kecil merupakan penjumlahan hasil konversi seluruh
    barang dalam transaksi.

    Detail satuan setiap barang tetap disimpan secara terpisah di
    sistem.

</div>


{% endblock %}