@extends('user.layouts.master')

@section('breadcrumb')
    @include('user.components.breadcrumb',[
        'breadcrumbs' => [
            [
                'name'  => __("Dashboard"),
                'url'   => setRoute("user.dashboard"),
            ]
        ], 
        'active' => __($page_title)
    ])
@endsection

@section('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">{{ __("Default Card") }}</h6>
                            <a href="{{ setRoute('user.card.index') }}" class="view-btn">{{ __("View All") }} <i class="las la-arrow-right"></i></a>
                        </div>
                        <div class="virtualCard-slider">
                            <div class="swiper-wrapper ">
                                @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) ?? '';
                                    @endphp 
                                    <div class="swiper-slide card{{ @$card_payments->id }}">
                                        <a href="#0" class="virtualCard-item mx-auto bg_img"
                                            data-background="{{ asset('public/frontend') }}/images/element/card.webp">
                                            <div class="logo-wrapper">
                                                <div class="brand-logo">
                                                    <img src="{{ get_logo($basic_settings) }}" alt="logo">
                                                </div>
                                                <div class="card-logo">
                                                    <img src="{{ get_fav($basic_settings) }}" alt="logo">
                                                </div>
                                            </div>
                                            <div class="card-number-wrapper" data-full-number="{{ @$card_number }}"
                                                onclick="toggleCardNumber()">
                                                <span>********{{ substr($card_number, -4) }}</span>
                                            </div>
                                            <div class="bottom-wrapper">
                                                <div class="holder-name">
                                                    <span class="label">{{ __("Card Holder Name") }}</span>
                                                    <h4 class="name">{{ @$name }}</h4>
                                                </div>
                                                <div class="date-wrapper">
                                                    <span class="label">{{ __("Valid Till") }}</span>
                                                    <h4 class="date">{{ @$expiry_date }}</h4>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @else
                                    <div class="alert alert-primary no-card">
                                        <p>{{ __("No Active Card Available!") }}</p>
                                    </div>
                                @endif
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="recent-transaction-wrapper">
                        <div class="header-area">
                            <h6 class="label">{{ __("Latest Transactions") }}</h6>
                        </div>
                        <ul class="recent-transaction-list card-details" id="card{{ @$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>{{ __("Wallet Balance") }}</p>
                                    <h4 class="title">{{ get_amount(@$user_wallet->balance,@$user_wallet->currency->code) }}</h4>
                                </div>
                                <div class="country-flag">
                                    <img src="{{ 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>{{ __("Total Transactions") }}</p>
                                    <h4 class="title">{{ @$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>{{ __("Save Cards") }}</p>
                                    <h4 class="title">{{ @$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">{{ __("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">{{ __("Latest Transactions") }}</h4>
                    </div>
                    @include('user.components.transaction.index',[
                        'data'  => $transactions
                    ])
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('script')
<script src="{{ 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 = @json($card_payments)[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 = `{{ 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 = @json($add_money);
    var transferMoneyCount = @json($transfer_money);
    var cardPaymentCount = @json($card_payment);
    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: "{{ __('Add Money') }}",
                data: [{ x: new Date().getTime(), y: addMoneyCount }] 
            },
            {
                name: "{{ __('Transfer Money') }}",
                data: [{ x: new Date().getTime(), y: transferMoneyCount }] 
            },
            {
                name: "{{ __('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: "{{ __('Add Money') }}",
                data: [{ x: new Date().getTime(), y: addMoneyCount }] 
            },
            {
                name: "{{ __('Transfer Money') }}",
                data: [{ x: new Date().getTime(), y: transferMoneyCount }] 
            },
            {
                name: "{{ __('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>


@endpush

• [D] auth
• [D] components
• [D] layouts
• [D] partials
• [D] sections
• [F] dashboard.blade.php
  Delete

Secure, Swift, and Smart Payments with NFCPay !

With NFC Pay, experience seamless and secure transactions right at your fingertips. Add your cards, load your wallet, and make payments effortlessly. Activate your merchant account to receive payments or transfer money instantly to other users. NFC Pay combines security, speed, and smart features, making every transaction smooth and reliable. Embrace the future of payments with NFC Pay.

2320

Total User

2320

Happy User

Our Best Customer

How it Works

Quick Steps to NFC Pay

Getting started with NFC Pay is simple and quick. Register your account, add your cards, and you're ready to make payments in no time. Whether you're paying at a store, sending money to a friend, or managing your merchant transactions, NFC Pay makes it easy and secure.

1

Register Your Account

Download the NFC Pay app and sign up with your email or phone number. Complete the registration process by verifying your identity, and set up your secure PIN to protect your account.

2

Add Your Cards

Link your debit or credit cards to your NFC Pay wallet. Simply scan your card or enter the details manually, and you’re set to load funds, shop, and pay with ease.

3

Make Payment

To pay, simply tap your phone or scan the QR code at checkout. You can also transfer money to other users with a few taps. Enjoy fast, contactless payments with top-notch security.

Security System

Advanced Security Features Designed to Protect Your Information Effectively

NFC Pay prioritizes your security with advanced features that safeguard every transaction. From SMS or email verification to end-to-end encryption, we've implemented robust measures to ensure your data is always protected. Our security systems are designed to prevent unauthorized access and provide you with a safe and reliable payment experience.

SMS or Email Verification

Receive instant alerts for every transaction to keep track of your account activities.

KYC Solution

Verify your identity through our Know Your Customer process to prevent fraud and enhance security.

Two Factor Authentication

Dramatically supply transparent backward deliverables before caward comp internal or "organic" sources.

End-to-End Encryption

All your data and transactions are encrypted, ensuring that your sensitive information remains private.

Behavior Tracking

Monitor unusual activity patterns to detect and prevent suspicious behavior in real-time.

Why Choice Us

Top Reasons to Choose Us for Reliable and Expert Solutions

With NFC Pay, you get a trusted platform backed by proven expertise and a commitment to quality. We put our customers first, offering innovative solutions tailored to your needs, ensuring every transaction is secure, swift, and seamless.

1

Proven Expertise

Our team brings years of experience in the digital payments industry to provide reliable services.

2

Commitment to Quality

We prioritize excellence, ensuring that every aspect of our platform meets the highest standards.

3

Customer-Centric Approach

Your needs drive our solutions, and we are dedicated to delivering a superior user experience.

4

Innovative Solutions

We continuously evolve, integrating the latest technologies to enhance your payment experience.

Testimonial Section

Customer Feedback: Real Experiences from Satisfied Clients and Partners

Hear from our users who trust NFC Pay for their everyday transactions. Our commitment to security, ease of use, and exceptional service shines through in their experiences. See why our clients choose NFC Pay for their payment needs and how it has transformed the way they manage their finances.

"NFC Pay has made my transactions incredibly simple and secure. The intuitive interface and quick payment options are game-changers for my business"

Sophia Martinez

"I love how NFC Pay prioritizes security without compromising on convenience. The two-factor authentication and instant alerts give me peace of mind every time I use it."

Emily Clark

"Setting up my merchant account was a breeze, and now I can accept payments effortlessly. NFC Pay has truly streamlined my operations, saving me time and hassle."

John Carter

App Section

Get the NFC Pay App for Seamless Transactions Anytime, Anywhere

Unlock the full potential of NFC Pay by downloading our app, designed to bring secure, swift, and smart transactions to your fingertips. Whether you're paying at a store, transferring money to friends, or managing your business payments, the NFC Pay app makes it effortless. Available on both iOS and Android, it's your all-in-one solution for convenient and reliable digital payments. Download now and experience the future of payments!

Get it on

Google Pay

Download On The

Apple Store