<?= $this->extend('layout/main') ?>
<?= $this->section('content') ?>

<div class="row">
    <div class="col-md-4">
        <div class="card card-emerald card-outline shadow-sm">
            <div class="card-header bg-emerald text-white">
                <h3 class="card-title text-bold"><i class="fas fa-shopping-cart mr-2"></i> Form Penebusan</h3>
            </div>
            <form action="<?= base_url('transaksi/proses') ?>" method="post">
                <div class="card-body">
                    <div class="form-group">
                        <label>Petani (Penebus)</label>
                        <select name="id_petani" class="form-control" required>
                            <option value="">-- Pilih Petani --</option>
                            <?php foreach ($petani as $p): ?>
                                <option value="<?= $p['id_petani'] ?>"><?= $p['nama_petani'] ?> (<?= $p['nik'] ?>)</option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Pilih Pupuk</label>
                        <select name="id_pupuk" id="select_pupuk" class="form-control" required>
                            <option value="" data-harga="0">-- Pilih Jenis Pupuk --</option>
                            <?php foreach ($pupuk as $pu): ?>
                                <option value="<?= $pu['id_pupuk'] ?>" data-harga="<?= $pu['harga_het'] ?>">
                                    <?= $pu['nama_pupuk'] ?> (Stok: <?= $pu['stok_global'] ?> Kg)
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Harga HET per Kg (Rp)</label>
                        <input type="text" id="harga_tampil" class="form-control" readonly value="0">
                    </div>

                    <div class="form-group">
                        <label>Jumlah Beli (Kg)</label>
                        <input type="number" step="0.01" name="jumlah_beli" id="input_jumlah" class="form-control" placeholder="0" required>
                    </div>

                    <div class="form-group bg-light p-3 border rounded border-emerald">
                        <label class="text-emerald">Total Pembayaran (Rp)</label>
                        <h3 class="mb-0 font-weight-bold" id="total_bayar_tampil">Rp 0</h3>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-emerald btn-block btn-lg" onclick="return confirm('Proses penebusan ini? Stok dan Saldo Kas akan otomatis diupdate.')">
                        <i class="fas fa-check-circle mr-1"></i> Proses Transaksi
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card card-emerald card-outline shadow-sm">
            <div class="card-header">
                <h3 class="card-title">Riwayat Penebusan Terbaru</h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover table-striped">
                    <thead class="bg-light">
                        <tr>
                            <th>No. Invoice</th>
                            <th>Tanggal</th>
                            <th>Jumlah (Kg)</th>
                            <th>Total Bayar</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($transaksi)): ?>
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">Belum ada transaksi penebusan.</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($transaksi as $t): ?>
                                <tr>
                                    <td><span class="badge badge-info"><?= $t['no_invoice'] ?></span></td>
                                    <td><?= date('d/m/Y H:i', strtotime($t['tanggal_transaksi'])) ?></td>
                                    <td><b><?= $t['jumlah_beli'] ?> Kg</b></td>
                                    <td class="text-success text-bold">Rp <?= number_format($t['total_bayar'], 0, ',', '.') ?></td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const selectPupuk = document.getElementById('select_pupuk');
        const inputJumlah = document.getElementById('input_jumlah');
        const hargaTampil = document.getElementById('harga_tampil');
        const totalBayarTampil = document.getElementById('total_bayar_tampil');

        // Fungsi untuk format Rupiah
        function formatRupiah(angka) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            }).format(angka);
        }

        // Fungsi kalkulasi
        function hitungTotal() {
            // Ambil harga dari option yang dipilih
            let harga = selectPupuk.options[selectPupuk.selectedIndex].getAttribute('data-harga');
            let jumlah = inputJumlah.value;

            // Tampilkan harga satuan
            hargaTampil.value = formatRupiah(harga);

            // Hitung dan tampilkan total
            if (harga > 0 && jumlah > 0) {
                let total = harga * jumlah;
                totalBayarTampil.innerText = formatRupiah(total);
            } else {
                totalBayarTampil.innerText = "Rp 0";
            }
        }

        // Jalankan kalkulasi saat pupuk atau jumlah diubah
        selectPupuk.addEventListener('change', hitungTotal);
        inputJumlah.addEventListener('input', hitungTotal);
    });
</script>

<?= $this->endSection() ?>