@extends('dashboard.layout')

@section('content')
<div class="flex flex-col h-full">

    <!-- My Services Section -->
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">My Services</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            <!-- Dashboard -->
            <a href="{{ route('dashboard_panel') }}" 
               class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                      hover:border-green-300 dark:hover:border-green-700 hover:shadow-md transition-all duration-300 group">
                <div class="flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-green-50 dark:bg-green-900/20 flex items-center justify-center mb-3 
                                group-hover:bg-green-100 dark:group-hover:bg-green-900/30 transition-colors duration-300">
                        <i class="fas fa-home text-xl text-green-500 dark:text-green-400"></i>
                    </div>
                    <span class="font-medium text-gray-900 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors duration-300">
                        Dashboard
                    </span>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Overview & Analytics
                    </p>
                </div>
            </a>

            <!-- Service Requests -->
            <a href="{{ route('dashboard.service.requests') }}" 
               class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                      hover:border-blue-300 dark:hover:border-blue-700 hover:shadow-md transition-all duration-300 group">
                <div class="flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center mb-3 
                                group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 transition-colors duration-300">
                        <i class="fas fa-handshake text-xl text-blue-500 dark:text-blue-400"></i>
                    </div>
                    <span class="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
                        Service Requests
                    </span>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Manage service requests
                    </p>
                </div>
            </a>

            <!-- Projects -->
            <a href="{{ route('dashboard.projects') }}" 
               class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                      hover:border-indigo-300 dark:hover:border-indigo-700 hover:shadow-md transition-all duration-300 group">
                <div class="flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center mb-3 
                                group-hover:bg-indigo-100 dark:group-hover:bg-indigo-900/30 transition-colors duration-300">
                        <i class="fas fa-project-diagram text-xl text-indigo-500 dark:text-indigo-400"></i>
                    </div>
                    <span class="font-medium text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors duration-300">
                        Projects
                    </span>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Active projects & tasks
                    </p>
                </div>
            </a>

            <!-- Invoices -->
            <a href="{{ route('dashboard.invoices') }}" 
               class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                      hover:border-yellow-300 dark:hover:border-yellow-700 hover:shadow-md transition-all duration-300 group">
                <div class="flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-yellow-50 dark:bg-yellow-900/20 flex items-center justify-center mb-3 
                                group-hover:bg-yellow-100 dark:group-hover:bg-yellow-900/30 transition-colors duration-300">
                        <i class="fas fa-file-invoice-dollar text-xl text-yellow-500 dark:text-yellow-400"></i>
                    </div>
                    <span class="font-medium text-gray-900 dark:text-white group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors duration-300">
                        Invoices
                    </span>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        View & manage invoices
                    </p>
                </div>
            </a>

            <!-- Transactions -->
            <a href="{{ route('dashboard.transactions') }}" 
               class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                      hover:border-purple-300 dark:hover:border-purple-700 hover:shadow-md transition-all duration-300 group">
                <div class="flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center mb-3 
                                group-hover:bg-purple-100 dark:group-hover:bg-purple-900/30 transition-colors duration-300">
                        <i class="fas fa-exchange-alt text-xl text-purple-500 dark:text-purple-400"></i>
                    </div>
                    <span class="font-medium text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
                        Transactions
                    </span>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Payment history
                    </p>
                </div>
            </a>
        </div>
    </div>

    <!-- Account Section -->
    <div>
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Account</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            <!-- Profile -->
            <a href="{{ route('dashboard.profile') }}" 
               class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                      hover:border-blue-300 dark:hover:border-blue-700 hover:shadow-md transition-all duration-300 group">
                <div class="flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center mb-3 
                                group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 transition-colors duration-300">
                        <i class="fas fa-user-circle text-xl text-blue-500 dark:text-blue-400"></i>
                    </div>
                    <span class="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
                        Profile
                    </span>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Account settings
                    </p>
                </div>
            </a>

            <!-- Logout -->
            <form method="POST" action="{{ route('logout') }}" class="contents">
                @csrf
                <button type="submit"
                        class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 
                               hover:border-red-300 dark:hover:border-red-700 hover:shadow-md transition-all duration-300 group w-full cursor-pointer">
                    <div class="flex flex-col items-center text-center">
                        <div class="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center mb-3 
                                    group-hover:bg-red-100 dark:group-hover:bg-red-900/30 transition-colors duration-300">
                            <i class="fas fa-sign-out-alt text-xl text-red-500 dark:text-red-400"></i>
                        </div>
                        <span class="font-medium text-gray-900 dark:text-white group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors duration-300">
                            Logout
                        </span>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            Sign out of your account
                        </p>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

<style>
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .dark .hover-lift:hover {
        box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    }
</style>
@endsection