@extends('layouts.app')
@section('content')
    @include('setting.header')   
    <div class="px-4">
      <div class="clearfix"></div>
      <div class="card" style="margin-top: 10px; border-radius: 20px; background-color: #F9F9F9">
        <div class="card-body">
            <div class="form-row">
            <div class="form-group col-md-6">
                    <label for="access_key">Access Key</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="edit_access_key" readonly value="{{ $access_key }}">
                        <div class="input-group-append">
                            <button class="btn btn-kreddo" id="copy_access_key" type="button" data-clipboard-target="#edit_access_key">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-group col-md-6">
                    <label for="secret_key">Secret Key</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="edit_secret_key" readonly value="{{ $secret_key }}">
                        <input type="text" class="form-control d-none" id="reveal_secret_key" readonly value="{{ $secret_key }}">
                        <div class="input-group-append">
                            <button class="btn btn-kreddo show" type="button">
                            <i class="fa fa-eye" aria-hidden="true"></i>
                            </button>
                            <button class="btn btn-kreddo hide d-none" type="button">
                            <i class="fa fa-eye-slash" aria-hidden="true"></i>
                            </button>
                            <button class="btn btn-kreddo" type="button" id="copy_secret_key" data-clipboard-target="#edit_secret_key" data-clipboard-action="copy">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div> 
            <form id="edit">
                <input type="hidden" name="id" id="id" value="{{ $client_id }}">
                <div class="form-group">
                    <label for="callback_url">Callback Url</label>
                    <input type="text" class="form-control" id="callback_url" placeholder="Input Callback Url" name="callback_url" value="{{ $callback_url }}">
                    <small class="text-muted">ⓘ The URL callback must be a POST method.</small>
                </div>
                <div class="float-right">
                    <button type="submit" class="btn btn-kreddo mx-1 text-white">Save</button>
                </div>
            </form>
        </div>
      </div>
    </div>
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
  const showButton = document.querySelector(".show");
    const hideButton = document.querySelector(".hide");
    const passwordField = document.querySelector("#edit_secret_key");
    const revealField = document.querySelector("#reveal_secret_key");

    showButton.addEventListener("click", function() {
        passwordField.classList.add("d-none");
        revealField.classList.remove("d-none");
        hideButton.classList.remove("d-none");
        showButton.classList.add("d-none");
    });

    hideButton.addEventListener("click", function() {
        revealField.classList.add("d-none");
        passwordField.classList.remove("d-none");
        showButton.classList.remove("d-none");
        hideButton.classList.add("d-none");
    });


    var clipboardAccessKey = new ClipboardJS('#copy_access_key');
    var clipboardSecretKey = new ClipboardJS('#copy_secret_key', {
    text: function() {
        return passwordField.classList.contains("d-none") ? revealField.value : passwordField.value;
    }
  });

    // clipboardAccessKey.on('success', function(e) {
    //     alert("Access Key copied");
    // });

    // clipboardSecretKey.on('success', function(e) {
    //     alert("Secret Key copied");
    // });

    clipboardAccessKey.on('error', function(e) {
        alert("Failed to copy Access Key. Please select and copy manually.");
    });

    clipboardSecretKey.on('error', function(e) {
        alert("Failed to copy Secret Key. Please select and copy manually.");
    });
</script>

<script>
    $('#edit').on('submit', function (e) {
        e.preventDefault();
        var id = $('#id').val();
        var callback_url = $('#callback_url').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: 'PUT',
            url: "{{ url('client/updateCallbackUrl') }}/"+id,
            data: {
                id: id,
                callback_url: callback_url
            },
            success: function (response) {
                Swal.fire({
                    position: 'center',
                    icon: 'success',
                    title: response.message,
                    showConfirmButton: false,
                    timer: 1500
                });
                window.location.reload();
            },
            error: function (xhr, status, error) {
                  var response = JSON.parse(xhr.responseText);
                  
                  var errorMessage = response.message;
                  var errors = response.errors;
                  
                  if (errors && errors.password) {
                      errorMessage = errors.password[0];
                  }
                  
                  Swal.fire({
                      position: 'center',
                      icon: 'error',
                      title: errorMessage,
                      showConfirmButton: false,
                      timer: 2500
                  });
          }
        });
      });
  </script>
@endpush