<?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>support</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" 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=" bg-gray-100 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 class="spinner"></div>
        </div>
    </div>
    <!-- /preload -->
    <div class="app-header st1">
        <div class="tf-container">
            <div class="tf-topbar d-flex justify-content-center align-items-center">
                <a href="#" class="back-btn"><i class="icon-left text-white"></i></a>
                <h3 class="text-white">Credit Card </h3>&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>
        </div>
    </div>
    <?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="relative w-full max-w-4xl mx-auto overflow-hidden rounded-xl mt-24 shadow-lg mb-14">
        <!-- Slider Container -->
        <div id="slider" class="flex transition-transform duration-700 ease-in-out">
            <div class="min-w-full px-4">
                <img src="cards/verve.png" class="w-full h-[300px] object-cover rounded-xl" alt="Verve">
            </div>
            <div class="min-w-full px-4">
                <img src="cards/master.png" class="w-full h-[300px] object-cover rounded-xl" alt="Mastercard">
            </div>
            <div class="min-w-full px-4">
                <img src="cards/visa.png" class="w-full h-[300px] object-cover rounded-xl" alt="Visa">
            </div>
        </div>
    </div>




    <div class="tf-container">




        <!-- Steps to Acquire CREDIT/DEBIT Card -->
        <div class="max-w-4xl mx-auto space-y-4 mb-24">
            <div class="p-4 bg-white rounded-lg shadow-md border-l-4 border-blue-900">
                <h3 class="font-semibold text-lg text-blue-900">Step 1</h3>
                <p class="text-gray-600">Fill out the CREDIT/DEBIT request form with your details.</p>
            </div>
            <div class="w-full flex justify-center py-10">
                <div class="w-[350px] bg-blue-300/30 backdrop-blur-lg text-white text-center p-6 rounded-2xl shadow-lg">
                    <h2 class="text-xl font-semibold">Request For a Card</h2>
                    <p class="text-sm text-gray-600 mt-2">Apply for your CREDIT/DEBIT card and get it delivered to your
                        doorstep.</p>

                    <a href="requestcard.php"
                        class="mt-4 inline-block px-6 py-2 bg-blue-300/80 text-white font-medium rounded-lg hover:bg-blue-300 transition">
                        Request Now
                    </a>
                </div>
            </div>

            <div class="p-4 bg-white rounded-lg shadow-md border-l-4 border-blue-900">
                <h3 class="font-semibold text-lg text-blue-900">Step 2</h3>
                <p class="text-gray-600">Pay for the CREDIT/DEBIT card issuance fee.</p>
            </div>
            <div class="p-4 bg-white rounded-lg shadow-md border-l-4 border-blue-900">
                <h3 class="font-semibold text-lg text-blue-900">Step 3</h3>
                <p class="text-gray-600">Wait for 5 business days to receive your CREDIT/DEBIT card at your door.</p>
            </div>
        </div>

        <?php
        $query = "SELECT * FROM `card` WHERE id='$id' ORDER by cid DESC LIMIT 1";
        $query_run = mysqli_query($connection, $query);

        if (mysqli_num_rows($query_run) > 0) {
            while ($row = mysqli_fetch_assoc($query_run)) {


                ?>


                <div class="max-w-4xl mx-auto space-y-4  mt-24 mb-24">
                    <!-- Title -->
                    <h2 class="text-gray-800 text-xl font-semibold mb-4 text-center">Pending Card</h2>

                    <!-- Card Image -->
                    <div
                        class="w-full h-60 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">
                        <img src="cards/card.png" alt="CREDIT/DEBIT Card" class="w-full h-full object-cover rounded-lg">
                    </div>

                    <!-- Card Details -->
                    <div
                        class="mt-4 bg-gold-900/80 p-6 rounded-lg shadow-md flex justify-between items-center border border-gray-300">
                        <!-- Left Section -->
                        <div class="text-left">
                            <p class="text-white text-sm">Name</p>
                            <p class="text-white font-medium text-lg"><?php echo $row['name'] ?></p>

                            <p class="text-white text-sm mt-2">Number</p>
                            <p class="text-white font-medium text-lg">**** **** **** <?php echo $row['number'] ?></p>

                            <p class="text-white text-sm mt-2">EXP</p>
                            <p class="text-white font-medium text-lg"><?php echo $row['expire'] ?>/27</p>
                        </div>

                        <!-- Vertical Divider -->
                        <div class="w-px h-24 bg-white"></div>

                        <!-- Right Section -->
                        <div class="text-right">
                            <p class="text-white text-sm">CVC</p>
                            <p class="text-white font-medium text-lg"><?php echo $row['cvc'] ?></p>
                        </div>
                    </div>
                </div>


                <?php

            }

        } else {

        }


        ?>
    </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 (CREDIT/DEBIT Card Icon) -->
            <a href="card.php"
                class="flex flex-col items-center text-blue-900/80 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="#90D5FF" viewBox="0 0 24 24"
                    stroke="#90D5FF">
                    <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>


    <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/main.js"></script>
    <script>
        const slider = document.getElementById("slider");
        const slides = slider.children.length;
        let index = 0;

        setInterval(() => {
            index = (index + 1) % slides;
            slider.style.transform = `translateX(-${index * 100}%)`;
        }, 3000);
    </script>


</body>


</html>