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

{% block title %}
Detail Penjualan - Inventori ANN
{% endblock %}

{% block page_title %}
Detail Penjualan
{% 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">
            Detail Transaksi Penjualan
        </h3>

        <p class="text-muted mb-0">
            Informasi lengkap transaksi Barang Keluar.
        </p>

    </div>


    <a
        href="/kasir/histori"
        class="btn btn-outline-secondary"
    >
        ← Kembali ke Histori
    </a>

</div>



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


            <!-- KODE -->

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

                <div class="text-muted mb-1">
                    Kode Transaksi
                </div>

                <div class="fw-bold text-success fs-5">

                    {{ transaksi.kode_transaksi }}

                </div>

            </div>


            <!-- TANGGAL -->

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

                <div class="text-muted mb-1">
                    Tanggal
                </div>

                <div class="fw-semibold">

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

                </div>

            </div>


            <!-- KASIR -->

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

                <div class="text-muted mb-1">
                    Kasir
                </div>

                <div class="fw-semibold">

                    {{ transaksi.nama_petugas }}

                </div>

            </div>


            <!-- PELANGGAN -->

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

                <div class="text-muted mb-1">
                    Nama Pelanggan
                </div>

                <div class="fw-semibold">

                    {% if transaksi.nama_pelanggan %}

                        {{ transaksi.nama_pelanggan }}

                    {% else %}

                        -

                    {% endif %}

                </div>

            </div>


            <!-- KETERANGAN -->

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

                <div class="text-muted mb-1">
                    Keterangan
                </div>

                <div class="fw-semibold">

                    {% if transaksi.keterangan %}

                        {{ transaksi.keterangan }}

                    {% else %}

                        -

                    {% endif %}

                </div>

            </div>


        </div>

    </div>

</div>



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

<div class="row g-4 mb-4">


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

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

            <div class="card-body">

                <div class="text-muted mb-2">
                    Total Penjualan
                </div>

                <div class="fs-4 fw-bold text-success">

                    Rp
                    {{ "{:,.0f}".format(transaksi.total).replace(",", ".") }}

                </div>

            </div>

        </div>

    </div>



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

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

            <div class="card-body">

                <div class="text-muted mb-2">
                    Uang Bayar
                </div>

                <div class="fs-4 fw-bold">

                    Rp
                    {{ "{:,.0f}".format(transaksi.bayar).replace(",", ".") }}

                </div>

            </div>

        </div>

    </div>



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

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

            <div class="card-body">

                <div class="text-muted mb-2">
                    Kembalian
                </div>

                <div class="fs-4 fw-bold">

                    Rp
                    {{ "{:,.0f}".format(transaksi.kembalian).replace(",", ".") }}

                </div>

            </div>

        </div>

    </div>


</div>



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

<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">
                    Detail Barang Terjual
                </h5>

                <small class="text-muted">
                    Menampilkan jumlah, harga, dan perubahan stok.
                </small>

            </div>


            <span class="badge bg-secondary">

                {{ detail|length }} Jenis Barang

            </span>

        </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">
                            No
                        </th>

                        <th>
                            Kode
                        </th>

                        <th>
                            Nama Barang
                        </th>

                        <th>
                            Satuan
                        </th>

                        <th class="text-center">
                            Jumlah
                        </th>

                        <th class="text-center">
                            Jumlah Unit Kecil
                        </th>

                        <th class="text-end">
                            Harga
                        </th>

                        <th class="text-end">
                            Subtotal
                        </th>

                        <th class="text-center">
                            Stok Sebelum
                        </th>

                        <th class="text-center">
                            Stok Sesudah
                        </th>

                    </tr>

                </thead>


                <tbody>

                    {% if detail %}

                        {% for item in detail %}

                        <tr>

                            <td class="text-center">

                                {{ loop.index }}

                            </td>


                            <td>

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

                            </td>


                            <td>

                                {{ item.nama_barang }}

                            </td>


                            <td>

                                {% if item.jenis_satuan == "besar" %}

                                    <span class="badge bg-success">
                                        {{ item.satuan_besar }}
                                    </span>

                                    <div class="small text-muted mt-1">

                                        1 {{ item.satuan_besar }}
                                        =
                                        {{ item.isi_per_satuan }}
                                        {{ item.satuan_kecil }}

                                    </div>

                                {% else %}

                                    <span class="badge bg-secondary">
                                        {{ item.satuan_kecil }}
                                    </span>

                                {% endif %}

                            </td>


                            <td class="text-center">

                                <strong>

                                    {{ item.jumlah }}
                                    {{ item.nama_satuan }}

                                </strong>

                            </td>


                            <td class="text-center">

                                <strong class="text-success">

                                    {{ item.jumlah_kecil }}
                                    {{ item.satuan_kecil }}

                                </strong>

                            </td>


                            <td class="text-end">

                                Rp
                                {{ "{:,.0f}".format(item.harga).replace(",", ".") }}

                            </td>


                            <td class="text-end fw-bold">

                                Rp
                                {{ "{:,.0f}".format(item.subtotal).replace(",", ".") }}

                            </td>


                            <td class="text-center">

                                {{ item.stok_sebelum }}
                                {{ item.satuan_kecil }}

                            </td>


                            <td class="text-center">

                                <strong>

                                    {{ item.stok_sesudah }}
                                    {{ item.satuan_kecil }}

                                </strong>

                            </td>

                        </tr>

                        {% endfor %}


                    {% else %}

                        <tr>

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

                                Tidak ada detail barang pada transaksi ini.

                            </td>

                        </tr>

                    {% endif %}

                </tbody>

            </table>

        </div>

    </div>

</div>



<!-- ====================================================== -->
<!-- INFORMASI DATA ANN -->
<!-- ====================================================== -->

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

    <strong>
        Data penjualan siap digunakan sebagai histori permintaan.
    </strong>

    Sistem menyimpan seluruh jumlah penjualan dalam
    <strong>jumlah_kecil</strong> sehingga transaksi satuan besar
    maupun satuan kecil dapat dianalisis dengan ukuran yang konsisten
    untuk setiap barang.

</div>


{% endblock %}