{% extends "layout.html" %}

{% block content %}
<div class="header">
<h2>Transaksi Pembelian</h2>
</div>

<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <ul>
            {% for category, message in messages %}
                <li style="color: {% if category == 'error' %}red{% else %}green{% endif %};">
                    {{ message }}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endwith %}

<!-- Form Transaksi -->
<!-- <form method="post" action="{{ url_for('transaksi_pembelian') }}"> -->
<form method="post" action="/transaksi_pembelian" style="margin-bottom: 20px;">
   

    <!-- Pilih Supplier -->
    <div id="supplier-container">
        <div class="supplier-item">
            <label for="supplier">Supplier:</label>
            <select name="supplier[]" id="supplier" required>
                <option value="">Pilih Supplier</option>
                {% for supplier in supplier_list %}
                    <option value="{{ supplier[0] }}">{{ supplier[1] }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <br>
    <br>
    <!-- Pilih Barang -->
    <div id="barang-container">
        <div class="barang-item">
            <label for="barang">Barang:</label>
            <select name="barang[]" required>
                <option value="">Pilih Barang</option>
                {% for barang in barang_list %}
                    <option value="{{ barang[0] }}">{{ barang[1] }}</option>
                {% endfor %}
            </select>
            <label for="jumlah">Jumlah:</label>
            <input type="number" name="jumlah[]" min="1" required>
            <button type="button" onclick="hapusBarang(this)">Hapus</button>
        </div>
    </div>
    <br>
    <button type="button" onclick="tambahBarang()">Tambah Barang</button>
    <br><br>

    <!-- Submit -->
    <button type="submit">Simpan Transaksi</button>
    <br>
    <br>
   

</form>

<!-- Tabel Master Pembelian -->
<h3>Master Pembelian</h3>
<table id="transaksi_pembelian" border="1" cellspacing="0" cellpadding="8" class="display" style="width:100%">
   
    <thead>
        <tr>
            <th>ID</th>
            <th>Supplier</th>
            <th>Total Harga</th>
            <th>Created At</th>
             
        </tr>
    </thead>
    <tbody>
        {% for item in master_pembelian %}
        <tr>
            <td>{{ item[0] }}</td>
            <td>{{ item[1] }}</td>
            <td>{{ item[2] }}</td>
            <td>{{ item[3] }}</td>
             
        </tr>
        {% endfor %}
    </tbody>
</table>
<br>
<br>
<br>
<!-- Tabel Master Pembelian -->
<h3>Detail Pembelian</h3>
<table id="detailPembelianTable" border="1" cellspacing="0" cellpadding="8" class="display" style="width:100%">
   
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaksi Id</th>
            <th>Nama</th>
            <th>Harga</th>
            <th>Jumlah</th>
            <th>Subtotal</th>
   
        </tr>
    </thead>
    <tbody>
        {% for itemsub in sub_pembelian %}
        <tr>
            <td>{{ itemsub[0] }}</td>
            <td>{{ itemsub[1] }}</td>
            <td>{{ itemsub[2] }}</td>
            <td>{{ itemsub[3] }}</td>
            <td>{{ itemsub[4] }}</td>
            <td>{{ itemsub[5] }}</td>
             
        </tr>
        {% endfor %}
    </tbody>
</table>


<!-- DataTables Script -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $('#detailPembelianTable').DataTable({
            paging: true,
            searching: true,
            ordering: true,
            info: true,
            columnDefs: [
                { orderable: false, targets: [3] } // Contoh: kolom 'Jumlah' tidak bisa diurutkan
            ],
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/Indonesian.json"
            }
        });
    });

    function tambahBarang() {
    const container = document.getElementById('barang-container');
    const newItem = document.createElement('div');
    newItem.className = 'barang-item';
    newItem.innerHTML = `
        <label for="barang">Barang:</label>
        <select name="barang[]" required>
            <option value="">Pilih Barang</option>
            {% for barang in barang_list %}
                <option value="{{ barang[0] }}">{{ barang[1] }}</option>
            {% endfor %}
        </select>
        <label for="jumlah">Jumlah:</label>
        <input type="number" name="jumlah[]" min="1" required>
        <button type="button" onclick="hapusBarang(this)">Hapus</button>
    `;
    container.appendChild(newItem);
    // refresh grid sub nya

}

function hapusBarang(button) {
    button.parentElement.remove();
}
</script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
{% endblock %}