@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <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">₹100.23</p>
                    <p class="balance">Low balance</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="zone-box wallet">
                        <h5>Recharge you wallet</h5>
                        <div class="row pt-3 align-items-center">
                            <div class="col-md-3">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="amount">Enter amount to recharge</label>
                                    <select class="form-control">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <a href="#">Repeat last recharge of 599</a>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label" for="amount">Choose payment option</label>
                                <div class="form-group">
                                    <input class="with-gap" name="group1" type="radio" id="debit" checked>
                                    <label for="debit">Credit/Debit card</label> <br>
                                    <input class="with-gap" name="group1" type="radio" id="wallet">
                                    <label for="wallet">Wallets</label> <br>
                                    <input class="with-gap" name="group1" type="radio" id="net" checked>
                                    <label for="net">Netbanking</label><br>
                                    <input class="with-gap" name="group1" type="radio" id="upi" checked>
                                    <label for="upi">UPI</label>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="Date">Card number</label>
                                    <input class="form-control" placeholder="" type="text" value="">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="Date">CVV Number</label>
                                    <input class="form-control" placeholder="" type="text" value="">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="Date">Date Registered</label>
                                    <input class="form-control" placeholder="" type="date" value="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-danger w-50  mt-4">Pay</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

                        <div class="col-md-2">
                            <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">
                            <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 class="pagination_rounded">
                                <ul>
                                    <li>
                                        <a href="#" class="prev"> <i class="fa fa-chevron-left"
                                                aria-hidden="true"></i> </a>
                                    </li>
                                    <li><a href="#" class="active">1</a> </li>
                                    <li class="hidden-xs"><a href="#">2</a> </li>
                                    <li class="hidden-xs"><a href="#">3</a> </li>
                                    <li class="hidden-xs"><a href="#">4</a> </li>
                                    <li>
                                        <a href="#" class="next"> <i class="fa fa-chevron-right"
                                                aria-hidden="true"></i></a>
                                    </li>
                                </ul>
                            </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>
        $(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>
@endsection