@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <meta name="csrf-token" content="{!! csrf_token() !!}">

        <div class="row align-items-center pt-4">
            <div class="col-md-12">
                <div class="title-section">
                    <p>LSP : Wallet</p>
                </div>
            </div>
            <div class="col-md-12 d-flex wallet-balance">
                <p class="">Your wallet balance is</p>
                <p class="rupees">₹ {{$user->wallet_amount}}</p>
                <p class="balance">Low balance</p>
                <!-- <p class="balance" id="user_id" hidden>{{$user->id}}</p> -->
                <input class="form-control" id="user_id" value="{{$user->id}}" type="text" name="" hidden>
            </div>
        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="zone-box wallet">
                        <div class="col-md-3">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="amount">Enter amount to recharge</label>
                                <input class="form-control" id="walletAmount" value="" type="text" name="" onblur="searchOrderData()">
                            </div>
                        </div>

                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-danger  mt-4" id="rzp-button1" onclick="getInputValue();" disabled>Recharge Your Wallet</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

            <div class="row pt-4 pt-sm-5">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="title-section">
                                <p>Transaction History</p>
                            </div>
                        </div>

                        <div class="col-md-2" style="display: none;">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="customername">Date</label>
                                <select class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3" style="display: none;">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="amount">Amount</label>
                                <input class="form-control" placeholder="" type="text" value="">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-striped" id="transactionHistory">
                                    <thead>
                                        <tr>
                                            <th scope="col">Date</th>
                                            <th scope="col">Amount</th>
                                            <th scope="col">Payment Mode</th>
                                            <th scope="col">Dr/Cr</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

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



        <div class="chat-icon">
            <img src="images/chat-icon.svg" class="" alt="">
        </div>
        <aside class="control-sidebar control-sidebar-dark">
        </aside>

    </section>
    
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    
    <script>
        $(document).ready(function() {
            $("#transactionHistory").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/lspwallets/table') }}",
                    data: function(d) {}
                },

                columns: [{
                        data: 'created_at',
                        name: 'created_at',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'payment_mode',
                        name: 'payment_mode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'payment_type',
                        name: 'payment_type',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ]
            });
        });
    </script>
    <script>

        let readyToShipTab = "off";

    function searchOrderData(){
        userId = $('#user_id').val();
        paidAmt = $('#walletAmount').val() *100;

/*
         jQuery.ajax({
                url : "https://api.razorpay.com/v1/orders",
                type : "POST",
                data: {  _token: "{{csrf_token()}}",skuId: skuId,lspDataId: lspData,amount:amount,paymentTypeMode:paymentTypeMode},

                success:function(data)
                {



                }

            });*/
            
        var options = {
            "key": "rzp_test_OaAxERdNlqdG27", // Enter the Key ID generated from the Dashboard
            "amount": paidAmt, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
            //FRtNAnkwmTFuanUur2MMqLeg
            "currency": "INR",
            "name": "SPOC",
            "description": "Test Transaction",
            "image": "assets/images/logo.svg",
            "handler": function (response){

                jQuery.ajax({
                    url : "{{route('update-user-wallet-prepaid')}}",
                    type : "POST",
                    data: {  _token: "{{csrf_token()}}",amount: paidAmt,zazorpay_payment_id: response.razorpay_payment_id},

                    success:function(data)
                    {

                           swal({
                                icon: 'success',
                                title: "Wallet",
                                text: 'Wallet balance updated successfully.',
                                type: "success",

                                closeOnConfirm: true,
                                showLoaderOnConfirm: true,
                            },
                            function(){
                                window.location.href='{{url("/lsp/wallet")}}';
                            }
                            );

                            return;
                    }

                });
               // alert(response);
               /* alert(response.razorpay_order_id);
                alert(response.razorpay_signature)*/
                //console.log('response', response);
            },
           /* "prefill": {
                "name": "Gaurav Kumar",
                "email": "gaurav.kumar@example.com",
                "contact": "9999999999"
            },
            "notes": {
                "address": "Razorpay Corporate Office"
            },
            "theme": {
                "color": "#3399cc"
            }*/
        };
        var rzp1 = new Razorpay(options);
        rzp1.on('payment.failed', function (response){
                alert(response.error.code);
                alert(response.error.description);
                alert(response.error.source);
                alert(response.error.step);
                alert(response.error.reason);
                alert(response.error.metadata.order_id);
                alert(response.error.metadata.payment_id);
        });
        document.getElementById('rzp-button1').onclick = function(e){
            rzp1.open();
            e.preventDefault();
        }
    }

    // Enabled Button
    $('#walletAmount').keyup(function() {
        var textBox = $('#walletAmount').val() * 1;
        if ((textBox >= 1)) {
            $('#rzp-button1').prop("disabled", false);
        } else {
            $('#rzp-button1').prop("disabled", true);        }
    });
    </script>

@endsection