@extends('layouts.app')

@section('title', 'License Details')
@section('page-title', 'License Details')
@section('page-subtitle', 'View complete license information')

@section('header-actions')
<a href="{{ route('licenses.edit', $license) }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition-colors">
    Edit License
</a>
@endsection

@section('content')
<div class="max-w-4xl">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Info -->
        <div class="lg:col-span-2 rounded-xl bg-white p-6 shadow-sm border border-gray-200">
            <h3 class="text-lg font-bold text-gray-900 mb-6">License Information</h3>
            
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4 pb-4 border-b border-gray-200">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">License Key</label>
                        <div class="flex items-center gap-2">
                            <p class="font-mono text-lg font-bold text-indigo-600 license-key-detail" data-key="{{ $license->license_key }}">
                                {{ str_repeat('•', strlen($license->license_key)) }}
                            </p>
                            <button onclick="toggleLicenseKeyDetail()" class="text-gray-400 hover:text-indigo-600 transition-colors" title="Show/Hide License Key">
                                <svg class="w-5 h-5 eye-icon-detail" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                <svg class="w-5 h-5 eye-off-icon-detail hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                                </svg>
                            </button>
                            <button onclick="copyLicenseKey()" class="text-gray-400 hover:text-indigo-600 transition-colors" title="Copy to Clipboard">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Status</label>
                        @if($license->expired_at && $license->expired_at < now())
                            <span class="inline-flex rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-800">Expired</span>
                        @elseif($license->status === 'active')
                            <span class="inline-flex rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-800">Active</span>
                        @elseif($license->status === 'suspended')
                            <span class="inline-flex rounded-full bg-orange-100 px-3 py-1 text-xs font-semibold text-orange-800">Suspended</span>
                        @else
                            <span class="inline-flex rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-800">Inactive</span>
                        @endif
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Customer Name</label>
                        <p class="text-sm font-semibold text-gray-900">{{ $license->customer_name }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Customer Email</label>
                        <p class="text-sm text-gray-900">{{ $license->customer_email }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Product Name</label>
                        <p class="text-sm text-gray-900">{{ $license->product_name }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Plan Type</label>
                        <span class="inline-flex rounded-full px-2 py-1 text-xs font-semibold 
                            {{ $license->plan_type === 'enterprise' ? 'bg-purple-100 text-purple-800' : '' }}
                            {{ $license->plan_type === 'premium' ? 'bg-blue-100 text-blue-800' : '' }}
                            {{ $license->plan_type === 'professional' ? 'bg-indigo-100 text-indigo-800' : '' }}
                            {{ $license->plan_type === 'basic' ? 'bg-gray-100 text-gray-800' : '' }}
                            {{ $license->plan_type === 'trial' ? 'bg-yellow-100 text-yellow-800' : '' }}">
                            {{ ucfirst($license->plan_type) }}
                        </span>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Domain</label>
                        <p class="text-sm text-gray-900">{{ $license->domain ?? 'Not assigned' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">IP Address</label>
                        <p class="text-sm text-gray-900 font-mono">{{ $license->ip_address ?? 'Not assigned' }}</p>
                        @if($license->ip_lock_enabled)
                        <span class="inline-flex items-center gap-1 mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                            IP Locked
                        </span>
                        @else
                        <span class="inline-flex items-center gap-1 mt-1 px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-600">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
                            </svg>
                            IP Unlocked
                        </span>
                        @endif
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Expiry Date</label>
                        <p class="text-sm text-gray-900">{{ $license->expired_at ? $license->expired_at->format('F d, Y') : 'N/A' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Created At</label>
                        <p class="text-sm text-gray-900">{{ $license->created_at->format('F d, Y H:i:s') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="space-y-6">
            <!-- Status Management -->
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Status Management</h3>
                <div class="space-y-2">
                    @if($license->status !== 'active')
                    <form method="POST" action="{{ route('licenses.activate', $license) }}">
                        @csrf
                        <button type="submit" class="block w-full text-left rounded-lg bg-green-50 px-4 py-2.5 text-sm font-semibold text-green-700 hover:bg-green-100 transition-colors border border-green-200">
                            <span class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Set to Active
                            </span>
                        </button>
                    </form>
                    @endif
                    
                    @if($license->status !== 'suspended')
                    <form method="POST" action="{{ route('licenses.suspend', $license) }}" onsubmit="return confirm('Suspend this license?')">
                        @csrf
                        <button type="submit" class="block w-full text-left rounded-lg bg-orange-50 px-4 py-2.5 text-sm font-semibold text-orange-700 hover:bg-orange-100 transition-colors border border-orange-200">
                            <span class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                                </svg>
                                Suspend License
                            </span>
                        </button>
                    </form>
                    @endif
                    
                    @if($license->status !== 'inactive')
                    <form method="POST" action="{{ route('licenses.deactivate', $license) }}" onsubmit="return confirm('Deactivate & clear domain?')">
                        @csrf
                        <button type="submit" class="block w-full text-left rounded-lg bg-gray-50 px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-100 transition-colors border border-gray-200">
                            <span class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Deactivate (Clear Domain)
                            </span>
                        </button>
                    </form>
                    @endif
                    
                    @if($license->status === 'suspended')
                    <form method="POST" action="{{ route('licenses.reactivate', $license) }}">
                        @csrf
                        <button type="submit" class="block w-full text-left rounded-lg bg-indigo-50 px-4 py-2.5 text-sm font-semibold text-indigo-700 hover:bg-indigo-100 transition-colors border border-indigo-200">
                            <span class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                                Reactivate License
                            </span>
                        </button>
                    </form>
                    @endif
                </div>
            </div>

            <!-- IP Lock Management -->
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    IP Lock
                </h3>
                
                @if(!$license->ip_address)
                <div class="rounded-lg bg-yellow-50 p-4 text-sm text-yellow-800 border border-yellow-200">
                    <p class="font-semibold">⚠️ No IP Address</p>
                    <p class="text-xs mt-1">This license must be activated first before enabling IP lock.</p>
                </div>
                @else
                <div class="space-y-3">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-sm text-gray-600">Current IP: <span class="font-mono font-semibold text-gray-900">{{ $license->ip_address }}</span></p>
                            <p class="text-xs text-gray-500 mt-1">
                                @if($license->ip_lock_enabled)
                                    🔒 IP Lock is <strong class="text-red-600">ENABLED</strong>. Only this IP can verify the license.
                                @else
                                    🔓 IP Lock is <strong class="text-green-600">DISABLED</strong>. Any IP can verify the license.
                                @endif
                            </p>
                        </div>
                    </div>
                    
                    <form method="POST" action="{{ route('licenses.ip-lock.toggle', $license) }}">
                        @csrf
                        @if($license->ip_lock_enabled)
                        <button type="submit" class="block w-full text-left rounded-lg bg-green-50 px-4 py-2.5 text-sm font-semibold text-green-700 hover:bg-green-100 transition-colors border border-green-200">
                            <span class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
                                </svg>
                                Disable IP Lock
                            </span>
                        </button>
                        @else
                        <button type="submit" class="block w-full text-left rounded-lg bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-100 transition-colors border border-red-200">
                            <span class="flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                </svg>
                                Enable IP Lock
                            </span>
                        </button>
                        @endif
                    </form>
                    
                    <div class="rounded-lg bg-blue-50 p-3 text-xs text-blue-800 border border-blue-200">
                        <p class="font-semibold">💡 About IP Lock:</p>
                        <ul class="mt-1 space-y-1 list-disc list-inside">
                            <li>Only enable for high-security requirements</li>
                            <li>Not recommended for dynamic IP environments</li>
                            <li>Cloud servers may have changing IPs</li>
                        </ul>
                    </div>
                </div>
                @endif
            </div>
            
            <!-- Other Actions -->
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Quick Actions</h3>
                <div class="space-y-3">
                    <a href="{{ route('licenses.edit', $license) }}" class="block w-full text-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition-colors">
                        Edit License
                    </a>
                    <form method="POST" action="{{ route('licenses.destroy', $license) }}" onsubmit="return confirm('Are you sure?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="block w-full text-center rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700 transition-colors">
                            Delete License
                        </button>
                    </form>
                    <a href="{{ route('licenses.index') }}" class="block w-full text-center rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200 transition-colors">
                        Back to List
                    </a>
                </div>
            </div>

            @if($license->expired_at)
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-200">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Expiry Info</h3>
                @if($license->expired_at < now())
                    <div class="text-center">
                        <p class="text-3xl font-bold text-red-600 mb-2">Expired</p>
                        <p class="text-sm text-gray-600">{{ $license->expired_at->diffForHumans() }}</p>
                    </div>
                @else
                    <div class="text-center">
                        <p class="text-3xl font-bold text-green-600 mb-2">{{ $license->expired_at->diffInDays() }}</p>
                        <p class="text-sm text-gray-600">days remaining</p>
                    </div>
                @endif
            </div>
            @endif
        </div>
    </div>
</div>

<script>
function toggleLicenseKeyDetail() {
    const keyElement = document.querySelector('.license-key-detail');
    const eyeIcon = document.querySelector('.eye-icon-detail');
    const eyeOffIcon = document.querySelector('.eye-off-icon-detail');
    const actualKey = keyElement.dataset.key;
    const hiddenKey = '•'.repeat(actualKey.length);
    
    if (keyElement.textContent.trim() === hiddenKey) {
        // Show the key
        keyElement.textContent = actualKey;
        eyeIcon.classList.add('hidden');
        eyeOffIcon.classList.remove('hidden');
    } else {
        // Hide the key
        keyElement.textContent = hiddenKey;
        eyeIcon.classList.remove('hidden');
        eyeOffIcon.classList.add('hidden');
    }
}

function copyLicenseKey() {
    const keyElement = document.querySelector('.license-key-detail');
    const actualKey = keyElement.dataset.key;
    
    // Copy to clipboard
    navigator.clipboard.writeText(actualKey).then(function() {
        // Show success feedback
        const button = event.currentTarget;
        const originalHTML = button.innerHTML;
        
        button.innerHTML = '<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>';
        button.title = 'Copied!';
        
        setTimeout(() => {
            button.innerHTML = originalHTML;
            button.title = 'Copy to Clipboard';
        }, 2000);
    }).catch(function(err) {
        console.error('Failed to copy: ', err);
        alert('Failed to copy license key');
    });
}
</script>
@endsection