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

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

{% block page_title %}
Import Barang Keluar
{% 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">
            Import Barang Keluar dari Excel
        </h3>

        <p class="text-muted mb-0">
            Catat transaksi penjualan beberapa barang sekaligus
            menggunakan file Excel.
        </p>

    </div>


    <a
        href="/kasir/barang-keluar"
        class="btn btn-outline-secondary"
    >
        ← Kembali ke Barang Keluar
    </a>

</div>


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

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

    <h6 class="fw-bold">
        Petunjuk Import
    </h6>

    <div>
        File Excel hanya perlu berisi
        <strong>kode_barang</strong>,
        <strong>jenis_satuan</strong>, dan
        <strong>jumlah</strong>.
    </div>

    <div class="mt-2">
        Nilai <strong>jenis_satuan</strong> hanya boleh
        <strong>besar</strong> atau <strong>kecil</strong>.
    </div>

    <div class="mt-2">
        Harga, konversi satuan, dan stok akan diambil otomatis
        dari <strong>Master Barang</strong>.
    </div>

    <div class="mt-2">
        Pada tahap preview,
        <strong>stok belum berkurang</strong>.
    </div>

</div>


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

<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 & File Excel
        </h5>

    </div>


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

        <form
            method="POST"
            action="/kasir/barang-keluar/import"
            enctype="multipart/form-data"
        >

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

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


                <!-- TANGGAL -->

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

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

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

                </div>


                <!-- PELANGGAN -->

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

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

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

                </div>


                <!-- BAYAR -->

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

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

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

                </div>


                <!-- KETERANGAN -->

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

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

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

                </div>

            </div>


            <hr>


            <!-- ========================================== -->
            <!-- FILE EXCEL -->
            <!-- ========================================== -->

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

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

                    <label class="form-label fw-semibold">
                        File Excel Barang Keluar
                    </label>

                    <input
                        type="file"
                        name="file_excel"
                        class="form-control"
                        accept=".xlsx"
                        required
                    >

                    <small class="text-muted">
                        Gunakan Template Barang Keluar Kasir (.xlsx).
                    </small>

                </div>


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

                    <button
                        type="submit"
                        class="btn btn-success"
                    >
                        Upload & Preview
                    </button>

                </div>

            </div>

        </form>

    </div>

</div>



<!-- ====================================================== -->
<!-- PREVIEW -->
<!-- ====================================================== -->

{% if preview is not none %}

<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">
                    Preview Barang Keluar
                </h5>

                <small class="text-muted">
                    Periksa barang, harga, konversi, dan stok
                    sebelum transaksi disimpan.
                </small>

            </div>


            <span class="badge bg-secondary">

                {{ preview|length }} Barang

            </span>

        </div>

    </div>


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


        <!-- ============================================== -->
        <!-- STATUS PREVIEW -->
        <!-- ============================================== -->

        <div class="p-3">

            {% if ada_error %}

                <div class="alert alert-danger mb-0">

                    <strong>
                        Transaksi belum dapat disimpan.
                    </strong>

                    <br>

                    Periksa data yang berstatus Error atau
                    pastikan uang pembayaran mencukupi.

                    <strong>
                        Stok belum berubah.
                    </strong>

                </div>

            {% else %}

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

                    <strong>
                        Semua data valid.
                    </strong>

                    <br>

                    Harga, konversi, subtotal, dan perubahan stok
                    telah dihitung.

                    <strong>
                        Data masih berupa preview dan stok belum berubah.
                    </strong>

                </div>

            {% endif %}

        </div>


        <!-- ============================================== -->
        <!-- TABLE -->
        <!-- ============================================== -->

        <div class="table-responsive">

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

                <thead class="table-light">

                    <tr>

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

                        <th>
                            Kode
                        </th>

                        <th>
                            Nama Barang
                        </th>

                        <th>
                            Satuan
                        </th>

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

                        <th class="text-center">
                            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>

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

                        <th>
                            Keterangan
                        </th>

                    </tr>

                </thead>


                <tbody>

                    {% for item in preview %}

                    <tr
                        {% if item.status == "Error" %}
                            class="table-danger"
                        {% endif %}
                    >

                        <!-- BARIS -->

                        <td class="text-center">
                            {{ item.nomor_baris }}
                        </td>


                        <!-- KODE -->

                        <td>

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

                        </td>


                        <!-- NAMA -->

                        <td>
                            {{ item.nama_barang }}
                        </td>


                        <!-- SATUAN -->

                        <td>

                            {% if item.status == "Valid" %}

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

                                    <span class="badge bg-success">
                                        {{ item.nama_satuan }}
                                    </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.nama_satuan }}
                                    </span>

                                {% endif %}

                            {% else %}

                                -

                            {% endif %}

                        </td>


                        <!-- JUMLAH -->

                        <td class="text-center">

                            {% if item.jumlah > 0 %}

                                <strong>
                                    {{ item.jumlah }}
                                    {{ item.nama_satuan }}
                                </strong>

                            {% else %}

                                -

                            {% endif %}

                        </td>


                        <!-- JUMLAH KECIL -->

                        <td class="text-center">

                            {% if item.jumlah_kecil > 0 %}

                                <strong class="text-success">

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

                                </strong>

                            {% else %}

                                -

                            {% endif %}

                        </td>


                        <!-- HARGA -->

                        <td class="text-end">

                            {% if item.harga > 0 %}

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

                            {% else %}

                                Rp 0

                            {% endif %}

                        </td>


                        <!-- SUBTOTAL -->

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

                            {% if item.subtotal > 0 %}

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

                            {% else %}

                                Rp 0

                            {% endif %}

                        </td>


                        <!-- STOK SEBELUM -->

                        <td class="text-center">

                            {% if item.nama_barang != "-" %}

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

                            {% else %}

                                -

                            {% endif %}

                        </td>


                        <!-- STOK SESUDAH -->

                        <td class="text-center">

                            {% if item.status == "Valid" %}

                                <strong>

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

                                </strong>

                            {% else %}

                                -

                            {% endif %}

                        </td>


                        <!-- STATUS -->

                        <td class="text-center">

                            {% if item.status == "Valid" %}

                                <span class="badge bg-success">
                                    Valid
                                </span>

                            {% else %}

                                <span class="badge bg-danger">
                                    Error
                                </span>

                            {% endif %}

                        </td>


                        <!-- ERROR -->

                        <td>

                            {% if item.error %}

                                <small class="text-danger fw-semibold">
                                    {{ item.error }}
                                </small>

                            {% else %}

                                <small class="text-success fw-semibold">
                                    Siap disimpan
                                </small>

                            {% endif %}

                        </td>

                    </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>

    </div>

</div>



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

<div class="row g-4">


    <!-- TOTAL -->

    <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 Transaksi
                </div>

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

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

                </div>

            </div>

        </div>

    </div>


    <!-- BAYAR -->

    <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(bayar|float).replace(",", ".") }}

                </div>

            </div>

        </div>

    </div>


    <!-- KEMBALIAN -->

    <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(kembalian|default(0)).replace(",", ".") }}

                </div>

            </div>

        </div>

    </div>

</div>



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

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

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


        {% if ada_error %}

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

                <div>

                    <strong class="text-danger">
                        Transaksi belum dapat disimpan.
                    </strong>

                    <br>

                    <small class="text-muted">
                        Perbaiki file atau pembayaran lalu upload kembali.
                    </small>

                </div>


                <a
                    href="/kasir/barang-keluar/import"
                    class="btn btn-outline-danger"
                >
                    Upload Ulang
                </a>

            </div>


        {% else %}

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

                <div>

                    <strong class="text-success">
                        {{ preview|length }} jenis barang siap disimpan.
                    </strong>

                    <br>

                    <small class="text-muted">
                        Setelah disimpan, stok barang akan berkurang
                        sesuai transaksi.
                    </small>

                </div>


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

                    <input
                        type="hidden"
                        name="nama_file"
                        value="{{ nama_file }}"
                    >

                    <input
                        type="hidden"
                        name="tanggal"
                        value="{{ tanggal }}"
                    >

                    <input
                        type="hidden"
                        name="nama_pelanggan"
                        value="{{ nama_pelanggan }}"
                    >

                    <input
                        type="hidden"
                        name="bayar"
                        value="{{ bayar }}"
                    >

                    <input
                        type="hidden"
                        name="keterangan"
                        value="{{ keterangan }}"
                    >


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

                </form>

            </div>

        {% endif %}


    </div>

</div>


{% endif %}


{% endblock %}


{% block script %}

<script>

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

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


        if (formSimpanImport) {

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

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


                    if (!konfirmasi) {

                        event.preventDefault();

                    }

                }
            );

        }

    }
);

</script>

{% endblock %}