<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Profile</title>
      <link rel="stylesheet" href="/resources/css/output.css">
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
      <link rel="stylesheet" type="text/css" href="/node_modules/overhang/dist/overhang.min.css" />
      <script type="text/javascript" src="/node_modules/overhang/dist/overhang.min.js"></script>
  </head>
  <body>
    <div class="flex justify-center items-center mt-8">
      <div class="flex items-center space-x-4 bg-white p-4">
        <!-- Foto -->
        <div class="w-[20vh]">
          <img src="https://placehold.co/600x400" class="mask mask-circle" alt="Profile Picture">
        </div>
        <!-- Nama -->
        <div>
          <h2 class="text-2xl font-bold"><?= $_ENV['NAMA_DONATE']?></h2>
          <p class="text-gray-600"><?= $_ENV['DESKRIPSI_DONATE'] ?></p>
        </div>
      </div>
    </div>

    <main>
    <section class="bg-gray-100 p-4 rounded-lg mt-6 mx-4 md:mx-52 shadow-lg outline outline-1 outline-black">
      <div class="font-bold">Nominal : <div class="badge badge-sm
       badge-error gap-1">
  Require
</div></div>
      <div class="mt-2">
        <label class="input input-bordered flex items-center gap-2">
          <svg viewBox="0 0 512 512" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M256 176C256 96.59 191.4 32 112 32H32C14.33 32 0 46.31 0 64v384c0 17.69 14.33 32 32 32s32-14.31 32-32v-128h42.33l55.95 139.9C167.3 472.4 179.3 480 192 480c3.953 0 7.971-.7187 11.88-2.281c16.41-6.562 24.39-25.19 17.83-41.59L170.2 307.4C220.7 285 256 234.6 256 176zM112 256H64V96h48C156.1 96 192 131.9 192 176S156.1 256 112 256zM392 160H320c-17.67 0-32 14.31-32 32v288c0 17.69 14.33 32 32 32s32-14.31 32-32v-80h40c66.17 0 120-53.84 120-120S458.2 160 392 160zM392 336H352V224h40C422.9 224 448 249.1 448 280S422.9 336 392 336z" />
          </svg>
          <input type="tel" id="angka" maxlength="10" required="Harap masukkan jumlah ?NAMA_DONATE?--" class="grow font-bold" placeholder="Masukkan jumlah dukungan" />
        </label>
      </div>
      <div class="mt-4 flex justify-center items-center gap-4">
        <button type="button" data-text="10.000" class="myBtn btn btn-primary">10.000</button>
        <button type="button" data-text="50.000" class="myBtn btn btn-info">50.000</button>
        <button type="button" data-text="100.000" class="myBtn btn btn-warning">100.000</button>
        <button type="button" data-text="300.000" class="myBtn hidden lg:block btn btn-success">300.000</button>
        <button type="button" data-text="1.000.000" class="myBtn hidden lg:block btn btn-error">1.000.000</button>
      </div>
      <div class="font-bold mt-8">Pengirim : <div class="badge badge-sm badge-error gap-1">
  Require
</div></div>
      <div class="mt-2">
        <label class="input input-bordered flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
               <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
        </svg>
          <input type="text" id="inputNama" class="grow font-bold" placeholder="" />
        </label>
      </div>
      <div class="font-bold mt-4">Pesan : <div class="badge badge-sm badge-info gap-1">
  Optional
</div></div>
      <div class="mt-2">
        <label class="input input-bordered flex items-center gap-2">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
           <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/>
           </svg>
          <input type="text" id="inputNama" class="grow font-bold" placeholder="Masukkan pesan" />
        </label>
      </div> 
      <!-- <div class="form-control mt-4">
  <label class="label cursor-pointer flex items-center">
    <input type="checkbox" class="checkbox checkbox-primary" />
    <span class="label-text ml-2 md:mr-[96vh]">Saya setuju dengan syarat dan ketentuan</span>
  </label> -->

</div>
</div>
<div class="font-bold mt-6">
  <div class="mt-4">                                                                 
    <label class="cursor-pointer flex items-center space-x-2">
      <input type="checkbox" id="qrisCheckbox" aria-label="QRIS 0,7%" class="checkbox checkbox-primary" />
      <span class="label-text">Saya setuju dengan syarat dan ketentuan.</span>
    </label>
  </div>
</div>


<div class="flex mt-6 justify-center items-center">
  <div class="">
    <button type="submit" id="bayar" onclick="validateAmount()" class="btn btn-wide btn-success">Bayar</button>
  </div>
</div>

    </section>

  </main>

  </body>
  <script src="/resources/js/idrFormat.js"></script>
  <script src="/resources/js/otomaticInput.js"></script>
  <script src="/resources/js/placeholderRandom.js"></script>
  <script src="/resources/js/validateAmount.js"></script>
  </html>
