@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">Device Details</h2>
        <p class="text-gray-500 dark:text-gray-400 text-fluid-sm mt-1">Device information and activity history</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('devices.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>

<!-- Device Info -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-fluid-lg mb-fluid">
    <!-- Device Details -->
    <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 Information</h3>
        <div class="space-y-fluid">
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Device ID</span>
                <code class="text-fluid-sm text-gray-800 dark:text-gray-100 font-mono">{{ $deviceLog->device_id }}</code>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Device Name</span>
                <span class="text-gray-800 dark:text-gray-100 font-medium text-fluid-sm">{{ $deviceLog->device_name }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Device Type</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm capitalize">{{ $deviceLog->device_type }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Operating System</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $deviceLog->os }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Browser</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $deviceLog->browser }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">IP Address</span>
                <code class="text-fluid-sm text-gray-800 dark:text-gray-100 font-mono">{{ $deviceLog->ip_address }}</code>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Location</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $deviceLog->city ? $deviceLog->city . ', ' : '' }}{{ $deviceLog->country ?? 'Unknown' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Status</span>
                @if($deviceLog->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
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Last Seen</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $deviceLog->last_seen?->format('M d, Y H:i:s') ?? '-' }}</span>
            </div>
        </div>
    </div>

    <!-- 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">License Key</span>
                <a href="{{ route('licenses.show', $deviceLog->license_id) }}" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-mono text-fluid-sm">
                    {{ $deviceLog->license->key ?? 'N/A' }}
                </a>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">Customer</span>
                <span class="text-gray-800 dark:text-gray-100 text-fluid-sm">{{ $deviceLog->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">{{ $deviceLog->license->email ?? '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400 text-fluid-sm">License Status</span>
                @php
                    $statusColors = [
                        'active' => 'text-green-600 dark:text-green-400',
                        'expired' => 'text-red-600 dark:text-red-400',
                        'suspended' => 'text-yellow-600 dark:text-yellow-400',
                        'revoked' => 'text-gray-600 dark:text-gray-400',
                    ];
                @endphp
                <span class="font-medium text-fluid-sm {{ $statusColors[$deviceLog->license->status] ?? 'text-gray-600 dark:text-gray-400' }}">
                    {{ ucfirst($deviceLog->license->status ?? 'N/A') }}
                </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">{{ $deviceLog->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-gray-800 dark:text-gray-100 text-fluid-sm">{{ $deviceLog->license->current_devices ?? '-' }}</span>
            </div>
        </div>

        <div class="mt-fluid pt-4 border-t border-gray-100 dark:border-gray-700">
            @if($deviceLog->is_active)
                <form action="{{ route('devices.block', $deviceLog->id) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="w-full px-4 py-2 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-lg hover:bg-red-200 dark:hover:bg-red-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="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"></path>
                        </svg>
                        <span>Block Device</span>
                    </button>
                </form>
            @else
                <form action="{{ route('devices.unblock', $deviceLog->id) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="w-full px-4 py-2 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-lg hover:bg-green-200 dark:hover:bg-green-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Unblock Device</span>
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>

<!-- Activity History -->
<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">Activity History</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">Action</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">Time</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                @forelse($recentActivity as $activity)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    <td class="px-4 sm:px-6 py-4">
                        @php
                            $actionColors = [
                                'login' => 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
                                'logout' => 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
                                'heartbeat' => 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
                                'failed' => 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
                                'blocked' => 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
                            ];
                        @endphp
                        <span class="px-2 py-1 text-fluid-xs font-medium rounded-full {{ $actionColors[$activity->action] ?? 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' }}">
                            {{ ucfirst($activity->action) }}
                        </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">{{ $activity->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">{{ $activity->city ? $activity->city . ', ' : '' }}{{ $activity->country ?? 'Unknown' }}</span>
                    </td>
                    <td class="px-4 sm:px-6 py-4">
                        <span class="text-fluid-sm text-gray-500 dark:text-gray-400">{{ $activity->created_at->format('M d, Y H:i:s') }}</span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-4 sm:px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                        <p>No activity history</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection