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

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


{% block page_title %}
Import Master Barang
{% endblock %}


{% block content %}

<!-- ===================================================== -->
<!-- JUDUL HALAMAN -->
<!-- ===================================================== -->

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

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

        <p class="text-muted mb-0">
            Tambahkan banyak data barang sekaligus menggunakan file Excel.
        </p>
    </div>

    <a
        href="/admin/barang"
        class="btn btn-outline-secondary"
    >
        ← Kembali ke Master Barang
    </a>

</div>


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

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

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

    <div>
        Gunakan template Excel Master Barang yang telah disediakan.
        Data stok tidak perlu dimasukkan karena setiap barang baru
        otomatis memiliki stok awal <strong>0</strong>.
    </div>

    <div class="mt-2">
        Stok nantinya hanya berubah melalui transaksi
        <strong>Barang Masuk Gudang</strong> dan
        <strong>Barang Keluar Kasir</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">
            Upload File Excel
        </h5>

    </div>

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

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

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

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

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

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

                    <small class="text-muted">
                        Format yang diperbolehkan hanya .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 DATA -->
<!-- ===================================================== -->

{% if preview is not none %}

<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">
                    Preview Data Excel
                </h5>

                <small class="text-muted">
                    Periksa hasil validasi sebelum data disimpan.
                </small>

            </div>

            <span class="badge bg-secondary">
                {{ preview|length }} Baris
            </span>

        </div>

    </div>


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

        <!-- ============================================= -->
        <!-- STATUS VALIDASI -->
        <!-- ============================================= -->

        <div class="p-3">

            {% if ada_error %}

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

                    <strong>
                        Ditemukan data yang belum valid.
                    </strong>

                    <br>

                    Periksa baris berwarna merah dan keterangan
                    kesalahan pada tabel di bawah.

                    Data belum disimpan ke database.

                </div>

            {% else %}

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

                    <strong>
                        Semua data berhasil divalidasi.
                    </strong>

                    <br>

                    File siap untuk disimpan ke Master Barang.

                    Pada tahap sekarang data masih berupa preview
                    dan belum dimasukkan ke database.

                </div>

            {% endif %}

        </div>


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

        <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 Excel
                        </th>

                        <th>
                            Kode
                        </th>

                        <th>
                            Nama Barang
                        </th>

                        <th>
                            Kategori
                        </th>

                        <th>
                            Satuan
                        </th>

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

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

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

                        <th class="text-end">
                            Harga Jual Kecil
                        </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 EXCEL -->

                        <td class="text-center">

                            {{ item.nomor_baris }}

                        </td>


                        <!-- KODE -->

                        <td>

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

                        </td>


                        <!-- NAMA -->

                        <td>

                            {{ item.nama_barang }}

                        </td>


                        <!-- KATEGORI -->

                        <td>

                            {{ item.kategori }}

                        </td>


                        <!-- SATUAN -->

                        <td>

                            {{ item.satuan_besar }}

                            /

                            {{ item.satuan_kecil }}

                        </td>


                        <!-- ISI -->

                        <td class="text-center">

                            {{ item.isi_per_satuan }}

                            {{ item.satuan_kecil }}

                        </td>


                        <!-- HARGA MODAL -->

                        <td class="text-end">

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

                        </td>


                        <!-- HARGA JUAL BESAR -->

                        <td class="text-end">

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

                        </td>


                        <!-- HARGA JUAL KECIL -->

                        <td class="text-end">

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

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


                        <!-- KETERANGAN -->

                        <td>

                            {% if item.error %}

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

                            {% else %}

                                <small class="text-success fw-semibold">
                                    Data siap diimport
                                </small>

                            {% endif %}

                        </td>

                    </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>


        <!-- ============================================= -->
        <!-- BAGIAN BAWAH PREVIEW -->
        <!-- ============================================= -->

        <div class="p-4 bg-light">

            {% if ada_error %}

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

                    <div class="text-danger">

                        <strong>
                            Import belum dapat dilanjutkan.
                        </strong>

                        <br>

                        <small>
                            Perbaiki file Excel kemudian upload kembali.
                        </small>

                    </div>


                    <a
                        href="/admin/barang/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 }} data valid.
                        </strong>

                        <br>

                        <small class="text-muted">
                            Semua data siap dimasukkan ke Master Barang.
                        </small>

                    </div>


                    <!--
                        Tombol simpan akan kita aktifkan
                        pada tahap berikutnya.
                    -->

                    <form
                        method="POST"
                        action="/admin/barang/import/simpan"
                        onsubmit="return confirm(
                            'Yakin ingin menyimpan seluruh data hasil import ke Master Barang?'
                        );"
                    >

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

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

                    </form>

                </div>

            {% endif %}

        </div>

    </div>

</div>

{% endif %}

{% endblock %}