<html>
 <head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>Bank card information</title> 
  <link rel="stylesheet" href="/mamber/layui.css"> 
  <link rel="stylesheet" href="/mamber/common.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
  <style>
        .layui-form-item{
            background: none;border-radius: 4px 4px 4px 4px;border: 1px solid #DCDCDC;
        }
        .layui-input{background: none;color:#333333;border: none; }

    </style> 
 </head>
  <?php
    $user = auth()->user();
?>
 <body class="page_common_body"> 
  <div class="common_header" style="background: none "> 
   <a href="javascript:history.back(-1)" class="back position"> <p class="btn"><i class="layui-icon layui-icon-left layui-font-20"></i></p> Bank card information </a> 
  </div> 
  <div style="position:relative;margin: 15px;margin-top: 140px;"> 
   <div class="common_card"> 
    <div class="common_card_content"> 
     <form action="<?php echo e(route('user.bank_setup_confirm')); ?>" class="layui-form" lay-filter="saveBankCardInfoForm" method="post">
                    <?php echo csrf_field(); ?> 
      <input name="id" type="hidden" value=""> 
      <div class="demo-login-container"> 
       <p class="input_title">Select Bank</p> 
       <!-- Select Bank --> 
       <div class="layui-form-item"> 
        <div class="layui-input-wrap"> 
         <div class="layui-input-prefix"> 
          <i class="layui-icon layui-icon-list"></i> 
         </div>
         <select name="gateway_method" lay-verify="required" lay-reqtext="Please Select Bank">
                                    <option value="">Please Select Bank</option>
                                    <?php $__currentLoopData = \App\Models\BankList::where('status', '2')->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $elemenet): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($elemenet->bank_code); ?>" <?php if($user->gateway_method == $elemenet->bank_code): ?> selected <?php endif; ?>><?php echo e($elemenet->name); ?></option>
                                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
        <!-- <select name="bank_id" lay-verify="required" lay-reqtext="Please select a bank"> <option value="">Please select a bank</option> <option value="76">GCASH</option> </select>-->
         <div class="layui-unselect layui-form-select">
          <div class="layui-select-title">
           <input type="text" placeholder="Please select a bank" value="" readonly class="layui-input layui-unselect" name="">
           <i class="layui-edge"></i>
          </div>
          <!--<dl class="layui-anim layui-anim-upbit">
           <dd lay-value="" class="layui-select-tips">
            Please select a bank
           </dd>
           <dd lay-value="76" class="">
            GCASH
           </dd>
          </dl>-->
         </div> 
        </div> 
       </div> 
       <p class="input_title">Cardholder Name</p> 
       <!-- Cardholder Name --> 
       <div class="layui-form-item"> 
        <div class="layui-input-wrap"> 
         <div class="layui-input-prefix"> 
          <i class="layui-icon layui-icon-layer"></i> 
         </div> 
         <input type="text" name="realname" value="<?php echo e($user->realname); ?>" lay-verify="required" placeholder="Cardholder Name" autocomplete="off" class="layui-input"> 
        </div> 
       </div> 
       <p class="input_title">Card Number</p> 
       <!-- Card Number --> 
       <div class="layui-form-item"> 
        <div class="layui-input-wrap"> 
         <div class="layui-input-prefix"> 
          <i class="layui-icon layui-icon-layer"></i> 
         </div> 
         <input type="text" name="gateway_address" value="<?php echo e($user->gateway_address); ?>" lay-verify="required" placeholder="Card Number" autocomplete="off" class="layui-input"> 
        </div> 
       </div> 
       <div style="box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.251);position: fixed;bottom: 0px;width: 100%;margin: 0;left: 0px;border: none;padding: 0px; z-index: 99999"> 
        <div style="padding: 15px;background: #FFFFFF"> 
         <button type="submit"  class="layui-btn  layui-btn-lg layui-btn-fluid layui-btn-radius" style="background: #e1be87;box-shadow: 0px 4px 16px 0px rgba(103,173,79,0.251);color: #FFFFFF !important;font-weight: 700" lay-submit="" lay-filter="saveBankCardInfo">Add Bank Card</button> 
         <!-- Add Bank Card --> 
        </div> 
       </div> 
       <div class="layui-form-item" style="border: none"></div> 
      </div> 
     </form> 
    </div> 
   </div> 
   <div class="common_card" style="border: 1px solid #DEDEDE;"> 
    <div class="common_card_content"> 
     <div class="demo-login-container" style=""> 
      <div class="common_content"> 
       <p> 1. The name must be at least 5 characters long and must not contain special symbols. </p> 
       <p> 2. The bank card number must not contain letters or special symbols. </p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 

<!-- Body Ending with layui --> 
  <img style="position: fixed;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;" src="<?php echo e(asset('public/loading.gif')); ?>" class="loading" alt="">
    <div class="layui-layer-move"></div>
    <?php echo $__env->make('alert-message', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <!-- Include layui's JavaScript and initialize the form -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/layui.all.js"></script>
    <script>
        layui.use('form', function() {
            var form = layui.form;

            // Listen for form submission
            form.on('submit(saveBankCardInfoForm)', function(data){
                // Show loading animation
                document.querySelector('.loading').style.display = 'block';

                // Validate all fields before submitting
                var isValid = true;

                // Triggering the verification explicitly for each input
                form.verify({
                    required: function(value, item) {
                        if (!value.trim()) {
                            return 'This field is required!';
                        }
                    }
                });

                // Check if the form is valid
                if (!form.checkValidity()) {
                    // Hide loading animation if form is invalid
                    document.querySelector('.loading').style.display = 'none';
                    isValid = false;
                }

                // If everything is valid, submit the form
                return isValid; // This will allow or prevent the form from being submitted
            });

            // Re-render the form to apply the styles
            form.render();  
        });
    </script>
</body>
</html><?php /**PATH /home/zgvdquyg/public_html/resources/views/app/main/bank/index.blade.php ENDPATH**/ ?>