<!doctype html>
<html lang="en" class="w-[640px]">
   <head>
      <?php echo view('user/layout/head');?>
   </head>
   <style>
      .para
      {
      text-align:justify;
      color:#fff;
      }
      .help-block {
      color: red;
      margin: 0em 0em 0em !important;
      }
      .alert-success {
      color: #0f5132;
      background-color: #d1e7dd;
      border-color: #badbcc;
      font-size: 12px;
      }
      .span
      {
      font-size: 12px;
      color: #9395a1;
      margin-top: 14px;
      font-weight: 900;
      }
      .form-block span
      {
         background:none !important;
      }
      .content{
      text-align : justify;
      }
      .ref-copy .copyLink {
      color:#fff;
      top: 50%;
      right: 20px;
      cursor: pointer;
      transform: translateY(-50%);
      }
      .ref-copy .copyLink:hover:after {
      opacity: 1;
      transform: translateY(0) translateX(-50%);
      }
      .ref-copy .copyLink:after {
      content: attr(tooltip);
      width: 140px;
      /* bottom: 80px; */
      left: 80%;
      padding: 5px;
      border-radius: 4px;
      font-size: 0.8rem;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      background:#0d6efd;
      color: #fff;
      transform: translateY(-10px) translateX(-50%);
      transition: all 300ms ease;
      text-align: center;
      }
   </style>
   <body class="section-overflow">
      <!--banner start -->
      <section class="banner-bg overall-bg ">
         <div class="container">
            <?php echo view('user/layout/header');?>
         </div>
         <?php
         use App\Libraries\MyEncrypt;
         use App\Helpers\site_helper;
         use App\Helpers\form_helper;
         $this->db = db_connect();
         $this->session = session();
         $this->common_model = model('CommonModel');
         $this->form_validation =  \Config\Services::validation();
         $list = \Config\Services::validation()->listErrors();
         
         helper('form_helper');
         //echo view('user/common_header');
         $us_data = userMinPass();
         ?>          
         <section class="dash-wrap referral">
            <div class="container">
               <div class="row">

                        <?php
                 
                           $this->session = session();
                           $api = $this->common_model->GetRow('api_exchange_list','id=5');
                           $uusersid = $this->session->get('uusersid');
                           $referral1=$this->db->query("SELECT * FROM bind_process WHERE uusersid='".$uusersid."' and type=5");
                           $ref=$referral1->getRow();
                           if($ref)
                           {
                              $account=$ref->account;
                              
                           }
                           else
                           {
                              $account='1';
                           }
                        
                        ?>

                           <?php 
                            
                              if($this->session->getFlashData('success_message')) 
                              {
                              ?>
                                <div class="success-msg input-msg">
                                    <img src="<?php echo base_url();?>/assets/images/success.png">
                                    <p class="text-white fw-medium ms-2 mb-0"><?php echo $this->session->getFlashData('success_message');?></p>
                                </div>
                      
                           <?php 
                              } 
                              else if($this->session->getFlashData('error_message')) 
                              { 
                              ?>

                                <div class="error-msg input-msg">
                                    <img src="<?php echo base_url();?>/assets/images/error.png">
                                    <p class="text-white fw-medium ms-2 mb-0"><?php echo $this->session->getFlashData('error_message');?></p>
                                </div>         
                           <?php 
                              } 
                              ?>
               
                  <div class="col-lg-10 offset-lg-1">
                     <div class="title text-start">
                        <h5 class="text-primary"> Precautions </h5>
                        <p class="text-white-50"> 1. Please make sure that Allow spot and leverage transactions are checked in the API permissions </p>
                        <p class="text-white-50"> 2. Please enter the correct API, please do not enter special characters </p>
                        <p class="text-white-50"> 3.To use Futures strategy, please check the “Enable Futures” in API management. </p>
                       
                        <hr class="text-white">

                        <h5 class="text-primary">  IP group binding  </h5>
                        <p class="text-white-50">   ByBit suggest that users bind IP address when creating API for safety purpose. If not bound, the API private key will expire after 3 months. Please copy the following IP address and paste it to the "Only IPs with permissions granted are allowed to access the OpenAPI" on ByBit API binding page.  </p>
                        <p class="text-white-50"> <strong>If you have binded previously, please update at your Bybit to whitelist this new IP address</strong></p>
                     

                        <div class="ref-form-list">
                           <div class="ref-form d-flex align-items-center">
                              <div class="ref-content text-start">
                                 <h5 class="text-white" id="test"><?php echo $api->ip_address ;?></h5>
                              </div>
                              <div class="ref-copy">
                                 <span class="copyLink text-decoration-none" id="copy" >
                                 <i class="fa-regular fa-copy"></i>
                                 </span>
                              </div>
                           </div>
                        </div>

                        <hr class="text-white">

                        <span id="api_err1" style="color:red;font:bold;font-size: 15px;padding-top:10px;"></span>

                        <form class="steps-validation withdraw" method="post"  id="pin" action="<?php echo base_url();?>/bybit-bind">
                        <div class=" team-profit-content" style="text-align:start !important">
                           <div class="row">
                              <div class="col-sm-12">
                                   
                              <div class=" form-block position-relative mb-3 mt-3">
                                 <label for="" class="form-label text-white">Select Type  </label>
                                 <select class="form-control ps-2 form-arrow"  name="account">
                                    <!--<option value='1' <?php if($account == '1'){echo 'selected';};?>>General Account</option>-->
                                    <option value='2' <?php if($account == '2'){echo 'selected';};?>>Unified Trading Account</option>
                                 </select>
                              </div>
                              <span id="account_err" style="color:red;font:bold;font-size: 15px;padding-top:10px;"></span>
                              <?php echo $this->form_validation->getError('account', '<span class="help-block">', '</span>'); ?>

                                 <div class="form-block form-group position-relative">
                                    
                                    <input name="api_code1" class="form-control" type="text" id="api_code1" placeholder="API Key" value="<?php echo isset($ref->api_key) ? $ref->api_key : '' ;?>" required="">
                                   
                                 </div>
                                 <span id="api_err" style="color:red;font:bold;font-size: 15px;padding-top:10px;"></span>
                                 <?php echo $this->form_validation->getError('api_code1', '<span class="help-block">', '</span>'); ?>

                                 <div class="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon"></iconify-icon>
                                    </div>
                                    <input class="form-control" type="password" name="sec_code1" id="sec_code1" value="<?php echo isset($ref->secret_key) ? $ref->secret_key : '';?>" placeholder="Secret Key" required="">
                                   
                                 </div>
                                 <span id="sec_err" style="color:red;font:bold;font-size: 15px;padding-top:10px;"></span>
                                 <?php echo $this->form_validation->getError('sec_code1', '<span class="help-block">', '</span>'); ?>

                                 <input type="hidden" name="userid" id="userid" value="<?php echo $uusersid; ?>">
                                 <div name="otpval" id="otpval" ></div>
                                
                                
                                 <div class="form-btn my-4 text-center"> 
                                    <button type="button" id="trans" name="trans"class="btn btn-primary" type="submit">
                                    Bind API
                                    </button>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </form>

                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!--footer start -->
         <?php echo view('user/layout/footer');?>
         <!--footer end -->
      </section>
      <?php echo view('user/layout/footer-script');?>
      <script>
         AOS.init({
         });
      </script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script>
         jQuery.noConflict();
         (function( $ ) {
         $(function() {
         $(document).ready(function() {
         
         
         
         $(document).on("click", '#trans', function() {
          
             var uusersid = $('#userid').val();
             var api = $('#api_code1').val();
             var sec = $('#sec_code1').val();
         
         
             if((api=='') || (sec==''))
             {
               if(api=='')
               {
                 $('#api_err').html("Api Key is Required");
                   
               }
               if(sec=='')
               {
                 $('#sec_err').html("Secret Key is Required");
                
               }
             }
             else
             {
                  $('#api_err').html("");
                  $('#sec_err').html("");

                  $('#pin').submit();
      
               
             }
         });
         
         function otphide()
         {
         $('#otp_val').html("");
         }
         
         /*$(document).on("keyup", '#api_code1', function() {
             
             var api = $('#api_code1').val();
             var sec = $('#sec_code1').val();
               $.ajax({
                     type: 'post',
                     url : '<?php echo base_url();?>/apikeylist/verifyapi',            
                     data : {'api':api,'sec':sec},
                     dataType:'json',
                     success : function(msg)
                     {  
                       
                     if(msg!='')
                        {
                           $('#api_err1').html("Api Key or Secret Key is invalid");
                                             
                             $('#getcode1').prop('disabled', true);
                             $('#trans').addClass('disabled');
                         }
                       else
                       {
                         $('#api_err1').html("");
                                       
                          $('#getcode1').prop('disabled', false);
                          $('#trans').removeClass('disabled');
                       }
                     }
                 });
         });
         $('#sec_code1').keyup(function() {
             
             var api = $('#api_code1').val();
             var sec = $('#sec_code1').val();
               $.ajax({
                     type: 'post',
                     url : '<?php echo base_url();?>/apikeylist/verifyapi',            
                     data : {'api':api,'sec':sec},
                     dataType:'json',
                     success : function(msg)
                     {  
                      
                     if(msg!='')
                        {
                          $('#api_err1').html("Api Key or Secret Key is invalid");                
                             $('#getcode1').prop('disabled', true);
                             $('#trans').addClass('disabled');
                         }
                       else
                       {
                         $('#api_err1').html("Api Key or Secret Key is invalid");        
                          $('#getcode1').prop('disabled', false);
                          $('#trans').removeClass('disabled');
                       }
                     }
                 });
         });*/
         
         $(document).on("keyup", '#code11', function() {
             var uusersid = $('#userid').val();
             var code1 = $('#code11').val();
         
           if(uusersid!="")
           {
               $.ajax({
                     type: 'post',
                     url : '<?php echo base_url();?>/apikeylist/verifyotp',            
                     data : {'code1':code1},
                     dataType:'json',
                     success : function(msg)
                     {           
                     if(msg!=='')
                        {                               
                        $("#otpval").html('<div class="text-danger" style="font-size:15px;font-weight: 900;;">'+msg+'</div>');
                        $('#trans').addClass('disabled');
                         }
                     else
                       {
                         $("#otpval").html("");
                         $('#trans').removeClass('disabled');
                       }
                     }
                 })
         } 
         
         });
         });
         });
         })(jQuery);
         
      </script>
      <script type="text/javascript">
         const input = document.getElementById("test");
         // console.log(input);
         const copyButton1 = document.getElementById("copy");
         const copyText = (e) => {
         var temp = $("<input>");
         $("body").append(temp);
         temp.val($(input).html()).select();
         document.execCommand("copy");
         e.currentTarget.setAttribute("tooltip", "Copied!");
         };
         const resetTooltip = (e) => {
         e.currentTarget.setAttribute("tooltip", "Copy to clipboard");
         };
         copyButton1.addEventListener("click", (e) => copyText(e));
         copyButton1.addEventListener("mouseover", (e) => resetTooltip(e));

        const passwordField = document.getElementById("sec_code1");
        const togglePasswordIcon = document.getElementById("togglePasswordIcon");

        togglePasswordIcon.addEventListener("click", function () {
            if (passwordField.type === "password") {
                // Change to text
                passwordField.type = "text";
                togglePasswordIcon.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField.type = "password";
                togglePasswordIcon.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
         
         
      </script>
   </body>
</html>
