@extends('layouts.user_dashboard_main')
@section('content')
    <div class="content-heading1">
        <h3>@lang('public.Wallet')</h3>
    </div>
    <div class="dashboard-wallet-sec">
        <div class="wallet-left">
            <h4>@lang('public.Total_Balance')</h4>
            <h3>$ {{ number_format(auth()->user()->total_amount, 2) }} <sub>CAD</sub></h3>
            <div class="wallet-add-money-box">
                <h5>@lang('public.Add_Money_to') <a href="">@lang('public.Wallet')</a></h5>
                <div class="form-group">
                    <div class="input-with-rg-unit">
                        <input type="number" class="form-control" id="amount">
                        <input type="hidden" value="{{ count($allCard) }}" id="card_count">
                        <div class="rg-unit">{{auth()->user()->currency}}</div>
                    </div>
                    <span class="amount_error" style="color:red"></span>
                </div>
                <div class="submit-actions">
                    <button type="submit" class="submit-btn theme-solid-btn" onclick="openModal()">@lang('public.Proceed_to_pay')</button>
                </div>
            </div>
        </div>
        <div class="wallet-right">
            <div class="more-action-lg-btns ">
                <a data-target="#bank_transfer" data-toggle="modal"
                href="#" class="custom-btn"><img
                        src="{{ asset('frontend/assets/images/mdi_bank-transfer-in.svg') }}"> @lang('public.Transfer_Bank')
                    </a>

                <a href="javascript:;" class="custom-btn"><img
                        src="{{ asset('frontend/assets/images/add-money-icon.svg') }}">@lang('public.Automatic_Money')
                    </a>
            </div>
            <div class="wallet-left withdraw-panel">

                <div class="wallet-add-money-box">
                    <h5>@lang('public.Withdraw_from') <a href="">@lang('public.Wallet')</a></h5>
                    <div class="form-group">
                        <div class="input-with-rg-unit">
                            <input type="number" class="form-control" id="withdraw_amount">

                            <div class="rg-unit">{{auth()->user()->currency}}</div>
                        </div>
                        <span class="withdraw_amount_error" style="color:red"></span>
                        <div>

                            <span>** @lang('public.Minimum_withdraw_amount_100_USD')</span>
                        </div>
                    </div>
                    <div class="submit-actions">
                        <button type="submit" class="submit-btn theme-solid-btn withdraw-btn"
                            onclick="openModalForWithdraw()">@lang('public.Send_Request')</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal bank_transfer" id="bank_transfer">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Transfer to Bank</h4>
                    <button type="button" class="close" data-dismiss="modal"><img
                            src="{{ asset('frontend/assets/images/close-icon01.svg') }}"></button>
                    <div class="right-info">
                        <div class="price_value"></div>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="add-card-box">
                        <div class="row fix-row">
                            <div class="col-12 col-md-12 fix-col">
                                <h5 style="margin-bottom: 10px; text-align:initial">Insert Amount</h5>
                                <div class="input-with-rg-unit">
                                    <input type="number" class="form-control" id="bank_amount">

                                    <div class="rg-unit">CAD</div>
                                </div>
                            </div>


                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-actions-group-s1">
                                    <button type="submit" class="theme-solid-btn submit-btn  submit-pay-btn bank-submit-btn w-100"
                                        disabled>Send <span class="price_value ml-1"> </span></button>
                                </div>
                            </div>



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

    <!-- ================ end: custom-dashboard-main-content ================ -->

    <div class="modal payment-failed-modal for-error-msg" id="payment-failed-modal">
        <div class="modal-dialog modal-dialog-centered" style="pointer-events: all;">
            <div class="modal-content">
                <div class="modal-body">
                    <img class="icon-center" src="{{ asset('frontend/assets/images/for-error-msg-payment.svg') }}">
                    <h4>@lang('public.Opps..')</h4>
                    <p>@lang('public.Please_Add_your_Card_first')</p>
                    <div class="more-actions">
                        <a href="/manage-account" id="addCard" class="add-btn theme-border-btn" data-dismiss="modal">@lang('public.Add_your_Card')</a>
                    </div>
                </div>
                <div class=""
                    style="margin: auto;
                            height: 20%;
                            margin-top: 4%;">
                    <span>---------------OR--------------- </span>
                </div>
                <div class="col-12 col-md-12 fix-col mb-2">
                    <form method="post" action="{{ route('processTransaction') }}">
                        <div class="custom-actions-group-s1">
                            @csrf
                            <input class="price_amount" type="hidden" name="amount">
                            <button class=" w-100" type="submit"><img
                                    src="{{ asset('frontend/assets/images/paypal.svg') }}" alt=""></button>

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


    <div class="modal success-alert-modal" id="withdraw-request-money">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <figure>
                        <div class="icon-container">
                            <img src="{{ asset('frontend/assets/images/solar_letter-opened-broken.svg') }}">
                        </div>
                        <figcaption>
                            <p>@lang('public.By_presenting_your') </p>
                        </figcaption>
                    </figure>
                    {{-- <div class="user-icon"><img src="{{ asset('frontend/assets/images/usergreen.svg') }}"></div> --}}
                </div>
            </div>
        </div>
    </div>

    <div class="modal add-card-modal" id="add-money-wallet-modal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>@lang('public.Add_Money_to_Wallet')</h4>
                    <button type="button" class="close" data-dismiss="modal"><img
                            src="{{ asset('frontend/assets/images/close-icon01.svg') }}"></button>
                    <div class="right-info">
                        <div class="price_value"></div>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="add-card-box">
                        <div class="row fix-row">
                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-form-group-s1">
                                    @foreach ($allCard as $card)
                                        <div class="select-curd-lists">
                                            <meta name="csrf-token" content="{{ csrf_token() }}" />
                                            <div class="select-curd-list-item">
                                                <input type="radio" name="card_name" class="select-check"
                                                    value="{{ $card['id'] }}">
                                                <div class="select-curd-list-box">
                                                    <div class="icon-container">
                                                        <img src="{{ asset('frontend/assets/images/mastercard.svg') }}">
                                                    </div>
                                                    <div class="text-container">
                                                        <div class="leinfo">

                                                            <h4>**** ***** **** {{ $card['number_last'] }}</h4>
                                                            {{-- <h6>Debit Card</h6> --}}
                                                            <div class="ccv-number-box">
                                                                <input type="password" maxlength="3"
                                                                    class="form-control cvv_number" id="cvv_number"
                                                                    name="cvv_number" placeholder="CCV">
                                                                <span class="cvv_error"
                                                                    style="color:red; font-size:10px"></span>
                                                            </div>
                                                        </div>
                                                        <div class="rginfo">
                                                            <h5 class="price_value"></h5>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>


                            <div class="col-12 col-md-12 fix-col">
                                <div class="custom-actions-group-s1">
                                    <button type="submit" class="theme-solid-btn submit-btn  submit-pay-btn w-100"
                                        disabled>@lang('public.Pay') <span class="price_value ml-1"> </span></button>
                                </div>
                            </div>
                            <div class=""
                                style="margin: auto;
                            height: 20%;
                            margin-top: 4%;">
                                <span>---------------OR--------------- </span>
                            </div>
                            <div class="col-12 col-md-12 fix-col">
                                <form method="post" action="{{ route('processTransaction') }}">
                                    <div class="custom-actions-group-s1">
                                        @csrf
                                        <input class="price_amount" type="hidden" name="amount">
                                        <button class=" w-100" type="submit"><img
                                                src="{{ asset('frontend/assets/images/paypal.svg') }}"
                                                alt=""></button>

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

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


    @if (Session::has('modal_message_error'))
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
        </script>

        <script type="text/javascript">
            $(document).ready(function() {
                Swal.fire({
                    type: 'error',
                    title: "@lang('public.Transaction_failed')",
                    text: "@lang('public.Something_went_wrong!')"
                })
            });
        </script>
    @endif
    @if (Session::has('modal_message_success'))
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
        </script>

        <script type="text/javascript">
            $(document).ready(function() {
                Swal.fire({
                    type: "success",
                    title: "@lang('public.Transaction_successful')",
                    text: "@lang('public.Money_has_been')"
                })
            });
        </script>
    @endif
    @if (Session::has('modal_message_cancel'))
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
        </script>

        <script type="text/javascript">
            $(document).ready(function() {
                Swal.fire({
                    type: 'warning',
                    title:  "@lang('public.Transaction_failed')",
                    text: "@lang('public.You_have_canceled')"
                })
            });
        </script>
    @endif
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
</script>

<script>
    $(document).ready(function() {
        $('#addCard').on('click', function() {
            console.log('hit url');
            window.location = '/manage-account/cards';
        })

        var checkboxes = $("input[type='radio'][name='card_name']"),
            payBttn = $(".submit-pay-btn");
        // paymentCheckBox = $("input[type='radio'][name='payment_method']")

        checkboxes.click(function() {
            payBttn.attr("disabled", !checkboxes.is(":checked"));
            // paymentCheckBox.click(function() {
            //     console.log('hit');
            //     // console.log('paymentCheckBox', paymentCheckBox);

            // });
        });


        $bank_amount = $('#bank_amount').val();





        $('.submit-pay-btn').on('click', function() {

            var amount = $('#amount').val();
            var checkbox = $("input[type='radio'][name='card_name']:checked");
            var card_id = checkbox.val();
            console.log('card_id', card_id);
            console.log('checkbox value', checkbox);
            var cvv = checkbox.next().find('input').val();
            console.log('cvv', cvv);
            if (cvv == '') {
                checkbox.next().find('.cvv_error').text("@lang('public.cvv')");
            } else {

                swal({
                    title: "@lang('public.Are_you_sure')?",
                    text: "@lang('public.You_want_to_add_money')",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "@lang('public.Yes_add_it')",
                }).then(result => {

                    if (result.value) {
                        $(".loadingScreen").addClass('show');
                        $('.cvv_error').text('');
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                    'content')
                            }
                        });

                            $.ajax({
                                url: "{{ route('addWalletMoney') }}",
                                type: "POST",
                                data: {
                                    amount: amount,
                                    card_id: card_id,
                                    cvc: cvv

                                },
                                success: function(data) {
                                    $(".loadingScreen").removeClass('show');
                                    console.log(data);
                                    if (data.status == 200) {

                                        swal({
                                            title: "Wow!",
                                            text: "@lang('public.Payment_has')",
                                            type: "success"
                                        }).then(function() {
                                            window.location.reload();
                                        });
                                    } else {
                                        swal({
                                            title: "Oppss",
                                            text: "@lang('public.Payment_not_done')",
                                            type: "error"
                                        }).then(function() {
                                            window.location.reload();
                                        });
                                    }

                                },
                                error: function(jqXHR, exception) {
                                    console.log(exception);
                                    // swal({
                                    //     title: "Oppss",
                                    //     text: "Incorrect Card details! Please Check ",
                                    //     type: "error"
                                    // }).then(function() {
                                    //     window.location.reload();
                                    // });
                                }
                            })

                    } else if (
                        // Read more about handling dismissals
                        result.dismiss === swal.DismissReason.cancel
                    ) {
                        swal("@lang('public.Cancelled')", "@lang('public.Your_have_cancelled' :(", "error");
                    }
                    swall.closeModal();
                });
















                // old


            }
        })



    })

    function openModal() {
        $amount = $('#amount').val();
        if ($amount == '') {
            $('.amount_error').text("@lang('public.Please_put_amount_first')");
        } else {
            $('.amount_error').text('');
            if ($('#card_count').val() == 0) {
                $('.price_amount').val($amount);
                $('#payment-failed-modal').modal('show');

            } else {

                $('#add-money-wallet-modal').modal('show');
                console.log($('.price_value').text());
                $('.price_value').text('$' + $amount);
                $('.price_amount').val($amount);
            }
        }

    }

    function openModalForWithdraw() {
        $amount = $('#withdraw_amount').val();
        if ($amount == '') {
            $('.withdraw_amount_error').text("@lang('public.Please_put_amount_first')");
        } else {
            if ($amount >= 100) {
                $('.withdraw_amount_error').text('');



                swal({

                    title: `@lang('public.Are_you_sure')?`,

                    text: "@lang('public.You_want_to')",

                    type: "warning",

                    showCancelButton: true,

                    confirmButtonColor: "#31AD00",

                    confirmButtonText: "@lang('public.Yes_Send_it')",

                }).then(result => {
                    $(".loadingScreen").addClass('show');
                    if (result.value) {

                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            url: "{{ route('withdrawRequest') }}",
                            type: "POST",
                            data: {
                                amount: $amount

                            },
                            success: function(data) {
                                console.log(data);
                                $(".loadingScreen").removeClass('show');
                                // return;
                                // $('#withdraw-request-money').modal('show');

                                if (data.status == 200) {

                                    swal({
                                        title: "@lang('public.Request_Sent')",
                                        text: "@lang('public.By_presenting_your')",
                                        type: "success"
                                    }).then(function() {
                                        window.location.reload();
                                    });


                                } else {
                                    swal({
                                        title: "@lang('public.Withdraw_Request_Failed')",
                                        text: "@lang('public.Insufficient_Balance')",
                                        type: "error"
                                    }).then(function() {
                                        window.location.reload();
                                    });

                                };

                            }
                        });

                    } else if (


                        // Read more about handling dismissals

                        result.dismiss === swal.DismissReason.cancel

                    ) {
                        $(".loadingScreen").removeClass('show');

                        swal("@lang('public.Cancelled')", "@lang('public.Your_have_cancelled')", "error");

                    }

                    swall.closeModal();

                });



            } else {
                $('.withdraw_amount_error').text("@lang('public.Please_put_more')");
            }

        }

    }
</script>