@extends('master-user')


@section('content')
<section class="py-8">
  <div class="max-w-xl mx-auto px-4">
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h2 class="text-2xl font-bold text-[#3a3058] mb-6">Manage API Keys</h2>
      @if (session('success'))
        <div class="bg-green-100 border border-green-300 text-green-700 rounded-lg px-6 py-4 mb-4">
          {{ session('success') }}
        </div>
      @endif
      @if (session('error'))
        <div class="bg-red-100 border border-red-300 text-red-700 rounded-lg px-6 py-4 mb-4">
          {{ session('error') }}
        </div>
      @endif
      <div class="mb-8">
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
          <h5 class="font-semibold text-[#3a3058] mb-2">Merchant Key</h5>
          <div class="flex items-center gap-2">
            <span class="font-medium">Merchant ID:</span>
            <code id="merchantId" class="bg-gray-100 px-2 py-1 rounded text-sm">{{ $user->merchant_id }}</code>
            <button id="copyButton" type="button" class="btn btn-info btn-sm ml-2" title="Copy Merchant ID">Copy</button>
          </div>
          <p id="copySuccess" class="text-green-600 text-xs mt-1 hidden">Copied to clipboard!</p>
        </div>
      </div>
      <div class="mb-8">
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
          <h5 class="font-semibold text-[#3a3058] mb-2">Your API Key</h5>
          @if (isset($rawKey))
            <div class="bg-blue-50 border border-blue-200 text-blue-700 rounded-lg px-6 py-4 mb-4">
              <p>Your new API key is:</p>
              <p><code class="bg-gray-100 px-2 py-1 rounded text-sm">{{ $rawKey }}</code></p>
              <p>Please copy this key and store it securely. You will not be able to see it again.</p>
            </div>
            <form action="{{ route('user.developer.api-keys.confirm') }}" method="POST" class="mt-2">
              @csrf
              <button type="submit" class="btn btn-primary">I have copied the API key</button>
            </form>
          @elseif ($apiKey)
            <p class="text-gray-500 italic mb-4">Your API key has been generated. It cannot be displayed again for security reasons.</p>
            <form action="{{ route('user.developer.api-keys.generate') }}" method="POST">
              @csrf
              <button type="submit" class="btn btn-warning" onclick="return confirmReset()">Reset API Key</button>
            </form>
          @else
            <p class="text-gray-500 mb-4">No API key generated yet.</p>
            <form action="{{ route('user.developer.api-keys.generate') }}" method="POST">
              @csrf
              <button type="submit" class="btn btn-primary">Generate API Key</button>
            </form>
          @endif
        </div>
      </div>
      {{--
      <div class="mb-8">
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
          <h5 class="font-semibold text-[#3a3058] mb-2">Map Domains</h5>
          <form action="{{ route('user.developer.api-keys.bind-domain') }}" method="POST" class="flex flex-col md:flex-row gap-2 items-end">
            @csrf
            <input type="url" name="domain" class="form-input border border-gray-300 rounded-md px-4 py-2 w-full" placeholder="Enter domain (e.g., https://example.com)" required>
            <button type="submit" class="btn btn-success">Map Domain</button>
          </form>
          <ul class="mt-4 divide-y divide-gray-200">
            @forelse ($apiKey->domains ?? [] as $domain)
              <li class="flex items-center justify-between py-2">
                <span>{{ $domain->domain }}</span>
                <form action="{{ route('user.developer.api-keys.remove-domain', $domain->id) }}" method="POST" class="ml-2">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="btn btn-danger btn-xs">Remove</button>
                </form>
              </li>
            @empty
              <li class="text-gray-500">No domains mapped yet.</li>
            @endforelse
          </ul>
        </div>
      </div>
      --}}
    </div>
  </div>
</section>
@endsection

@push('post_js')
<script>
    // Function to show confirmation dialog
    function confirmReset() {
        // Show confirmation dialog
        const isConfirmed = confirm("Are you sure you want to reset your API key? This action cannot be undone.");

        // Return true to submit the form if confirmed, false to cancel
        return isConfirmed;
    }
</script>
<script>
    document.getElementById('copyButton').addEventListener('click', function () {
        // Get the merchant ID text
        const merchantId = document.getElementById('merchantId').textContent;

        // Create a temporary input to copy text to clipboard
        const tempInput = document.createElement('input');
        tempInput.value = merchantId;
        document.body.appendChild(tempInput);

        // Select and copy the text
        tempInput.select();
        tempInput.setSelectionRange(0, 99999); // For mobile compatibility
        document.execCommand('copy');

        // Remove the temporary input
        document.body.removeChild(tempInput);

        // Show success message
        const successMessage = document.getElementById('copySuccess');
        successMessage.style.display = 'block';

        // Hide success message after 2 seconds
        setTimeout(() => {
            successMessage.style.display = 'none';
        }, 2000);
    });
</script>

@endpush