@extends('layout.customerapp')
@section('title', '- Recharge')
@section('style')
    <style>
        .loader-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Make sure it's on top */
        }
    </style>
@endsection

@section('customerbody')

    <div class="card col-xl-8">
        <h5 class="card-header">Recharge Now</h5>
        <!-- Account -->
        <hr class="my-0" />
        <div class="card-body ">
            <!-- Loader Overlay -->
            <div class="loader-overlay" style="display: none;">
                <div class="container text-center loader">
                    <div class="spinner-grow text-muted"></div>
                    <div class="spinner-grow text-primary"></div>
                    <div class="spinner-grow text-success"></div>
                    <div class="spinner-grow text-info"></div>
                    <div class="spinner-grow text-warning"></div>
                    <div class="spinner-grow text-danger"></div>
                    <div class="spinner-grow text-secondary"></div>
                    <div class="spinner-grow text-dark"></div>
                    <div class="spinner-grow text-light"></div>
                    <h4>Processing Please Wait</h4>
                </div>
            </div>

                <div class="row">
                    <div class="card col-md-6">
                        <h5 class="card-header">Bill Query</h5>
                        <div class="card-body BillQuery">
                            <form method="POST" onsubmit="return false">@csrf
                                <div class="mb-3 col-md-12">
                                    <label for="amount" class="form-label">Enter The Amount</label>
                                    <input type="hidden" id="account_no" name="account_no" value="{{session()->get('account_no')}}" />
                                    <input class="form-control" type="number" id="amount" name="amount" value="" autofocus />
                                </div>
                                <div class="mb-3 col-md-12 text-center">
                                    <button type="button" class="btn btn-outline-success btn-sm" data-amount="500">500</button>
                                    <button type="button" class="btn btn-outline-success btn-sm" data-amount="1000">1000</button>
                                    <button type="button" class="btn btn-outline-success btn-sm" data-amount="2000">2000</button>
                                </div>
                                <div class="mt-2 text-center">
                                    <button type="button" class="btn btn-info me-2" id="" onclick="BillQuery()">Bill Check</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card col-md-6 loadBkash d-none" id="loadBkash">
                        <h5 class="card-header">Bill Status</h5>
                        <div class="card-body">
                            <form method="POST" onsubmit="return false">@csrf
                            <h4>Meter No : <span id="meterNoS"></span></h4>
                            <ul class="list-unstyled my-3 py-1">
                                <input type="hidden" name="meter_no" id="meterNo" value="" />
                                <input type="hidden" name="amount" id="TotalAmount" value="" />
                                <input type="hidden" id="account_no" name="account_no" value="{{session()->get('account_no')}}" />
                                <li class="d-flex align-items-center mb-4">Total Amount: <span class="fw-medium mx-2" id="TotalAmountS"></span></li>
                                <li class="d-flex align-items-center mb-4"></i>Service Change: <span class="fw-medium mx-2" id="ServiceChange"></span> </li>
                                <li class="d-flex align-items-center mb-4">Advance Amount: <span class="fw-medium mx-2" id="AdvanceAmount"></span></li>
                                <hr/>
                                <li class="d-flex align-items-center mb-4">Reachable Amount: <span class="fw-medium mx-2" id="ReachableAmount"></span></li>
                            </ul>
                            <div class="mt-2 text-center">
                                <img src="https://www.logo.wine/a/logo/BKash/BKash-bKash-Logo.wine.svg" width="200" height="80" />
                            </div>
                            <div class="mt-2 text-center">
                                <button type="button" class="btn btn-danger btn-lg me-2" id="" onclick="BkashPayment()">Pay With bKash</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
        </div>
        <!-- /Account -->
    </div>
@endsection

@section('script')
    <script id="myScript" src="https://scripts.sandbox.bka.sh/versions/1.2.0-beta/checkout/bKash-checkout-sandbox.js"></script>

    <script>
        function BillQuery() {
            showLoading();
            url = "{{ route('getCheckData') }}";
            $.ajax({
                url: url,
                type: "POST",
                data: new FormData($(".BillQuery form")[0]),
                contentType: false,
                processData: false,
                success: function (data) {
                    $("#meterNo").val(data.meterno);
                    $("#meterNoS").text(data.meterno);
                    $("#ReachableAmount").text(data.ReachableAmount);
                    $("#ServiceChange").text(data.ServiceChange);
                    $("#AdvanceAmount").text(data.AdvanceAmount);
                    $("#TotalAmount").val(data.TotalAmount);
                    $("#TotalAmountS").text(data.TotalAmount);
                    document.getElementById('loadBkash').classList.remove('d-none')
                    hideLoading();

                }, error: function (data) {
                    console.log(data);
                    hideLoading();
                }
            });
            return false;
        };

        function BkashPayment() {
            var amountData = $("#TotalAmount").val();
            amountData = parseFloat(amountData);
            if (amountData > 0) {
                showLoading();
                url = "{{ route('bkash-get-token') }}";
                $.ajax({
                    url: url,
                    type: "POST",
                    data: new FormData($(".loadBkash form")[0]),
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        console.log(data);
                        if (data.statusCode=='0000') {
                            let paymentID = data.paymentID;
                            let bkashURL = data.bkashURL;
                            let callbackURL = data.callbackURL;
                            let successCallbackURL = data.successCallbackURL;
                            let failureCallbackURL = data.failureCallbackURL;
                            let cancelledCallbackURL = data.cancelledCallbackURL;
                            let amount = data.amount;
                            let intent = data.intent;
                            let currency = data.currency;
                            let paymentCreateTime = data.paymentCreateTime;
                            let transactionStatus = data.transactionStatus;
                            let merchantInvoiceNumber = data.merchantInvoiceNumber;
                            let statusCode = data.statusCode;
                            let statusMessage = data.statusMessage;
                            console.log('Payment ID: ' + paymentID);
                            console.log('Amount: ' + amount);
                            console.log('Transaction Status: ' + transactionStatus);
                            hideLoading();

                            window.location.href = bkashURL;
                        }else {
                            hideLoading();
                            showErrorMessage(data)
                            swal({
                                text:  data.statusMessage,
                                icon: "error",
                                timer: '3000'
                            });

                        }
                    }, error: function (data) {
                        console.log(data);
                        hideLoading();
                        swal({
                            text: data,
                            icon: "error",
                            timer: '2000'
                        });
                    }
                });
                return false;
            } else {
                swal({
                    text: "Please enter a valid amount.",
                    icon: "error",
                    timer: '3000'
                });
            }

        };

        function BkashPayment1() {
            showLoading();
            $.ajax({
                url: "{{ route('bkash-get-token') }}",
                type: 'POST',
                data: new FormData($(".loadBkash form")[0]),
                contentType: 'application/json',
                success: function (data) {
                    if (data.hasOwnProperty('msg')) {
                        showErrorMessage(data)
                    }
                },
                error: function (err) {
                    hideLoading();
                    showErrorMessage(err);
                }
            });
        }

        bKash.init({
            paymentMode: 'checkout',
            paymentRequest: {},
            createRequest: function (request) {
                setTimeout(function () {
                    createPayment(request);
                }, 2000)
            },

            executeRequestOnAuthorization: function (request) {
                $.ajax({
                    url: '{{ route('bkash-execute-payment') }}',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "paymentID": paymentID
                    }),
                    success: function (data) {
                        if (data) {
                            if (data.paymentID != null) {
                                BkashSuccess(data);
                            } else {
                                showErrorMessage(data);
                                bKash.execute().onError();
                            }
                        } else {
                            $.get('{{ route('bkash-query-payment') }}', {
                                payment_info: {
                                    payment_id: paymentID
                                }
                            }, function (data) {
                                if (data.transactionStatus === 'Completed') {
                                    BkashSuccess(data);
                                } else {
                                    createPayment(request);
                                }
                            });
                        }
                    },
                    error: function (err) {
                        bKash.execute().onError();
                    }
                });
            },
            onClose: function () {
                // for error handle after close bKash Popup
            }
        });


        function createPayment(request) {
            // Amount already checked and verified by the controller
            // because of createRequest function finds amount from this request
            $.ajax({
                url: '{{ route('bkash-create-payment') }}',
                data: JSON.stringify(request),
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    hideLoading();

                    if (data && data.paymentID != null) {
                        paymentID = data.paymentID;
                        bKash.create().onSuccess(data);
                    } else {
                        bKash.create().onError();
                    }
                },
                error: function (err) {
                    hideLoading();

                    showErrorMessage(err.responseJSON);
                    bKash.create().onError();
                }
            });
        }

        function BkashSuccess(data) {
            $.post('{{ route('bkash-success') }}', {
                payment_info: data
            }, function (res) {
                location.reload()
            });
        }

        function showErrorMessage(response) {
            let message = 'Unknown Error';

            if (response.statusMessage) {
                let errorCode = parseInt(response.errorCode);
                let bkashErrorCode = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014,
                    2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030,
                    2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044, 2045, 2046,
                    2047, 2048, 2049, 2050, 2051, 2052, 2053, 2054, 2055, 2056, 2057, 2058, 2059, 2060, 2061, 2062,
                    2063, 2064, 2065, 2066, 2067, 2068, 2069, 503,
                ];

                if (bkashErrorCode.includes(errorCode)) {
                    message = response.errorMessage
                }
            }
            swal({
                text: "Payment Failed! ".message,
                icon: "error",
                timer: '3000'
            });
        }

        const buttons = document.querySelectorAll('.btn-outline-success');
        buttons.forEach(button => {
            button.addEventListener('click', function() {
                const amount = this.getAttribute('data-amount');
                document.getElementById('amount').value = amount;  // Set the amount to the input field
            });
        });

        function showLoading(){
            document.querySelector('.loader-overlay').style.display = 'flex';
        }

        function hideLoading(){
            document.querySelector('.loader-overlay').style.display = 'none';
        }
    </script>
@endsection