    <form id="form_add" autocomplete="off">
      <div class="modal-header">
        <h1 class="modal-title fs-4"><?= $title ?></h1>
        <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
      </div>
      <div class="modal-body">
          <div class="row px-0 mx-0">
            <div class="col-12 col-md-6 mb-3 mb-md-4 px-2 ">
              <label for="name" class="ps-1 mb-1">Nama</label>
              <input type="text" class="form-control" id="name" placeholder="Masukan nama disini" name="name" />
              <span class="text-danger ps-1 error-message-name" style="font-size: 12px; display: none;" ></span>
            </div>
            <div class="col-12 col-md-6 mb-3 mb-md-4 px-2 ">
              <label for="category" class="ps-1 mb-1">Kategori</label>
              <select class="form-control select2" name="category" id="category" style="width: 100%">
                <option value="">Pilih Kategori</option>
              </select>
              <span class="text-danger ps-1 error-message-category" style="font-size: 12px; display: none;"></span>
            </div>
            <div class="col-12 col-md-6 mb-3 mb-md-4 px-2 ">
              <label for="unit" class="ps-1 mb-1">Satuan</label>
              <select class="form-control select2" name="unit" id="unit" style="width: 100%">
                <option value="">Pilih Satuan</option>
              </select>
              <span class="text-danger ps-1 error-message-unit" style="font-size: 12px; display: none;"></span>
            </div>
            <div class="col-12 col-md-6 mb-3 mb-md-4 px-2 ">
              <label for="price_buy" class="ps-1 mb-1">Harga Beli</label>
              <input type="text" class="form-control" id="price_buy" placeholder="Masukan harga beli disini" name="price_buy" />
              <span class="text-danger ps-1 error-message-price_buy" style="font-size: 12px; display: none;" ></span>
            </div>
            <div class="col-12 col-md-6 mb-3 mb-md-4 px-2 ">
              <label for="price_sale" class="ps-1 mb-1">Harga Jual</label>
              <input type="text" class="form-control" id="price_sale" placeholder="Masukan harga jaul disini" name="price_sale" />
              <span class="text-danger ps-1 error-message-price_sale" style="font-size: 12px; display: none;" ></span>
            </div>
            <div class="col-12 col-md-6 mb-3 mb-md-4 px-2 ">
              <label for="discount" class="ps-1 mb-1">Diskon</label>
              <input type="text" class="form-control" id="discount" placeholder="Masukan discount disini" name="discount" />
              <span class="text-danger ps-1 error-message-discount" style="font-size: 12px; display: none;" ></span>
            </div>
            <div class="col-12 mb-3 mb-md-4 px-2 ">
              <label for="description" class="ps-1 mb-1">Keterangan</label>
              <textarea type="text-danger" class="form-control" id="description" placeholder="Masukan description disini" name="description" ></textarea>
              <span class="text-danger ps-1 error-message-description" style="font-size: 12px; display: none;" ></span>
            </div>
            <!-- Upload Gambar Section -->
            <div class="col-12 mb-4 px-2">
              <label class="ps-1 mb-2 d-block">Upload Gambar</label>
              <div class="upload-area px-4 py-5 text-center border rounded" style="position: relative;" id="uploadArea">
                <div class="upload-content">
                  <i class="bi bi-cloud-arrow-up fs-1 text-muted mb-3"></i>
                  <p class="mb-1 fw-semibold">Upload gambar produk kamu</p>
                  <!-- <p class="text-muted mb-2">or</p> -->
                  <button type="button" class="btn btn-outline-primary btn-sm my-2" id="btn_choose">Pilih File</button>
                  <input type="file" id="fileInput" class="d-none" accept="image/jpeg,image/png,image/gif,image/svg+xml">
                  <!-- <p class="text-muted mt-3 mb-0 small">Max file size: 50MB</p> -->
                  <p class="text-muted small">Supported file types: JPG, PNG, GIF, SVG</p>
                </div>
                <div class="upload-preview d-none" id="uploadPreview">
                  <div class="d-flex align-items-center">
                    <i class="bi bi-file-earmark-image fs-3 me-3 text-primary"></i>
                    <div class="text-start">
                      <p class="mb-1 fw-semibold" id="fileName">filename.jpg</p>
                      <p class="text-muted small mb-0" id="fileSize">25.4 MB</p>
                    </div>
                    <button type="button" class="btn-close ms-auto" id="removeFile"></button>
                  </div>
                </div>
                <div id="image_preview" class="d-none justify-content-center align-items-center" style=" background-color: #eaf7f2;">

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

    

