@extends('layouts.app')

@section('content')
<div class="page-title">
    <h3>Topup</h3>
    @include('partials._breadcrumbs')
</div>


<div id="main-wrapper">
    <div class="row">

        <div class="panel panel-white">
            <div class="panel-heading clearfix">

                <h4 class="panel-title">Topup</h4>
            </div>
            <div class="panel-body">

                <div class="tabs-left" role="tabpanel">
                    <!-- Nav tabs -->

                    <form id="wallet_form" action="" method="POST">
                        <div class="row">
                            @csrf
                            <div class="col-md-3">
                                <input type="hidden" name="orderId" value="orderId"
                                    value="{{Str::random(4)}}{{Auth::user()->id}}">
                                <div class="form-group">
                                    <label for=""> Mobile Number</label><br>
                                    <input placeholder="" required maxlength="10" name="mobile_number"
                                        id="mobile_number">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group required">
                                    <label for="">Email </label> <br>
                                    <input placeholder="" required type="email" name="email" id="email">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group required">
                                    <label for="" class="control-label">Amount</label><br>
                                    <input type="number"
                                        onkeyup="$('#walletMessage').html('Amount: '+(parseFloat($(this).val())-parseFloat(($(this).val()*0/100))).toFixed(2)+' will be recharged')"
                                        required name="amount" maxlength="4" id="amount"> <br>
                                    <label for="" class="text-danger" id="walletMessage"></label>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group required">
                                    <br>
                                    <button class="btn btn-success btn-xs" id="wallet_recharge"
                                        type="submit">Recharge</button>
                                </div>
                            </div>
                            <br>

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


    </div><!-- Row -->

</div>



@endsection