<?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['update-info']) != "") {
      $update_info = $_SESSION['update-info'];
    } else {
      $update_info = "";
    }

    if (isset($_SESSION['pin_error']) != "") {
      $pin_error = $_SESSION['pin_error'];
    } else {
      $pin_error = "";
    }

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

    <body x-data class="is-header-blur" x-bind="$store.global.documentBody">
      <!-- App 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 ($update_info != "") {
          ?>
            <div x-data="{isShow:true}" :class="!isShow && 'opacity-0 transition-opacity duration-300'" class="mt-1 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 $update_info ?></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>
        <?php
        if ($passwordUpdateError != "") {
        ?>
          <div x-data="{isShow:true}" :class="!isShow && 'opacity-0 transition-opacity duration-300'" class="alert flex items-center justify-between overflow-hidden rounded-lg border border-error text-error">
            <div class="flex">
              <div class="px-4 py-3 sm:px-5 text-center"><b><?php echo $passwordUpdateError ?></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-error border-error">
                <i class="fa fa-close"></i>
              </button>
            </div>
          </div>

        <?php } ?>
        <div class="flex items-center space-x-4 py-5 lg:py-6">
          <?php
          if ($pin_error != "") {
          ?>
            <div x-data="{isShow:true}" :class="!isShow && 'opacity-0 transition-opacity duration-300'" class="mt-1 alert flex items-center justify-between overflow-hidden rounded-lg border border-error text-error">
              <div class="flex">
                <div class="px-4 py-3 sm:px-5 text-center"><b><?php echo $pin_error ?></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-error border-error">
                  <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="sm:hidden lg:block col-span-12 lg:col-span-4">
            <div class="card p-4 sm:p-5">
              <div class="flex items-center space-x-4">
                <div class="avatar h-14 w-14">
                  <img class="mask is-squircle" <?php if ($passport == "") { ?> src="../user.jpg" <?php } else { ?> src="../uploads/profile-pic/<?php echo $passport ?>" <?php } ?> alt="avatar" />
                </div>
                <div>
                  <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                    <?php echo ucfirst($fname) . " " . ucfirst($mname) . " " . ucfirst($lname) ?>
                  </h3>
                  <p class="text-xs+"><?php echo $account_number ?></p>
                </div>
              </div>
              <ul class="mt-6 space-y-1.5 font-inter font-medium">
                <li>
                  <a class="flex items-center space-x-2 rounded-lg bg-primary px-4 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>Account</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <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">
                  Account Modification
                </h2>
                <div class="flex justify-center space-x-2">
                  <?php
                  include('./update-password.php');
                  include('./update-pin.php');
                  ?>
                </div>
              </div>
              <div class="p-4 sm:p-5">
                <div class="flex flex-col">
                  <span class="text-base font-medium text-slate-600 dark:text-navy-100">Profile Image</span>
                  <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>
                    <?php include('./upload-picture.php'); ?>
                  </div>
                </div>
                <div class="my-7 h-px bg-slate-200 dark:bg-navy-500"></div>
                <form action="../../bank-manager.php?action=acc-update" method="post">
                  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <input type="hidden" name="email" value="<?php echo $email ?>">
                    <label class="block">
                      <span>Employment Status </span>
                      <select name="employment" required class="mt-1.5 w-full" x-init="$el._tom = new Tom($el,{create: true,sortField: {field: 'text',direction: 'asc'}})">
                        <option style="font-weight:bold;" value="<?php echo $employment ?>"><?php echo $employment ?></option>
                        <option style="font-weight:bold;" value="Self Employed">Self Employed</option>
                        <option style="font-weight:bold;" value="Student">Student</option>
                        <option style="font-weight:bold;" value="Retired">Retired</option>
                        <option style="font-weight:bold;" value="Employed">Employed</option>
                        <option style="font-weight:bold;" value="Unemployed">Unemployed</option>
                      </select>
                    </label>
                    <label class="block">
                      <span>Address </span>
                      <span class="relative mt-1.5 flex">
                        <input name="address" 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" placeholder="Update Your Address" type="text" value="<?php echo $address ?>" />
                        <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-map-marker text-base"></i>
                        </span>
                      </span>
                    </label>
                    <label class="block">
                      <span>Phone Number</span>
                      <span class="relative mt-1.5 flex">
                        <input name="phone" 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" placeholder="Update Your 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 class="flex justify-center space-x-2">
                    <a href="../profile/" class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-700 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-100 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                      Cancel
                    </a>
                    <button type="submit" 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">
                      Save Settings
                    </button>
                  </div>
                </form>
              </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 }
} ?>