/home/kueuepay/public_html/storage/framework/views/6039e1f73f39644aca458efc7c164de5a1f4722a.php
<?php $__env->startSection('breadcrumb'); ?>
<?php echo $__env->make('user.components.breadcrumb',[
'breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("user.dashboard"),
]
],
'active' => __($page_title)
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<div class="body-wrapper">
<div class="dashboard-wallet">
<div class="row flex-row-reverse">
<div class="col-lg-4 col-md-6">
<div class="dashboard-virtualcard-item">
<div class="dash-virtualCard-wrapper">
<div class="header-area">
<h6 class="label"><?php echo e(__("Default Card")); ?></h6>
<a href="<?php echo e(setRoute('user.card.index')); ?>" class="view-btn"><?php echo e(__("View All")); ?> <i class="las la-arrow-right"></i></a>
</div>
<div class="virtualCard-slider">
<div class="swiper-wrapper ">
<?php if(!empty($card_payments)): ?>
<?php
$name = decrypt($card_payments->name) ?? '';
$card_number = decrypt($card_payments->card_number) ?? '';
$card_cvc = decrypt($card_payments->card_cvc) ?? '';
$expiry_date = decrypt($card_payments->expiry_date) ?? '';
?>
<div class="swiper-slide card<?php echo e(@$card_payments->id); ?>">
<a href="#0" class="virtualCard-item mx-auto bg_img"
data-background="<?php echo e(asset('public/frontend')); ?>/images/element/card.webp">
<div class="logo-wrapper">
<div class="brand-logo">
<img src="<?php echo e(get_logo($basic_settings)); ?>" alt="logo">
</div>
<div class="card-logo">
<img src="<?php echo e(get_fav($basic_settings)); ?>" alt="logo">
</div>
</div>
<div class="card-number-wrapper" data-full-number="<?php echo e(@$card_number); ?>"
onclick="toggleCardNumber()">
<span>********<?php echo e(substr($card_number, -4)); ?></span>
</div>
<div class="bottom-wrapper">
<div class="holder-name">
<span class="label"><?php echo e(__("Card Holder Name")); ?></span>
<h4 class="name"><?php echo e(@$name); ?></h4>
</div>
<div class="date-wrapper">
<span class="label"><?php echo e(__("Valid Till")); ?></span>
<h4 class="date"><?php echo e(@$expiry_date); ?></h4>
</div>
</div>
</a>
</div>
<?php else: ?>
<div class="alert alert-primary no-card">
<p><?php echo e(__("No Active Card Available!")); ?></p>
</div>
<?php endif; ?>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="recent-transaction-wrapper">
<div class="header-area">
<h6 class="label"><?php echo e(__("Latest Transactions")); ?></h6>
</div>
<ul class="recent-transaction-list card-details" id="card<?php echo e(@$card_payments->id); ?>-details">
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-md-6 mb-40">
<div class="dashboard-card-item mb-60">
<div class="row mb-20-none">
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p><?php echo e(__("Wallet Balance")); ?></p>
<h4 class="title"><?php echo e(get_amount(@$user_wallet->balance,@$user_wallet->currency->code)); ?></h4>
</div>
<div class="country-flag">
<img src="<?php echo e(get_image(@$user_wallet->currency->flag,'currency-flag')); ?>" alt="flag">
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p><?php echo e(__("Total Transactions")); ?></p>
<h4 class="title"><?php echo e(@$total_transactions); ?></h4>
</div>
<div class="icon">
<i class="las la-dollar-sign"></i>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p><?php echo e(__("Save Cards")); ?></p>
<h4 class="title"><?php echo e(@$total_cards); ?></h4>
</div>
<div class="icon">
<i class="las la-credit-card"></i>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-chart">
<div class="chart-wrapper">
<div class="dashboard-header-wrapper">
<h4 class="title"><?php echo e(__("Transaction Overview")); ?></h4>
</div>
<div class="chart-container">
<div id="chart-area">
</div>
<div id="chart-bar">
</div>
</div>
</div>
</div>
<div class="dashboard-list-area mt-30">
<div class="dashboard-header-wrapper">
<h4 class="title"><?php echo e(__("Latest Transactions")); ?></h4>
</div>
<?php echo $__env->make('user.components.transaction.index',[
'data' => $transactions
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</div>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('script'); ?>
<script src="<?php echo e(asset('public/frontend/js/apexcharts.js')); ?>"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Initialize Swiper
var swiper = new Swiper(".virtualCard-slider", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
speed: 1000,
breakpoints: {
1199: {
slidesPerView: 1,
},
991: {
slidesPerView: 1,
},
767: {
slidesPerView: 1,
},
575: {
slidesPerView: 1,
},
},
});
// Show the first card's details on page load
let initialCardId = !empty($card_payments) ? $card_payments[0]->id : null;
document.getElementById(`card${initialCardId}-details`).style.display = 'block';
// Handle slide change to show corresponding details
swiper.on('slideChange', function () {
var activeSlideIndex = swiper.realIndex; // Get active slide index
var cardId = <?php echo json_encode($card_payments, 15, 512) ?>[activeSlideIndex].id; // Get the card ID
// Hide all card details
document.querySelectorAll('.card-details').forEach(function (el) {
el.style.display = 'none';
});
// Show details of the active card
document.getElementById(`card${cardId}-details`).style.display = 'block';
// Fetch and update the transactions
fetchTransactions(cardId);
});
function fetchTransactions(cardId) {
const url = `<?php echo e(url('/user/card')); ?>/${cardId}/transactions`;
fetch(url)
.then(response => response.json())
.then(data => {
const transactionList = document.getElementById(`card${cardId}-details`);
transactionList.innerHTML = '';
data.forEach(transaction => {
const li = document.createElement('li');
li.innerHTML = `
<div class="icon-area">
<i class="fas fa-plus-circle"></i>
<div class="title-wrapper">
<h6 class="label">${transaction.type}</h6>
<span>${transaction.trx_id}</span>
</div>
</div>
<div class="content">
<h6 class="amount">${transaction.request_amount}</h6>
<span class="date">At ${new Date(transaction.created_at).toLocaleTimeString()}</span>
</div>`;
transactionList.appendChild(li);
});
})
.catch(error => console.error('Error fetching transactions:', error));
}
// Toggle card number display
let timer;
function toggleCardNumber() {
const cardNumberWrappers = document.getElementsByClassName('card-number-wrapper');
for (let cardNumberWrapper of cardNumberWrappers) {
const fullCardNumber = cardNumberWrapper.getAttribute('data-full-number');
const hiddenCardNumber = fullCardNumber.split(' ').map((num, index) => index < 3 ? '****' : num).join(' ');
if (cardNumberWrapper.innerHTML.includes('****')) {
cardNumberWrapper.innerHTML = fullCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
timer = setTimeout(() => {
cardNumberWrapper.innerHTML = hiddenCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
}, 5000);
} else {
clearTimeout(timer);
cardNumberWrapper.innerHTML = hiddenCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
}
}
}
});
</script>
<script>
var addMoneyCount = <?php echo json_encode($add_money, 15, 512) ?>;
var transferMoneyCount = <?php echo json_encode($transfer_money, 15, 512) ?>;
var cardPaymentCount = <?php echo json_encode($card_payment, 15, 512) ?>;
function getFirstDayOfMonth() {
var today = new Date();
return new Date(today.getFullYear(), today.getMonth(), 1).getTime();
}
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
var startOfMonth = getFirstDayOfMonth();
var data = generateDayWiseTimeSeries(startOfMonth, 30, { min: 30, max: 90 });
var options1 = {
chart: {
id: "chart2",
type: "area",
height: 230,
foreColor: "#ccc",
toolbar: {
autoSelected: "pan",
show: false
}
},
colors: ["#0070e0"],
stroke: {
width: 3
},
grid: {
borderColor: "#0070e0",
clipMarkers: false,
yaxis: {
lines: {
show: false
}
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.55,
opacityTo: 0
}
},
markers: {
size: 5,
colors: ["#000524"],
strokeColor: "#00BAEC",
strokeWidth: 3
},
series: [
{
name: "<?php echo e(__('Add Money')); ?>",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "<?php echo e(__('Transfer Money')); ?>",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "<?php echo e(__('Payments')); ?>",
data: [{ x: new Date().getTime(), y: cardPaymentCount }]
}
],
tooltip: {
theme: "dark"
},
xaxis: {
type: "datetime"
},
yaxis: {
min: 0,
tickAmount: 4
}
};
var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);
chart1.render();
var options2 = {
chart: {
id: "chart1",
height: 130,
type: "bar",
foreColor: "#ccc",
brush: {
target: "chart2",
enabled: true
},
selection: {
enabled: true,
fill: {
color: "#fff",
opacity: 0.4
},
xaxis: {
min: startOfMonth,
max: new Date().getTime()
}
}
},
colors: ["#0070e0"],
series: [
{
name: "<?php echo e(__('Add Money')); ?>",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "<?php echo e(__('Transfer Money')); ?>",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "<?php echo e(__('Payments')); ?>",
data: [{ x: new Date().getTime(), y: cardPaymentCount }]
}
],
stroke: {
width: 2
},
grid: {
borderColor: "#444"
},
markers: {
size: 0
},
xaxis: {
type: "datetime",
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
};
var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);
chart2.render();
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\xampp\htdocs\git\nfcpay\resources\views/user/dashboard.blade.php ENDPATH**/ ?>
Payment System
top
Simple Steps to Complete Your Payment Securely and Efficiently
Making a payment on our website is quick and secure. Start by logging in or creating an account. Select your preferred payment method, input the required details, and review the information. Once you confirm everything is correct, click on the "Submit Payment" button. You’ll receive instant confirmation and can track your payment status through your account dashboard. It’s an easy and secure process.
Go to the Payment Section: Access the payment area on our website or app.
Choose Your Payment Method: Select your preferred payment option.
Enter Payment Details: Provide the necessary payment information.
Verify Your Information: Check that all details are correct.
Confirm Your Payment: Click "Submit Payment" to complete the transaction.
In the digital age, privacy concerns have become increasingly paramount, prompting the European Union to enact the General Data Protection Regulation (GDPR) in 2018. Among its many provisions, GDPR sets strict guidelines for the collection and processing of personal data, including the use of cookies on websites. Privacy Policy
Allow
Decline
