<?php
session_start();

require('../../includes/database.php');
include("../../log.php");

if (isset($_SESSION['accUsername']) && $_SESSION['accPassword'] != "") {
} else {
  header("Location:../../login/");
}
$accUsername = $_SESSION['accUsername'];

$accUsername = $_SESSION['accUsername'];
$accPassword = $_SESSION['accPassword'];

$query = "SELECT * FROM accounts	
			WHERE username = '$accUsername'
			&&   password = '$accPassword'";

$result = mysqli_query($con, $query) or die(mysqli_connect_error());
$rows = mysqli_num_rows($result);
if ($rows == 1) {
  while ($data = mysqli_fetch_assoc($result)) {

    extract($data);
    include('../components/head.php');

    if (isset($_SESSION['password-update']) != "") {
      $passwordUpdate = $_SESSION['password-update'];
    } else {
      $passwordUpdate = "";
    }
?>

    <body x-data class="is-header-blur is-sidebar-open" x-bind="$store.global.documentBody">
      <!-- App preloader-->
      <?php
      // include("../components/preloader.php");
      include("../components/sidebar.php");
      include("../components/sidebar-body.php");
      include("../components/nav.php");
      include("../components/mobile-search.php");
      include("../components/right-sidebar.php");
      ?>

      <!-- Main Content Wrapper -->
      <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6">
          <?php
          if ($passwordUpdate != "") {
          ?>
            <div x-data="{isShow:true}" :class="!isShow && 'opacity-0 transition-opacity duration-300'" class="mt-3 alert flex items-center justify-between overflow-hidden rounded-lg border border-success text-success">
              <div class="flex">
                <div class="px-4 py-3 sm:px-5 text-center"><b><?php echo $passwordUpdate ?></b></div>
              </div>
              <div class="px-2">
                <button @click="isShow = false; setTimeout(()=>$root.remove(),300)" class="btn h-7 w-7 rounded-full p-0 font-medium text-success border-success">
                  <i class="fa fa-close"></i>
                </button>
              </div>
            </div>

          <?php } ?>
        </div>

        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
          <div class="col-span-12 lg:col-span-8">
            <div class="card">
              <div class="flex flex-col items-center space-y-4 border-b border-slate-200 p-4 dark:border-navy-500 sm:flex-row sm:justify-between sm:space-y-0 sm:px-5">
                <h2 class="text-lg font-medium tracking-wide text-slate-700 dark:text-navy-100">
                  <?php echo ucfirst($fname) ?>'s Profile
                </h2>
                <div class="flex justify-center space-x-2">
                  <a href="../profile-edit/" 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">
                    Edit
                  </a>
                </div>
              </div>
              <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">
                    <div style="margin:auto">
                      <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>
                  </div>
                  <br>
                  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <label style="text-align:center" class="block">
                      <span style="font-size:18px"><?php echo ucfirst($fname) . " " . ucfirst($mname) . " " . ucfirst($lname) ?> </span>
                      <span class="mt-1.5">
                        <input readonly style="text-align:center; font-size: 20px;" class="form-input peer w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 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" value="<?php echo $account_number . ' - ' . $username ?>" />
                      </span>
                    </label>
                    <div class="rounded-lg border border-slate-150 p-2 dark:border-navy-700">
                      <div class="flex justify-between">
                        <p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
                          <?php echo $currency . " " . number_format($balance, 2) ?>
                        </p>
                        <span class="h-5 w-5 text-warning"><i class="fa fa-money"></i></span>
                      </div>
                      <p class="text-xs+ line-clamp-1"><?php echo $acc_type ?> - Balance</p>
                    </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>Email Address </span>
                    <span class="relative mt-1.5 flex">
                      <input readonly 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 readonly 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>
                  
                  <label class="block">
                    <span>Employment Status </span>
                    <span class="relative mt-1.5 flex">
                      <input name="ssn" required 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" readonly type="text" value="<?php echo $employment ?>" />
                      <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-solid fa-book text-base"></i>
                      </span>
                    </span>
                  </label>
                </div>
                <label class="pt-2 block">
                  <span>Address</span>
                  <span class="relative mt-1.5 flex">
                    <input readonly 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 $address . ', ' . $state . ', ' . $country ?>" />
                    <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-map-marker"></i>
                    </span>
                  </span>
                </label>
                <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>
      </main>
      </div>
      <!-- 
        This is a place for Alpine.js Teleport feature 
        @see https://alpinejs.dev/directives/teleport
      -->
      <div id="x-teleport-target"></div>
      <script>
        window.addEventListener("DOMContentLoaded", () => Alpine.start());
      </script>
    </body>

    </html>
<?php }
} ?>