@extends('layouts.dashboard')

@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Credentials</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="content mt-3">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-lg-12">

                            <div class="card">
                                <div class="card-header">
                                  <h5>Credentials</h5>
                                </div>
                                <div class="card-body">
                                    <div class="container">

                                        <table class="table table-bordered table-responsive">
                                            <thead>
                                              <tr>
                                                <th scope="col">Merchant Id</th>
                                                <td>{{ auth()->user()->id }}</td>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              <tr>
                                                <th scope="row">Merchant Name</th>
                                                <td>{{ auth()->user()->name }}</td>

                                              </tr>
                                              <tr>
                                                <th scope="row">Secret Key</th>
                                                <td>

                                                    @isset(auth()->user()->secret_key)
                                                       **********
                                                      <span hidden id="url">{{ auth()->user()->secret_key }}</span>
                                                       <span style="float:right"><button id="copy-url" title="Copy" onclick="copyToClipboard('#url')"><i class="ti-clipboard"></i></button></span>
                                                    @else
                                                      -
                                                    @endisset

                                                </td>

                                              </tr>
                                              <tr>
                                                <th scope="row">Hostname</th>
                                                <td>http://101.53.133.133/api/voice-registration</td>

                                              </tr>
                                            </tbody>
                                          </table>
                                      </div>
                                </div>
                              </div>
                </div>
            @endsection

            @push('scripts')
            <script>

                function copyToClipboard(element) {
                    var $temp = $("<input>");
                    $("body").append($temp);
                    $temp.val($(element).text()).select();
                    document.execCommand("copy");
                    $temp.remove();
                }

            </script>
            @endpush