@extends('main.layouts.app')
@section('content')
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css'>
<!-- Add QR Code library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<!-- Add HTML5 QR library -->
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>

.img-cover img {
    max-width: 100%;
    max-height: 100%;
    width: auto!important;
    margin: auto;
}

    .img-cover {
        height: 200px;
        padding: 10px;
    }

    .tract_message {
        color: red;
        font-size: 11px;
        line-height: 12px;
    }

    .card .card-header h4.product_head {
        font-size: 12px;
    }

    .br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .img-cover {
            height: 80px;
            padding: 10px;
        }

    }

    #owl-carousel p {
        color: #0E194D;
        text-align: center;
    }

    .owl-nav {
        margin: 0 !important;
        position: absolute;
        top: 50%;
        padding: 0;
        width: 100%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


    button.owl-prev {
        position: absolute;
        left: 0;
        font-size: 24px !important;
        line-height: 1;
        font-weight: 800 !important;
    }

    button.owl-next {
        position: absolute;
        right: 0;
        line-height: 1;
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    .img_cover {
        padding: 10px;
    }

    .copy-text {
        position: relative;
        /* padding: 10px; */
        background: #fff;
        /* border: 1px solid #ddd; */
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
        display: flex;
    }

    .bg-card-wallet {
        background: #1f365c !important;
        border-radius: 10px;
    }

    .earn_ttl {
        border-radius: 20px;
        text-align: center;
        padding: 10px;
        background: #fff;
    }

    .buy-btn {
        padding: 10px 34px;
    }

    .wallet_earning_logo {
        max-width: 50px;
    }

    .section .section-header h1 {
        margin-bottom: 0;
        font-weight: 700;
        display: inline-block;
        font-size: 24px;
        margin-top: 3px;
        color: #34395e;
    }

    .notify_font .far {
        font-size: 24px;
        color: red;
    }

    #exampleModalScrollable h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 10px;
        margin-bottom: 0;
    }

    #exampleModalScrollable h4 {
        font-size: 24px;
        line-height: 28px;
        color: red;
        padding-right: 10px;
        margin-bottom: 0;
    }

    .copy-text input.text {
        padding: 10px;
        font-size: 18px;
        color: #555;
        border: none;
        outline: none;
    }

    .copy-text button {
        padding: 10px 25px;
        background: #1f365c;
        color: #fff;
        font-size: 18px;
        border: none;
        outline: none;
        border-radius: 10px;
        cursor: pointer;
    }

    .copy-text button:active {
        background: #809ce2;
    }

    .copy-text button:before {
        content: "Copied";
        position: absolute;
        top: -45px;
        right: 0px;
        background: #5c81dc;
        padding: 8px 10px;
        border-radius: 20px;
        font-size: 15px;
        display: none;
    }

    .copy-text button:after {
        content: "";
        position: absolute;
        top: -20px;
        right: 25px;
        width: 10px;
        height: 10px;
        background: #5c81dc;
        transform: rotate(45deg);
        display: none;
    }

    .copy-text.active button:before,
    .copy-text.active button:after {
        display: block;
    }

    .wallet-header h4 {
        margin-bottom: 0;
        font-weight: 700;
        display: inline-block;
        font-size: 16px;
        margin-top: 3px;
        color: #34395e;
    }
</style>
<input type="hidden" name="authtoken" value={{$token}}>
<div class="main-content">
    <section class="section">
        {{-- <div class="section-header justify-content-between">
                <h1><i class="fa fa-fw fa-chart-line"></i> Wallet</h1>
                <div>
                    <button class="btn btn-primary" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal">
                        <i class="fa fa-download" aria-hidden="true" title="Amount Withdrawal" ></i><span class="d-none d-sm-inline-block">Amount Withdrawal</span> </button>
                    <button class="btn btn-primary" title="Inter Wallet Transfer" data-toggle="modal" data-target="#interwallettransfer"><i class="fa fa-exchange" aria-hidden="true"></i> <span class="d-none d-sm-inline-block">Inter Wallet Transfer</span></button>
                    <button class="btn btn-primary" title="Others" data-toggle="modal" data-target="#otherwallettransfer"><i class="fa fa-list-alt" aria-hidden="true"></i> <span class="d-none d-sm-inline-block"> Others</span></button>
                </div>
            </div> --}}


        <div class="section-header d-block bg_blue_color">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            {{-- <div class="dash-cover pr-3">
                                        <img src="img/wallet_circle.png" alt="wallet-circle" class="dash-img">
                                    </div> --}}
                            <div class="dash-text">
                                <h5 class="text-white depo mb-0">
                                    <a href="/"><img src="img/homepage.png" alt="image"> </a>
                                    Wallet
                                </h5>
                            </div>
                        </div>
                        <div>
                        <button class="btn btn-primary" title="Scan QR Code" data-toggle="modal" data-target="#cameraScannerModal">
                        <i class="fa fa-camera" aria-hidden="true" title="Camera Scanner"></i><span class="d-none d-sm-inline-block">Camera Scanner</span> </button>
                        <button class="btn btn-primary" title="Payment Scanner" data-toggle="modal" data-target="#scannerModal">
                        <i class="fa fa-qrcode" aria-hidden="true" title="Payment Scanner"></i><span class="d-none d-sm-inline-block">Scanner</span> </button>
                            <button class="btn btn-primary" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal">
                                <i class="fa fa-download" aria-hidden="true" title="Amount Withdrawal"></i><span class="d-none d-sm-inline-block">Amount Withdrawal</span> </button>
                            <button class="btn btn-primary" title="Inter Wallet Transfer" data-toggle="modal" data-target="#interwallettransfer"><i class="fa fa-exchange" aria-hidden="true"></i> <span class="d-none d-sm-inline-block">Inter Wallet Transferrr</span></button>
                            <button class="btn btn-primary" title="Others" data-toggle="modal" data-target="#otherwallettransfer"><i class="fa fa-list-alt" aria-hidden="true"></i> <span class="d-none d-sm-inline-block"> Others</span></button>

                            {{--
                                <button class="btn btn-primary p-0" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal" style="background: #0e194d;border: none;">
                                    <img src="img/download_btn.png" alt="download">
                                </button> --}}

                        </div>

                    </div>

                </div>

            </div>

        </div>


        <div class="section-body wallet-header">

            <div class="alert alert-success" style="display: none;" role="alert"></div>
            <div class="alert alert-danger" style="display: none;" role="alert"></div>

            <div class="row align-items-center">
                {{-- <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                        <div class="card card-statistic-1">
                            <div class="card-icon bg-info">
                                <i class="far fa-paper-plane"></i>
                            </div>
                            <div class="card-wrap">
                                <div class="card-header">
                                    <h4>Hits</h4>
                                </div>
                                <div class="card-body">
                                    {{ $user_referral_mem ?? 0 }}
                <div class="text-small text-muted">
                    Conversion: 0% </div>
            </div>
        </div>
</div>
</div> --}}
<div class="col-lg-3 col-md-6 col-sm-12 col-12">

    <div class="card">
        <div class="card-body p-2 bg-card-wallet">
            <div class="img_cover d-flex align-items-center">
                <div class="card-icon d-inline-block">
                    <img src="img/wallet_earning.png" alt="wallet_earning" class="wallet_earning_logo">
                </div>
                <h3 class="d-inline-block mb-0 ml-1 text-white">
                    <i class="fa fa-inr" aria-hidden="true"></i>
                    {{ $earning }}
                </h3>
            </div>

            <div class="">
                <div class="card-body p-0">
                    <div class="earn_ttl">
                        <h4>Total Earning</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="col-lg-3 col-md-6 col-sm-12 col-12">
    <a href="/referral-transaction-log">
        <div class="card">
            <div class="card-body p-2 bg-card-wallet">
                <div class="img_cover d-flex align-items-center">
                    <div class="card-icon d-inline-block">
                        <img src="img/premium_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                    </div>
                    <h3 class="d-inline-block mb-0 ml-1 text-white">
                        <i class="fa fa-inr" aria-hidden="true"></i>
                        {{ $referral_cmsn }}
                    </h3>
                </div>

                <div class="">
                    <div class="card-body p-0">
                        <div class="earn_ttl">
                            <h4>Premium Wallet</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
    {{-- <div class="card card-statistic-1">
                            <a href="/referral-transaction-log">
                                <div class="card-icon bg-warning">
                                    <i class="far fa-money-bill-alt"></i>
                                </div>
                            </a>
                            <div class="card-wrap">
                                <div class="card-header">
                                   <a href="referral-transaction-log"><h4>Referral Commission Wallet</h4></a> 
                                </div>
                                <div class="card-body">
                                    {{ Auth::user()->ref_wal_amt ?? '0.00' }}
    <div class="text-small text-muted">
        <i class="fas fa-wallet fa-fw"></i> {{ Auth::user()->ref_wal_amt ?? '0.00' }}
    </div>
</div>
</div>
</div> --}}
</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-12">
    <a href="/gold-transaction-log">
        <div class="card">
            <div class="card-body p-2 bg-card-wallet">
                <div class="img_cover d-flex align-items-center">
                    <div class="card-icon d-inline-block">
                        <img src="img/goldplan_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                    </div>
                    <h3 class="d-inline-block mb-0 ml-1 text-white">
                        <i class="fa fa-inr" aria-hidden="true"></i>
                        {{ Auth::user()->gold_wal_amt ?? 0 }}
                    </h3>
                </div>

                <div class="">
                    <div class="card-body p-0">
                        <div class="earn_ttl">
                            <h4>Stock Wallet</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 col-12">
    <a href="/gold-transaction-log">
        <div class="card">
            <div class="card-body p-2 bg-card-wallet">
                <div class="img_cover d-flex align-items-center">
                    <div class="card-icon d-inline-block">
                        <img src="img/gold-commission-wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                    </div>
                    <h3 class="d-inline-block mb-0 ml-1 text-white">
                        <i class="fa fa-inr" aria-hidden="true"></i>
                        {{ Auth::user()->gold_cmsn_amt ?? '0.00' }}
                    </h3>
                </div>

                <div class="">
                    <div class="card-body p-0">
                        <div class="earn_ttl">
                            <h4>Stock Commission</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>



</div>
<div class="row align-items-center">

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/gold-transaction-log">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/gold_interest_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ Auth::user()->gold_walt_interest_amt ?? '0.00' }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Stock Interest</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/autopull-log">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/autopull_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ $auto_pull_amt ?? 0 }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Auto Pull Wallet</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/promotion-pending-commission">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/promotion_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ $promotion_pending ?? 0 }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Promotion Pending</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/sip-transaction-log">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/promotion_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ $sip_wallet ?? 0 }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Sip Commission Wallet</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/withdraw-transaction-log">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/promotion_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ Auth::user()->withdrawal_wallet ?? 0 }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Withdrawal Wallet</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/gamewallet">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/promotion_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ Auth::user()->wallet ?? 0 }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Game Wallet</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="/game-winning-log">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/promotion_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ Auth::user()->winning_wallet ?? 0 }}
                            {{-- {{ $winning_wallet ?? 0 }} --}}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Winning Wallet</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="#">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/promotion_wallet.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            <i class="fa fa-inr" aria-hidden="true"></i>
                            {{ Auth::user()->salary_wallet ?? 0 }}
                            {{-- {{ $winning_wallet ?? 0 }} --}}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <h4>Salary Wallet</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    
    <div class="col-lg-3 col-md-6 col-sm-12 col-12">

        <div class="card">
            <div class="card-body p-2 bg-card-wallet">
                <div class="img_cover d-flex align-items-center">
                    <div class="card-icon d-inline-block">
                        <img src="img/wallet_earning.png" alt="wallet_earning" class="wallet_earning_logo">
                    </div>
                    <h3 class="d-inline-block mb-0 ml-1 text-white">
                        <i class="fa fa-inr" aria-hidden="true"></i>
                        {{  $credit_wallet}}
                    </h3>
                </div>
    
                <div class="">
                    <div class="card-body p-0">
                        <div class="earn_ttl">
                            <h4>Credit Wallet</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
   <div class="col-lg-3 col-md-6 col-sm-12 col-12">

        <div class="card">
            <div class="card-body p-2 bg-card-wallet">
                <div class="img_cover d-flex align-items-center">
                    <div class="card-icon d-inline-block">
                        <img src="img/wallet_earning.png" alt="wallet_earning" class="wallet_earning_logo">
                    </div>
                    <h3 class="d-inline-block mb-0 ml-1 text-white">
                    
                        {{  $star_wallet }}
                    </h3>
                </div>
    
                <div class="">
                    <div class="card-body p-0">
                        <div class="earn_ttl">
                            <h4>Star Wallet</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>


    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="javascript:;" data-toggle="modal" data-target="#exampleModalScrollable">
            <div class="card">
                <div class="card-body p-2 bg-card-wallet">
                    <div class="img_cover d-flex align-items-center">
                        <div class="card-icon d-inline-block">
                            <img src="img/share-btn.png" alt="wallet_earning" class="wallet_earning_logo">
                        </div>
                        <h3 class="d-inline-block mb-0 ml-1 text-white">
                            Share
                        </h3>
                    </div>

                    {{-- <div class="">
                                    <div class="card-body p-0">
                                        <div class="earn_ttl">
                                            <h4>Stock Commission</h4>
                                        </div>
                                    </div>
                                </div> --}}
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 col-md-12 col-12 col-sm-12">
        <div class="alert alert-light alert-has-icon">
            @if (Auth::user()->is_member == 0)
            <div class="alert-icon text-danger"><i class="far fa-bell"></i></div>
            <div class="alert-body text-danger">
                <div class="alert-title">Notice!</div>
                You are not member to <strong>any program</strong>. <div class="float-right mt-4">
                    <a href="/buy-membership" class="btn btn-danger btn-round">Buy Membership</a>
                </div>
            </div>
            @else
            <div class="alert-icon text-danger"><i class="far fa-bell"></i></div>
            <div class="alert-body text-danger">
                <div class="alert-title">Your Referral Link</div>
                {{-- <input type="text" class="form-control" id="name" name="name" value="/register-user?referal-id={{ Auth::user()->id }}" required=""> --}}

                {{-- <div class="float-right mt-4">
                                        <a href="/register-user?referal-id={{ Auth::user()->id }}"
                class="btn btn-danger btn-round">Referral Links</a>
            </div> --}}


            <div class="">
                {{-- <div class="label">
                                            E-mail address
                                        </div> --}}
                <div class="copy-text">
                    <input type="text" class="text w-100" id="share-wp"
                        value="https://mywealthfree.com/register-user?referal-id={{ Auth::user()->id }}" />
                    <button class="btn-copy"><i class="fa fa-clone"></i></button>
                </div>
            </div>

        </div>
        @endif
    </div>

    <div class="card">
        <div class="card-header">
            <h4>Account Overview</h4>
            <div class="card-header-action">
                <div class="badge badge-success">Active</div>
            </div>
        </div>
        <div class="card-body">
            <div class="summary-item">
                <ul class="list-unstyled list-unstyled-border">
                    <li class="media">
                        <div class="row">
                            <div class="col-6 d-flex align-items-center">
                                <div class="avatar-item">
                                    <img class="mr-3 rounded-circle img-fluid" width="100"
                                        height="100" src="../assets/image/mbr_defaultimage.jpg"
                                        alt="sandeep">
                                    <div class="avatar-badge float-left">
                                        <a href="index.php?hal=accountcfg" title="Update"
                                            data-toggle="tooltip"><i
                                                class="fas fa-wrench text-secondary"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 text-right">
                            </div>
                        </div>
                    </li>
                    <li class="media">
                        <div class="media-body">
                            <div class="text-small">Registered</div>
                            <div class="media-title"></div>
                        </div>
                    </li>
                    <li class="media">
                        <div class="media-body">
                            <div class="text-small">Name</div>
                            <div class="media-title">{{ Auth::user()->name }} (<a
                                    href="/cdn-cgi/l/email-protection" class="_cf_email_"
                                    data-cfemail="">{{ Auth::user()->email }}</a>)
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <canvas id="myChart" style="display:none;"></canvas>

    <div class="card">
        <div class="card-header">
            <h4>Recommended</h4>
            <div class="card-header-action">
                <a href="/our-product">
                    <div class="badge badge-success">View all products</div>
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="owl-carousel" class="owl-carousel owl-theme">
                @foreach ($products as $product)
                @php
                $decodedImages = json_decode($product->images, true) ?? [];
                $firstImage = $decodedImages[0] ?? asset('img/placeholder_image.jpg');
                @endphp
                <div class="item card">
                    <a href="{{ url('/product-view/'. $product->product_title) }}">
                        <div class="item_product">
                            <div class="img-cover">
                                <img src="{{ $firstImage }}" alt="{{ $product->product_title }}">
                            </div>
                            <div class="">
                                <div class="card-header justify-content-center p-0 ">
                                    <h4 class="product_head" title="{{$product->product_title}}">
                                        {{ substr($product->product_title, 0, 20) }}..
                                    </h4>
                                </div>
                                <p><i class="fa fa-inr" aria-hidden="true"></i> {{$product->price}}</p>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-12 col-12 col-sm-12">

    <div class="card">
        <div class="card-header">
            <h4>Recent Referrals</h4>
            <div class="card-header-action">
                <a href="/referral-list" class="btn btn-primary" data-toggle="tooltip"
                    title="View All"><i class="fa fa-ellipsis-h"></i></a>
            </div>
        </div>
        <div class="card-body body_referral">
            @if ($user_referrals->count() != 0)
            @foreach ($user_referrals as $data)
            <li class="media">
                <img class="mr-3 rounded-circle" width="48"
                    src="../assets/image/mbr_defaultimage.jpg" alt="avatar">
                <div class="media-body">
                    <div class="float-right text-small text-success">
                        {{ $data->created_at }}
                    </div>
                    <div class="media-title"><a
                            href="index.php?hal=getuser&getId=1&getMpid=">{{ $data->name }}</a>
                    </div>
                    <div class="float-right media-title"><span class="badge badge-secondary"
                            data-toggle="tooltip" title="Registered only"><i
                                class="fa fa-fw fa-user"></i></span></div>
                    <span class="text-small text-muted">
                        <div>{{ $data->name }}</div>
                        <div data-toggle="tooltip" title="{{ $data->email }}">
                            {{ $data->email }}
                        </div>
                    </span>
                </div>
            </li>
            @endforeach
            @else
            <ul class="list-unstyled list-unstyled-border">
                <div class="text-center mt-4 text-muted">
                    <div>
                        <i class="fa fa-3x fa-question-circle"></i>
                    </div>
                    <div>No Record Found</div>
                </div>
            </ul>
            @endif

        </div>
    </div>

</div>
</div>
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script src="../assets/js/chart.min.js" type="0512d3881f3b14332a5b8e12-text/javascript"></script>

<script src="../assets/js/ucpchart.js" type="0512d3881f3b14332a5b8e12-text/javascript"></script>
</section>
</div>

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="...">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>



<!--Withdrawal Amount Modal -->
<div class="modal fade" id="amountWithdrawal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Amount Withdrawal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{-- <p>25% deduction in Wallet Commission</p> --}}
                <div class="form-group">
                    <label for="Amount">Amount <span class="text-danger">*</span></label>
                    <input type="number" class="form-control" name="amount" id="amountwithdraw" placeholder="Amount Withdraw">
                    <span id="amountwithdrawerror" class="error_message"></span>
                </div>
                <div class="form-group">
                    <label for="Amount">Redeemable Amount <span class="text-danger">*</span></label>
                    <input type="number" class="form-control" name="withdrawredeemableamount" id="withdrawredeemableamount" placeholder="Redeemable Amount" readonly>
                    <span id="withdrawredeemableamounterror" class="error_message"></span>
                </div>

                <div class="form-group">
                    <label for="select-wallet">Select Wallet</label>
                    <select class="form-control" id="select-wallet" name='select-wallet'>
                        <option value="">Select your Wallet </option>
                        {{-- <option value="auto_pull_wallet">Autopull Wallet</option>
                  <option value="ref_wal_amt">Referral Wallet</option>
                  <option value="gold_walt_interest_amt">Stockplan Interest Wallet</option>
                  <option value="sip_commission_walt">Sip Commission Wallet</option>
                  <option value="gold_wallet">Stock Wallet</option>
                  <option value="gold_cmsn_amt">Stockplan Commission Wallet</option> --}}
                        <option value="withdraw_wallet" selected>Withdrawal Wallet</option>
                    </select>

                    <span id="select-walleterror" class="error_message"></span>
                </div>

            </div>
            <div class="modal-footer justify-content-center pt-0">
                {{-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --}}
                <button type="button" class="btn btn-primary" id="amountWithdrawalsubmit">Submit</button>
            </div>
        </div>
    </div>
</div>

<!--Withdrawal Amount Modal -->
<div class="modal fade" id="interwallettransfer" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Inter Wallet Transfer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="tract_message">Please be aware that the mentioned charges (18% GST, 5% Portal Charges, and 2% Transaction Charges) apply only to select earning wallets; transfers to the game wallet incur no additional fees.</p>
                <div class="form-group">
                    <label for="Amount">Amount Transfer<span class="text-danger">*</span></label>
                    <input type="number" class="form-control" name="amount" id="amounttransfer" placeholder="Amount Transfer">
                    <span id="amounttransfererror" class="error_message"></span>
                </div>

                <div class="form-group">
                    <label for="select-wallet">From Select Wallet</label>
                    <select class="form-control" id="from-select-wallet" name='from-select-wallet'>
                        <option value="">Select your Wallet </option>
                        <option value="auto_pull_wallet">Autopull Wallet</option>
                        <option value="ref_wal_amt">Referral Wallet</option>
                        <option value="gold_walt_interest_amt">Stockplan Interest Wallet</option>
                        <option value="sip_commission_walt">Sip Commission Wallet</option>
                        {{-- <option value="prdct_walt_amt">Product Wallet</option> --}}
                        <option value="gold_wallet">Stock Wallet</option>
                        <option value="gold_cmsn_amt">Stockplan Commission Wallet</option>
                        {{-- <option value="game_wallet">Game Wallet</option> --}}
                    </select>

                    <span id="from-select-walleterror" class="error_message"></span>
                </div>

                <div class="form-group">
                    <label for="select-wallet">To Select Wallet</label>
                    <select class="form-control" id="to-select-wallet" name='to-select-wallet'>
                        <option value="">Select your Wallet </option>
                        {{-- <option value="auto_pull_wallet">Autopull Wallet</option>
                  <option value="ref_wal_amt">Referral Wallet</option>
                  <option value="gold_walt_interest_amt">Stockplan Interest Wallet</option>
                  <option value="sip_commission_walt">Sip Commission Wallet</option> --}}
                        {{-- <option value="prdct_walt_amt">Product Wallet</option> --}}
                        {{-- <option value="gold_wallet">Stock Wallet</option> 
                  <option value="gold_cmsn_amt">Stockplan Commission Wallet</option> --}}
                        <option value="game_wallet">Game Wallet</option>
                        <option value="withdraw_wallet">Withdrawal Wallet</option>
                    </select>

                    <span id="to-select-walleterror" class="error_message"></span>
                </div>

                <div class="form-group">
                    <label for="Amount">Redeemable Amount Transfer<span class="text-danger">*</span></label>
                    <input type="number" class="form-control" name="amount" id="redeemableamounttransfer" placeholder="Redeemable Amount Transfer" readonly>
                    <span id="redeemableamounttransfererror" class="error_message"></span>
                </div>



            </div>
            <div class="modal-footer justify-content-center pt-0">
                {{-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --}}
                <button type="button" class="btn btn-primary" id="interwallettransfersubmit">Submit</button>
            </div>
        </div>
    </div>
</div>



{{-- other's Modal transfer --}}

<div class="modal fade" id="otherwallettransfer" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Others Account Transfer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{-- <p>25% deduction in Wallet Commission</p> --}}
                <div class="form-group">
                    <label for="Amount">Amount Transfer<span class="text-danger">*</span></label>
                    <input type="number" class="form-control" name="otheramounttransfer" id="otheramounttransfer" placeholder="Amount Transfer">
                    <span id="otheramounttransfererror" class="error_message"></span>
                </div>

                <div class="form-group">
                    <label for="Amount">Redeem Amount Transfer<span class="text-danger">*</span></label>
                    <input type="number" class="form-control" name="otherredeemamounttransfer" id="otherredeemamounttransfer" placeholder="Redeem Amount Transfer" readonly>
                    <span id="otherredeemamounttransfererror" class="error_message"></span>
                </div>

                {{--<div class="form-group">
                    <label for="Email">Email<span class="text-danger">*</span></label>
                    <input type="email" class="form-control" name="email" id="emailtransfer" placeholder="Email">
                    <span id="emailtransfererror" class="error_message"></span>
                </div> --}}

                <!-- <div class="form-group">
                <label for="Phone">Phone or Email<span class="text-danger">*</span></label>
                <input type="tel" class="form-control" name="phone" id="phonetransfer" placeholder="Phone">
                <span id="phonetransfererror" class="error_message"></span>
            </div> -->

            <div class="form-group">
    <label for="Phone">Phone or Email<span class="text-danger">*</span></label>
    <div class="input-group">
        <input type="tel" class="form-control" name="phone" id="phonetransfer" placeholder="Phone or Email">
        <div class="input-group-append">
            <button class="btn btn-primary" type="button" id="verify-user-btn">Verify</button>
        </div>
    </div>
    <span id="phonetransfererror" class="error_message"></span>
    <div id="verification-result" class="mt-2"></div>
</div>

                <div class="form-group">
                    <label for="select-wallet">From Select Wallet</label>
                    <select class="form-control" id="other-select-wallet" name='select-wallet'>
                        <option value="">Select your Wallet </option>
                        {{-- <option value="auto_pull_wallet">Autopull Wallet</option> --}}
                        <option value="gold_wallet">Stock Wallet</option>
                        <option value="gold_cmsn_amt">Stockplan Commission Wallet</option>
                        <option value="gold_walt_interest_amt">Stockplan Interest Wallet</option>
                        {{-- <option value="auto_pull_wallet">Autopull Wallet</option> --}}

                        <option value="game_wallet">Game Wallet</option>
                        {{-- <option value="auto_pull_wallet">Game Winning</option>
                  <option value="auto_pull_wallet">Withdrawal Wallet</option> --}}


                        <option value="ref_wal_amt">Referral Wallet</option>
                        <option value="sip_commission_walt">Sip Commission Wallet</option>
                        {{-- <option value="prdct_walt_amt">Product Wallet</option> --}}

                    </select>

                    <span id="other-select-walleterror" class="error_message"></span>
                </div>
            </div>
            <div class="modal-footer justify-content-center pt-0">
                {{-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --}}
                <button type="button" class="btn btn-primary" id="other-select-walletsubmit">Submit</button>
            </div>
        </div>
    </div>
</div>




<!-- Modal example-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Share</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div>
                    <a href="whatsapp://send?text=Please%20Refer%20this%20for%investment:%20https://mywealthfree.com/register-user?referal-id={{ Auth::user()->id }}" class="btn btn-primary" target="_blank"><i class="fab fa-whatsapp"></i></a>
                    <!-- Facebook Share Button -->
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https://mywealthfree.com/register-user?referal-id={{ Auth::user()->id }}" target="_blank" class="btn btn-primary"><i class="fab fa-facebook-f"></i>
                    </a>

                    <!-- Instagram Share Button -->
                    <a href="https://www.instagram.com/?url=https://mywealthfree.com/register-user?referal-id={{ Auth::user()->id }}" target="_blank" class="btn btn-primary">
                        <i class="fab fa-instagram"></i></a>

                    <!-- Email Share Button -->
                    <a href="mailto:?subject=Referral%20this%20Link%20https://mywealthfree.com/register-user?referal-id={{ Auth::user()->id }}" target="_blank" class="btn btn-primary"><i class="fa fa-envelope" aria-hidden="true"></i></a>

                    <button id="share-button" class="btn btn-primary">Others</button>

                </div>
            </div>
            {{-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div> --}}
        </div>
    </div>
</div>

<!-- scanner modal -->
<div class="modal fade" id="scannerModal" role="dialog" aria-labelledby="scannerModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scannerModalTitle">QR Code</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div id="qr-code"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Camera scanner modal -->
<div class="modal fade" id="cameraScannerModal" role="dialog" aria-labelledby="cameraScannerModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cameraScannerModalTitle">Scan QR Code</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="reader"></div>
                <div id="scan-result" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>



<!-- Modal -->

{{-- @if (Auth::user()->is_member == 0)
        <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalScrollableTitle"><span class="notify_font"><i
                                    class="far fa-bell"></i></span>Hurry Up!</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h5>Hurry and quickly buy your membership now to unlock all the exclusive benefits, including
                            referrals and other perks awaiting you!</h5>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <a href="/buy-membership" class="btn btn-danger btn-round buy-btn">Buy Membership</a>
                    </div>
                </div>
            </div>
        </div>
    @endif --}}


<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js'></script>


<script>
    $(document).ready(function() {
        $('#amountwithdraw').on('input', function() {
            var amountWithdraw = $(this).val();
            var redeemableAmount = $('#withdrawredeemableamount');

            if ($.trim(amountWithdraw) === '' || isNaN(amountWithdraw)) {
                redeemableAmount.val('');
            } else {
                // var calculatedAmount = parseFloat(amountWithdraw) * 0.75;
                var calculatedAmount = parseFloat(amountWithdraw) * 1;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            }
        });
    });
</script>

{{-- <script>
        $(document).ready(function() {
            $('#amounttransfer').on('input', function() {
                alert('hello');
                var amountWithdraw = $(this).val();
                var redeemableAmount = $('#redeemableamounttransfer');
        
                if ($.trim(amountWithdraw) === '' || isNaN(amountWithdraw)) {
                    redeemableAmount.val('');
                } else {
                    var calculatedAmount = parseFloat(amountWithdraw) * 0.75;
                    redeemableAmount.val(calculatedAmount.toFixed(2));
                }
                
            });
        });
    </script> --}}

<script>
    $(document).ready(function() {

        $('#amounttransfer').on('input', function() {
            updateRedeemableAmount();
        });

        $('#to-select-wallet').on('change', function() {
            updateRedeemableAmount();
        });

        $('#from-select-wallet').on('change', function() {
            updateRedeemableAmount();
        });



        function updateRedeemableAmount() {
            var amountWithdraw = $('#amounttransfer').val();
            var redeemableAmount = $('#redeemableamounttransfer');
            var fromselectwallet = $('#from-select-wallet').val();
            var toselectwallet = $('#to-select-wallet').val();

            if ($.trim(amountWithdraw) === '' || isNaN(amountWithdraw)) {
                redeemableAmount.val('');
            } else if (fromselectwallet == '') {
                $('#from-select-walleterror').html('Please choose the wallet');
            } else if (fromselectwallet === toselectwallet) {
                $('#to-select-walleterror').html('From select Wallet and To select Wallet should be different');
            } else if ((fromselectwallet == 'ref_wal_amt' || fromselectwallet == 'gold_walt_interest_amt' || fromselectwallet == 'sip_commission_walt' || fromselectwallet == 'gold_cmsn_amt' || fromselectwallet == 'auto_pull_wallet') && toselectwallet != 'game_wallet') {
                $('#from-select-walleterror').html('');
                $('#to-select-walleterror').html('');
                var calculatedAmount = parseFloat(amountWithdraw) * 0.75;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            } else {
                $('#from-select-walleterror').html('');
                $('#to-select-walleterror').html('');
                var calculatedAmount = parseFloat(amountWithdraw) * 1;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            }

        }


    });
</script>

<script>
    $(document).ready(function() {
        $('#otheramounttransfer').on('input', function() {
            var amountWithdraw = $(this).val();

            var redeemableAmount = $('#otherredeemamounttransfer');

            if ($.trim(amountWithdraw) === '' || isNaN(amountWithdraw)) {
                redeemableAmount.val('');
            } else {
                // var calculatedAmount = parseFloat(amountWithdraw) * 0.75;
                var calculatedAmount = parseFloat(amountWithdraw) * 1;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            }
        });
    });
</script>


<script>
    $('#owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        dots: false,
        nav: true,
        items: 3,
        responsive: {
            0: {
                items: 2
            },
            600: {
                items: 3
            },
            1000: {
                items: 3
            }
        }
    })
</script>

<script>
    let copyText = document.querySelector(".copy-text");
    copyText.querySelector(".btn-copy").addEventListener("click", function() {
        let input = copyText.querySelector("input.text");
        input.select();
        document.execCommand("copy");
        copyText.classList.add("active");
        window.getSelection().removeAllRanges();
        setTimeout(function() {
            copyText.classList.remove("active");
        }, 2500);
    });
</script>


<script>
    $(document).ready(function() {
        $('#otheramounttransfer').on('input', function() {
            var amountWithdraw = $(this).val();
            var redeemableAmount = $('#withdrawredeemableamount');

            if ($.trim(amountWithdraw) === '' || isNaN(amountWithdraw)) {
                redeemableAmount.val('');
            } else {
                var calculatedAmount = parseFloat(amountWithdraw) * 0.75;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            }
        });
    });
</script>

{{-- <script>
        $(document).ready(function() {
            $('#exampleModalScrollable').modal('show')
        });
    </script> --}}
<script>
    $(document).ready(function() {


        //Anount Withdraw
        $("#amountWithdrawalsubmit").click(function() {
            var amountwithdraw = $('#amountwithdraw').val();
            if (amountwithdraw == '') {
                $('#amountwithdrawerror').html('Please Insert the amount');
            } else {
                $('#amountwithdrawerror').html('');
            }

            var withdrawredeemableamount = $('#withdrawredeemableamount').val();
            if (withdrawredeemableamount == '') {
                $('#withdrawredeemableamounterror').html('This is required ');
            } else {
                $('#withdrawredeemableamounterror').html('');
            }

            var selectwallet = $('#select-wallet').val();
            if (selectwallet == '') {
                $('#select-walleterror').html('Please choose the wallet');
            } else {
                $('#select-walleterror').html('');
            }
            if (selectwallet == '' || amountwithdraw == '') {
                return false;
            } else {
                let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                let withdrawdata = {
                    amount: amountwithdraw,
                    redeemamount: withdrawredeemableamount,
                    wallet: selectwallet,
                }

                $.ajax({
                    type: 'POST',
                    url: '/withdraw-commissions',
                    data: JSON.stringify(withdrawdata),
                    contentType: "application/json",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(response) {
                        if (!response.success) {
                            $('#amountWithdrawal').modal('hide');
                            $('.alert-danger').html('Invalid Amount,Request for the amount withdraw failed').fadeIn();
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        } else {
                            $('#amountWithdrawal').modal('hide');
                            $('.alert-success').html('Request for the amount withdraw Successfully').fadeIn();
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        }
                        console.log('Data saved successfully:', response);

                        // Reload the page after 1 second

                    },
                    error: function(xhr, status, error) {
                        // console.error('Error occurred:', error);
                        console.log('Status:', status);
                        console.log('Response:', xhr.responseText);
                    }
                });
            }
        });



        //Inter Wallet Transfer
        $("#interwallettransfersubmit").click(function() {
            var amounttransfer = $('#amounttransfer').val();
            if (amounttransfer == '') {
                $('#amounttransfererror').html('Please Insert the amount');
            } else {
                $('#amounttransfererror').html('');
            }

            var redeemableamounttransfer = $('#redeemableamounttransfer').val();
            if (redeemableamounttransfer == '') {
                $('#redeemableamounttransfererror').html('Please Insert the amount');
            } else {
                $('#redeemableamounttransfererror').html('');
            }

            var fromselectwallet = $('#from-select-wallet').val();
            if (fromselectwallet == '') {
                $('#from-select-walleterror').html('Please choose the wallet');
            } else {
                $('#from-select-walleterror').html('');
            }


            var toselectwallet = $('#to-select-wallet').val();
            if (toselectwallet == '') {
                $('#to-select-walleterror').html('Please choose the wallet');
            } else if (fromselectwallet === toselectwallet) {
                $('#to-select-walleterror').html('From select Wallet and To select Wallet should be different');
            } else {
                $('#to-select-walleterror').html('');
            }


            if (toselectwallet == '' || amounttransfer == '' || toselectwallet == '' || (fromselectwallet === toselectwallet)) {
                return false;
            } else {
                let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                let withtransferdata = {
                    amount: amounttransfer,
                    fromWallet: fromselectwallet,
                    toWallet: toselectwallet,
                    redeemamount: redeemableamounttransfer
                }

                $.ajax({
                    type: 'POST',
                    url: 'inter-wallet-transfer',
                    data: JSON.stringify(withtransferdata),
                    contentType: "application/json",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(response) {
                        if (!response.success) {
                            $('#interwallettransfer').modal('hide');
                            $('.alert-danger').html('Invalid Amount, Transfer the amount Failed').fadeIn();
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        } else {
                            $('#interwallettransfer').modal('hide');
                            $('.alert-success').html('Transfer the amount successfully').fadeIn();
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        }

                        // Reload the page after 1 second
                        // setTimeout(function () {
                        //     location.reload();
                        // }, 1000);

                        console.log('Data saved successfully:', response);
                    },
                    error: function(xhr, status, error) {
                        // console.error('Error occurred:', error);
                        console.log('Status:', status);
                        console.log('Response:', xhr.responseText);
                    }
                });
            }
        });


        //Other Wallet Transfer
        $("#other-select-walletsubmit").click(function() {

            var otherredeemamounttransfer = $('#otherredeemamounttransfer').val();
            if (otherredeemamounttransfer == '') {
                $('#otherredeemamounttransfererror').html('This field is required');
            } else {
                $('#otherredeemamounttransfererror').html('');
            }

            var otheramounttransfer = $('#otheramounttransfer').val();
            if (otheramounttransfer == '') {
                $('#otheramounttransfererror').html('Please Insert the amount');
            } else {
                $('#otheramounttransfererror').html('');
            }

            var emailtransfer = $('#emailtransfer').val();
            if (emailtransfer == '') {
                $('#emailtransfererror').html('Please Insert the Email');
            } else {
                $('#emailtransfererror').html('');
            }

            //    var phonetransfer = $('#phonetransfer').val();
            //    if(phonetransfer == ''){
            //         $('#phonetransfererror').html('Please Insert the Email');
            //    }else{
            //     $('#phonetransfererror').html('');
            //    }

            var fromselectwallet = $('#other-select-wallet').val();
            if (fromselectwallet == '') {
                $('#other-select-walleterror').html('Please choose the wallet');
            } else {
                $('#other-select-walleterror').html('');
            }

            if (otheramounttransfer == '' || emailtransfer == '' || fromselectwallet == '') {
                return false;
            } else {
                let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                let withtransferdata = {
                    // phone:phonetransfer,
                    email: emailtransfer,
                    amount: otheramounttransfer,
                    fromWallet: fromselectwallet,
                }

                $.ajax({
                    type: 'POST',
                    url: 'member-transfer',
                    data: JSON.stringify(withtransferdata),
                    contentType: "application/json",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(response) {

                        if (!response.success) {
                            $('#otherwallettransfer').modal('hide');
                            $('.alert-danger').html('Invalid Amount,Transfer the amount failed').fadeIn();
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        } else {
                            $('#otherwallettransfer').modal('hide');
                            $('.alert-success').html('Transfer the amount successfully').fadeIn();
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        }



                        // Reload the page after 1 second
                        // setTimeout(function () {
                        //     location.reload();
                        // }, 1000);

                        console.log('Data saved successfully:', response);
                    },
                    error: function(xhr, status, error) {
                        // console.error('Error occurred:', error);
                        console.log('Status:', status);
                        console.log('Response:', xhr.responseText);
                    }
                });
            }
        });


    });
</script>



<script>
    $(document).ready(function() {
        // Share Button Click Event
        $("#share-button").on("click", function() {
            var shareUrl = $("#share-wp").val(); // Get URL from input field
            if (!shareUrl) {
                alert("Please enter a URL to share.");
                return;
            }

            if (navigator.share) {
                // Use Web Share API if available
                navigator.share({
                    title: 'Share via system apps',
                    text: 'Please Refer this Link',
                    url: shareUrl // Use the URL from the input field
                }).then(() => {
                    console.log('Shared via system apps');
                }).catch((error) => {
                    console.error('Error sharing via system apps:', error);
                });
            } else {
                // Fallback for browsers that do not support Web Share API
                alert('Your browser does not support the Web Share API. Please use the "Share" button on your device.');
            }
        });
    });

    
</script>
<script>
$(document).ready(function() {
    // Initialize QR code when scanner modal is shown
    $('#scannerModal').on('shown.bs.modal', function() {
        // Clear previous QR code if any
        $('#qr-code').empty();
        
        // Get user's phone
        const phone = "{{ Auth::user()->user_personal_detail->phone ?? '' }}";
        
        if (phone) {
            // Create QR code with just the phone number
            new QRCode(document.getElementById("qr-code"), {
                text: phone, // Just the phone number - no URL
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            
            // Add phone display below QR code
            $('#qr-code').append('<p class="mt-3">Scan to transfer funds to: ' + phone + '</p>');
        } else {
            $('#qr-code').html('<p class="text-danger">No phone number available</p>');
        }
    });
});

// $(document).ready(function() {
//     // Initialize QR scanner when camera scanner modal is shown
//     $('#cameraScannerModal').on('shown.bs.modal', function() {
//         const html5QrCode = new Html5Qrcode("reader");
//         const qrCodeSuccessCallback = (decodedText, decodedResult) => {
//             try {
//                 // If it's just a phone number (digits only)
//                 if (decodedText.match(/^\d+$/)) {
//                     $('#scan-result').html(`<div class="alert alert-success">Phone detected: ${decodedText}</div>`);
                    
//                     // Close scanner modal and open transfer modal with phone
//                     setTimeout(() => {
//                         html5QrCode.stop();
//                         $('#cameraScannerModal').modal('hide');
//                         $('#otherwallettransfer').modal('show');
//                         $('#phonetransfer').val(decodedText); // Correct ID used here
//                     }, 1000);
//                     return;
//                 }
                
//                 // Not a valid phone number format
//                 $('#scan-result').html(`<div class="alert alert-danger">Not a valid phone number</div>`);
                
//             } catch (error) {
//                 $('#scan-result').html(`<div class="alert alert-danger">Error: ${error.message}</div>`);
//             }
//         };
        
//         const config = { fps: 10, qrbox: { width: 200, height: 200 } };
        
//         // Start scanning
//         html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
        
//         // Stop scanning when modal is closed
//         $('#cameraScannerModal').on('hidden.bs.modal', function() {
//             html5QrCode.stop().catch(error => {
//                 console.error("Failed to stop camera:", error);
//             });
//         });
//     });
// });
// Global variable to store scanner instance
let html5QrCodeScanner = null;

$(document).ready(function() {
    // Initialize QR scanner when camera scanner modal is shown
    $('#cameraScannerModal').on('shown.bs.modal', function() {
        // Create scanner instance and store it globally
        html5QrCodeScanner = new Html5Qrcode("reader");
        
        const qrCodeSuccessCallback = (decodedText, decodedResult) => {
            try {
                // If it's just a phone number (digits only)
                if (decodedText.match(/^\d+$/)) {
                    $('#scan-result').html(`<div class="alert alert-success">Phone detected: ${decodedText}</div>`);
                    
                    // Close scanner modal and open transfer modal with phone
                    setTimeout(() => {
                        stopScanner(); // Use our helper function
                        $('#cameraScannerModal').modal('hide');
                        $('#otherwallettransfer').modal('show');
                        $('#phonetransfer').val(decodedText);
                    }, 1000);
                    return;
                }
                
                // Not a valid phone number format
                $('#scan-result').html(`<div class="alert alert-danger">Not a valid phone number</div>`);
                
            } catch (error) {
                $('#scan-result').html(`<div class="alert alert-danger">Error: ${error.message}</div>`);
            }
        };
        
        const config = { fps: 10, qrbox: { width: 200, height: 200 } };
        
        // Start scanning
        html5QrCodeScanner.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
            .catch(error => {
                $('#scan-result').html(`<div class="alert alert-danger">Could not start scanner: ${error.message}</div>`);
                console.error("Failed to start scanner:", error);
            });
    });
    
    // Helper function to properly stop the scanner
    function stopScanner() {
        if (html5QrCodeScanner && html5QrCodeScanner.isScanning) {
            html5QrCodeScanner.stop().then(() => {
                console.log("Scanner stopped successfully");
            }).catch(error => {
                console.error("Failed to stop camera:", error);
            });
        }
    }
    
    // Stop scanning when modal is closed
    $('#cameraScannerModal').on('hidden.bs.modal', function() {
        stopScanner();
        // Force clear the reader div to ensure UI is reset
        $('#reader').html('');
        $('#scan-result').html('');
    });
    
    // Backup to ensure camera is released if page is unloaded
    $(window).on('beforeunload', function() {
        stopScanner();
    });
});
</script>

<!-- <script>
$(document).ready(function() {
    // User verification
    $("#verify-user-btn").click(function() {
        const phoneOrEmail = $("#phonetransfer").val().trim();
        
        if (!phoneOrEmail) {
            $("#verification-result").html(`<div class="alert alert-danger py-1">Please enter a phone number or email</div>`);
            return;
        }
        
        // Show loading state
        $("#verification-result").html(`<div class="alert alert-info py-1">Verifying...</div>`);
        $("#verify-user-btn").prop("disabled", true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
        
        // Get CSRF token
        let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        
        // Make API call to verify user
        $.ajax({
            url: '/api/verify-user',
            type: 'POST',
            data: {
                email: phoneOrEmail
            },
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function(response) {
                // Reset button state
                $("#verify-user-btn").prop("disabled", false).text("Verify");
                
                if (response.success) {
                    // User found - show success message with user name
                    $("#verification-result").html(`
                        <div class="alert alert-success py-1">
                            <strong>User verified:</strong> ${response.data.name}
                        </div>
                    `);
                    // Remove any error
                    $("#phonetransfererror").text("");
                } else {
                    // User not found - show error
                    $("#verification-result").html(`
                        <div class="alert alert-danger py-1">
                            <strong>Error:</strong> ${response.message}
                        </div>
                    `);
                }
            },
            error: function(xhr, status, error) {
                // Reset button state
                $("#verify-user-btn").prop("disabled", false).text("Verify");
                
                // Handle error response
                $("#verification-result").html(`
                    <div class="alert alert-danger py-1">
                        <strong>Error:</strong> Unable to verify user. Please try again.
                    </div>
                `);
                console.error("Verification error:", error);
            }
        });
    });
    
    // Clear verification result when input changes
    $("#phonetransfer").on('input', function() {
        $("#verification-result").empty();
    });
    
    // Modify other-select-walletsubmit to check verification
    const originalSubmitHandler = $("#other-select-walletsubmit").click;
    
    $("#other-select-walletsubmit").click(function(e) {
        const verificationResult = $("#verification-result").text();
        if (!verificationResult.includes("User verified")) {
            $("#phonetransfererror").text("Please verify this phone/email before proceeding");
            return false;
        }
        
        // Continue with original handler
        return originalSubmitHandler.apply(this, arguments);
    });
});
</script> -->

<script>
$(document).ready(function() {
    // User verification
    $("#verify-user-btn").click(function() {
        console.log("Verify button clicked"); // Debug log
        const phoneOrEmail = $("#phonetransfer").val().trim();
        
        if (!phoneOrEmail) {
            $("#verification-result").html(`<div class="alert alert-danger py-1">Please enter a phone number or email</div>`);
            return;
        }
        
        // Show loading state
        $("#verification-result").html(`<div class="alert alert-info py-1">Verifying...</div>`);
        $("#verify-user-btn").prop("disabled", true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
        let authToken = $('input[name="authtoken"]').val(); 
        // Debug CSRF token
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        
        // Make AJAX request with direct jQuery method (no extra properties)
        $.post({
            url: '/api/verify-user',
            data: {
                email: phoneOrEmail
            },
            // headers: {
            //     'X-CSRF-TOKEN': csrfToken
            // },
            headers: {
                  "Authorization": "Bearer " + authToken  
                },

            success: function(response) {
                // Reset button state
                $("#verify-user-btn").prop("disabled", false).text("Verify");
                
                if (response.success) {
                    // User found - show success message with user name
                    $("#verification-result").html(`
                        <div class="alert alert-success py-1">
                            <strong>User verified:</strong> ${response.data.name}
                        </div>
                    `);
                    // Remove any error
                    $("#phonetransfererror").text("");
                } else {
                    // User not found - show error
                    $("#verification-result").html(`
                        <div class="alert alert-danger py-1">
                            <strong>Error:</strong> ${response.message}
                        </div>
                    `);
                }
            },
            error: function(xhr, status, error) {
                // Reset button state
                $("#verify-user-btn").prop("disabled", false).text("Verify");
                
                // Handle error response
                $("#verification-result").html(`
                    <div class="alert alert-danger py-1">
                        <strong>Error:</strong> Unable to verify user. Please try again.
                    </div>
                `);
            }
        });
    });
});
</script>


@endsection