<?php $__env->startSection('content'); ?>
    <style type="text/css">
        input::placeholder {
            color: #333;
        }

        .topname {
            line-height: 46px;
            font-weight: bold;
            font-size: 14px;
            width: 50%;
            text-align: center;
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }

        layer-page .layui-layer-btn {
            padding-top: 0px !important;
        }

        .layui-layer-btn {
            text-align: center !important;
            padding: 0 0px 12px;
            pointer-events: auto;
            user-select: none;
            -webkit-user-select: none;
        }

        .layui-layer-btn a {
            margin: 5px 5px 0;
            padding: 0 0px !important;
            height: 28px;
            line-height: 28px;
            text-align: center;
            width: 50%;
            border: 1px solid #dedede;
            background-color: #fff;
            color: #333;
            border-radius: 2px;
            font-weight: 400;
            cursor: pointer;
            text-decoration: none;
            border-radius: 20px !important;
        }

        .layui-layer-page {
            border-radius: 20px !important;
        }

        .layui-layer-setwin .layui-layer-close2 {
            background-position: -179px -31px;
            cursor: pointer
        }

        .layui-layer-setwin a {
            position: absolute;
            width: 32px;
            height: 40px;
            _overflow: hidden;
            top: -28px;
        }

        .payitem {
            border: 1px solid #fff !important;
            border-radius: 25px;
            background: rgb(53, 82, 255);
        }

        .payitem:before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            background: rgb(53, 82, 255);
            /*border: 10px solid #0081ff;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            border-bottom-right-radius: 3px;*/
        }

        .payitem:after {
            content: '';
            width: 5px;
            height: 12px;
            position: absolute;
            right: 6px;
            bottom: 6px;
            background: rgb(53, 82, 255);
            /*       border: 10px solid #fff;
                            border-top-color: transparent;
                            border-left-color: transparent;
                            transform: rotate(45deg);
                            border-bottom-right-radius: 5px;*/
        }

        div#div1 {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
        }

        div#div1>img {
            height: 100%;
            width: 100%;
            border: 0;
        }

        .inputdiv {
            display: flex;
            border-bottom: 1px solid #888 !important;
            background-color: none;
            height: 38px;
            line-height: 38px;
            padding: 0px 0px;
            /*border-radius: 5px;*/
            color: #000;
        }

        .layui-input {
            border-style: none;
            background-color: none;
        }

        .small-font {
            font-size: 12px;
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.80);
        }

        .smallsize-font {
            font-size: 9.6px;
        }
    </style>
    <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 style="background-size: 100% auto; background: whitesmoke;">
        <div class="top" style="background: red; ">
            <div onclick="window.history.go(-1); return false;" style="float:left; line-height:46px;width:50%;cursor:pointer;" id="btnClose">
                <i class="layui-icon" style="color:#fff;  margin-left:12px; font-size:16px;  font-weight:bold;">&#xe603;</i>
            </div>
            <font class="topname">
                Bind Account
            </font>
            <div style="float:right; text-align:right; line-height:46px;width:50%;">
            </div>
        </div>
            
            <?php
                $item = getshpaybank();
            ?>
            

            <div style=" max-width:450px; margin:0 auto; height:auto; overflow:hidden;">

                <?php if(auth()->user()->bankAccount): ?>
                    <div class="layui-form layui-tab-content" >

                        <div style="margin:20px; padding:20px 20px; margin-top:50px; background:white; box-shadow:0px 0px 20px gray;position:relative;">
                            <h4 align="center" style="color: white;">Account Details</h4>

                            <p>
                                <strong>Account Name:</strong> <?php echo e(auth()->user()->bankAccount->account_name); ?>

                            </p>
    
                            <p>
                                <strong>Account Number:</strong> <?php echo e(auth()->user()->bankAccount->account_number); ?>

                            </p>
    
                            <p>
                                <strong>Bank Name:</strong> <?php echo e(auth()->user()->bankAccount->bank_name); ?>

                            </p>
                            <img style="float:right;position:absolute;right:10px;bottom:20px;" src="<?php echo e(asset('ui1/icon-card.png')); ?>">
                        </div>

                    </div>
                <?php else: ?>
                    <div class="layui-form layui-tab-content" style="padding:10px 10px; margin-top:50px;">
                        <div
                            style="width:100%; margin:0 auto;height:40px; text-align:center; padding-bottom:20px; display:none; line-height:40px;">
                            <div style="float: left; width: 50%; color: #000; " class="tabs" value="1">
                                Bank account
                                <hr style="background:rgb(12,149,179); height:2px; width:60%;margin:0 auto;"
                                    id="tab1" />
                            </div>
                        </div>
                        <div style="background: #fff; border-radius: 10px;">
                            <form action="" method="post" class="layui-form" style="padding:10px;">
                                <?php echo csrf_field(); ?>
                                <div style="padding-top: 10px;">&nbsp;</div>
                                <div id="l1"
                                    style=" text-align: left; padding-bottom: 10px;  color: #0F0F0F; font-family: DengXian; ">
                                    *Select bank</div>
                                <div id="l2" class="layui-form-item"
                                    style="height:45px; border-radius: 15px !important;">
                                    <div class="layui-input-block"
                                        style=" border: 2px solid #D2D2D2 !important; border-radius: 15px !important;margin-left:20px;">
                                        <select name="bank_code" id="bank_name" style=" border:1px; display:block;" required>
                                            <option value="">Select</option>
                                            <?php $__currentLoopData = $item['result']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bank): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($bank['bankCode']); ?>"><?php echo e($bank['bankName']); ?></option>
                                                
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </select>
                                    </div>
                                </div>

                                <div style=" text-align: left; padding-bottom: 10px; color: #0F0F0F; font-family: DengXian;"
                                    id="v1">*Bank account</div>
                                <div class="layui-form-item" style="height:45px;">
                                    <div class="inputdiv">
                                        <input type="number" name="account_number" id="account"
                                            autocomplete="new-password" style="color:#000;border:0px;" maxlength="49"
                                            placeholder="Please enter a bank account" class="layui-input"/>
                                    </div>
                                </div>

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

                                

                                <div
                                    style=" text-align: left; padding-bottom: 10px; color: #0F0F0F; font-family: DengXian;">
                                    *Account name</div>
                                <div class="layui-form-item" style="height:45px;">
                                    <div class="inputdiv">
                                        <input type="text" name="account_name" id="account_name" maxlength="49"
                                            autocomplete="new-password" style="color:#000;border:0px;"
                                            placeholder="Please enter your name" class="layui-input" required />
                                    </div>
                                </div>

                                <!--<div id="l3" style=" text-align:left; padding-bottom: 10px; color: #0F0F0F; font-family: DengXian; ">*IFSC</div>
                                                <div id="l4" class="layui-form-item" style="height:48px;">
                                                    <div class="inputdiv">
                                                        <input type="text" id="IFSC" maxlength="11" style="color: #000; border: 0px;" placeholder="Please enter your IFSC " autocomplete="off" class="layui-input" />
                                                    </div>
                                                </div>-->

                        </div>

                        <div class="layui-form-item" style="margin-top:25px; text-align:center;">
                            <input type="submit" class="layui-btn"  value="Add"
                                style="width: 60%; height:45px;line-height:45px; border-radius: 25px; color: #fff; font-weight: bold; background: red; font-size: 16px; border: 0px;  "
                                />
                        </div>
                    </form>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </body>
<?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();
                            $(".text-error").text(
                                "Could not resolve account name, please check your account number or bank name and try again"
                            );
                            $("#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/arrquipc/public_html/core/resources/views/templates/basic/user/bank-setup.blade.php ENDPATH**/ ?>