@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

Categories

• Blog 1
• Payment 1
• Competitive Research 1
• Information Technology 0

Recent Posts

Mar 27, 2024

Enhancing Payment Security: The Role...

Mar 27, 2024

The Rise of Contactless Payments:...

The Future of Digital Wallets: How Mobile Payments are Shaping the Financial Landscape

Digital wallets have fundamentally transformed how we manage money, offering a streamlined, secure, and highly efficient method for handling payments and transactions. By consolidating credit, debit, and loyalty card information into a single app, digital wallets simplify the payment process and eliminate the need for physical cards, enhancing both convenience and security.
As digital wallets evolve, they are integrating advanced features that push the boundaries of traditional payment methods. Biometric authentication, such as fingerprint and facial recognition, adds an extra layer of security, ensuring that only authorized users can access their payment information. Real-time transaction alerts provide instant notifications for every transaction, allowing users to monitor their spending and detect any unauthorized activity swiftly. Budgeting tools within digital wallets offer personalized insights and financial management capabilities, helping users track their expenses and plan their budgets more effectively.
The growing adoption of digital wallets is fueled by their ease of use and the increasing demand for contactless payment solutions. As technology advances, digital wallets are likely to incorporate even more innovative features, such as artificial intelligence for personalized financial advice, integrated loyalty programs for seamless rewards management, and cross-border transaction capabilities for global shopping convenience.
The integration of these features is reshaping the financial landscape by making transactions not only faster but also more secure and user-friendly. The future of digital wallets is set to further revolutionize how we handle our finances, offering an all-encompassing solution that caters to the evolving needs of modern consumers. As digital wallets continue to advance, they will play an increasingly central role in shaping the future of financial interactions, driving the global shift towards a more digital and cashless economy.

Tags

• blog