<?php
// form_invoice.php
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Input Invoice - SADAYA JASA</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <style>
        body { background: #f6f6f6; }
        .container { background: #fff; padding: 30px; border-radius: 10px; margin-top: 30px; }
        h2 { text-align: center; margin-bottom: 20px; }
    </style>
</head>
<body>
<div class="container">
    <h2>Form Pembuatan Invoice</h2>
    <form action="invoice_preview_sjs.php" method="post">
        <div class="row mb-3">
            <div class="col-md-6">
                <label>Kepada Yth</label>
                <input type="text" name="nama_customer" class="form-control" required>
            </div>
            <div class="col-md-6">
                <label>Nama Usaha / Toko</label>
                <input type="text" name="nama_usaha" class="form-control" required>
            </div>
        </div>

        <div class="mb-3">
            <label>Alamat</label>
            <input type="text" name="alamat" class="form-control" required>
        </div>

        <div class="row mb-3">
        <div class="col-md-6">
            <label>Nomor Telepon</label>
            <input type="text" name="telp" class="form-control">
        </div>

        <div class="col-md-6">
            <label for="tgl">Tanggal</label>
            <input type="date" id="tgl" name="tgl" class="form-control" required>
        </div>
        </div>

        <div class="row mb-3">
        <div class="col-md-6">
            <label for="kode_invoice">Kode Invoice</label>
            <select name="kode_invoice" id="kode_invoice" class="form-control" required>
                <option value="INV-SJS">INV-SJS</option>
                <option value="INV-PGS">INV-PGS</option>
            </select>
        </div>
        <div class="col-md-6">
            <label>Urutan Invoice</label>
            <input type="text" name="urutan_invoice" class="form-control" placeholder="001" required>
        </div>
        <div class="col-md-6">
            <label>Nomor Invoice</label>
            <input type="text" name="no_invoice" class="form-control" placeholder="INV-SJS/X-001" required>
        </div>
        </div>

        <hr>
        <h5>Detail Barang / Jasa</h5>
        <table class="table table-bordered" id="barangTable">
            <thead class="table-light">
                <tr>
                    <th>Nama Barang / Jasa</th>
                    <th>Qty</th>
                    <th>UOM</th>
                    <th>Harga (Rp)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="barang[]" class="form-control" required></td>
                    <td><input type="number" name="qty[]" class="form-control" required></td>
                    <td><input type="text" name="uom[]" class="form-control" value="Pcs"></td>
                    <td><input type="number" name="harga[]" class="form-control" required></td>
                </tr>
            </tbody>
        </table>

        <button type="button" class="btn btn-success" id="addRow">+ Tambah Barang</button>
        <hr>

        <div class="mb-3">
            <label>Keterangan</label>
            <input type="text" name="keterangan" class="form-control" value="Pengerjaan proyek telah selesai">
        </div>

        <div class="text-center">
            <button type="submit" class="btn btn-primary">Tampilkan Invoice</button>
        </div>
    </form>
</div>

<script>
document.getElementById('addRow').addEventListener('click', function() {
    let table = document.getElementById('barangTable').getElementsByTagName('tbody')[0];
    let newRow = table.rows[0].cloneNode(true);
    newRow.querySelectorAll('input').forEach(input => input.value = '');
    table.appendChild(newRow);
});
</script>
</body>
</html>
