@extends('layouts.app')

@section('title', 'Dashboard - Web Proxy Scanner')
@section('description', 'Access your proxy scanning tools, view recent scans, and manage your account settings from your personalized dashboard.')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg overflow-hidden shadow-xl sm:rounded-lg">
            <div class="p-6 lg:p-8">
                <div class="flex items-center">
                    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
                        Welcome back, {{ Auth::user()->name }}!
                    </h1>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    <!-- Quick Actions Card -->
                    <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Quick Actions</h2>
                        <div class="mt-4 space-y-4">
                            <a href="{{ route('proxies.index') }}" class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 100 8 4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
                                </svg>
                                <span>Scan Free Proxies</span>
                            </a>
                            <a href="{{ route('port-scanner.index') }}" class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 100 8 4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
                                </svg>
                                <span>Port Scanner</span>
                            </a>
                            <a href="{{ route('subscriptions.index') }}" class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 100 8 4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
                                </svg>
                                <span>Manage Subscription</span>
                            </a>
                        </div>
                    </div>

                    <!-- Recent Activity Card -->
                    <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Activity</h2>
                        <div class="mt-4 space-y-4">
                            <div class="text-sm text-gray-600 dark:text-gray-400">
                                <p>No recent activity to display.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Account Status Card -->
                    <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Account Status</h2>
                        <div class="mt-4 space-y-4">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-600 dark:text-gray-400">Subscription Status</span>
                                <span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-900 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-200">
                                    Free
                                </span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-600 dark:text-gray-400">Member Since</span>
                                <span class="text-sm text-gray-900 dark:text-white">{{ Auth::user()->created_at->format('M d, Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Getting Started Section -->
                <div class="mt-8">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Getting Started</h2>
                    <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-white">1. Scan Free Proxies</h3>
                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Start by scanning our list of free proxies to find available servers.</p>
                        </div>
                        <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-white">2. Use Port Scanner</h3>
                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Check port availability and status with our port scanning tool.</p>
                        </div>
                        <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-white">3. Upgrade Plan</h3>
                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Get access to premium features by upgrading your subscription.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection