<?php

include('php/database.php');
include('php/security.php');
session_start();
if (logged_in()) {
    header('location:../login.php');
}
$id = $_SESSION['id'];
$results = mysqli_query($connection, "SELECT `date`, `id`, `name`, `email`, `number`, `password`, `phone`, `address`, `country`, `gender`, `image`, `vcode`, `verified`, `verify`, `balance`, `totalbalance`, `investbalance`, `profit`, `totaldeposit`, `totalwithdrawal`, `loanlimit`, `availableloan`, `ongoingloan`, `savings`, `idcard`, `idcardback`, `accountstatus`, `pina`, `pinb`, `pinc`, `pind` FROM users WHERE id ='$id'");
$retrive = mysqli_fetch_array($results);
$date = $retrive['date'];
$id = $retrive['id'];
$name = $retrive['name'];
$email = $retrive['email'];
$number = $retrive['number'];
$password = $retrive['password'];
$phone = $retrive['phone'];
$address = $retrive['address'];
$country = $retrive['country'];
$gender = $retrive['gender'];
$image = $retrive['image'];
$vcode = $retrive['vcode'];
$verified = $retrive['verified'];
$verify = $retrive['verify'];
$balance = $retrive['balance'];
$totalbalance = $retrive['totalbalance'];
$investbalance = $retrive['investbalance'];
$profit = $retrive['profit'];
$totaldeposit = $retrive['totaldeposit'];
$totalwithdrawal = $retrive['totalwithdrawal'];
$loanlimit = $retrive['loanlimit'];
$availableloan = $retrive['availableloan'];
$ongoingloan = $retrive['ongoingloan'];
$savings = $retrive['savings'];
$idcard = $retrive['idcard'];
$idcardback = $retrive['idcardback'];
$accountstatus = $retrive['accountstatus'];
$pina = $retrive['pina'];
$pinb = $retrive['pinb'];
$pinc = $retrive['pinc'];
$pind = $retrive['pind'];

?>


<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=0.7, viewport-fit=cover">
    <title>Savings</title>
    <!-- Favicon and Touch Icons  -->
    <link rel="shortcut icon" href="images/logo.png" />
    <link rel="apple-touch-icon-precomposed" href="images/logo.png" />
    <!-- Font -->
    <link rel="stylesheet" href="fonts/fonts.css" />
    <!-- Icons -->
    <link rel="stylesheet" href="fonts/icons-alipay.css">
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
    <link rel="manifest" href="_manifest.json" data-pwa-version="set_in_manifest_and_pwa_js">
    <link rel="apple-touch-icon" sizes="192x192" href="app/icons/icon-192x192.png">

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="font-sans text-[12px] leading-[20px] font-medium text-textGray bg-white w-full m-auto overflow-hidden">
    <!-- preloade -->
    <div class="preload preload-container">
        <div class="preload-logo"></div>
    </div>
    <!-- /preload -->
    <div class="app-header st1">
        <div class="tf-container">
            <?php
            if ($verify == '0') {

                if ($idcard == '') { ?>
                    <div
                        class="w-full bg-red-500/50 border border-red-500 text-white-700 px-4 py-3 rounded-lg flex justify-between items-center">
                        <span class="font-medium">Notice! Your account is not verified please submit all necessary
                            documents.</span>
                        <a href="verify-account.php"
                            class="text-white font-semibold underline hover:text-red-800 transition">Submit Documents</a>
                    </div>

                    <?php
                } else {
                    ?>
                    <div
                        class="w-full bg-yellow-500/40 border border-yellow-500 text-white-700 px-4 py-3 rounded-lg flex justify-between items-center">
                        <span class="font-medium">Your Verification is pending Please wait.</span>

                    </div>


                <?php }

            } else {



            }


            ?>

            <div class="tf-topbar d-flex justify-content-between align-items-center">
                <a class="user-info d-flex justify-content-between align-items-center" href="profile.php">
                    <img src="images/user/<?php echo $image ?>" alt="image">

                    <div class="content">
                        <h4 class="text-white"><?php echo $name ?></h4>
                        <p class="text-white fw_4"><?php echo $number ?></p>
                    </div>
                </a>
                &nbsp; &nbsp; <div class="gtranslate_wrapper"></div>
                <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
                <script src="https://cdn.gtranslate.net/widgets/latest/dropdown.js" defer></script>
                <div class="d-flex align-items-center gap-4">

                    <a href="#" id="btn-popup-up" class="icon-notification1"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-secton">
        <div class="tf-container">
            <div class="max-w-4xl mx-auto bg-blue-300/40 rounded-lg shadow-lg overflow-hidden  p-4 mt-24">
                <!-- Savings Balance -->
                <div class="flex flex-col items-center justify-center py-6">
                    <p class="text-gray-200 text-lg">Savings Balance</p>
                    <p class="text-4xl font-bold text-white">$<?php echo $savings ?></p>
                </div>

                <!-- Horizontal Divider -->
                <div class="my-4 border-t border-blue-800/50"></div>

                <!-- Buttons -->
                <div class="flex justify-between">
                    <a href="save-money.php"
                        class=" px-4 py-2 bg-blue-300/80 border border-blue-900 text-white rounded-lg text-sm font-medium hover:bg-blue-300/30 transition">
                        Add To Savings
                    </a>
                    <a href="remove-savings.php"
                        class=" px-4 py-2 bg-blue-300/80 border border-blue-900 text-white rounded-lg text-sm font-medium hover:bg-blue-300/30 transition">
                        Withdraw from savings
                    </a>
                </div>

                <!-- Slider Section -->
                <div class="mt-4">
                    <div class="flex gap-2 overflow-x-auto scrollbar-hide">
                        <div class="flex-1 min-w-[200px] bg-white p-4 rounded-lg shadow-md border border-gray-200">
                            <p class="text-gray-500 text-sm">Available Balance</p>
                            <p class="text-xl font-semibold text-gray-800">$<?php echo $balance ?></p>
                        </div>
                        <div class="flex-1 min-w-[200px] bg-white p-4 rounded-lg shadow-md border border-gray-200">
                            <p class="text-gray-500 text-sm">Total Balance</p>
                            <p class="text-xl font-semibold text-gray-800">$<?php echo $totalbalance ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="max-w-4xl mx-auto p-6">
        <h2 class="text-2xl font-semibold text-blue-900 text-center mb-6">Benefits of Saving with Lenexbanking</h2>

        <ul class="space-y-4">
            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Earn **high-interest rates** to grow your wealth faster.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Your savings are **insured and protected** for peace of mind.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Enjoy **24/7 online and mobile banking access**.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Set up **automatic savings plans** to save effortlessly.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Withdraw funds **anytime, anywhere** without hassle.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Enjoy **zero hidden fees**—full transparency on transactions.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Get **exclusive discounts and rewards** for saving regularly.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Receive **personalized financial advice** from experts.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Get **early access to loans** and better credit scores.</span>
            </li>

            <li class="flex items-start gap-3">
                <svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>Support a **sustainable and ethical banking system**.</span>
            </li>
        </ul>
    </div>



    <div class="fixed bottom-0 left-0 w-full bg-white border-t-4 border-blue-900/50 shadow-lg">
        <div class="flex justify-around items-center py-3 relative">
            <!-- Home (Active with Background & Badge) -->
            <a href="index.php" class="flex flex-col items-center   px-4 py-2 rounded-lg cursor-pointer relative">

                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>

                <span class="text-xs  font-medium">Home</span>


            </a>

            <!-- History -->
            <a href="history.php"
                class="flex flex-col items-center text-gray-600 hover:text-blue-900 cursor-pointer px-4 py-2 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>

                <span class="text-xs font-medium">History</span>
            </a>

            <!-- Top Up -->
            <a href="choose-topup.php"
                class="flex flex-col items-center text-gray-600 hover:text-blue-900 cursor-pointer px-4 py-2 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                <span class="text-xs font-medium">Top Up</span>
            </a>

            <!-- Cards (ATM Card Icon) -->
            <a href="card.php"
                class="flex flex-col items-center text-gray-600 hover:text-blue-900 cursor-pointer px-4 py-2 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect>
                    <line x1="2" y1="10" x2="22" y2="10"></line>
                </svg>
                <span class="text-xs font-medium">Cards</span>
            </a>

            <!-- Profile -->
            <a href="profile.php"
                class="flex flex-col items-center text-gray-600 hover:text-blue-900 cursor-pointer px-4 py-2 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <circle cx="12" cy="7" r="4"></circle>
                    <path d="M5.5 20a7.5 7.5 0 0113 0"></path>
                </svg>
                <span class="text-xs font-medium">Profile</span>
            </a>
        </div>
    </div>





    <div class="tf-panel up">
        <div class="panel-box panel-up panel-noti">
            <div class="header is-fixed">
                <div class="tf-container">
                    <div class="tf-statusbar d-flex justify-content-center align-items-center">
                        <a href="#" class="clear-panel"> <i class="icon-left"></i> </a>
                        <h3>Notification</h3>
                    </div>
                </div>
            </div>
            <div id="app-wrap" class="style1">
                <div class="tf-container">
                    <div class="tf-tab mt-3">
                        <div class="swiper-container tes-noti">
                            <ul class="swiper-wrapper menu-tabs">
                                <li class="swiper-slide nav-tab active "><a href="#">All Notification</a></li>
                            </ul>
                        </div>
                        <div class="content-tab mt-5">
                            <div class="noti-box">


                                <?php
                                $notequery = "SELECT `date`, `nid`, `id`, `subject`, `message` FROM `notifications` WHERE id='$id' ORDER BY nid DESC LIMIT 12";
                                $notequery_run = mysqli_query($connection, $notequery);

                                if (mysqli_num_rows($notequery_run) > 0) {
                                    while ($noterow = mysqli_fetch_assoc($notequery_run)) {

                                        ?>
                                        <div class="noti-list">
                                            <div class="icon-box bg_service-4">
                                                <i class="icon icon-bell"></i>

                                            </div>
                                            <div class="content-right">
                                                <div class="title">
                                                    <h3 class="fw_6"><?php echo $noterow['subject']; ?></h3>
                                                    <span class="fw_6 on_surface_color"><?php echo $noterow['date']; ?></span>
                                                </div>
                                                <div class="desc">
                                                    <p class="on_surface_color fw_4"><?php echo $noterow['message']; ?></p>

                                                </div>
                                            </div>
                                        </div>

                                        <?php
                                    }
                                } else {
                                    echo ' <span class="d-name"><b>No Notification</b></span>';
                                }

                                ?>

                            </div>

                        </div>
                    </div>
                </div>
            </div>



        </div>

    </div>




    <script type="text/javascript" src="javascript/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/bootstrap.min.js"></script>
    <script type="text/javascript" src="javascript/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="javascript/swiper.js"></script>
    <script type="text/javascript" src="javascript/main.js"></script>

</body>


</html>