/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**/ ?>
Contact
top
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
