        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">

          <div class="col-span-12 lg:col-span-12">
            <div class="card">
              <div class="p-4 sm:p-5">
                <div class="flex flex-col">

                  <div style="margin:auto" class="avatar mt-1.5 h-24 w-24">
                    <img class="mask is-squircle" <?php if ($passport == "") { ?> src="../user.jpg" <?php } else { ?> src="../uploads/profile-pic/<?php echo $passport ?>" <?php } ?> alt="<?php echo ucfirst($fname) ?>" title="<?php echo ucfirst($fname) ?>" />

                    <div x-data="{showModal:false}" class="absolute bottom-0 right-0 flex items-center justify-center rounded-full bg-white dark:bg-navy-700">
                      <button @click="showModal = true" class="btn h-6 w-6 rounded-full border border-slate-200 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:border-navy-500 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
                          <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                        </svg>
                      </button>

                      <!-- Profile Image Modal -->
                      <template x-teleport="#x-teleport-target">
                        <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
                          <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showModal = false" x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
                          <div class="relative max-w-md rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700" x-show="showModal" x-transition:enter="easy-out" x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]" x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" x-transition:leave="easy-in" x-transition:leave-start="opacity-100 [transform:translate3d(0,0,0)]" x-transition:leave-end="opacity-0 [transform:translate3d(0,1rem,0)]">
                            <form enctype="multipart/form-data" action="../../bank-manager.php?action=profile-picture" method="post">
                              <div class="avatar h-20 w-20">
                                <img class="rounded-full" alt="avatar" <?php if ($passport == "") { ?> src="../user.jpg" <?php } else { ?> src="../uploads/profile-pic/<?php echo $passport ?>" <?php } ?> />
                                <div class="absolute right-0 m-1 h-4 w-4 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"></div>
                              </div>
                              <div class="mt-4 px-4 sm:px-12">
                                <h3 class="text-lg text-slate-800 dark:text-navy-50">
                                  Update Profile Picture
                                </h3>
                                <label class="btn relative bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                  <input type="hidden" name="email" value="<?php echo $email ?>">
                                  <input tabindex="-1" name="image" type="file" class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
                                  <div class="flex items-center space-x-2">
                                    <i class="fa-solid fa-cloud-arrow-up text-base"></i>
                                    <span>Choose File</span>
                                  </div>
                                </label>
                                <!-- <input type="hidden" name="email" value="<?php echo $email ?>">
                                <div class="filepond fp-bordered">
                                  <input type="file" name="image" tabindex="-1" x-init="$el._x_filepond = FilePond.create($el)" />
                                </div>
                              </div> -->
                                <div class="my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500"></div>

                                <div class="space-x-3">
                                  <button @click="showModal = false" class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                    Cancel
                                  </button>
                                  <button type="submit" @click="showModal = false" class="btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                    Upload
                                  </button>
                                </div>
                            </form>
                          </div>
                        </div>
                      </template>
                      <!-- End of Profile Image Modal -->

                    </div>
                  </div>
                </div>
                <div class="my-7 h-px bg-slate-200 dark:bg-navy-500"></div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <label class="block">
                    <span>Account Holder's Name </span>
                    <span class="relative mt-1.5 flex">
                      <input class="form-input peer w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" placeholder="Enter name" type="text" readonly value="<?php echo ucfirst($fname) . " " . ucfirst($mname) . " " . ucfirst($lname) ?>" />
                      <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                        <i class="fa-regular fa-user text-base"></i>
                      </span>
                    </span>
                  </label>
                  <label class="block">
                    <span>Username </span>
                    <span class="relative mt-1.5 flex">
                      <input class="form-input peer w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" placeholder="Enter full name" type="text" readonly value="<?php echo $username ?>" />
                      <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                        <i class="fa-regular fa-user text-base"></i>
                      </span>
                    </span>
                  </label>
                  <label class="block">
                    <span>Email Address </span>
                    <span class="relative mt-1.5 flex">
                      <input class="form-input peer w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" placeholder="Enter email address" type="text" value="<?php echo $email ?>" />
                      <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                        <i class="fa-regular fa-envelope text-base"></i>
                      </span>
                    </span>
                  </label>
                  <label class="block">
                    <span>Phone Number</span>
                    <span class="relative mt-1.5 flex">
                      <input class="form-input peer w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" placeholder="Enter phone number" type="text" value="<?php echo $phone ?>" />
                      <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                        <i class="fa fa-phone"></i>
                      </span>
                    </span>
                  </label>
                </div>
                <!-- <div class="my-7 h-px bg-slate-200 dark:bg-navy-500"></div>
                <div>
                  <h3
                    class="text-base font-medium text-slate-600 dark:text-navy-100"
                  >
                    Linked Accounts
                  </h3>
                  <p class="text-xs+ text-slate-400 dark:text-navy-300">
                    Check the list of beneficiaries inked to your account
                  </p>
                  <div class="flex items-center justify-between pt-4">
                    <a href="../beneficiaries/" class="btn h-8 rounded-full border border-slate-200 px-3 text-xs+ font-medium text-primary hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-accent-light dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                      Beneficiaries
                    </a>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>