@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'>
<style>
    .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;
        }
    }

    #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;
        font-weight: 800 !important;
    }

    button.owl-next {
        position: absolute;
        right: 0;
        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;
    }

    .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>

<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="{{asset('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="{{asset('img/homepage.png')}}" alt="image"> </a>
                                Wallet
                            </h5>
                        </div>
                    </div>
                    <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> -->

                        {{--
                                <button class="btn btn-primary p-0" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal" style="background: #0e194d;border: none;">
                                    <img src="{{asset('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="{{asset('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="javascript:;">
        <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="{{asset('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>
<div class="col-lg-3 col-md-6 col-sm-12 col-12">
    <a href="javascript:;">
        <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="{{asset('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>
                        {{ $gold_wal_amt ?? 0 }}
                    </h3>
                </div>

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

<div class="col-lg-3 col-md-6 col-sm-12 col-12">
    <a href="javascript:;">
        <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="{{asset('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>
                        {{ $gold_cmsn_amt ?? '0.00' }}
                    </h3>
                </div>

                <div class="">
                    <div class="card-body p-0">
                        <div class="earn_ttl">
                            <h4>Gold 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="javascript:;">
            <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="{{asset('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>
                            {{ $gold_walt_interest_amt ?? '0.00' }}
                        </h3>
                    </div>

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

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="javascript:;">
            <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="{{asset('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="javascript:;">
            <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="{{asset('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>
                            {{ $user->wallet ?? 0 }}
                        </h3>
                    </div>

                    <div class="">
                        <div class="card-body p-0">
                            <div class="earn_ttl">
                                <a href="/referral-bet-log/{{$user->id}}"><h4>Game Wallet</h4></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-12 col-12">
        <a href="javascript:;">
            <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="{{asset('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>
                            {{ $auto_pull_amt ?? 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>

<div class="row">

    <div class="col-lg-12 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">
                @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="/referral-wallet/{{$data->id}}">{{ $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>
                            <div><a href="/referral-wallet/{{$data->id}}" style="text-decoration: underline">See Details</a></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">Goldplan Interest Wallet</option>
                        <option value="sip_commission_walt">Sip Wallet</option>
                        <option value="prdct_walt_amt">Product Wallet</option>
                        <option value="gold_cmsn_amt">Goldplan Commission 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>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="amount" id="amounttransfer" placeholder="Amount Transfer">
                    <span id="amounttransfererror" 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 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">Goldplan Interest Wallet</option>
                        <option value="sip_commission_walt">Sip Wallet</option>
                        <option value="prdct_walt_amt">Product Wallet</option>
                        <option value="gold_cmsn_amt">Goldplan Commission 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">Goldplan Interest Wallet</option>
                        <option value="sip_commission_walt">Sip Wallet</option>
                        <option value="prdct_walt_amt">Product Wallet</option>
                        <option value="gold_cmsn_amt">Goldplan Commission Wallet</option>
                    </select>

                    <span id="to-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="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="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="ref_wal_amt">Referral Wallet</option>
                        <option value="gold_walt_interest_amt">Goldplan Interest Wallet</option>
                        <option value="sip_commission_walt">Sip Wallet</option>
                        <option value="prdct_walt_amt">Product Wallet</option>
                        <option value="gold_cmsn_amt">Goldplan Commission 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>


<!-- 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;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#amounttransfer').on('input', function() {
            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() {
        $('#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;
                redeemableAmount.val(calculatedAmount.toFixed(2));
            }
        });
    });
</script>


<script>
    $('#owl-carousel').owlCarousel({
        loop: true,
        margin: 30,
        dots: false,
        nav: true,
        items: 4,
        responsive: {
            0: {
                items: 2
            },
            600: {
                items: 3
            },
            1000: {
                items: 4
            }
        }
    })
</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 {
                $('#to-select-walleterror').html('');
            }
            if (toselectwallet == '' || amounttransfer == '' || 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 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 = {
                    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 failed').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>


@endsection