<?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');
?>

      <body x-data class="is-header-blur" 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">
            <h2 class="mt-3 text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
               Quick Bills Payment
            </h2>
            <div class="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-4 lg:gap-6">
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Insurance
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-solid fa-shield-halved text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-solid fa-shield-halved translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Electricity
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-sharp fa-solid fa-lightbulb text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-sharp fa-solid fa-lightbulb translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Taxes
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-solid fa-money-check text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-solid fa-money-check translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Utility
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-solid fa-cash-register text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-solid fa-cash-register translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Transport
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-solid fa-taxi text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-solid fa-taxi translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Cable TV
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-solid fa-tv text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-solid fa-tv translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Tuition
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-solid fa-graduation-cap text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-solid fa-graduation-cap translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
               <div class="card flex-row justify-between p-4">
                  <div>
                     <p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
                        Hotel & AirBnb
                     </p>
                     <div class="mt-3 flex items-baseline space-x-1"></div>
                     <?php
                     include('./send-button.php');
                     ?>
                  </div>
                  <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10">
                     <i class="fa-sharp fa-solid fa-hotel text-xl text-primary"></i>
                  </div>
                  <div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
                     <i class="fa-sharp fa-solid fa-hotel translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
                  </div>
               </div>
            </div>
         </main>
         </div>

         <div id="paybill"></div>
         <div id="paybill-alert"></div>
         <script>
            window.addEventListener("DOMContentLoaded", () => Alpine.start());
         </script>
      </body>

      </html>


<?php
   }
}
?>