@extends('layouts.dashboard')

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

    <div class="content mt-3">

        @if (Session::has('message'))
            <div class="col-sm-12">
                <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                    role="alert">
                    {{ Session::get('message') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="animated fadeIn">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header"><strong>Secret Key</strong></div>
                        <div class="card-body card-block">
                            <form action="{{ route('secret-key') }}" method="post" class="form-horizontal">
                                @csrf
                                <div class="row form-group">
                                    <div class="col col-md-12">
                                        <div class="input-group">
                                            <input type="text" class="form-control" value={{ isset(auth()->user()->secret_key)? '*********': ''}}>
                                            <span hidden id="url">{{ auth()->user()->secret_key }}</span>

                                            <div class="input-group-btn"><button class="btn btn-primary">Generate
                                                    Key</button>
                                                @isset(auth()->user()->secret_key)
                                                    <button type="button" class="btn btn-primary" id="copy_url" title="Copy"
                                                        onclick="copyToClipboard('#url')"><i class="ti-clipboard"></i> Copy Text
                                                    </button>
                                                </div>
                                            @endisset
                                        </div>
                                        <div class="col-md-12">
                                            <span><i>Generating a new Key will invalidate the exisiting key for this
                                                    user</i></span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endsection


            @push('scripts')
                <script>
                    function copyToClipboard(element) {
                        var $temp = $("<input>");
                        $("body").append($temp);
                        $temp.val($(element).text()).select();
                        document.execCommand("copy");


                        if (document.execCommand("copy")) {
                            // Change icon to check mark
                            $("#copy_url").html('<i class="ti-check"></i> Copied!');

                            // Optionally revert to clipboard icon after a delay
                            setTimeout(() => {
                                $("#copy_url").html('<i class="ti-clipboard"></i> Copy Text');
                            }, 2000); // Revert after 2 seconds

                        }

                    $temp.remove();

                    }


                </script>
            @endpush