@extends('layouts.dashboard')

@section('title', 'Dashboard - BlueSmokeAI')

@section('header-title', __('Dashboard'))

@section('page-title', __('Dashboard Overview'))

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Welcome Banner -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 bg-white border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">Welcome back, {{ $user->name }}!</h2>
                        <p class="text-gray-600 mt-1">Here's what's happening with your services today.</p>
                    </div>
                    <div>
                        <a href="{{ route('websites.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 disabled:opacity-25 transition ease-in-out duration-150">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            Create New Website
                        </a>
                    </div>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-900">{{ $notification->message }}</p>
                                    <p class="text-xs text-gray-500">{{ $notification->created_at->diffForHumans() }}</p>
                                </div>
                            </div>
                        @empty
                            <p class="text-gray-500 text-sm">No notifications at this time.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Billing Information -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Billing Information</h3>
                
                <!-- Current Plan -->
                <div class="mb-6">
                    <h4 class="text-md font-medium text-gray-800 mb-2">Current Plan</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-lg font-semibold text-indigo-600">{{ isset($billingInfo['current_plan']) ? $billingInfo['current_plan']['name'] : 'Free Plan' }}</p>
                                <p class="text-sm text-gray-600">{{ isset($billingInfo['current_plan']) ? $billingInfo['current_plan']['description'] : 'Basic hosting features' }}</p>
                            </div>
                            <div>
                                @if(isset($billingInfo['current_plan']) && $billingInfo['current_plan']['price'] > 0)
                                    <p class="text-2xl font-bold text-gray-800">${{ number_format($billingInfo['current_plan']['price'], 2) }}<span class="text-sm text-gray-600">/month</span></p>
                                @else
                                    <p class="text-2xl font-bold text-gray-800">$0.00<span class="text-sm text-gray-600">/month</span></p>
                                @endif
                            </div>
                        </div>
                        <div class="mt-4">
                            <a href="{{ route('billing.plans') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Upgrade Plan
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Recent Invoices -->
                <div>
                    <h4 class="text-md font-medium text-gray-800 mb-2">Recent Invoices</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse(isset($billingInfo['recent_invoices']) ? $billingInfo['recent_invoices'] : [] as $invoice)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $invoice->invoice_number }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $invoice->created_at->format('M d, Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${{ number_format($invoice->amount, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $invoice->status == 'paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                                {{ ucfirst($invoice->status) }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <a href="{{ route('billing.invoice', $invoice->id) }}" class="text-indigo-600 hover:text-indigo-900">View</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">No invoices found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 text-right">
                        <a href="{{ route('billing.invoices') }}" class="text-sm text-indigo-600 hover:text-indigo-900">View all invoices →</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <!-- Websites Stat -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-indigo-100 text-indigo-500 mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-600">Websites</p>
                            <p class="text-2xl font-semibold text-gray-800">{{ $websitesCount }}</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('websites.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">View all websites →</a>
                    </div>
                </div>
            </div>

            <!-- Domains Stat -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-600">Domains</p>
                            <p class="text-2xl font-semibold text-gray-800">{{ $domainsCount }}</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('domains.index') }}" class="text-sm text-green-600 hover:text-green-900">Manage domains →</a>
                    </div>
                </div>
            </div>

            <!-- AI Agents Stat -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-600">AI Agents</p>
                            <p class="text-2xl font-semibold text-gray-800">{{ $aiAgentsCount }}</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('ai-agents.index') }}" class="text-sm text-purple-600 hover:text-purple-900">View AI agents →</a>
                    </div>
                </div>
            </div>

            <!-- Active Services Stat -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-600">Active Services</p>
                            <p class="text-2xl font-semibold text-gray-800">{{ array_sum($activeServices) }}</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="#" class="text-sm text-blue-600 hover:text-blue-900">View service status →</a>
                    </div>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-900">{{ $notification->message }}</p>
                                    <p class="text-xs text-gray-500">{{ $notification->created_at->diffForHumans() }}</p>
                                </div>
                            </div>
                        @empty
                            <p class="text-gray-500 text-sm">No notifications at this time.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Billing Information -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Billing Information</h3>
                
                <!-- Current Plan -->
                <div class="mb-6">
                    <h4 class="text-md font-medium text-gray-800 mb-2">Current Plan</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-lg font-semibold text-indigo-600">{{ isset($billingInfo['current_plan']) ? $billingInfo['current_plan']['name'] : 'Free Plan' }}</p>
                                <p class="text-sm text-gray-600">{{ isset($billingInfo['current_plan']) ? $billingInfo['current_plan']['description'] : 'Basic hosting features' }}</p>
                            </div>
                            <div>
                                @if(isset($billingInfo['current_plan']) && $billingInfo['current_plan']['price'] > 0)
                                    <p class="text-2xl font-bold text-gray-800">${{ number_format($billingInfo['current_plan']['price'], 2) }}<span class="text-sm text-gray-600">/month</span></p>
                                @else
                                    <p class="text-2xl font-bold text-gray-800">$0.00<span class="text-sm text-gray-600">/month</span></p>
                                @endif
                            </div>
                        </div>
                        <div class="mt-4">
                            <a href="{{ route('billing.plans') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Upgrade Plan
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Recent Invoices -->
                <div>
                    <h4 class="text-md font-medium text-gray-800 mb-2">Recent Invoices</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse(isset($billingInfo['recent_invoices']) ? $billingInfo['recent_invoices'] : [] as $invoice)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $invoice->invoice_number }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $invoice->created_at->format('M d, Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${{ number_format($invoice->amount, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $invoice->status == 'paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                                {{ ucfirst($invoice->status) }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <a href="{{ route('billing.invoice', $invoice->id) }}" class="text-indigo-600 hover:text-indigo-900">View</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">No invoices found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 text-right">
                        <a href="{{ route('billing.invoices') }}" class="text-sm text-indigo-600 hover:text-indigo-900">View all invoices →</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

        <!-- Resource Usage -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Resource Usage</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Storage Usage -->
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm font-medium text-gray-700">Storage</span>
                            <span class="text-sm font-medium text-gray-700">{{ $resourceUsage['storage']['used'] }} / {{ $resourceUsage['storage']['total'] }} GB</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ $resourceUsage['storage']['percentage'] }}%"></div>
                        </div>
                    </div>
                    
                    <!-- Bandwidth Usage -->
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm font-medium text-gray-700">Bandwidth</span>
                            <span class="text-sm font-medium text-gray-700">{{ $resourceUsage['bandwidth']['used'] }} / {{ $resourceUsage['bandwidth']['total'] }} GB</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-green-600 h-2.5 rounded-full" style="width: {{ $resourceUsage['bandwidth']['percentage'] }}%"></div>
                        </div>
                    </div>
                    
                    <!-- Database Usage -->
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm font-medium text-gray-700">Database</span>
                            <span class="text-sm font-medium text-gray-700">{{ $resourceUsage['database']['used'] }} / {{ $resourceUsage['database']['total'] }} MB</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-purple-600 h-2.5 rounded-full" style="width: {{ $resourceUsage['database']['percentage'] }}%"></div>
                        </div>
                    </div>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-900">{{ $notification->message }}</p>
                                    <p class="text-xs text-gray-500">{{ $notification->created_at->diffForHumans() }}</p>
                                </div>
                            </div>
                        @empty
                            <p class="text-gray-500 text-sm">No notifications at this time.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Billing Information -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Billing Information</h3>
                
                <!-- Current Plan -->
                <div class="mb-6">
                    <h4 class="text-md font-medium text-gray-800 mb-2">Current Plan</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-lg font-semibold text-indigo-600">{{ isset($billingInfo['current_plan']) ? $billingInfo['current_plan']['name'] : 'Free Plan' }}</p>
                                <p class="text-sm text-gray-600">{{ isset($billingInfo['current_plan']) ? $billingInfo['current_plan']['description'] : 'Basic hosting features' }}</p>
                            </div>
                            <div>
                                @if(isset($billingInfo['current_plan']) && $billingInfo['current_plan']['price'] > 0)
                                    <p class="text-2xl font-bold text-gray-800">${{ number_format($billingInfo['current_plan']['price'], 2) }}<span class="text-sm text-gray-600">/month</span></p>
                                @else
                                    <p class="text-2xl font-bold text-gray-800">$0.00<span class="text-sm text-gray-600">/month</span></p>
                                @endif
                            </div>
                        </div>
                        <div class="mt-4">
                            <a href="{{ route('billing.plans') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Upgrade Plan
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Recent Invoices -->
                <div>
                    <h4 class="text-md font-medium text-gray-800 mb-2">Recent Invoices</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse(isset($billingInfo['recent_invoices']) ? $billingInfo['recent_invoices'] : [] as $invoice)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $invoice->invoice_number }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $invoice->created_at->format('M d, Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${{ number_format($invoice->amount, 2) }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $invoice->status == 'paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                                {{ ucfirst($invoice->status) }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <a href="{{ route('billing.invoice', $invoice->id) }}" class="text-indigo-600 hover:text-indigo-900">View</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">No invoices found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 text-right">
                        <a href="{{ route('billing.invoices') }}" class="text-sm text-indigo-600 hover:text-indigo-900">View all invoices →</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

        <!-- Recent Activity and Notifications -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <!-- Recent Activity -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Recent Activity</h3>
                    <div class="space-y-4">
                        @forelse($recentActivityLogs as $log)
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-gray-900">{{ $log->description }}</p>
                                    <p class="text-xs text-gray-500">{{ $log->created_at->diffForHumans() }}</p>
                                </div>
                            </div>
                        @empty
                            <p class="text-gray-500 text-sm">No recent activity found.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Notifications -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Notifications</h3>
                    <div class="space-y-4">
                        @forelse($notifications as $notification)
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-{{ $notification->type == 'alert' ? 'red' : 'blue' }}-100 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-{{ $notification->type == 'alert' ? 'red' : 'blue' }}-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0h-6" />