@extends('layouts.engine')
@section('content')
                    <div class="nk-content nk-content-fluid">
                        <div class="container-xl wide-lg">
                            <div class="nk-content-body">
                                <div class="nk-block-head">
                                    <div class="nk-block-head-content">
                                        <div class="nk-block-head-sub"><span>Api for Thirdparty</span></div>
                                        <h2 class="nk-block-title fw-normal">Extraction Api</h2>
                                        <div class="nk-block-des">
                                            <p>
                                                You have full control to manage your own account. <span class="text-primary"><em class="icon ni ni-info"></em></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="nk-nav nav nav-tabs">
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/profile') }}">Personal</a></li>
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/security') }}">Security</a></li>
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/notification') }}">Notifications</a></li>
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/api') }}">Api</a></li>
                                </ul>
                                <div class="nk-block">
                                    <div class="card card-bordered">
                                        <div class="card-aside-wrap">
                                            <div class="card-content">
                                                <div class="card-inner" id="api">
                                                    <h4>Funds Extraction</h4>
                                                    <extract-component></extract-component>
                                                    <div class="nk-divider divider md"></div>
                                                    
                                                    <div class="between-center flex-wrap flex-md-nowrap g-3">
                                                    <div class="nk-block-text">
                                                        <h6>Api 
                                                        key for Third party Apps</h6>
                                                        <p>Use your unique Api key to transfer funds from third party applications. Never disclose your Api Key to anyone.</p>
                                                        <p>
                                                        <div id="u_apikey" class="input-group">
    <input type="text" class="form-control" id="apiK" style="display:none" value="{{ Auth::user()->apikey }}">
    <span class="input-group-text" style="display:none" id="cp" onclick="copyKey()">copy</span>
  </div></p>
                                                    </div>
                                                    <div class="nk-block-actions flex-shrink-sm-0">
                                                        <ul class="align-center flex-wrap flex-sm-nowrap gx-3 gy-2">
                                                            <li class="order-md-last"><a onclick="showkey()" class="btn btn-primary"><span id="d">Display My Api Key</span></a></li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                    <div class="nk-divider divider md"></div>
                                                    
                                                    <div class="nk-block">
                                                        <div class="nk-block-head nk-block-head-sm nk-block-between">
                                                            <h5 class="title"><code>Notice</code></h5>
                                                        </div>
                                                        <div class="row gy-5">
                                                            <div class="col-12">
                                                                <dt>
                                                                    Are you a developer? Would you like to integrate Eurabit into your website? <br> Get in touch with our <a href="mailto:tech@cryptocoinhub.net">Tech Team</a> via email to discuss your ideas with them.
                                                                    
                                                                </dt>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@endsection
@section('scripts')
    <script>
        function showkey() {
          var x= document.getElementById("apiK");
          var d= document.getElementById("d");
          var cp= document.getElementById("cp");
          
          if (x.style.display === "none") {
            x.style.display = "block";
            cp.style.display = "block";
            d.innerHTML = "Hide My Api Key";
          } else {
            x.style.display = "none";
            cp.style.display = "none";
            d.innerHTML = "Display My Api Key";
          }
        }
        
        

        function copyKey() {
            var copyapikey = document.getElementById("apiK");
            document.getElementById("cp").innerHTML = "Copied!";;
            copyapikey.select();
            copyapikey.setSelectionRange(0, 99999);
            
            navigator.clipboard.writeText(copyapikey.value); 
        }
    </script>
    <script src="{{ asset('assets/vue/extract.js') }}"></script>
    <script>
        new Vue({ el: '#api' })
    </script>   
@endsection