<?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['loan-response']) != "") {
         $loanMessage = $_SESSION['loan-response'];
      } else {
         $loanMessage = "";
      }
?>

      <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">
            <?php
            $query = "SELECT * FROM loan WHERE username = '$username' ORDER BY date_created DESC LIMIT 10";
            $loanQuery = mysqli_query($con, $query) or die(mysqli_connect_error()); ?>
            <div class="mt-5 px-[var(--margin-x)] transition-all duration-[.25s]">
               <?php
               if (mysqli_num_rows($loanQuery) > 0) { ?>
                  <p class="text-base font-medium text-slate-700 dark:text-navy-100">
                     My Active Loans
                  </p>
               <?php } ?>
            </div>
            <div class="flex">
               <div class="swiper mx-0 mt-4 px-[var(--margin-x)] transition-all duration-[.25s]" x-init="$nextTick(()=>new Swiper($el,{  slidesPerView: 'auto', spaceBetween: 18}))">
                  <div class="swiper-wrapper">
                     <?php
                     while ($loan = mysqli_fetch_assoc($loanQuery)) {
                        $input = $loan['date_created'];
                        $date = strtotime($input);
                     ?>
                        <div class="card swiper-slide flex w-72 shrink-0 justify-between rounded-xl border-l-4 border-default p-4">
                           <div>
                              <p class="font-medium tracking-wide text-slate-700 line-clamp-2 dark:text-navy-100">
                                 <?php echo $loan['type']; ?>
                              </p>
                              <small><b>Duration:</b> <?php echo $loan['duration']; ?></small> <br>
                              <a href="#" class="mt-0.5 text-xs+ text-slate-400 hover:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100">
                                 <?php echo date('d/M/Y \\a\\t h:i a', $date) ?>
                              </a>
                              <p class="text-xl font-medium tracking-wide text-slate-700 line-clamp-2 dark:text-navy-100">
                                 <?php echo $currency . " " . number_format($loan['amount'], 2); ?>
                              </p>
                           </div>
                           <?php if ($loan['status'] == 'Approved') { ?>
                              <div class="mt-6">
                                 <div class="progress h-2 bg-success/15 dark:bg-success/25">
                                    <div class="w-full rounded-full bg-success"></div>
                                 </div>
                                 <div class="mt-2 flex items-center justify-between">
                                    Status: <p class="font-medium text-success"><?php echo $loan['status']; ?></p>
                                 </div>
                              </div>
                           <?php } elseif ($loan['status'] == 'Processing') { ?>
                              <div class="mt-6">
                                 <div x-tooltip.primary="'<?php echo $loan['status']; ?>'" class="progress h-1 bg-slate-150 dark:bg-navy-500">
                                    <div class="is-indeterminate relative w-4/12 rounded-full bg-warning"></div>
                                 </div>
                                 <div class="mt-2 flex items-center justify-between">
                                    Status: <p class="font-medium text-warning"><?php echo $loan['status']; ?></p>
                                 </div>
                              </div>
                           <?php } else { ?>
                              <div class="mt-6">
                                 <div x-tooltip.primary="'<?php echo $loan['status']; ?>'" class="progress h-1 bg-slate-150 dark:bg-navy-500">
                                    <div class="is-indeterminate relative w-4/12 rounded-full bg-error"></div>
                                 </div>
                                 <div class="mt-2 flex items-center justify-between">
                                    Status: <p class="font-medium text-error"><?php echo $loan['status']; ?></p>
                                 </div>
                              </div>
                           <?php } ?>
                        </div>
                     <?php } ?>
                  </div>
               </div>
            </div>
            <div class="flex items-center space-x-4 py-2 lg:py-6">
               <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
                  Loan Application
               </h2>
               <div class="hidden h-full py-1 sm:flex">
                  <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
               </div>
               <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
                  <li>Qualified account holders can apply for a quick loan here </li>
               </ul>
            </div>
            <?php
            if ($loanMessage != "") {
            ?>
               <div class="space-y-4 mt-3">
                  <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-success text-success">
                     <div class="flex">
                        <div class="px-4 py-3 sm:px-5 text-center"><?php echo $loanMessage ?></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 class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
                  <div class="col-span-12 sm:col-span-8">
                     <div class="card p-4 sm:p-5">
                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
                           Complete this form to apply for a loan
                        </p>
                        <form action="../../bank-manager.php?action=loan-application" method="post">
                           <div class="mt-4 space-y-4">
                              <label class="block">
                                 <span>Loan Type Type</span>
                                 <select name="type" 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="Business Loan">Business Loan</option>
                                    <option style="font-weight:bold;" value="Car Loan">Car Loan</option>
                                    <option style="font-weight:bold;" value="Debt Consolidation">Debt Consolidation</option>
                                    <option style="font-weight:bold;" value="Student Loan">Student Loan</option>
                                    <option style="font-weight:bold;" value="Personal Loan">Personal Loan</option>
                                    <option style="font-weight:bold;" value="Home Improvement">Home Improvement</option>
                                    <option style="font-weight:bold;" value="Medical Loan">Medical Loan</option>
                                 </select>
                              </label>
                              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                 <label class="block">
                                    <span>Loan Duration</span>
                                    <select name="duration" 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="14 Days">14 Days</option>
                                       <option style="font-weight:bold;" value="30 Days">30 Days</option>
                                       <option style="font-weight:bold;" value="3 Months">3 Months</option>
                                       <option style="font-weight:bold;" value="12 Months">1 Months</option>
                                       <option style="font-weight:bold;" value="2 Years">2 Years</option>
                                       <option style="font-weight:bold;" value="3 Years">3 Years</option>
                                       <option style="font-weight:bold;" value="6 Years">6 Years</option>
                                    </select>
                                 </label>
                                 <div x-data="{config:{numeral: true,numeralThousandsGroupStyle: 'thousand'}}">
                                    <span class="text-xs+">Amount</span>
                                    <div class="mt-1.5 flex h-9 -space-x-px">
                                       <select class="form-select rounded-l-lg border border-slate-300 bg-white px-3 py-2 pr-9 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                                          <option class="hover:bg-primary/20" x-tooltip.placement.right="'<?php echo $curreny ?>'"><?php echo $currency ?></option>
                                       </select>
                                       <input id="send-amount" value="" x-input-mask="config" required name="amount" onblur="amountInput()" class="form-input w-full rounded-r-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" placeholder="Amount" />
                                    </div>
                                 </div>
                              </div>
                              <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                                 <label class="block sm:col-span-4">
                                    <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="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 sm:col-span-8">
                                    <span>Details</span>
                                    <textarea rows="4" required name="loan-details" placeholder="Explain to us, why you are applying for this loan" class="form-textarea mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent p-2.5 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"></textarea>
                                 </label>
                              </div>
                              <?php include('../components/userSendInfo.php'); ?>
                              <div x-data="{sameBillingAddress:true}">
                                 <div class="flex-wrap items-start space-y-2 pt-2 sm:flex sm:space-y-0 sm:space-x-5">
                                    <label class="inline-flex items-center space-x-2">
                                       <input required x-model="sameBillingAddress" class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent" type="checkbox" />
                                       <span>Do you agree to <?php echo $siteNameShort ?>'s Loan</span>
                                    </label>
                                    <div>
                                       <a href="#./loan-terms.php" class="border-b border-dotted border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                          Terms & Conditions
                                       </a>
                                    </div>
                                 </div>
                              </div>
                              <div class="flex justify-end space-x-2">
                                 <button class="btn space-x-2 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">
                                    <span>Submit</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                       <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                 </button>
                              </div>
                           </div>
                        </form>
                     </div>
                  </div>

                  <div class="hidden sm:col-span-4 sm:block">
                     <div class="sticky top-24 mt-3">
                        <ol class="steps is-vertical line-space">
                           <li class="step pb-8 before:bg-primary dark:before:bg-accent">
                              <div class="step-header rounded-full bg-primary text-white dark:bg-accent">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                 </svg>
                              </div>
                              <h3 class="ml-4 text-slate-700 dark:text-navy-100">
                                 Account Validation
                              </h3>
                           </li>
                           <li class="step pb-8 before:bg-primary dark:before:bg-accent">
                              <div class="step-header rounded-full bg-primary text-white dark:bg-accent">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                 </svg>
                              </div>
                              <h3 class="ml-4 text-slate-700 dark:text-navy-100">
                                 Loan App. Status
                              </h3>
                           </li>
                           <li class="step pb-8 before:bg-slate-200 dark:before:bg-navy-500">
                              <div class="step-header rounded-full bg-primary text-white dark:bg-accent">
                                 3
                              </div>
                              <h3 class="ml-4 text-slate-700 dark:text-navy-100">
                                 Loan Information
                              </h3>
                           </li>
                           <li class="step pb-8 before:bg-slate-200 dark:before:bg-navy-500">
                              <div class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white">
                                 4
                              </div>
                              <h3 class="ml-4 text-slate-700 dark:text-navy-100">Submit</h3>
                           </li>
                        </ol>
                     </div>
                  </div>
               </div>
         </main>
         </div>

         <script>
            window.addEventListener("DOMContentLoaded", () => Alpine.start());
         </script>
      </body>

      </html>


<?php
   }
}
?>