@extends('layouts.app')

@section('content')
<!-- Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-fluid mb-fluid">
    <div>
        <h2 class="text-fluid-xl font-bold text-gray-800 dark:text-gray-100">License Details</h2>
        <p class="text-gray-500 dark:text-gray-400 text-fluid-sm mt-1">Manage license and monitor devices</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('licenses.index') }}" class="px-4 py-2 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors flex items-center gap-2 text-fluid-base">
            <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 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            <span>Back</span>
        </a>
    </div>
</div>

<!-- License Key Card -->
<div class="bg-white dark:bg-gray-900 rounded-fluid shadow-sm border border-gray-100 dark:border-gray-700 p-fluid mb-fluid">
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-fluid">
        <div>
            <label class="text-fluid-sm text-gray-500 dark:text-gray-400 block mb-fluid-sm">License Key</label>
            <code class="text-fluid-base sm:text-fluid-xl font-mono text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900 px-4 py-2 rounded-lg block w-fit break-all">{{ $license->key }}</code>
        </div>
        <div class="flex flex-wrap gap-2">
            @php
                $statusColors = [
                    'active' => 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900 dark:text-green-300 dark:border-green-700',
                    'expired' => 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900 dark:text-red-300 dark:border-red-700',
                    'suspended' => 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-900 dark:text-yellow-300 dark:border-yellow-700',
                    'revoked' => 'bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600',
                ];
            @endphp
            <span class="px-4 py-2 text-fluid-sm font-medium rounded-lg border {{ $statusColors[$license->status] ?? 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' }}">
                {{ ucfirst($license->status) }}
            </span>
        </div>
    </div>
</div>

<!-- Stats and Info -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-fluid-lg mb-fluid">
    <!-- License Info -->
    <div class="bg-white dark:bg-gray-900 rounded-fluid shadow-sm border border-gray-100 dark:border-gray-700 p-fluid-lg">
        <h3 class="text-fluid-lg font-semibold text-gray-800 dark:text-gray-100 mb-fluid">License Information</h3>
        <div class="space-y-fluid">
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Customer Name</span>
                <span class="text-gray-800 dark:text-gray-100 font-medium text-fluid-sm">{{ $license->name ?? '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Email</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $license->email ?? '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Activated</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $license->activated_at?->format('M d, Y H:i') ?? '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Expires</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm {{ $license->isExpired() ? 'text-red-600 dark:text-red-400' : '' }}">
                    {{ $license->expires_at?->format('M d, Y') ?? 'Never' }}
                </span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Max Devices</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $license->max_devices }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Current Devices</span>
                <span class="text-fluid-sm {{ $license->current_devices >= $license->max_devices ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }}">
                    {{ $license->current_devices }} / {{ $license->max_devices }}
                </span>
            </div>
        </div>
    </div>

    <!-- Device Stats -->
    <div class="bg-white dark:bg-gray-900 rounded-fluid shadow-sm border border-gray-100 dark:border-gray-700 p-fluid-lg">
        <h3 class="text-fluid-lg font-semibold text-gray-800 dark:text-gray-100 mb-fluid">Device Statistics</h3>
        <div class="space-y-fluid">
            <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900 rounded-lg">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <span class="text-gray-600 dark:text-gray-300 text-fluid-sm">Active Devices</span>
                </div>
                <span class="text-fluid-2xl font-bold text-green-600 dark:text-green-400">{{ $deviceStats['active'] }}</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <span class="text-gray-600 dark:text-gray-300 text-fluid-sm">Inactive Devices</span>
                </div>
                <span class="text-fluid-2xl font-bold text-gray-600 dark:text-gray-300">{{ $deviceStats['inactive'] }}</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-purple-50 dark:bg-purple-900 rounded-lg">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-purple-100 dark:bg-purple-800 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                    <span class="text-gray-600 dark:text-gray-300 text-fluid-sm">Total Sessions</span>
                </div>
                <span class="text-fluid-2xl font-bold text-purple-600 dark:text-purple-400">{{ $deviceStats['total'] }}</span>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="bg-white dark:bg-gray-900 rounded-fluid shadow-sm border border-gray-100 dark:border-gray-700 p-fluid-lg">
        <h3 class="text-fluid-lg font-semibold text-gray-800 dark:text-gray-100 mb-fluid">Quick Actions</h3>
        <div class="space-y-fluid-sm">
            <button onclick="document.getElementById('renewModal').classList.remove('hidden')" class="w-full px-4 py-2 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors flex items-center justify-center gap-2 text-fluid-base">
                <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="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"></path>
                </svg>
                <span>Renew License</span>
            </button>
            <button onclick="document.getElementById('statusModal').classList.remove('hidden')" class="w-full px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center justify-center gap-2 text-fluid-base">
                <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 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                </svg>
                <span>Change Status</span>
            </button>
            <a href="{{ route('licenses.edit', $license->id) }}" class="w-full px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors flex items-center justify-center gap-2 text-fluid-base">
                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
                <span>Edit License</span>
            </a>
        </div>
    </div>
</div>

<!-- Devices Table -->
<div class="bg-white dark:bg-gray-900 rounded-fluid shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
    <div class="px-4 sm:px-6 py-4 border-b border-gray-100 dark:border-gray-700">
        <h3 class="text-fluid-lg font-semibold text-gray-800 dark:text-gray-100">Connected Devices</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="table">
            <thead class="bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                <tr>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Device</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden md:table-cell">Type</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden lg:table-cell">OS</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden sm:table-cell">IP Address</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden md:table-cell">Location</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-fluid-sm font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell">Last Seen</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                @forelse($license->deviceLogs()->orderBy('last_seen', 'desc')->get() as $device)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    <td class="px-4 sm:px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
                                @if($device->device_type === 'mobile')
                                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                    </svg>
                                @elseif($device->device_type === 'tablet')
                                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                    </svg>
                                @else
                                    <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                    </svg>
                                @endif
                            </div>
                            <div>
                                <div class="text-fluid-sm font-medium text-gray-800 dark:text-gray-100">{{ $device->device_name }}</div>
                                <div class="text-fluid-xs text-gray-500 dark:text-gray-400">{{ $device->browser }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 sm:px-6 py-4 hidden md:table-cell">
                        <span class="text-fluid-sm text-gray-600 dark:text-gray-400 capitalize">{{ $device->device_type }}</span>
                    </td>
                    <td class="px-4 sm:px-6 py-4 hidden lg:table-cell">
                        <span class="text-fluid-sm text-gray-600 dark:text-gray-400">{{ $device->os }}</span>
                    </td>
                    <td class="px-4 sm:px-6 py-4 hidden sm:table-cell">
                        <code class="text-fluid-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">{{ $device->ip_address }}</code>
                    </td>
                    <td class="px-4 sm:px-6 py-4 hidden md:table-cell">
                        <span class="text-fluid-sm text-gray-600 dark:text-gray-400">
                            {{ $device->city ? $device->city . ', ' : '' }}{{ $device->country }}
                        </span>
                    </td>
                    <td class="px-4 sm:px-6 py-4">
                        @if($device->is_active)
                            <span class="px-2 py-1 text-fluid-xs font-medium rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">Active</span>
                        @else
                            <span class="px-2 py-1 text-fluid-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">Inactive</span>
                        @endif
                    </td>
                    <td class="px-4 sm:px-6 py-4 hidden sm:table-cell">
                        <span class="text-fluid-sm text-gray-500 dark:text-gray-400">{{ $device->last_seen?->diffForHumans() ?? '-' }}</span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-4 sm:px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                        <svg class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        <p>No devices connected yet</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Renew Modal -->
<div id="renewModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-fluid shadow-xl max-w-md w-full p-fluid border border-transparent dark:border-gray-700">
        <h3 class="text-fluid-lg font-semibold text-gray-800 dark:text-gray-100 mb-fluid">Renew License</h3>
        <form method="POST" action="{{ route('licenses.renew', $license->id) }}">
            @csrf
            <div class="mb-fluid">
                <label for="new_expiry" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">New Expiration Date</label>
                <input type="date" name="new_expiry" id="new_expiry" required
                    min="{{ date('Y-m-d', strtotime('+1 day')) }}"
                    class="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-fluid-base">
            </div>
            <div class="flex justify-end gap-fluid-sm">
                <button type="button" onclick="document.getElementById('renewModal').classList.add('hidden')"
                    class="px-4 py-2 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-fluid-base">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 gradient-bg text-white rounded-lg hover:opacity-90 text-fluid-base">
                    Renew
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Status Modal -->
<div id="statusModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-fluid shadow-xl max-w-md w-full p-fluid border border-transparent dark:border-gray-700">
        <h3 class="text-fluid-lg font-semibold text-gray-800 dark:text-gray-100 mb-fluid">Change Status</h3>
        <form method="POST" action="{{ route('licenses.updateStatus', $license->id) }}">
            @csrf
            <div class="mb-fluid">
                <label for="status" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">Select Status</label>
                <select name="status" id="status" required
                    class="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-fluid-base">
                    <option value="active" {{ $license->status === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="suspended" {{ $license->status === 'suspended' ? 'selected' : '' }}>Suspended</option>
                    <option value="revoked" {{ $license->status === 'revoked' ? 'selected' : '' }}>Revoked</option>
                    <option value="expired" {{ $license->status === 'expired' ? 'selected' : '' }}>Expired</option>
                </select>
            </div>
            <div class="flex justify-end gap-fluid-sm">
                <button type="button" onclick="document.getElementById('statusModal').classList.add('hidden')"
                    class="px-4 py-2 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-fluid-base">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 gradient-bg text-white rounded-lg hover:opacity-90 text-fluid-base">
                    Update
                </button>
            </div>
        </form>
    </div>
</div>
@endsection