@extends('layouts.admin')

@section('styles')
@parent
<style>
    .btn-copy {
        cursor: pointer;
        border: transparent;
        background-color: transparent;
    }
</style>
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        API Settings
    </div>

    <div class="card-body">
        <div class="form-group">
            <table class="table table-bordered table-striped">
                <tbody>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.name') }}
                        </th>
                        <td>
                            {{ $user->name }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.email') }}
                        </th>
                        <td>
                            {{ $user->email }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.token') }}
                        </th>
                        <td>
                            <span id="token">{{ $user->token }}</span>&nbsp;<button class="btn-copy" onclick="copy()"><i class="far fa-copy"></i></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@parent
<script>
    function copy() {
        var copyText = document.getElementById("token");
        var textArea = document.createElement("textarea");
        textArea.value = copyText.textContent;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            if (successful) {
                alert("Coppied");
            } else {
                alert("Unable to copy!");
            }
        } catch (err) {
            alert(err);
        }
        textArea.remove();
    }
</script>
@endsection