@extends('layouts.portal')
@section('title', 'Mis Claves — Olorun Secure')

@section('content')
<div class="max-w-lg mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('portal.dashboard') }}" class="text-gray-500 hover:text-white transition">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h2 class="text-xl font-bold">Mis Claves</h2>
    </div>

    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 space-y-6">
        <!-- License Key -->
        <div>
            <label class="block text-sm text-gray-400 mb-2">🔑 Clave de Licencia</label>
            <div class="flex gap-2">
                <input type="text" id="license-key" value="{{ $license->license_key }}" readonly
                    class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 font-mono text-sm focus:outline-none">
                <button onclick="copyToClipboard('license-key')"
                    class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition" title="Copiar">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>

        <!-- Secret Key -->
        <div>
            <label class="block text-sm text-gray-400 mb-2">🔐 Clave Secreta (HMAC)</label>
            <div class="flex gap-2">
                <input type="password" id="secret-key" value="{{ $license->secret_key }}" readonly
                    class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 font-mono text-sm focus:outline-none">
                <button onclick="toggleSecret()" id="toggle-btn"
                    class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition" title="Mostrar">
                    <i class="fas fa-eye" id="toggle-icon"></i>
                </button>
                <button onclick="copyToClipboard('secret-key')"
                    class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition" title="Copiar">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
            <p class="text-xs text-gray-500 mt-2">
                <i class="fas fa-info-circle mr-1"></i>
                Esta clave se usa para firmar las comunicaciones entre el plugin y el servidor. Ingrésala en la configuración del plugin WordPress.
            </p>
        </div>
    </div>
</div>

<script>
function copyToClipboard(id) {
    var el = document.getElementById(id);
    var val = el.type === 'password' ? el.value : el.value;
    navigator.clipboard.writeText(val).then(function() {
        el.classList.add('border-green-500');
        setTimeout(function() { el.classList.remove('border-green-500'); }, 1000);
    });
}

function toggleSecret() {
    var el = document.getElementById('secret-key');
    var icon = document.getElementById('toggle-icon');
    if (el.type === 'password') {
        el.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        el.type = 'password';
        icon.className = 'fas fa-eye';
    }
}
</script>
@endsection