@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

The Future of Digital Wallets:...

Mar 27, 2024

The Rise of Contactless Payments:...

Enhancing Payment Security: The Role of Encryption and Tokenization in Digital Transactions

As digital transactions proliferate, ensuring robust payment security is more critical than ever. Two foundational technologies that are pivotal in this effort are encryption and tokenization.
Encryption is a process that transforms data into a secure format, known as ciphertext, which can only be deciphered using a specific decryption key. This means that even if data is intercepted during transmission, it remains unreadable and protected from unauthorized access. Encryption is essential in safeguarding sensitive payment information, such as credit card details and personal data, during online transactions.
Tokenization, on the other hand, involves substituting sensitive data with unique identifiers or "tokens." These tokens serve as placeholders and have no value outside of the specific transaction context. If intercepted, tokens are meaningless and cannot be used to access the original sensitive data. This method significantly reduces the risk of fraud and data breaches, as the actual payment information is not stored or transmitted.
Together, encryption and tokenization form a powerful security framework. Encryption ensures that data is protected during transmission, while tokenization minimizes the risk of exposing sensitive information by replacing it with secure, non-sensitive tokens.
These technologies are integral to modern payment platforms, providing a robust defense against cyber threats. By implementing advanced encryption and tokenization techniques, businesses can enhance the security of digital transactions, ensuring that users' financial and personal information remains safe. This comprehensive approach not only builds user trust but also fortifies the overall security infrastructure of digital payment systems. As cyber threats evolve, the continued advancement of encryption and tokenization will be crucial in maintaining secure and reliable payment processes.

Tags

• Payment