    <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-4 mb-3 mb-md-4 px-2 px-md-3">
              <label for="date" class="ps-1 mb-1">Tanggal <span class="text-danger" style="font-size: 12px;">*</span></label>
              <input type="date" class="form-control" id="date" placeholder="Masukan tanggal disini" name="date" autocomplete="off" value="<?= date('Y-m-d') ?>" />
              <span class="text-danger ps-1 error-message-date" style="font-size: 12px; display: none;" ></span>
            </div>
            <div class="col-12 col-md-4 mb-3 mb-md-4 px-2 px-md-3">
              <label for="type" class="ps-1 mb-1">Jenis Pengeluaran <span class="text-danger" style="font-size: 12px;">*</span></label>
              <select class="form-control select2" name="type" id="type" style="width: 100%">
                <option value="">Pilih Jenis Pengeluaran</option>
                <option value="Gaji Karyawan">Gaji Karyawan</option>
                <option value="Biaya Internet">Biaya Internet</option>
                <option value="Perawatan Alat">Perawatan Alat</option>
                <option value="Pembelian Alat">Pembelian Alat</option>
                <option value="Upgrade Bandwidth">Upgrade Bandwidth</option>
                <option value="Lainya">Lainya</option>
              </select>
              <span class="text-danger ps-1 error-message-type" style="font-size: 12px; display: none;"></span>
            </div>
            <div class="col-12 col-md-4 mb-3 mb-md-4 px-2 px-md-3">
              <label for="total" class="ps-1 mb-1">Total <span class="text-danger" style="font-size: 12px;">*</span></label>
              <input type="text" class="form-control" id="total" placeholder="Masukan total pengeluaran disini" name="total" autocomplete="off" />
              <span class="text-danger ps-1 error-message-total" style="font-size: 12px; display: none;" ></span>
            </div>
            <div class="col-12 mb-3 mb-md-4 px-2 px-md-3">
              <label for="confirm_password" class="ps-1 mb-1">Keterangan <span class="text-danger" style="font-size: 12px;">*</span></label>
              <textarea type="description" class="form-control" id="description" placeholder="Masukan keterangan disini" name="description" autocomplete="off" ></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">Bukti Gambar <span class="text-danger" style="font-size: 12px;">*</span></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: #e5ecf7;">

                  </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>

