<?php
$total = InTransaction::find_by_query("SELECT * FROM in_transaction WHERE user_id =$user->id ");
$total_success = InTransaction::find_by_query("SELECT * FROM in_transaction WHERE status = 1 AND user_id =$user->id ");
$total_failed = InTransaction::find_by_query("SELECT * FROM in_transaction WHERE status = 0 AND user_id =$user->id ");

$his_payments = Payment::find_by_query("SELECT * FROM payment WHERE user_id =$user->id");
$total_topup = 0;
foreach ($his_payments as $his_payment) {

    $total_topup += intval($his_payment->amount);
}

$today_payments = Payment::find_by_query("SELECT * FROM payment WHERE DATE(date_created) = '" . date('Y-m-d') . "' AND amount >0");
$paid_today = Payment::find_by_query("SELECT SUM(amount) as amount, date_created FROM payment WHERE DATE(date_created) = '" . date('Y-m-d') . "' AND amount >0");
$validation_services = validation::find_by_query("SELECT * FROM `validation` WHERE service_id = 20 AND status = 0");
$bvn_phone_services = validation::find_by_query("SELECT * FROM `validation` WHERE sub_service = 'BVN Search by Phone Number' AND status=0");
$jamb_services = Jamb::find_by_query("SELECT * FROM jamb WHERE status = 0");

$amount_paid_today = array_shift($paid_today)->amount;

$total_todays_payments = count($today_payments);
$pending_validation_services = count($validation_services);
$pending_bvn_phone_services = count($bvn_phone_services);
$pending_jamb_services = count($jamb_services);


?>


<?php
$total = InTransaction::find_by_query("SELECT * FROM in_transaction WHERE user_id =$user->id ");
$total_success = InTransaction::find_by_query("SELECT * FROM in_transaction WHERE status = 1 AND user_id =$user->id ");
$total_failed = InTransaction::find_by_query("SELECT * FROM in_transaction WHERE status = 0 AND user_id =$user->id ");

$his_payments = Payment::find_by_query("SELECT * FROM payment WHERE user_id =$user->id ORDER BY id DESC LIMIT 3");
$total_topup = 0;
foreach ($his_payments as $his_payment) {

    $total_topup += intval($his_payment->amount);
}
?>

<div class="p-2 sm:ml-64 mb-14">
    <nav class="md:max-w-max flex px-5 py-2 mt-20 mx-2 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-teal-800 dark:border-gray-700"
        aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="<?= BASE_URL ?>"
                    class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                    <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                    </svg>
                    Home
                </a>
            </li>

        </ol>
    </nav>
    <div class="p-2 rounded-lg dark:border-gray-700">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 ">
            <div
                class="flex flex-col rounded text-gray-100 p-4 h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                <p class="flex items-center mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        style="fill: rgb(205, 204, 204);transform: ;msFilter:;">
                        <path
                            d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z">
                        </path>
                    </svg>
                    <span class="flex-1 ml-3 whitespace-nowrap text-sm">User Details</span>
                </p>
                <p class="font-bold text-sm">
                    <?= ($user->first_name . " " . $user->last_name) ?>
                </p>
                <p class="text-sm">
                    USER ID:
                    <?= md5($user->id) ?>
                </p>
            </div>
            <div>
                <div
                    class="flex items-center justify-between p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24"
                            style="fill: rgb(255, 255, 255);transform: ;msFilter:;">
                            <path
                                d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-7.5 12a2.5 2.5 0 1 1 0-5 2.47 2.47 0 0 1 1.5.512c-.604.456-1 1.173-1 1.988s.396 1.532 1 1.988a2.47 2.47 0 0 1-1.5.512zm4 0a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z">
                            </path>
                        </svg>
                        <p class="font-bold text-2xl text-white">₦
                            <?= number_format($wallet->balance) ?>
                        </p>
                    </div>
                    <div class="flex items-center rounded-xl h-28 ">

                        <a href="./wallet"
                            class="rounded-lg text-white border px-5 py-2 text-sm md:py-3 hover:bg-gray-900 hover:scale-105 transition-all  bg-teal-800">Fund
                            Wallet</a>
                    </div>
                </div>

            </div>
        </div>

        <h3 class="text-gray-400 text-sm">Analytics</h3>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 mt-2">

            <div>
                <a href="<?= BASE_URL ?>/users"
                    class="flex items-center justify-evenly p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div class="flex flex-col items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24"
                            style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
                            <path
                                d="M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z">
                            </path>
                            <path
                                d="M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z">
                            </path>
                        </svg>
                        <span class="font-bold text-lg text-white">Users</span>

                    </div>
                    <p class="font-bold text-2xl text-white">
                        <?= number_format(count(User::find_all())) ?>
                    </p>

                </a>
            </div>
            <div>
                <a href="<?= BASE_URL ?>/users"
                    class="flex items-center justify-evenly p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div class="flex flex-col items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24"
                            style="fill: rgba(255, 255, 255, 1);transform: scaleY(-1);msFilter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);">
                            <path
                                d="M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-1 11a3 3 0 0 0-3 3H7a3 3 0 0 0-3-3V9a3 3 0 0 0 3-3h10a3 3 0 0 0 3 3v6z">
                            </path>
                            <path
                                d="M12 8c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z">
                            </path>
                        </svg>
                        <span class="font-bold text-lg text-white">Amount Paid Today</span>
                    </div>
                    <p class="font-bold text-2xl text-white">
                        ₦
                        <?= number_format($amount_paid_today) ?>
                    </p>

                </a>
            </div>
            <div>
                <a href="<?= BASE_URL ?>/users"
                    class="flex items-center justify-evenly p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div class="flex flex-col items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24"
                            style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
                            <path
                                d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zM4 6h16v2H4V6zm0 12v-6h16.001l.001 6H4z">
                            </path>
                            <path d="M6 14h6v2H6z"></path>
                        </svg>
                        <span class="font-bold text-lg text-white">Payments made Today</span>
                    </div>
                    <p class="font-bold text-2xl text-white">
                        <?= number_format($total_todays_payments) ?>
                    </p>

                </a>
            </div>
            <div>
                 <a href="<?= BASE_URL ?>/validation_pending" 
                    class="flex items-center justify-evenly p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div class="flex flex-col items-center">
                        <img class="w-[120px]" src="<?= ROOT_URL ?>/assets/img/validate_new.png" alt="">


                        <span class="font-bold text-lg text-white">Validation Services</span>
                        <span class="text-white text-sm">NIN validation & IPE clearing</span>
                    </div>
                    <p class="font-bold text-2xl text-white">
                        <?= number_format($pending_validation_services) ?>
                    </p>

                </a>
            </div>
             <div>
                 <a href="<?= BASE_URL ?>/bvn_phone_pending" 
                    class="flex items-center justify-evenly p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div class="flex flex-col items-center">
                        <img class="w-[150px]" src="<?= ROOT_URL ?>/assets/img/validate_new.png" alt="">


                        <span class="font-bold text-lg text-white">BVN Search with Phone</span>
                        <span class="text-white text-sm">BVN Search with Phone</span>
                    </div>
                    <p class="font-bold text-2xl text-white">
                        <?= number_format($pending_bvn_phone_services) ?>
                    </p>

                </a>
            </div>
            <div>
                <a href="<?= BASE_URL ?>/jamb_pending"
                    class="flex items-center justify-evenly p-4 rounded h-full bg-emerald-500 shadow-emerald-950 shadow-lg">
                    <div class="flex flex-col items-center">
                        <img class="w-[150px]" src="<?= ROOT_URL ?>/assets/img/jamb_logo.png" alt="">


                        <span class="font-bold text-lg text-white">Jamb Services</span>
                    </div>
                    <p class="font-bold text-2xl text-white">
                        <?= number_format($pending_jamb_services) ?>
                    </p>

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

        <h3 class="text-gray-400 text-sm">Verification Services</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-center justify-center rounded py-4 ">
            <a href="<?= BASE_URL ?>/verifications/-nin_verifications"
                class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                <div class="flex">
                    <div class="w-2/4 flex">

                        <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                style="fill: #0f5132;transform: ;msFilter:;">
                                <path
                                    d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                </path>
                            </svg>
                        </div>
                        <span class="font-bold">NIN Verifications</span>

                    </div>
                    <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                        <div class="text-right">

                        </div>
                    </div>

                </div>

                <div class="flex flex-col my-3">
                    <span class="text-xs">Verify people using their National Identity Number.</span>
                </div>
                <div class="flex justify-between">
                    <div class="text-right">
                        <span class="text-sm bg-teal-800 text-white rounded py-1 px-2 hover:scale-105">Use Service</span>

                    </div>

                </div>

            </a>
            <?php $services = Service::find_by_query("SELECT * FROM service WHERE category='BVN' || category='PERSONALIZATION'");
            // print_r($services);
            foreach ($services as $service):
                if ($user->role == 1 || ($service->display == 1)):
                    ?>
                    <a href="<?= BASE_URL ?>/varifications/-verification_page/<?= $service->id ?>"
                        class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                        <div class="flex">
                            <div class="w-2/4 flex">

                                <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        style="fill: #0f5132;transform: ;msFilter:;">
                                        <path
                                            d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                        </path>
                                    </svg>
                                </div>
                                <span class="font-bold">
                                    <?= $service->service_name ?>
                                </span>

                            </div>
                            <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                                <div class="text-right">
                                    <?php if ($service->status == 1): ?>
                                        <span
                                            class=" bg-[#d1e7dd] border border-[#badbcc] px-2 rounded text-[#0f5132] text-xs py-1 whitespace-nowrap">
                                            Service Available
                                        </span>
                                    <?php else: ?>

                                        <span
                                            class=" bg-[#f8d7da] border border-[#f5c2c7] px-2 rounded text-[#842029] text-xs py-1 whitespace-nowrap">
                                            Service Shutdown
                                        </span>
                                    <?php endif; ?>

                                </div>
                            </div>

                        </div>

                        <div class="flex flex-col my-3">
                            <span class="text-xs">
                                <?= $service->description ?>
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm bg-teal-800 text-white rounded py-1 px-2 hover:scale-105 whitespace-nowrap">Use
                                Service</span>
                            <div class="text-right">
                                <span
                                    class=" bg-[#d1e7dd] border border-[#badbcc] px-2 rounded text-[#0f5132] text-xs py-1 whitespace-nowrap">
                                    ₦
                                    <?= $service->service_fee ?>
                                </span>
                            </div>

                        </div>

                    </a>

                <?php endif; endforeach; ?>
            <a href="<?= BASE_URL ?>/verifications/-jamb_services"
                    class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                <div class="flex">
                    <div class="w-2/4 flex">

                        <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                style="fill: #0f5132;transform: ;msFilter:;">
                                <path
                                    d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                </path>
                            </svg>
                        </div>
                        <span class="font-bold">JAMB Services</span>

                    </div>
                    <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                        <div class="text-right">

                        </div>
                    </div>

                </div>

                <div class="flex flex-col my-3">
                    <span class="text-xs">JAMB Services</span>
                </div>
                <div class="flex justify-between">
                    <div class="text-right">
                        <span class="text-sm bg-cyan-800 text-white rounded py-1 px-2 hover:scale-105">Use
                            Service</span>

                    </div>

                </div>

            </a>
    
             <a href="<?= BASE_URL ?>/verifications/-validation_services" 
                class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                <div class="flex">
                    <div class="w-2/4 flex">

                        <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                style="fill: #0f5132;transform: ;msFilter:;">
                                <path
                                    d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                </path>
                            </svg>
                        </div>
                        <span class="font-bold">NIN validation & IPE clearing</span>

                    </div>
                    <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                        <div class="text-right">

                        </div>
                    </div>

                </div>

                <div class="flex flex-col my-3">
                    <span class="text-xs">NIN validation & IPE clearing</span>
                </div>
                <div class="flex justify-between">
                    <div class="text-right">
                        <span class="text-sm bg-cyan-800 text-white rounded py-1 px-2 hover:scale-105">Use
                            Service</span>

                    </div>

                </div>

            </a>
            <a href="<?= BASE_URL ?>/verifications/-bvn_phone_page/21" 
                class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                <div class="flex">
                    <div class="w-2/4 flex">

                        <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                style="fill: #0f5132;transform: ;msFilter:;">
                                <path
                                    d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                </path>
                            </svg>
                        </div>
                        <span class="font-bold">BVN Search with Phone Number</span>

                    </div>
                    <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                        <div class="text-right">

                        </div>
                    </div>

                </div>

                <div class="flex flex-col my-3">
                    <span class="text-xs">BVN Search with Phone Number</span>
                </div>
                <div class="flex justify-between">
                    <div class="text-right">
                        <span class="text-sm bg-cyan-800 text-white rounded py-1 px-2 hover:scale-105">Use
                            Service</span>

                    </div>

                </div>

            </a>
            <a href="<?= BASE_URL ?>/varifications/-verification_page/17"
                    class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                    <div class="flex">
                        <div class="w-2/4 flex">
    
                            <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    style="fill: #0f5132;transform: ;msFilter:;">
                                    <path
                                        d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                    </path>
                                </svg>
                            </div>
                            <span class="font-bold">Voter's Card Verifications</span>
    
                        </div>
                        <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                            <div class="text-right">
    
                            </div>
                        </div>
    
                    </div>
    
                    <div class="flex flex-col my-3">
                        <span class="text-xs">Verify people using their Voter's card Number.</span>
                    </div>
                    <div class="flex justify-between">
                        <div class="text-right">
                            <span class="text-sm bg-teal-800 text-white rounded py-1 px-2 hover:scale-105">Use Service</span>
    
                        </div>
    
                    </div>
    
                </a>    
            <a href="<?= BASE_URL ?>/varifications/-verification_page/17"
                class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                <div class="flex">
                    <div class="w-2/4 flex">

                        <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                style="fill: #0f5132;transform: ;msFilter:;">
                                <path
                                    d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                </path>
                            </svg>
                        </div>
                        <span class="font-bold">Bank Account Verifications</span>

                    </div>
                    <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                        <div class="text-right">

                        </div>
                    </div>

                </div>

                <div class="flex flex-col my-3">
                    <span class="text-xs">Verify people using their Bank Account Number.</span>
                </div>
                <div class="flex justify-between">
                    <div class="text-right">
                        <span
                            class="text-sm bg-teal-800 text-white rounded py-1 px-2 hover:scale-105">Use Service</span>

                    </div>

                </div>

            </a>
            <a href="<?= BASE_URL ?>/varifications/-verification_page/17"
                class="flex flex-col h-auto mb-2 p-4 text-teal-800 bg-emerald-200 transition-all shadow-emerald-900 shadow-md rounded w-full hover:text-emerald-600">
                <div class="flex">
                    <div class="w-2/4 flex">

                        <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                style="fill: #0f5132;transform: ;msFilter:;">
                                <path
                                    d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z">
                                </path>
                            </svg>
                        </div>
                        <span class="font-bold">TIN Verifications</span>

                    </div>
                    <div class="w-2/4 flex justify-end text-[0.8rem] font-bold">
                        <div class="text-right">

                        </div>
                    </div>

                </div>

                <div class="flex flex-col my-3">
                    <span class="text-xs">Verify Tax Identification Number (TIN Number).</span>
                </div>
                <div class="flex justify-between">
                    <div class="text-right">
                        <span class="text-sm bg-teal-800 text-white rounded py-1 px-2 hover:scale-105">Use
                            Service</span>

                    </div>

                </div>

            </a>


        </div>


        <h3 class="text-gray-400 text-sm">Transactions</h3>

        <div
            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 items-center justify-center rounded py-4 ">

            <?php foreach ($his_payments as $his_payment): ?>
                <div
                    class="flex flex-col h-auto mb-2 p-2 text-teal-800 bg-emerald-200 hover:scale-y-105 transition-all shadow-emerald-900 shadow-md rounded w-full cursor-pointer">
                    <div class="flex">
                        <div class="w-3/4 flex">

                            <div class="rounded-full bg-white p-2 w-10 h-10 flex items-center justify-center mr-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"
                                    style="fill: #0b9152;transform: ;msFilter:;">
                                    <path
                                        d="M8 12.052c1.995 0 3.5-1.505 3.5-3.5s-1.505-3.5-3.5-3.5-3.5 1.505-3.5 3.5 1.505 3.5 3.5 3.5zM9 13H7c-2.757 0-5 2.243-5 5v1h12v-1c0-2.757-2.243-5-5-5zm11.294-4.708-4.3 4.292-1.292-1.292-1.414 1.414 2.706 2.704 5.712-5.702z">
                                    </path>
                                </svg>
                            </div>

                            <div class="flex flex-col">
                                <span class="font-bold text-sm">Wallet Top-up</span>
                                <span class="text-xs">
                                    TRX-
                                    <?= $his_payment->reference ?><br>
                                    <?= $his_payment->date_created ?>
                                </span>
                            </div>
                        </div>
                        <div class="w-1/4 flex justify-end text-[#0f5132] text-[0.8rem] font-bold">
                            + ₦
                            <?= number_format($his_payment->amount) ?>
                        </div>
                    </div>
                    <div class="text-right">
                        <span class=" bg-[#d1e7dd] border border-[#badbcc] px-2 rounded text-[#0f5132] text-xs py-1 ">
                            Successful
                        </span>
                    </div>

                </div>
            <?php endforeach ?>

        </div>

        <a href="<?= BASE_URL ?>/transactions"
            class="text-white mt-2 border w-full md:max-w-max lg:max-w-max bg-teal-800 rounded-xl py-2 px-4 md:px-14 hover:scale-105">More</a>
    </div>
</div>