@extends('layouts.admin')
@section('content')
<script src="{{ url('js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ url('js/dataTables.buttons.min.js') }}" type="text/javascript"></script>
<section class="gray-dark mt-0 pt-4">
    <div class="container">
        <div class="">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mrm-15">
                    <li class="breadcrumb-item"><a href="{{url('/')}}"><i class="ti-home"></i></a></li>
                    <!-- <li class="breadcrumb-item"><a href="javascript:;">My Orders</a></li> -->
                    <li class="breadcrumb-item active" aria-current="page">@lang('messages.Wishlist')</li>
                </ol>
            </nav>
        </div>

        <div class="row pt-2">
            <div class="col-lg-3">@include('includes.admin.accountSidebar')</div>
            <div class="col-lg-9 col-md-9 right-side">
                <div class="bg-white mb-4">
                    <div class="row mb-2">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="sec-heading-flex pl-2 pr-2 mb-0">
                                <div class="sec-heading-flex-one">
                                    <h2>@lang('messages.My Wallet')</h2>
                                </div>
                                <!-- <div class="sec-heading-flex-last">
                                    <select class="custom-select">
                                        <option>All</option>
                                        <option>Past</option>
                                        <option>Cancled</option>
                                    </select>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>

                    <div class="col-12 wallet-page">
                        <div class="row">
                        <div class="col-8 right-side  gray-simple shadow-sm rounded text-left p-4 mb-4">
                            <h6 class="text-9 font-weight-400">@lang('messages.Load Money')</h6>
                            {!!Form::open(array('class'=>'','id'=>'update_wallet','files' => true));!!}
                            <hr class="mx-n3">
                                <div class="select-payment-type">
                                    <label class="font-weight-bold pt-1">@lang('messages.Enter Amount')</label>
                                    <div class="input-group enter-amount">
                                        <input class="form-control form-control-sm number-only" name="wallet_amount" id="wallet_amount" maxlength="6" type="text" placeholder="500" required="">
                                    </div>

                                 @if(!empty($paymentModeList))
                                    @foreach($paymentModeList as $payment)
                                        @if($payment->id == 9)
                                            <div class="list-group-item">
                                                <div class="custom-control custom-radio">
                                                    <input class="custom-control-input collapsed payment_type_wallet" id="upipayment" name="payment_type_wallet" value="9" type="radio" data-toggle="collapse" data-action="show" data-target="#upipaymentCollapse" aria-expanded="true">
                                                    <label class="custom-control-label font-size-sm text-body text-nowrap mb-0" for="upipayment">UPI <img class="ml-2" src="{{ url('img/upi_logos.png') }}" alt="..." style="max-width:140px;"></label>
                                                </div>
                                            </div>
                                            <div class="list-group-item py-0 collapse" id="upipaymentCollapse" style="">
                                                <div class="p-2 col-lg-10 my-2">
                                                    <div class="card-caption">
                                                        <label>Enter UPI</label>
                                                        <input type="text" class="form-control" id="upi-vpa"/>
                                                    </div>
                                                </div>
                                            </div>
                                        @elseif($payment->id == 8)
                                            <div class="list-group-item">
                                                <div class="custom-control custom-radio">
                                                    <input class="custom-control-input collapsed payment_type_wallet"  id="card" name="payment_type_wallet" value="8" type="radio" data-toggle="collapse" data-action="show" data-target="#cardcollapse" aria-expanded="true">
                                                    <label class="custom-control-label font-size-sm text-body text-nowrap mb-0" for="card">Card </label>
                                                </div>
                                            </div>
                                            <div class="list-group-item py-0 px-0 collapse" id="cardcollapse" style="">
                                                <div class="p-3">
                                                    <div class="add-payment-card mt-2">
                                                        <div class="ap-card-header mb-2">
                                                            <div class="mr-auto">
                                                                <label>Enter Card Detail</label>
                                                            </div>
                                                            <div class="ml-auto">
                                                                <img src="{{ url('img/card_new.png') }}" class="" style="max-width:100px;" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="ap-card-body">
                                                            <div class="ml-auto mb-3">
                                                                <label>Card Number</label>
                                                                <div class="card-caption">
                                                                    <input type="text" id="card-num" placeholder="1234567890123456" class="form-control number-only" minlength="16" maxlength="16" size="16" autocomplete='off' value ="" />
                                                                </div>
                                                            </div>
                                                            <div class="ap-card-footer">
                                                                <div class="row">
                                                                    <div class="col-9">
                                                                        <div class="ml-auto">
                                                                            <label>Expiry Date</label>
                                                                            <div class="card-caption">
                                                                                <input type="text" id="card-mm" placeholder="MM" class="form-control number-only" style="display:inline-block;width:45%;" value="" minlength="2" maxlength="2" size="2" autocomplete='off'/> /
                                                                                <input type="text" id="card-yyyy" placeholder="YYYY" value="" style="display:inline-block;width:50%;" class="form-control number-only" minlength="4" maxlength="4" size="4" autocomplete='off'/>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-3">
                                                                        <div class="ml-auto">
                                                                            <label>CCV</label>
                                                                            <div class="card-caption">
                                                                                <input type="text" id="card-cvv" placeholder="123" value="" class="form-control number-only" minlength="3" maxlength="3" size="3" autocomplete='off'/>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="ap-card-footer mt-2">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <div class="ml-auto">
                                                                            <label>Card Holder Name</label>
                                                                            <div class="card-caption">
                                                                                <input type="text" id="card-name" value="" class="form-control"/>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @elseif($payment->id == 10)
                                            <div class="list-group-item">
                                                <div class="custom-control custom-radio">
                                                    <input class="custom-control-input collapsed payment_type_wallet" id="netpayment" name="payment_type_wallet" type="radio" data-toggle="collapse" data-action="show" data-target="#netbankingCollapse" value="10" aria-expanded="true">
                                                    <label class="custom-control-label font-size-sm text-body text-nowrap mb-0" for="netpayment">Net Banking</label>
                                                </div>
                                            </div>
                                            <div class="list-group-item py-0 collapse" id="netbankingCollapse" style="">
                                                <div class="p-2 col-lg-10 my-2">
                                                    <div class="card-caption">
                                                        <label>Select Bank</label>
                                                        <select id="bank-code" name="bank-code" class="custom-select full-width">
                                                            @foreach($payment_providers->net_banking_provider as $netbaning_providers)
                                                                <option value="{{$netbaning_providers->provider_code}}">{{$netbaning_providers->provider_name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif

                                <button type="submit" name="submit" class="btn btn-success btn-sm py-2 mt-3 px-4 mr-auto">@lang('messages.Load')</button>
                            </div>
                            {!!Form::close();!!}

                    </div>
                    <div class="col-4">
                        <div class="border placeholder-02 shadow rounded text-center p-3 mb-4 pt-5" style="min-height: 277px;background-position: center;">
                            <div class="text-17 text-danger my-3"><i class="fas fa-wallet fa-4x"></i></div>
                            <h3 class="font-weight-400 text-warning "><span class="cur-symbol" > {{ env("CURRENCY_CODE") }} </span>0.00</h3>
                            <p class="mb-2 text-muted opacity-8 ">@lang('messages.Available Balance')</p>
                        </div>
                    </div>
                </div><hr />
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="sec-heading-flex pl-2 pr-2 mb-0">
                            <div class="sec-heading-flex-one">
                                <h2>@lang('messages.All Transaction')</h2>
                            </div>
                            <div class="col-sm-6 col-md-5 mb-3">
                                <div class="input-group ">
                                    <input type="date" name="date" id="date" onchange="getTransaction(event)" class="form-control number-only" placeholder="Enter Date Range">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list-tabel-main table-responsive px-2" style="width: 100%">
                        <table id="walletList" class="datatable border table order-list-tabel" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>@lang('messages.Transaction Id')</th>
                                    <th>@lang('messages.Date')</th>
                                    <th>@lang('messages.Description')</th>
                                    <th>@lang('messages.Status')</th>
                                    <th>@lang('messages.Amount')</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

<script>
    $(document).ready(function(){
        setTimeout(function () {
        getWalletData();
    }, 1000);
    });

    function getWalletData(){
        var token = $('meta[name="csrf-token"]').attr('content');
        var date = $('#date').val();
        var data = {
            'date' : date,
        };
        var table = $('#walletList').DataTable({

            // dom: 'lfrtip',
            search: {
                'caseInsensitive': true
            },
            "lengthMenu": [[10, 20, 100], [10, 20, 100]],
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: true,
            ajax: {
                url: "{{ URL::to('ajax-wallet') }}",
                type: 'POST',
                data: data,
                headers: {
                    'X-CSRF-TOKEN': token
                }
            },
            "ordering": false,
            "searching": false,
            "bInfo" : false,
            "bLengthChange": false,
            "order": [],
            "columnDefs": [
                { className: 'text-center', targets: [0, 2] },
                { className: 'text-right', targets: [3] },
            ],
            columns: [
                {data: 'transaction_id', name: 'transaction_id', searchable: true, orderable: true},
                {data: 'created_at', name: 'created_at', searchable: true, orderable: true},
                {data: 'description', name: 'description', searchable: true, orderable: true},
                {data: 'status', name: 'status', searchable: true, orderable: true},
                {data: 'amount', name: 'amount', searchable: true, orderable: true},
            ]

        });
    }

    $(document).ready(function(){
        $('#update_wallet').submit(function(e){
            e.preventDefault();

            var config = {};
            config.layout = {};
            config.checkout = "transparent";
            config.mode = "{{env('cashfree_env')}}";
            var response = CashFree.init(config);
            var err_messages = '';

            var token, url, money;
            money = $('#wallet_amount').val();

            var radios = document.getElementsByName("payment_type_wallet");
            var formValid = false;
            var paymentMethod = '';
            var i = 0;
            while (!formValid && i < radios.length) {
                if (radios[i].checked) {
                    formValid = true;
                    if (formValid == true) {
                        paymentMethod = radios[i].id;
                    }
                }
                i++;
            }

            if (!formValid){
                toastr.error("Kindly choose a payment method!");
                return false;
            } else if (paymentMethod == 'card') {
                var cardHolderName = $("#card-name").val();
                var cardNumber = $("#card-num").val();
                var cvv = $("#card-cvv").val();
                var cardMM = $("#card-mm").val();
                var cardYYYY = $("#card-yyyy").val();
                var myRe = /^[0-9]{3,4}$/;
                var myArray = myRe.exec(cvv);
                currentYear = (new Date).getFullYear();
                if (cardNumber == '') {
                    err_messages+= 'Card Number is required.<br>';
                } else if ( !cardNumber.match(/^\d{16}$/) || !$.isNumeric(cardNumber)) {
                    err_messages+= 'Invalid Card Number.<br>';
                }
                if (cardMM == '') {
                    err_messages+= 'Expiry Month is required.<br>';
                } else if ( cardMM > 12 || !$.isNumeric(cardMM)) {
                    err_messages+= 'Invalid  Expiry Month<br>';
                }
                if (cardYYYY == '') {
                    err_messages+= 'Expiry Year is required.<br>';
                } else if (cardYYYY < currentYear || !$.isNumeric(cardYYYY)) {
                    err_messages+= 'Invalid Year.<br>';
                }
                if (cvv == '') {
                    err_messages+= 'CVV is required.<br>';
                } else if (cvv != myArray) {
                    err_messages+= 'Invalid CVV.<br>';
                }
                if (!cardHolderName) {
                    err_messages+= 'Card Holder Name is required.<br>';
                }
                if (err_messages != '') {
                    toastr.error(err_messages);
                    return false;
                }
            }

            token = $('meta[name="csrf-token"]').attr('content');
            url = "{{url('/update-wallet-cashfree')}}";
            var data = {
                'wallet_amount':money,
                'status':0
            };
            data.appId = "{{env('cashfree_appId')}}";
            data.notifyUrl = "{{ url('/cashfree-callback-wallet') }}";
            data.returnUrl = "{{ url('/cashfree-callback-wallet') }}";
            data.orderNote = "";
            data.pc = "";
            data.orderCurrency = "INR";
            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: data,
                type: 'POST',
                datatype: 'JSON',
                success: function (resp) {

                    console.log(resp);
                    data.paymentToken = resp.data.paymentToken;
                    data.orderId = resp.data.data.id;
                    data.orderAmount = resp.data.data.amount_total;
                    data.customerName = resp.data.data.customer_name;
                    data.customerPhone = resp.data.data.customer_contact;
                    data.customerEmail = resp.data.data.customer_email;
                    //payment_type = $(".payment_type_wallet").val();
                    var payment_type = $("input:radio.payment_type_wallet:checked").val();
                    if (payment_type == 8) {
                        data.paymentOption = "card";
                        data.card = {};
                        data.card.number = document.getElementById("card-num").value;
                        data.card.expiryMonth = document.getElementById("card-mm").value;
                        data.card.expiryYear = document.getElementById("card-yyyy").value;
                        data.card.holder = document.getElementById("card-name").value;
                        data.card.cvv = document.getElementById("card-cvv").value;
                        CashFree.paySeamless(data);
                        return false;
                    } else if (payment_type == 9) {
                        data.paymentOption = "upi";
                        data.upi = {};
                        data.upi.vpa = document.getElementById("upi-vpa").value;
                        CashFree.paySeamless(data);
                        return false;
                    } else if (payment_type == 10) {
                        data.paymentOption = "nb";
                        data.nb = {};
                        data.nb.code = document.getElementById("bank-code").value;
                        CashFree.paySeamless(data);
                        return false;
                    }
                    if(resp.http_code == 400){
                        toastr.warning(resp.message);
                    } else if(resp.http_code == 200){
                        toastr.success(resp.message);
                        var loc = "{{ url('wallet')}}";
                        $(location).attr('href',loc);
                    } else if(resp.http_code == 500){
                        toastr.success(resp.message);
                    }
                }
            });
        });
        $(".number-only").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                toastr.error("Digits Only");
                return false;
            }
        });
    });

    /*function process_razorpay_wallet(response)
    {
        console.log(response);
        var data = {
            'razorpay_payment_id': response.razorpay_payment_id,
            'razorpay_order_id': response.razorpay_order_id,
            'razorpay_signature': response.razorpay_signature,
        };
        $.ajax({
            url: MY_PROJECT.razor_callback_wallet,
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'json',
            success: function(resp) {
                console.log(resp);
                if (resp.http_code == 400) {
                    err_msg = resp.message.replace(/, \\n /g, '<br>');
                    toastr.error(err_msg);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    var home = MY_PROJECT.wallet;
                    $(location).attr('href', home);
                } else if (resp.http_code == 401) {
                    toastr.warning(resp.message);
                    var home = MY_PROJECT.home;
                    $(location).attr('href', home);
                } else if (resp.http_code == 500) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 501) {
                    toastr.warning(resp.message);
                    var home = MY_PROJECT.home;
                    $(location).attr('href', home);
                }
            }
        });
    }*/

    function getTransaction(e)
    {
        var token = $('meta[name="csrf-token"]').attr('content');
        var date = $('#date').val();
        var data = {
            'date' : date,
        };

        $('#walletList').DataTable().destroy();
        var table = $('#walletList').DataTable({
            // dom: 'lfrtip',
            search: {
                'caseInsensitive': true
            },
            "lengthMenu": [[10, 20, 100], [10, 20, 100]],
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: true,
            ajax: {
                url: "{{ URL::to('ajax-wallet') }}",
                type: 'POST',
                data:data,
                headers: {
                    'X-CSRF-TOKEN': token
                }
            },
            "ordering": false,
            "searching": false,
            "bInfo" : false,
            "bLengthChange": false,
            "order": [],
            "columnDefs": [
                { className: 'text-center', targets: [0, 2] },   
                { className: 'text-right', targets: [3] },
            ],
            columns: [
                {data: 'transaction_id', name: 'transaction_id', searchable: true, orderable: true},
                {data: 'created_at', name: 'created_at', searchable: true, orderable: true},
                {data: 'description', name: 'description', searchable: true, orderable: true},
                {data: 'status', name: 'status', searchable: true, orderable: true},
                {data: 'amount', name: 'amount', searchable: true, orderable: true},
            ]
        });
    }
    </script>
    <script src="https://www.cashfree.com/assets/cashfree.sdk.v1.2.js" type="text/javascript"></script>
        <script type='text/javascript'>
    var payment_message = "{{Session::get('payment_message')}}";
    var payment_http_code = "{{Session::get('payment_http_code')}}";
    if (payment_http_code == 400) {
        toastr.warning(payment_message);
    } else if(payment_http_code == 200) {
        toastr.success(payment_message);
    }
    </script>
@endsection