@extends('layouts.user')
@section('title')
    @lang('User Dashboard')
@endsection
@section('breadcrumb')
    @lang('Dashboard')
@endsection
@section('content')
    <script>
        function reconfirm(address, coin, id) {
            //  e.preventDefault();
            //  alert('Hid');
            var submitBtn = $('#submit'+id);
            var loadingBtn = $('#loading-btn'+id);

            //var formData = $('.buysell-form').serialize();

            //var selectedCrypto = $(this).find('option:selected');
            var address =address; //$(this).data('address');
            var coin =coin;// $(this).data('coin');


            loadingBtn.show();
            submitBtn.hide();
            $.ajax({
                url: "{{route('user.crypto.confirm')}}",
                type: "POST",
                data: {'address': address, 'coin': coin, 'order_id':id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    console.log(response)
                    //  showError(response);
                    loadingBtn.hide();
                    submitBtn.show();
                    if (!(response.confirmed)) {
                        showAlert(response.message + " error", 'error')
                    } else {
                        showAlert(response.vout + ' Payment Received', 'success')
                    }
                    // console.log(response);
                    // window.location.href = "{{url('user/crypto/track-payment')}}"+"/"+response.data;
                },
                error: function (xhr, status, error) {

                    console.log(xhr.responseJSON.message);
                    loadingBtn.hide();
                    submitBtn.show();
                    showAlert(xhr.responseJSON.message, 'error');

                }
            })
        }
    </script>
    <div class="nk-content-body" >

        <div class="nk-block-head">
            <div class="nk-block-head-sub"><span>Hello</span>
            </div>
            <div class="nk-block-between-md g-4">
                <div class="nk-block-head-content">
                    <h2 class="nk-block-title fw-normal">{{auth()->user()->name}}</h2>

                </div><!-- .nk-block-head-content -->

            </div><!-- .nk-block-between -->
        </div><!-- .nk-block-head -->
        <div class="nk-block " >
            <div class="row gy-gs">
                <div class="col-md-6">


                    <div class="nk-block">
                        <div class="nk-block-head-xs">
                            <div class="nk-block-head-content">
                                <h5 class="nk-block-title title">Overview</h5>
                            </div>
                        </div><!-- .nk-block-head -->
                        <div class="nk-block">
                            <div class="card card-bordered is-dark">
                                <div class="nk-wgw">
                                    <div class="nk-wgw-inner">
                                        <a class="nk-wgw-name" href="html/crypto/wallet-bitcoin.html">
                                            <div class="nk-wgw-icon is-default">
                                                <em class="icon ni ni-sign-kobo"></em>
                                            </div>
                                            <h5 class="nk-wgw-title title">Wallet Balance</h5>
                                        </a>
                                        <div class="nk-wgw-balance">
                                            <div class="amount"> {{toMoney($wallet->balance)}}</div>
                                            <div class="amount-sm">Pending Balance: {{toMoney($wallet->pending_balance)}} </div>
                                        </div>
                                        <div class="nk-wgw-balance">
                                            <span class="text-white">Referer Bonus Balance</span>
                                            <div class="amount">{{toMoney($wallet->refer_bonus_balance)}}</div>
                                            <div class="amount-sm">Pending Balance: {{toMoney($wallet->pending_refer_bonus)}}</div>

                                        </div>
                                    </div>
                                    <div class="nk-wgw-actions">
                                        <ul>
                                           @if(empty(Auth()->user()->account_number))
                                            <li><a href="{{route('user.kyc.form')}}"  ><em class="icon ni ni-arrow-down-left"></em> <span>Fund Wallet</span></a></li>
                                            @else
                                                <li><a href="#"  data-bs-toggle="modal" data-bs-target="#modalDeposit"><em class="icon ni ni-arrow-down-left"></em> <span>Fund Wallet</span></a></li>
@endif

                                            <li><a href="{{route('user.withdraw.form')}}"><em class="icon ni ni-arrow-to-right"></em><span>Withdraw</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="nk-wgw-more dropdown">
                                        <a href="#" class="btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                        <div class="dropdown-menu dropdown-menu-xs dropdown-menu-end">
                                            <ul class="link-list-plain sm">
                                                <li><a href="#">Balance Transactions History</a></li>
                                                <li><a href="#">Referrer Transaction History</a></li>
                                                <li><a href="#">Withdraw Transaction History</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- .card -->
                        </div><!-- .nk-block -->
                    </div><!-- .nk-block -->
                </div><!-- .col -->
                <div class="col-md-6">
                    <div class="nk-block">
                        <div class="nk-block-head-xs">
                            <div class="nk-block-between-md g-2">
                                <div class="nk-block-head-content">
                                    <h5 class="nk-block-title title">Trade</h5>
                                </div>

                            </div>
                        </div><!-- .nk-block-head -->
                        <div class="row g-2">
                            <div class="col-sm-6 scroll-container">

                                <div class="card bg-light">
                                    <div class="nk-block-head-content">
                                        <ul class="nk-block-tools gx-3 ">
                                            <li><a href="{{url('/user/giftcard/sell-giftcard')}}" class="btn btn-primary"><span>Trade Giftcard</span> <em class="icon ni ni-arrow-long-right"></em></a></li>
                                            <li><a href="#" data-bs-toggle="modal" data-bs-target="#modalCrypto" class="btn btn-white btn-light"><span>Trade Crypto</span> <em class="icon ni ni-arrow-long-right d-none d-sm-inline-block"></em></a></li>
                                            <li><a href="{{route('user.shopping-index')}}"  class="btn btn-white btn-light"><span>Shopping</span> <em class="icon ni ni-arrow-long-right d-none d-sm-inline-block"></em></a></li>

                                        </ul>
                                    </div>
                                </div>
                            </div><!-- .col -->


                        </div><!-- .row -->
                    </div><!-- .nk-block -->
                    <div class="nk-block nk-block-md">
                        <div class="nk-block-head-xs">
                            <div class="nk-block-between-md g-2 ">
                                <div class="nk-block-head-content">
                                    <h6 class="nk-block-title title">Bill Payments</h6>
                                </div>

                            </div>
                        </div><!-- .nk-block-head -->
                        <div class="row g-2">
                            <div class="col-sm-6 scroll-container">
                                <div class="card bg-light">
                                    <div class="nk-block-head-content">
                                        <ul class="nk-block-tools gx-3 ">
                                            <li><a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAirtime"><span>Airtime & Data</span> <em class="icon ni ni-arrow-long-right"></em></a></li>

                                            <li><a href="{{route('user.buy-cable')}}" class="btn btn-white btn-light"><span>Cable TV</span> <em class="icon ni ni-arrow-long-right d-none d-sm-inline-block"></em></a></li>
                                            <li><a href="{{route('user.electricity.buy')}}" class="btn btn-white btn-light"><span>Electricity</span> <em class="icon ni ni-arrow-long-right d-none d-sm-inline-block"></em></a></li>

                                        </ul>
                                    </div>
                                </div>
                            </div><!-- .col -->

                            </div><!-- .col -->
                        </div><!-- .row -->
                    </div> <!-- .nk-block -->
                </div><!-- .col -->
            </div><!-- .row -->
        </div><!-- .nk-block -->
    <hr/>
        <div class="nk-block nk-block-lg mt-2">
            <div class="row gy-gs">
                <div class="col-md-12">
                    <div class="card-head">
                        <div class="card-title  mb-0">
                            <h5 class="title">Recent Activities</h5>
                        </div>
                        <div class="card-tools">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#tabItem5"><em class="icon ni ni-cards"></em><span>GiftCard</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#tabItem6"><em class="icon ni ni-coins"></em><span>Crypto</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#tabItem7"><em class="icon ni ni-cart"></em><span>Bill Payments</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#tabItem8"><em class="icon ni ni-link"></em><span>Withdraw</span></a>
                                </li>
                            </ul>

                        </div>
                    </div><!-- .card-head -->
                    <div class="tranx-list card card-bordered">
                        <div class="tab-content">
                            <div class="tab-pane table-responsive active" id="tabItem5">
                                <table class="table table-orders">
                                    <thead class="tb-odr-head">
                                    <tr class="tb-odr-item">
                                        <th class="tb-odr-info">
                                            <span class="tb-odr-id">Reference No</span>
                                            <span class="tb-odr-date d-none d-md-inline-block">Descriptions</span>
                                        </th>
                                        <th class="tb-odr-amount">

                                            <span class="tb-odr-status d-none d-md-inline-block">Status</span>
                                        </th>
                                        <th class="tb-odr-action">&nbsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody class="tb-odr-body">

                                    @foreach($trades as $trade)
                                        @php
                                            $tr=  $trade->getTradeRequest($trade->id);

                                        @endphp
                                        <tr class="tb-odr-item">

                                            <td class="tb-odr-info">
                                                <span class="tb-odr-id"><a href="{{empty($tr)?route('user.merchant',['reference'=>$trade->reference_no]):route('user.giftcard.start-trade',['id'=>$tr])}})}}html/invoice-details.html">{{$trade->reference_no}}</a></span>
                                                <span class="tb-odr-date">{{$trade->trade_descriptions}}</span>
                                            </td>
                                            <td class="tb-odr-amount">



                                                <span class="tb-odr-status">
                                                                <span class="badge badge-dot {{$trade->trade_status=='Accepted'?'bg-primary':'bg-success'}}">{{$trade->trade_status}}</span>
                                                            </span>

                                            </td>
                                            <td class="tb-odr-action">
                                                @if(empty($tr))
                                                    <div class="tb-odr-btns d-none d-sm-inline">
                                                        <a href="{{route('user.merchant',['reference'=>$trade->reference_no])}}" class="btn btn-dim btn-sm btn-primary">Continue Trade</a>
                                                    </div>
                                                    <a href="{{route('user.merchant',['reference'=>$trade->reference_no])}}" class="btn btn-pd-auto d-sm-none"><em class="icon ni ni-chevron-right"></em></a>
                                                @else:
                                                <div class="tb-odr-btns d-none d-sm-inline">
                                                    <a href="{{route('user.giftcard.start-trade',['id'=>$tr])}}" class="btn btn-dim btn-sm btn-primary">View</a>
                                                </div>
                                                <a href="{{route('user.giftcard.start-trade',['id'=>$tr])}}" class="btn btn-pd-auto d-sm-none"><em class="icon ni ni-chevron-right"></em></a>
                                                @endif
                                            </td>
                                        </tr><!-- .tb-odr-item -->
                                        </a>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane table-responsive" id="tabItem6">
                                <table class="table table-orders">
                                    <thead class="tb-odr-head">
                                    <tr class="tb-odr-item">
                                        <th class="tb-odr-info">
                                            <span class="tb-odr-id">Reference No</span>

                                        </th> <th class="tb-odr-info">

                                            <span class="tb-odr-date">Descriptions</span>
                                        </th>

                                        <th class="tb-odr-action">&nbsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody class="tb-odr-body">

                                    @foreach($cryptos as $cryp)

                                        <tr class="tb-odr-item">

                                            <td class="tb-odr-info">
                                                <a href="{{route('user.crypto.view-payment', $cryp->order_id)}}"> <span class="tb-odr-id">{{$cryp->order_id}}</span>
                                                  </a>
                                            </td>
                                            <td class="tb-odr-info">
                                                <a href="{{route('user.crypto.view-payment', $cryp->order_id)}}">
                                                    <span class="tb-odr-date">
                                                        <p><b>Amount Received:</b> {{number_format($cryp->amount_received, 8)}}{{$cryp->pay_currency}} - ${{$cryp->deducted_asset_amount_usd}}</p>
                                                        <p><b>Amount Credited:</b> {{toMoney($cryp->payout_amount, 2)}}</p>
                                                        <p><b>Payout Status:</b>  <span class="badge badge-dot bg-primary">{{$cryp->fund_wallet_status}}</span></p>







                                                          @if($cryp->payment_status=='Payment Received')
                                                              <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-primary">PAYMENT RECEIVED</span>
                                                            </span>

                                                          @elseif($cryp->payment_status=='Credited')
                                                              <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-primary">CREDITED</span>
                                                            </span>
                                                          @else
                                                              <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-danger">{{$cryp->payment_status}}</span>
                                                            </span>
                                                          @endif
                                                      </a>
                                            </span>
                                                           <button class="btn btn-sm btn-primary" type="button" id="loading-btn{{$cryp->order_id}}" disabled style="display: none">
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>
                                                          <button class="btn btn-sm btn-primary" id="submit{{$cryp->order_id}}" onclick="reconfirm('{{$cryp->pay_address}}','{{$cryp->pay_currency}}','{{$cryp->order_id}}')" data-address="{{$cryp->pay_address}}" data-coin="{{$cryp->pay_currency}}">Reconfirm Payment</button>


                                            </td>

                                            <td class="tb-odr-action">

                                                <div class="tb-odr-btns d-none d-sm-inline">
                                                    <a href="{{route('user.crypto.view-payment', $cryp->order_id)}}" class="btn btn-dim btn-sm btn-primary">View</a>
                                                </div>
                                                <a href="#" class="btn btn-pd-auto d-sm-none"><em class="icon ni ni-chevron-right"></em></a>

                                            </td>
                                        </tr><!-- .tb-odr-item -->

                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane" id="tabItem7">
                                <table class="table table-orders">
                                    <thead class="tb-odr-head">
                                    <tr class="tb-odr-item">
                                        <th class="tb-odr-info">
                                            <span class="tb-odr-id">Reference No</span>
                                            <span class="tb-odr-date d-none d-md-inline-block">Descriptions</span>
                                        </th>
                                        <th class="tb-odr-amount">

                                            <span class="tb-odr-status d-none d-md-inline-block">Status</span>
                                        </th>
                                        <th class="tb-odr-action">&nbsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody class="tb-odr-body">

                                    @foreach($bills as $bill)

                                        <tr class="tb-odr-item">

                                            <td class="tb-odr-info">
                                                <span class="tb-odr-id"><a href="#">{{$bill->reference_no}}</a></span>
                                                <span class="tb-odr-date">{{$bill->descriptions}}</span>
                                            </td>
                                            <td class="tb-odr-amount">



                                                @if($bill->status=='success')
                                                    <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-success">success</span>
                                                            </span>
                                                @else
                                                    <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-danger">{{$bill->status}}</span>
                                                            </span>

                                                @endif
                                            </td>
                                            <td class="tb-odr-action">

                                                <div class="tb-odr-btns d-none d-sm-inline">
                                                    <a href="#" class="btn btn-dim btn-sm btn-primary">View</a>
                                                </div>
                                                <a href="#" class="btn btn-pd-auto d-sm-none"><em class="icon ni ni-chevron-right"></em></a>

                                            </td>
                                        </tr><!-- .tb-odr-item -->
                                        </a>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane table-responsive" id="tabItem8">
                                <table class="table table-orders">
                                    <thead class="tb-odr-head">
                                    <tr class="tb-odr-item">
                                        <th class="tb-odr-info">
                                            <span class="tb-odr-id">Reference No</span>
                                            <span class="tb-odr-date d-none d-md-inline-block">Descriptions</span>
                                        </th>
                                        <th class="tb-odr-amount">
                                            <span class="tb-odr-total">Amount</span>
                                            <span class="tb-odr-status d-none d-md-inline-block">Status</span>
                                        </th>
                                        <th class="tb-odr-action">&nbsp;</th>
                                    </tr>
                                    </thead>
                                    <tbody class="tb-odr-body">

                                    @foreach($withdraws as $withdraw)

                                        <tr class="tb-odr-item">

                                            <td class="tb-odr-info">
                                                <span class="tb-odr-id"><a href="#">{{$withdraw->trx}}</a></span>
                                                <span class="tb-odr-date">{{$withdraw->descriptions}}</span>
                                            </td>
                                            <td class="tb-odr-amount">


                                                            <span class="tb-odr-total">
                                                                <span class="amount">{{toMoney($withdraw->amount)}}</span>
                                                            </span>
                                               @if($withdraw->flw_transfer_status=='SUCCESSFUL')
                                                <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-success">{{$withdraw->flw_transfer_status}}</span>
                                                            </span>
                                                   @elseif($withdraw->flw_transfer_status=='FAILED')
                                                    <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-danger">{{$withdraw->flw_transfer_status}}</span>
                                                            </span>
                                                   @elseif($withdraw->flw_transfer_status=='PENDING')
                                                    <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-warning">{{$withdraw->flw_transfer_status}}</span>
                                                            </span>
                                                   @elseif($withdraw->flw_transfer_status=='NEW')
                                                    <span class="tb-odr-status">
                                                                <span class="badge badge-dot bg-primary">INITIATED</span>
                                                            </span>
                                                   @endif
                                            </td>
                                            <td class="tb-odr-action">

                                                <div class="tb-odr-btns d-none d-sm-inline">
                                                    <a href="#" class="btn btn-dim btn-sm btn-primary">View</a>
                                                </div>
                                                <a href="#" class="btn btn-pd-auto d-sm-none"><em class="icon ni ni-chevron-right"></em></a>

                                            </td>
                                        </tr><!-- .tb-odr-item -->
                                        </a>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>




                    </div><!-- .tranx-list -->
                </div><!-- .col -->

            </div><!-- .row -->
        </div><!-- .nk-block -->
        <div class="nk-block">
            <div class="card card-bordered">
                <div class="nk-refwg">
                    @if(empty(Auth()->user()->my_referer_code))
                    <div class="nk-refwg-invite card-inner">
                        <div class="nk-refwg-head g-3">
                            <div class="nk-refwg-title">
                                <h5 class="title">Refer Us & Earn</h5>
                                <div class="title-sub">You can earn more by referring people to refer2trade.com</div>
                                <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalDefault">Create Refer Name/Code</a>
                            </div>



                        </div>

                    </div>
                    @else
                        <div class="nk-refwg-invite card-inner">
                        <div class="nk-refwg-head g-3">
                            <div class="nk-refwg-title">
                                <h5 class="title">Refer Us & Earn</h5>
                                <div class="title-sub">Use the bellow link to invite your friends.</div>
                            </div>


                                <div class="nk-refwg-action">
                                <a href="#" class="btn btn-primary" >Invite</a>
                            </div>

                        </div>
                        <div class="nk-refwg-url">
                            <div class="form-control-wrap">
                                <div class="form-clip clipboard-init" data-clipboard-target="#refUrl" data-success="Copied" data-text="Copy Link"><em class="clipboard-icon icon ni ni-copy"></em>
                                    <span class="clipboard-text">Copy Link</span></div>
                                <div class="form-icon">
                                    <em class="icon ni ni-link-alt"></em>
                                </div>
                                <input type="text" class="form-control copy-text" id="refUrl" value="https://refer2trade.com/user/register?ref={{Auth()->user()->my_referer_code}}">
                            </div>
                        </div>
                    </div><!-- .nk-refwg-invite -->
                    @endif
                    <div class="nk-refwg-stats card-inner bg-lighter">
                        <div class="nk-refwg-group g-3">
                            <div class="nk-refwg-name">
                                <h6 class="title">My Referral <em class="icon ni ni-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Referral Informations"></em></h6>
                            </div>
                            <div class="nk-refwg-info g-3">
                                <div class="nk-refwg-sub">
                                    <div class="title">{{Auth()->user()->getTotalRefer()}}</div>
                                    <div class="sub-text">Total Joined</div>
                                </div>
                                <div class="nk-refwg-sub">
                                    <div class="title">{{toMoney($totalEarn)}}</div>
                                    <div class="sub-text">Referral Earn</div>
                                </div>
                            </div>
                            <div class="nk-refwg-more dropdown mt-n1 me-n1">
                                <a href="#" class="btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                <div class="dropdown-menu dropdown-menu-xs dropdown-menu-end">
                                    <ul class="link-list-plain sm">
                                        <li><a href="#">7 days</a></li>
                                        <li><a href="#">15 Days</a></li>
                                        <li><a href="#">30 Days</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="nk-refwg-ck">
                            <canvas class="chart-refer-stats" id="refBarChart"></canvas>
                        </div>
                    </div><!-- .nk-refwg-stats -->
                </div><!-- .nk-refwg -->
            </div><!-- .card -->
        </div><!-- .nk-block -->
        <div class="nk-block">
            <div class="card card-bordered">
                <div class="card-inner card-inner-lg">
                    <div class="align-center flex-wrap flex-md-nowrap g-4">
                        <div class="nk-block-image w-120px flex-shrink-0">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 118">
                                <path d="M8.916,94.745C-.318,79.153-2.164,58.569,2.382,40.578,7.155,21.69,19.045,9.451,35.162,4.32,46.609.676,58.716.331,70.456,1.845,84.683,3.68,99.57,8.694,108.892,21.408c10.03,13.679,12.071,34.71,10.747,52.054-1.173,15.359-7.441,27.489-19.231,34.494-10.689,6.351-22.92,8.733-34.715,10.331-16.181,2.192-34.195-.336-47.6-12.281A47.243,47.243,0,0,1,8.916,94.745Z" transform="translate(0 -1)" fill="#f6faff" />
                                <rect x="18" y="32" width="84" height="50" rx="4" ry="4" fill="#fff" />
                                <rect x="26" y="44" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                <rect x="50" y="44" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                <rect x="74" y="44" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                <rect x="38" y="60" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                <rect x="62" y="60" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                <path d="M98,32H22a5.006,5.006,0,0,0-5,5V79a5.006,5.006,0,0,0,5,5H52v8H45a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H73a2,2,0,0,0,2-2V94a2,2,0,0,0-2-2H66V84H98a5.006,5.006,0,0,0,5-5V37A5.006,5.006,0,0,0,98,32ZM73,94v4H45V94Zm-9-2H54V84H64Zm37-13a3,3,0,0,1-3,3H22a3,3,0,0,1-3-3V37a3,3,0,0,1,3-3H98a3,3,0,0,1,3,3Z" transform="translate(0 -1)" fill="#798bff" />
                                <path d="M61.444,41H40.111L33,48.143V19.7A3.632,3.632,0,0,1,36.556,16H61.444A3.632,3.632,0,0,1,65,19.7V37.3A3.632,3.632,0,0,1,61.444,41Z" transform="translate(0 -1)" fill="#6576ff" />
                                <path d="M61.444,41H40.111L33,48.143V19.7A3.632,3.632,0,0,1,36.556,16H61.444A3.632,3.632,0,0,1,65,19.7V37.3A3.632,3.632,0,0,1,61.444,41Z" transform="translate(0 -1)" fill="none" stroke="#6576ff" stroke-miterlimit="10" stroke-width="2" />
                                <line x1="40" y1="22" x2="57" y2="22" fill="none" stroke="#fffffe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                <line x1="40" y1="27" x2="57" y2="27" fill="none" stroke="#fffffe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                <line x1="40" y1="32" x2="50" y2="32" fill="none" stroke="#fffffe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                <line x1="30.5" y1="87.5" x2="30.5" y2="91.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                <line x1="28.5" y1="89.5" x2="32.5" y2="89.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                <line x1="79.5" y1="22.5" x2="79.5" y2="26.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                <line x1="77.5" y1="24.5" x2="81.5" y2="24.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                <circle cx="90.5" cy="97.5" r="3" fill="none" stroke="#9cabff" stroke-miterlimit="10" />
                                <circle cx="24" cy="23" r="2.5" fill="none" stroke="#9cabff" stroke-miterlimit="10" />
                            </svg>
                        </div>
                        <div class="nk-block-content">
                            <div class="nk-block-content-head px-lg-4">
                                <h5>We’re here to help you!</h5>
                                <p class="text-soft">Ask a question or file a support ticket, manage request, report an issues. Our team support team will get back to you by email.</p>
                            </div>
                        </div>
                        <div class="nk-block-content flex-shrink-0">
                            <a href="#" class="btn btn-lg btn-outline-primary">Get Support Now</a>
                        </div>
                    </div>
                </div><!-- .card-inner -->
            </div><!-- .card -->
        </div><!-- .nk-block -->


<div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered" role="document">
  <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-primary"></div>
      <div class="modal-body text-center py-4">
      <i  class="fas fa-info-circle fa-3x text-primary mb-2"></i>
      <h3>@lang('Transaction Details')</h3>
      <p class="trx_details"></p>
      <ul class="list-group mt-2">

      </ul>
      </div>
      <div class="modal-footer">
      <div class="w-100">
          <div class="row">
          <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
              @lang('Close')
              </a></div>
          </div>
      </div>
      </div>
  </div>
  </div>
</div>
    <!-- Modal Trigger Code -->

    <!-- Modal Content Code -->
    <div class="modal fade" tabindex="-1" id="modalDefault">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
                <div class="modal-header">
                    <h5 class="modal-title">Create Referrer Name</h5>
                </div>
                <form action="#" method="POST" id="referForm">
                    @csrf
                <div class="modal-body">

                        <div class="form-group">

                            <label class="form-label" for="default-01">Type Your Code</label>
                            <div class="form-control-wrap">
                                <input type="text" name="card_name" class="form-control" id="refername" placeholder="Refer Name">
                            </div>

                        </div>






                </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-dark" data-bs-dismiss="modal">@lang('Close')</button>
                        <button class="btn btn-primary" type="button" id="loading-btn" disabled style="display: none">            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>
                        <button type="submit" class="btn btn-primary btn-saverefer">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@push('script')
    <script>
        $(document).ready(function () {
            'use strict';

            $('.details').on('click', function () {
                var url = "{{url('user/transaction/details/')}}" + '/' + $(this).data('data').id
                $('.trx_details').text($(this).data('data').details)
                $.get(url, function (res) {
                    if (res == 'empty') {
                        $('.list-group').html('<p>@lang('No details found!')</p>')
                    } else {
                        $('.list-group').html(res)
                    }
                    $('#modal-success').modal('show')
                })
            })
            function validateInput(value) {
                const specialChars = "!@#$%^&*()+=}{\][|';:/?><, ";

                if(value.includes(" ") || value.includes(",") ) {
                    return false;
                }

                for(let char of value) {
                    if(specialChars.includes(char) && char !== "_") {
                        return false;
                    }
                }

                return true;
            }
            $(".btn-saverefer").on('click', function(e){
                e.preventDefault();
                var submitBtn= $(".btn-saverefer");
                var loadingBtn= $("#loading-btn");
                loadingBtn.show();
                submitBtn.hide();
               var referCode = $('#refername').val();
                if(referCode==""){
                    showAlert("Choose your refer name to continue", 'error');
                    loadingBtn.hide();
                    submitBtn.show();
                    return;
                }
                if(!(validateInput(referCode))){
                    showAlert("Invalid Referer Name, no special character or space allow", 'error');
                    loadingBtn.hide();
                    submitBtn.show();
                    return;
                }
var csrfToken =  $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    url: "{{url('user/save-rf')}}",
                    type: "POST",
                    data: { _token: csrfToken, my_referer_code: referCode },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                        console.log(response)
                        //  showError(response);
                        loadingBtn.hide();
                        submitBtn.show();
                        // console.log(response);
                        window.location.href = "{{url('/user/')}}";
                    },
                    error: function(xhr, status, error){

                        //console.log(xhr.responseJSON.message);
                        loadingBtn.hide();
                        submitBtn.show();
                        showNotice(xhr.responseJSON.message, 'error');

                    }
                })
            })



                    // Start the countdown




        })


    </script>
@endpush