@extends('layouts.welcomelayouts.app')
@section('title')
<title>My Balance | subtitle</title>
@endsection
@section('SEO')
<meta name="description" content="">
<meta name="keywords" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
@endsection
@push('css')
<style>
    .usersidebardiv{
        padding:0;
    }
    .mybalanetotal {
    border: 1px solid #eaeded;
    padding: 10px;
    text-align: center;
    }
    .mybalanetotal p {
    padding: 10px;
    margin: 0;
    background: #eaeded;
    }
    .mybalanetotal h6 {
    font-weight: bold;
    margin: 0;
    padding: 5px;
    }
    .mybalanetotal span {
    font-size: 50px;
    font-weight: bold;
    }
    .myaddbalanetotal {
    border: 1px solid #eaeded;
    padding: 10px;
    text-align: center;
    }
    .myaddbalanetotal p {
    padding: 10px;
    margin: 0;
    background: #eaeded;
    }
    .alltrasection {
    border: 1px solid #eaeded;
    padding: 10px;
    }
    @media only screen and (max-width: 600px) {
      .usersidebardiv {
        padding: 15px;
      }
    }
</style>
@endpush
@section('contents')
<div class="userdashboard">
    <div class="container">
    <div class="row" style="margin:0;">
        <div class="col-md-3 usersidebardiv">
            <div class="usersidebar">
                @include('users.include.sidebar')
            </div>
        </div>
        <div class="col-md-9">
            <div class="usercontent">
                <div class="myrecentorder" style="min-height: 340px;">
                    <p style="font-weight: bold;border-bottom: 1px solid #eaeded;padding: 5px 0;">Recharge Amount to Wallet</p>
                    <div class="row" style="margin:0;">
                        <div class="col-md-6" style="padding:10px;">
                            <div class="mybalanetotal">
                                <p>New Recharg Amount ({{ $order->currency }})</p>
                                <span>{{ $order->amount }}</span>
                                
                            </div>
                        </div>
                        <div class="col-md-6" style="padding:10px;">
                            <div class="myaddbalanetotal">
                                <p>Online Payment</p>
                                <br>

        <button class="btn btn-primary mb-3" id="sslczPayBtn"
        token="{{ $order->id }}"
        postdata=""
        order="{{ $order->id }}"
        endpoint="/pay-via-ajax"> Pay Online Now
        </button>




                                
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
@endsection
@push('js')

<script>
    (function (window, document) {
        var loader = function () {
            var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
            script.src = "https://seamless-epay.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7);
            tag.parentNode.insertBefore(script, tag);
        };
    
        window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
    })(window, document);
</script>

@endpush