<?php $__env->startSection('content'); ?>
    <link rel="stylesheet" crossorigin="" href="<?php echo e(asset('assets/CardBag-CinGDQfk.css')); ?>">
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/AddCard-BMOz2Z0G.css')); ?>">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <body class="">
        <div id="app" data-v-app="">
            <div data-v-e7bee253="" class="addCardPage bg_00">
                <div data-v-e7bee253="">
                    <div class="van-sticky">
                        <div data-v-e7bee253="" class="van-nav-bar van-hairline--bottom">
                            <div class="van-nav-bar__content">
                                <div onclick="window.history.go(-1); return false;"
                                    class="van-nav-bar__left van-haptics-feedback"><i
                                        class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"><!----><!----><!----></i>
                                </div>
                                <div class="van-nav-bar__title van-ellipsis">Add bank account</div><!---->
                            </div>
                        </div>
                    </div>
                </div>

                <?php if(!auth()->user()->bankAccount): ?>
                    <div data-v-e7bee253="" class="main">
                        <div data-v-e7bee253="" class="addCard m5 p20">
                            <div data-v-e7bee253="" class="formBox">
                                <form action="" method="post" data-v-e7bee253="" class="van-form"><!---->
                                    <?php echo csrf_field(); ?>
                                    <ul data-v-e7bee253="">
                                        <li data-v-e7bee253="" class="formLinear">
                                            <div data-v-e7bee253="" class="inputArea">
                                                <div data-v-e7bee253="" class="formTitleBar display alignCenter">
                                                    <div data-v-e7bee253="" class="title flex1"><label data-v-e7bee253=""
                                                            for="withdraw">Select bank</label></div>
                                                </div>
                                                <div data-v-e7bee253="" class="trueInpt display alignCenter">
                                                    <div data-v-e7bee253="" class="icon"><i data-v-e7bee253=""
                                                            class="ri-bank-line"></i></div>
                                                    <div data-v-e7bee253="" class="van-cell van-field flex1"><!----><!---->
                                                        <div class="van-cell__value van-field__value">
                                                            <div class="van-field__body">
                                                                <select class="van-field__control" 
                                                                    name="bank_code" id="bank_name">
                                                                    <option value="">-- Choose Bank --</option>
                                                                                                            <option value="fnb">FNB</option>
                                            <option value="capitec">Capitec</option>
                                            <option value="standard_bank">Standard Bank</option>
                                            <option value="tymebank">Tymebank</option>
                                            <option value="nedbank">Nedbank</option>
                                            <option value="absa">ABSA</option>
                                            <option value="discovery_bank">Discovery Bank</option>
                                            <option value="access_bank">Access Bank</option>
                                            <option value="sasfin_bank">SASFIN Bank</option>
                                            <option value="bidvest_bank">Bidvest Bank</option>
                                            <option value="olympus_bank">Olympus Bank</option>
                                            <option value="african_bank">African Bank</option>
                                            <option value="albaraka_bank">Albaraka Bank</option>
                                            <option value="bank_of_china">Bank of China</option>
                                            <option value="citibank">CITIBANK</option>
                                            <option value="vbs_mutual_bank">VBS Mutual Bank</option>
                                                                </select>
                                                            </div>
                                                            <!----><!---->
                                                        </div><!----><!---->
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        <li data-v-e7bee253="" class="formLinear">
                                            <div data-v-e7bee253="" class="inputArea">
                                                <div data-v-e7bee253="" class="formTitleBar display alignCenter">
                                                    <div data-v-e7bee253="" class="title flex1"><label data-v-e7bee253=""
                                                            for="withdraw">Bank Account Number</label></div>
                                                </div>
                                                <div data-v-e7bee253="" class="trueInpt display alignCenter">
                                                    <div data-v-e7bee253="" class="icon"><i data-v-e7bee253=""
                                                            class="ri-bank-card-2-line"></i></div>
                                                    <div data-v-e7bee253="" class="van-cell van-field flex1"><!----><!---->
                                                        <div class="van-cell__value van-field__value">
                                                            <div class="van-field__body"><input type="number"
                                                                    inputmode="decimal" name="account_number" id="account"
                                                                    class="van-field__control"
                                                                    placeholder="Bank Account Number"
                                                                    autocomplete="off"><!----><!----><!----></div>
                                                            <!----><!---->
                                                        </div><!----><!---->
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        <input type="hidden" name="bank_name" id="bank_code">

                                        <li data-v-e7bee253="" class="formLinear">
                                            <div data-v-e7bee253="" class="inputArea">
                                                <div data-v-e7bee253="" class="formTitleBar display alignCenter">
                                                    <div data-v-e7bee253="" class="title flex1"><label data-v-e7bee253=""
                                                            for="cardholderName">Cardholder Name</label></div>
                                                </div>
                                                <div data-v-e7bee253="" class="trueInpt display alignCenter">
                                                    <div data-v-e7bee253="" class="icon"><i data-v-e7bee253=""
                                                            class="ri-user-3-line"></i></div>
                                                    <div data-v-e7bee253="" class="van-cell van-field flex1">
                                                        <!----><!---->
                                                        <div class="van-cell__value van-field__value">
                                                            <div class="van-field__body"><input type="text"
                                                                    name="account_name" id="account_name"
                                                                    class="van-field__control"
                                                                    placeholder="Cardholder Name"
                                                                    autocomplete="off"><!----><!----><!----></div>
                                                            <!----><!---->
                                                        </div><!----><!---->
                                                    </div>
                                                </div>
                                            </div>
                                        </li>

                                        <li data-v-e7bee253="">
                                            <div data-v-e7bee253="" class="actionBlock display alignCenter justifyEnd">
                                                <button data-v-e7bee253="" type="button"
                                                    class="van-button van-button--default van-button--normal van-button--round ruleBtn clickBtn"
                                                    style="color: white; background: var(--b_1); border-color: var(--b_1);">
                                                    <div class="van-button__content">
                                                        <span class="van-button__text">
                                                            <div data-v-e7bee253=""
                                                                class="display alignCenter justifyDetween">
                                                                <p data-v-e7bee253="" class="flex1">Rule</p>
                                                                <i data-v-e7bee253="" class="ri-question-mark"></i>
                                                            </div>
                                                        </span>
                                                    </div>
                                                </button>
                                                <button data-v-e7bee253="" type="submit"
                                                    class="van-button van-button--primary van-button--normal van-button--round confirmBtn clickBtn"
                                                    style="color: white; background: var(--bw0); border-color: var(--bw0);">
                                                    <div class="van-button__content"><!----><span
                                                            class="van-button__text">
                                                            <div data-v-e7bee253=""
                                                                class="display alignCenter justifyDetween">
                                                                <p data-v-e7bee253="" class="flex1">Confirm</p><i
                                                                    data-v-e7bee253="" class="ri-arrow-right-line"></i>
                                                            </div>
                                                        </span><!----></div>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </form>
                            </div>
                        </div>

                        <!-- Overlay -->
                        <div class="van-overlay" role="button" tabindex="0" data-v-6178753a=""
                            style="z-index: 2006; display: none;" id="overlay"></div>

                        <!-- Popup -->
                        <div role="dialog" tabindex="0" class="van-popup van-popup--top custom_TopPopup"
                            data-v-6178753a="" style="z-index: 2006; display: none;" id="popup">
                            <div data-v-6178753a="" class="statement p10">
                                <div data-v-6178753a="" class="title m_tb10">
                                    <h4 data-v-6178753a="">Rule description</h4>
                                </div>
                                <div data-v-6178753a="" class="explain">
                                    <ul data-v-6178753a="">
                                        <li data-v-6178753a="" class="display alignStart"><b data-v-6178753a="">1. </b>
                                            <p data-v-6178753a="" class="flex1">Please carefully verify if the bank
                                                account
                                                information is correct.</p>
                                        </li>
                                        <li data-v-6178753a="" class="display alignStart"><b data-v-6178753a="">2. </b>
                                            <p data-v-6178753a="" class="flex1">If you need to change your withdrawal
                                                bank
                                                account, please reset it through Verification Code (OTP).</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                    </div>
                <?php else: ?>
                    <?php
                        $card_number = auth()->user()->bankAccount->account_number; // Example card number
                        $formatted_card_number = wordwrap($card_number, 4, ' ', true); // Format with spaces
                    ?>

                    <div data-v-fc4744a5="" class="main">
                        <div data-v-fc4744a5="" class="cardBag m5">

                            <ul data-v-fc4744a5="">
                                <li data-v-fc4744a5=""><!---->
                                    <div data-v-fc4744a5="" class="van-swipe-cell">
                                        <div class="van-swipe-cell__wrapper"
                                            style="transform: translate3d(0px, 0px, 0px); transition-duration: 0.6s;">
                                            <!---->
                                            <div data-v-fc4744a5=""
                                                class="bankCard card display alignStart p_tb20 p_lr10">
                                                <div data-v-fc4744a5="" class="bank display alignStart flex1">
                                                    <div data-v-fc4744a5="" class="icon">
                                                        <div data-v-fc4744a5=""
                                                            class="radius50P display alignCenter justifyCenter"><img
                                                                data-v-fc4744a5=""
                                                                src="<?php echo e(asset('images/CardBag/Chip.svg')); ?>"
                                                                alt=""></div>
                                                    </div>
                                                    <div data-v-fc4744a5="" class="name flex1">
                                                        <h4 data-v-fc4744a5=""><?php echo e(auth()->user()->bankAccount->bank_name); ?>

                                                        </h4><span data-v-fc4744a5=""></span>
                                                    </div>
                                                </div>
                                                <div data-v-fc4744a5="" class="infor tr">
                                                    <div data-v-fc4744a5="" class="number">
                                                        <h4 data-v-fc4744a5=""><?php echo e($formatted_card_number); ?></h4>
                                                    </div>
                                                    <div data-v-fc4744a5="" class="cardholder">
                                                        <p data-v-fc4744a5="">
                                                            <?php echo e(auth()->user()->bankAccount->account_name); ?> </p>
                                                    </div>
                                                </div>
                                            </div><!---->
                                            <div class="van-swipe-cell__right">
                                                <div data-v-fc4744a5="" class="deleteCardBtn p_lr10 display alignCenter">
                                                    <p data-v-fc4744a5="">Delete</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div><!---->
                        <div class="statement m5 p20" data-v-fc4744a5="">
                            <div class="title m_tb10" data-v-fc4744a5="">
                                <h4 data-v-fc4744a5="">Rule description</h4><span data-v-fc4744a5=""></span>
                            </div>
                            <div class="explain" data-v-fc4744a5="">
                                <ul data-v-fc4744a5="">
                                    <li class="display alignStart" data-v-fc4744a5=""><b data-v-fc4744a5="">1. </b>
                                        <p class="flex1" data-v-fc4744a5=""> Bank account is an important information for
                                            you
                                            to withdraw funds on the platform, please do not modify it arbitrarily. </p>
                                    </li>
                                    <li class="display alignStart" data-v-fc4744a5=""><b data-v-fc4744a5="">2. </b>
                                        <p class="flex1" data-v-fc4744a5=""> To modify a bank account, a mobile OTP
                                            verification code is required. </p>
                                    </li>
                                    <li class="display alignStart" data-v-fc4744a5=""><b data-v-fc4744a5="">3. </b>
                                        <p class="flex1" data-v-fc4744a5=""> Unable to receive mobile OTP verification
                                            code,
                                            please contact online customer service for assistance. </p>
                                    </li>
                                </ul>
                            </div>
                        </div><!----><!---->
                    </div>
                <?php endif; ?>
            </div>
        </div>


        <div data-v-app=""></div>
        <div class="van-overlay" style="z-index: 2002; display: none;"><!----></div>
        <div role="dialog" tabindex="0" class="van-popup van-popup--center van-dialog"
            aria-labelledby="You have not attached a bank card, please attach a bank card first and then complete the withdrawal."
            style="z-index: 2002; display: none;"><!---->
            <div class="van-dialog__content van-dialog__content--isolated">
                <div class="van-dialog__message">You have not attached a bank card, please attach a bank card first and
                    then complete the withdrawal.</div>
            </div>
            <div class="van-hairline--top van-dialog__footer"><!----><button type="button"
                    class="van-button van-button--default van-button--large van-dialog__confirm">
                    <div class="van-button__content"><!----><span class="van-button__text">Confirm</span><!----></div>
                </button></div><!---->
        </div>
    </body>


    <script>
        // Get elements
        const ruleButton = document.querySelector('.ruleBtn');
        const overlay = document.getElementById('overlay');
        const popup = document.getElementById('popup');

        // Function to show the popup
        ruleButton.addEventListener('click', function() {
            overlay.style.display = 'block'; // Show the overlay
            popup.style.display = 'block'; // Show the popup
        });

        // Function to hide the popup
        function hidePopup() {
            overlay.style.display = 'none'; // Hide the overlay
            popup.style.display = 'none'; // Hide the popup
        }

        // Event listener for the overlay to close the popup
        overlay.addEventListener('click', hidePopup);
    </script>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('script-lib'); ?>
    <textarea style="display: none;" id="all_banks"><?php echo $all_banks; ?></textarea>

    <script>
        let all_banks = JSON.parse($("#all_banks").val());
        //console.info(all_banks);
        (function($) {
            "use strict";

            function getByValue(value) {

                let arr = all_banks;
                for (var i = 0, iLen = arr.length; i < iLen; i++) {
                    //console.log(arr[i]);
                    if (arr[i].bank_code == value) return arr[i].name;
                }
            }


            $("#bank_name").change(function(e) {
                //alert($(this).val());
                //let code = $("#bank_name").val(); //getByValue().bank_code;
                //let account = $("#account").val();

                //console.log(t, code);


                let code = $("#bank_name").val(); //getByValue().bank_code;
                let account = $("#account").val();

                //console.log(code, account);

                let t = getByValue(code);

                //console.log(t);

                $("#bank_code").val(t);
                if (account != "" && code != "") {

                    get_account_info(code, account);

                    //console.log(account, code);
                }

            });

            $("#account").change(function() {

                let code = $("#bank_name").val(); // getByValue($("#bank_name").val()).bank_code;
                let account = $("#account").val();
                if (account == "" || code == "") {
                    $("#reg").prop('disabled', true);
                    $("#account_name").val("");
                    $(".text-error").text("Your bank name and account number are required, please try again");
                    return;
                }

                get_account_info(code, account);

                //console.log(account, code);


            });





            function get_account_info(code, account) {

                $(".preloaders").show();
                $(".text-error").text("Fetching account details");

                $.ajax({
                    url: "<?php echo e(route('account.fetch')); ?>",
                    type: 'get',
                    dataType: 'json',
                    data: {
                        'bank-verification': '',
                        'code': code,
                        'account': account
                    },
                    success: function(response) {
                        if (response.status == "error") {
                            $("#account_name").val("");
                            $(".preloaders").hide();
                            
                            $("#reg").prop('disabled', true);
                            return;
                        }

                        $(".text-error").text("");
                        $("#reg").removeAttr('disabled');
                        $(".preloaders").hide();
                        console.log(response.data);
                        $("#account_name").val(response.data.account_name);

                        //console.log(response);
                    },

                    error: function(err) {
                        console.log(err.responseText);
                        $(".preloaders").hide();
                    }
                });
            }

            $('.withdraw-thumbnail').hide();
            $('.clickBtn').on('click', function() {
                var classNmae = $('.fileinput').attr('class');
                if (classNmae != 'fileinput fileinput-exists') {
                    $('.withdraw-thumbnail').hide();
                } else {
                    $('.fileinput-preview img').css({
                        "width": "100%",
                        "height": "300px",
                        "object-fit": "contain"
                    });

                    $('.withdraw-thumbnail').show();
                }

            });

        })(jQuery);
    </script>

    <script>
        // Get the select element
        const bankSelect = document.getElementById('bank_name');
        // Get the input element
        const selectedBank = document.getElementById('bank_code');

        // Add event listener to the select element
        bankSelect.addEventListener('change', function() {
            // Get the selected option value
            const selectedOption = bankSelect.options[bankSelect.selectedIndex].text;
            // Update the value of the input field with the selected option value
            selectedBank.value = selectedOption;
        });
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.users', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/chevbuzx/public_html/core/resources/views/templates/basic/user/bank-setup.blade.php ENDPATH**/ ?>