@extends('layouts.app')
@section('title_and_meta')
    <title>Dashboard | Wishours</title>
    <meta name="description" content="User Orders" />
    <meta name="keywords" content="User Orders" />
@endsection
@section('content')
   <nav aria-label="breadcrumb" class="breadcrumb-nav">
                <div class="container">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}"><i class="icon-home"></i></a></li>
                        <li class="breadcrumb-item" aria-current="page">Dashboard</li>
                        <li class="breadcrumb-item active" aria-current="page">Rewards</li>
                    </ol>
                </div><!-- End .container -->
            </nav>

            <div class="container">
                <div class="row">
                    <div class="col-lg-9 order-lg-last dashboard-content">
                       
                         <div class="card">
                            <div class="card-header">Reward Details</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-sm-6 col-12">
                                         @if(isset($wallet))
                                 <div style="display: flex; align-items: center;">
                                      <img src="{{ asset('frontEnd')}}/images/reward.png" alt="" style="max-width: 80px; width: 100%;"/>
                                      <div>
                                          <p style="font-size: 40px; margin: 0; font-weight: 700; color: #000; margin-left: 15px;">{{ $wallet->points }}</p>
                                          @if($wallet->points != 0)
                                           <p style="font-size: 14px; margin: 0; font-weight: 700; color: #000; margin-left: 15px; color:#847f7f">{{ $wallet->points }} / 10 : Rs. {{ $wallet->points / 10 }}</p>
                                          @endif
                                          
                                      </div>
                                      
                                 </div>
                               @endif
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-12">
                                        @if(isset($referralCode))
                                        <div>
                                            <h3 style="font-weight: 700; font-size: 20px; margin-bottom: 5px; color: #310685;">Your Referral Code </h3>
                                            <p style="margin-bottom: 10px;">Share your referral code and get 100 coins reward bonus.</p>
                                            <button id="copyToClipboard">
                                                {{$referralCode->ref_code}}
                                            </button>
                                            <input type="text" value="{{$referralCode->ref_code}}" id="myInput"/>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                              

                            </div>
                         </div>

                    </div><!-- End .col-lg-9 -->

                     @include('partials.sidebar')
                </div><!-- End .row -->
            </div><!-- End .container -->

          <script>

$("#copyToClipboard").click(function(){
 // Get the text field
 var copyText = document.getElementById("myInput");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
 // Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Code copied successfully : " + copyText.value);
});
</script>
          
@endsection