@extends('layouts.app')
@section('title', 'API Key Management')
@section('content')
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6" x-data="{ isOffCanvasOpen: false }">
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `API Keys`}">
      <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
         <!-- <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2> -->
         <div>
               <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
               <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                  API Keys
                  <span class="help-icon-wrapper">
                     <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                     <span class="help-popover-text" style="bottom: 100%;width:460px">
                           <span class="popover-header">API keys Information</span>
                           <span class="popover-body">API keys allow external applications and integrations to securely connect to your account through the platform's APIs. Create a separate key for each application or integration, and disable or delete keys when they are no longer needed.</span>
                     </span>
                  </span>
               </h2>
               <p class="text-sm text-gray-500 dark:text-gray-400">Create and manage secure keys for API access and external integrations.</p>
         </div>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard') }}">
                     Home
                     <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                  </a>
               </li>
               <li>
                  <a
                        class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                        href="{{ route('account_settings') }}"
                     >
                        Account Settings
                        <svg
                           class="stroke-current"
                           width="17"
                           height="16"
                           viewBox="0 0 17 16"
                           fill="none"
                           xmlns="http://www.w3.org/2000/svg"
                        >
                           <path
                           d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
                           stroke=""
                           stroke-width="1.2"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                           />
                        </svg>
                     </a>
                  </li>
               <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->
   
   <div class="grid grid-cols-1 gap-6 ">
      <div class="space-y-6">
         <!-- Tab start -->
                    <div
                        class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                     >
                        <!-- <div class="px-6 py-5">
                           <h3
                              class="text-base font-medium text-gray-800 dark:text-white/90"
                           >
                              Account Settings
                           </h3>
                        </div> -->
                        <!-- <div
                           class="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800"
                        > -->
                           <div x-data="{ activeTab: 'email_settings' }">
                              <div
                                 class="rounded-t-xl border border-gray-200 p-3 dark:border-gray-800"
                              >
                                 <nav class="flex overflow-x-auto rounded-lg bg-gray-100 p-1 dark:bg-gray-900 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1.5">
                                    
                                    <!-- SMTP Configuration -->
                                    <a href="/smtp_configs"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('smtp') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       SMTP Configuration
                                    </a>

                                    <!-- Email Settings -->
                                    <a href="/email_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('email') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Email Templates
                                    </a>

                                    <!-- API Keys -->
                                    <a href="/settings/api-keys"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('api-keys') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       API Keys
                                    </a>

                                    <!-- Categories -->
                                    <a href="/categories"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('categories') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Template Categories
                                    </a>

                                    <!-- Timezone Settings -->
                                    <a href="/account_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('timezone') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Timezone Settings
                                    </a>

                                 </nav>
                              </div>
                              <div
                                 class="rounded-b-xl border border-t-0 border-gray-200 p-6 pt-4 dark:border-gray-800"
                              >
                                 <div x-show="activeTab === 'email_settings'">
                                    <!-- <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       API Keys
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       Manage multiple API keys for different environments and applications.
                                    </p> -->

                                          <div class="flex flex-col justify-between gap-5  border-gray-100 sm:flex-row sm:items-center dark:border-gray-800">
                                             <div>
                                                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">API Keys</h3>
                                                <p class="text-sm text-gray-500 dark:text-gray-400">Manage API keys for secure access to the platform's APIs and external integrations.</p>
                                             </div>
                                             <div>
                                                <button @click="isOffCanvasOpen = true" class="bg-brand-500 hover:bg-brand-600 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white ">
                                                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                      <path d="M5 10.0002H15.0006M10.0002 5V15.0006" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                   </svg>
                                                   Create API Key
                                                </button>
                                             </div>
                                          </div>
                                    

                                    <!-- Form start -->
                                       @if(session('new_api_key'))
                                       <!-- Success Message for New Key (Show only once) -->
                                       <div class="mb-6 mt-5 ">
                                          <h4 class="text-lg font-semibold text-green-800 dark:text-green-400">Key Generated Successfully!</h4>
                                          <p class="text-sm text-green-700 dark:text-green-500 mb-4">Please copy this key now. For security reasons, you cannot see it again.</p>
                                          <div class="flex items-center gap-3">
                                                <input type="text" id="plain_api_key" readonly value="{{ session('new_api_key') }}" class="dark:bg-dark-900 h-11 w-full max-w-lg rounded-lg border border-green-300 bg-white px-4 text-sm text-gray-800 focus:outline-none dark:border-green-800 dark:text-white">
                                                <button onclick="copyPlainKey()" class="bg-green-600 px-4 py-2.5 rounded-lg text-white text-sm font-medium hover:bg-green-700 transition">Copy Key</button>
                                          </div>
                                       </div>
                                       <script>
                                          function copyPlainKey() {
                                             const copyText = document.getElementById("plain_api_key");
                                             navigator.clipboard.writeText(copyText.value);
                                             alert("API Key copied to clipboard!");
                                          }
                                       </script>
                                       @endif

                                       <!-- <div class="rounded-2xl border border-gray-200 bg-white p-5 lg:p-6 dark:border-gray-800 dark:bg-white/[0.03]"> -->
                                          <!-- <div class="flex flex-col justify-between gap-5 border-b border-gray-100 py-4 sm:flex-row sm:items-center dark:border-gray-800">
                                             <div>
                                                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">API Keys</h3>
                                                <p class="text-sm text-gray-500 dark:text-gray-400">Manage multiple API keys for different environments and applications.</p>
                                             </div>
                                             <div>
                                                <button @click="isOffCanvasOpen = true" class="bg-brand-500 hover:bg-brand-600 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white transition">
                                                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                      <path d="M5 10.0002H15.0006M10.0002 5V15.0006" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                   </svg>
                                                   Add API Key
                                                </button>
                                             </div>
                                          </div> -->

                                          <!-- Off-Canvas Start -->
                                          <div 
                                             x-show="isOffCanvasOpen" 
                                             class="mt-5 fixed inset-0 z-99999 overflow-hidden" 
                                             x-cloak>
                                             <!-- Backdrop -->
                                             <div 
                                                class=" absolute inset-0 bg-gray-400/50 backdrop-blur-sm transition-opacity" 
                                                @click="isOffCanvasOpen = false"
                                                x-show="isOffCanvasOpen"
                                                x-transition:enter="ease-in-out duration-300"
                                                x-transition:enter-start="opacity-0"
                                                x-transition:enter-end="opacity-100"
                                                x-transition:leave="ease-in-out duration-300"
                                                x-transition:leave-start="opacity-100"
                                                x-transition:leave-end="opacity-0">
                                             </div>

                                             <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
                                                <div 
                                                   class="w-screen max-w-md transform transition ease-in-out duration-300"
                                                   x-show="isOffCanvasOpen"
                                                   x-transition:enter="translate-x-full"
                                                   x-transition:enter-end="translate-x-0"
                                                   x-transition:leave="translate-x-0"
                                                   x-transition:leave-end="translate-x-full"
                                                   @click.outside="isOffCanvasOpen = false">
                                                   
                                                   <div class="flex h-full flex-col border-l border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900">
                                                      <!-- Header -->
                                                      <div class="flex items-center justify-between border-b border-gray-100 p-6 dark:border-gray-800">
                                                         <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">Generate API Key</h2>
                                                         <button @click="isOffCanvasOpen = false" class="text-gray-400 hover:text-gray-700 dark:hover:text-white">
                                                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                               <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                                            </svg>
                                                         </button>
                                                      </div>

                                                      <!-- Form Content -->
                                                      <div class="relative flex-1 p-6">
                                                         <p class="mb-7 text-sm leading-6 text-gray-500 dark:text-gray-400">Assign a name and environment to your new API key. Keys are used to authenticate your requests safely.</p>
                                                         
                                                         <form action="{{ route('api_keys.store') }}" method="POST">
                                                            @csrf
                                                            <div class="space-y-6">
                                                               <div>
                                                                  <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Key Name</label>
                                                                  <input type="text" name="name" required placeholder="e.g. Mobile App" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                                                               </div>
                                                               <div style="display:none">
                                                                  <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Environment</label>
                                                                  <select name="environment" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                                                     <option value="production">Production</option>
                                                                     <!-- <option value="development">Development</option>
                                                                     <option value="sandbox">Sandbox</option> -->
                                                                  </select>
                                                               </div>
                                                            </div>

                                                            <div class="mt-10 flex flex-col gap-3">
                                                               <button type="submit" class="bg-brand-500 shadow-theme-xs hover:bg-brand-600 flex w-full justify-center rounded-lg px-4 py-3 text-sm font-medium text-white transition">
                                                                  Generate API key
                                                               </button>
                                                               <button @click="isOffCanvasOpen = false" type="button" class="shadow-theme-xs flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                                                                  Cancel
                                                               </button>
                                                            </div>
                                                         </form>
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                          <!-- Off-Canvas End -->

                                          <div class="custom-scrollbar overflow-x-auto px-1 pb-4 mt-5">
                                             <table class="min-w-full">
                                                <thead>
                                                   <tr class="border-b border-gray-100 dark:border-gray-800">
                                                      <th class="py-3 pr-5 text-left text-xs font-medium text-gray-500 dark:text-gray-400">API Key</th>
                                                      <!-- <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Environment</th> -->
                                                      <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Status</th>
                                                      <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Created</th>
                                                      <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Actions</th>
                                                   </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                                   @forelse($api_keys as $key)
                                                   <tr x-data="keyRowHandler({ 
                                                      id: {{ $key->id }}, 
                                                      initialStatus: {{ $key->is_active ? 'true' : 'false' }}, 
                                                      fullKey: '{{ $key->key_api }}',
                                                      maskedKey: '{{ substr($key->key_api, 0, 16) }}***********************************' 
                                                   })">
                                                      <td class="py-3 pr-5 whitespace-nowrap">
                                                         <div class="font-medium text-gray-800 dark:text-white/90">{{ $key->name }}</div>
                                                         <div class="flex items-center gap-2 text-xs text-gray-500">
                                                               <!-- Display the masked version -->
                                                               <span x-text="maskedKey" class="font-mono"></span>
                                                               
                                                               <!-- Button copies the full version -->
                                                               <button @click="copyKey" class="text-gray-400 hover:text-brand-500 transition-colors">
                                                                  <svg x-show="!copied" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                                     <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                                                     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                                                  </svg>
                                                                  <svg x-show="copied" x-cloak class="text-green-500" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                                     <polyline points="20 6 9 17 4 12"></polyline>
                                                                  </svg>
                                                               </button>
                                                         </div>
                                                      </td>
                                                      <!-- <td class="px-5 py-3 whitespace-nowrap">
                                                         <span class="rounded-lg bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400 uppercase">
                                                               {{ $key->environment }}
                                                         </span>
                                                      </td> -->
                                                      <td class="px-5 py-3 whitespace-nowrap">
                                                         <span x-text="status ? 'Active' : 'Inactive'"
                                                               :class="status ? 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500' : 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500'"
                                                               class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium"></span>
                                                      </td>
                                                      <td class="px-5 py-3 text-sm text-gray-500 dark:text-gray-400">
                                                         {{ \Carbon\Carbon::parse($key->created_at)->format('d M, Y') }}
                                                      </td>
                                                      <td class="px-5 py-3 whitespace-nowrap">
                                                         <div class="flex items-center gap-4">
                                                               <!-- Toggle -->
                                                               <label class="cursor-pointer" :title="status ? 'Disable this API key' : 'Enable this API key'">
                                                                  <div class="relative">
                                                                     <input type="checkbox" class="sr-only" x-model="status" @change="toggleStatus"/>
                                                                     <div class="block h-6 w-11 rounded-full transition-colors duration-200" :class="status ? 'bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"></div>
                                                                     <div class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-200 ease-linear transition-transform" :class="status ? 'translate-x-full': 'translate-x-0'"></div>
                                                                  </div>
                                                               </label>
                                                               <!-- Delete -->
                                                               <form action="{{ route('api_keys.delete', $key->id) }}" method="POST" onsubmit="return confirm('Applications using this key will no longer be able to access the API. This action cannot be undone.')">
                                                                  @csrf @method('DELETE')
                                                                  <button type="submit" class="text-gray-500 hover:text-error-600 transition">
                                                                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                                     </svg>
                                                                  </button>
                                                               </form>
                                                         </div>
                                                      </td>
                                                   </tr>
                                                   @empty
                                                   <tr>
                                                      <td colspan="5" class="py-10 text-center text-sm text-gray-500">No API keys found.</td>
                                                   </tr>
                                                   @endforelse
                                                </tbody>
                                             </table>
                                          </div>
                                       <!-- </div> -->
                                    <!-- Form end -->
                                 </div>

                                 
                              </div>
                           </div>
                        <!-- </div> -->
                     </div>
                <!-- Tab End -->
      </div>
   </div>

   
</div>

<script>
   /*
document.addEventListener('alpine:init', () => {
    Alpine.data('keyRowHandler', (config) => ({
        id: config.id,
        status: config.initialStatus,
        prefix: config.prefix,
        copied: false,

        copyPrefix() {
            navigator.clipboard.writeText(this.prefix).then(() => {
                this.copied = true;
                setTimeout(() => this.copied = false, 2000);
            });
        },

        async toggleStatus() {
            try {
                const response = await fetch("{{ route('api_keys.toggle') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ id: this.id, status: this.status })
                });
                const data = await response.json();
                if (!data.success) throw new Error();
            } catch (e) {
                this.status = !this.status;
                alert('Update failed');
            }
        }
    }));
});
*/

function keyRowHandler(config) {
    return {
        id: config.id,
        status: config.initialStatus,
        fullKey: config.fullKey,     // The actual key
        maskedKey: config.maskedKey, // The version with stars
        copied: false,

        async copyKey() {
            try {
                // We copy the fullKey to the clipboard
                await navigator.clipboard.writeText(this.fullKey);
                this.copied = true;
                setTimeout(() => this.copied = false, 2000);
            } catch (err) {
                console.error('Failed to copy key:', err);
            }
        },

        async toggleStatus() {
            try {
                const response = await fetch("{{ route('api_keys.toggle') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ id: this.id, status: this.status })
                });
                const data = await response.json();
                if (!data.success) throw new Error();
            } catch (e) {
                this.status = !this.status;
                alert('Update failed');
            }
        }
    }
}
</script>

<style>
    [x-cloak] { display: none !important; }
</style>
@endsection