<div class="card card-dark">

  <form action="../config/tambahdataproduk.php" method="post" enctype="multipart/form-data">
    <div class="card-body bg-dark">

      <!-- ID -->
      <div class="form-group">
        <label for="id">ID</label>
        <input type="text" name="id" id="id" class="form-control bg-dark text-white" placeholder="ID" required>
        <button class="btn btn-secondary" onclick="generateText()">Generate</button>
      </div>

      <!-- Gambar -->
      <div class="form-group">
        <label for="gambar">Gambar</label>
        <input type="file" name="gambar" id="gambar" class="form-control bg-dark text-white" accept="image/*" onchange="previewImage(event)" required>
        <br>
        <img id="preview" src="#" alt="Preview Gambar" style="max-width: 200px; display: none;">
      </div>

      <!-- Nama -->
      <div class="form-group">
        <label for="nama">Nama</label>
        <input type="text" name="nama" id="nama" class="form-control bg-dark text-white" placeholder="Nama" required>
      </div>

      <!-- Deskripsi -->
      <div class="form-group">
        <label for="deskripsi">Deskripsi</label>
        <input type="text" name="deskripsi" id="deskripsi" class="form-control bg-dark text-white" placeholder="Deskripsi" required>
      </div>

      <!-- Stok -->
      <div class="form-group">
        <label for="stok">Stok</label>
        <input type="number" name="stok" id="stok" class="form-control bg-dark text-white" placeholder="Stok" required>
      </div>

      <!-- Harga -->
      <div class="form-group">
        <label for="harga">Harga</label>
        <input type="number" name="harga" id="harga" class="form-control bg-dark text-white" placeholder="Harga" required>
      </div>

    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Simpan</button>
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
    </div>
  </form>
</div>

<script>
  function generateText() {
    const generatedText = "ID-" + Math.floor(Math.random() * 1000000);

    document.getElementById("id").value = generatedText;
}
</script>