@extends('dashboard.layout')

@section('content')
    <div class="p-3">
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Service Requests -->
            <div class="stat-card p-6 hover-lift">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Service Requests</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2">{{ $serviceRequestsCount }}</h3>
                    </div>
                    <div class="p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20">
                        <i class="fas fa-clipboard-list text-[#058760] text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex items-center text-sm text-green-500">
                        <i class="fas fa-list mr-1"></i>
                        <span>Total requests</span>
                    </div>
                </div>
            </div>

            <!-- Active Projects -->
            <div class="stat-card p-6 hover-lift">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Projects</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2">{{ $projectsCount }}</h3>
                    </div>
                    <div class="p-3 rounded-xl bg-green-50 dark:bg-green-900/20">
                        <i class="fas fa-project-diagram text-green-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex items-center text-sm text-green-500">
                        <i class="fas fa-play-circle mr-1"></i>
                        <span>In progress</span>
                    </div>
                </div>
            </div>

            <!-- Invoices -->
            <div class="stat-card p-6 hover-lift">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Invoices</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2">{{ $invoicesCount }}</h3>
                    </div>
                    <div class="p-3 rounded-xl bg-purple-50 dark:bg-purple-900/20">
                        <i class="fas fa-file-invoice-dollar text-purple-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex items-center text-sm text-purple-500">
                        <i class="fas fa-file-alt mr-1"></i>
                        <span>All invoices</span>
                    </div>
                </div>
            </div>

            <!-- Transactions -->
            <div class="stat-card p-6 hover-lift">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Transactions</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2">{{ $transactionsCount }}</h3>
                    </div>
                    <div class="p-3 rounded-xl bg-orange-50 dark:bg-orange-900/20">
                        <i class="fas fa-exchange-alt text-orange-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex items-center text-sm text-orange-500">
                        <i class="fas fa-receipt mr-1"></i>
                        <span>Payment history</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Column -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Recent Service Requests -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                        <h2 class="section-header text-xl font-bold text-gray-800 dark:text-white">Recent Service Requests</h2>
                        <a href="{{ route('dashboard.service.requests') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                            View All
                        </a>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse(auth()->user()->serviceRequests()->latest()->take(3)->get() as $request)
                        <div class="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="font-semibold text-gray-800 dark:text-white">
                                        {{ $request->businessType->name ?? 'Service Request' }}
                                    </h3>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                        Submitted on {{ $request->created_at->format('M j, Y') }}
                                    </p>
                                </div>
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                        'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                        'approved' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                        'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                                    ];
                                    $statusLabels = [
                                        'pending' => 'Pending',
                                        'in_progress' => 'In Progress',
                                        'approved' => 'Completed',
                                        'cancelled' => 'Cancelled'
                                    ];
                                @endphp
                                <span class="px-3 py-1 rounded-full text-xs font-medium {{ $statusColors[$request->status] }}">
                                    {{ $statusLabels[$request->status] }}
                                </span>
                            </div>
                            <div class="mt-4">
                                <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-tag mr-2"></i>
                                    <span>Amount: {{ number_format($request->total_price, 2) }} SR</span>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="p-6 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-clipboard-list text-3xl mb-3 opacity-50"></i>
                            <p>No service requests found</p>
                        </div>
                        @endforelse
                    </div>
                </div>

                <!-- Active Projects -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                        <h2 class="section-header text-xl font-bold text-gray-800 dark:text-white">Active Projects</h2>
                        <a href="{{ route('dashboard.projects') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                            View All
                        </a>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse(auth()->user()->projects()->latest()->take(2)->get() as $project)
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-semibold text-gray-800 dark:text-white">{{ $project->project_name }}</h3>
                                @php
                                    $progressPercentage = $project->total_amount > 0 ? ($project->paid_amount / $project->total_amount) * 100 : 0;
                                @endphp
                                <span class="text-sm font-medium text-[#058760] dark:text-primary-400">
                                    {{ number_format($progressPercentage, 0) }}%
                                </span>
                            </div>
                            <div class="progress-bar mb-4">
                                <div class="progress-fill" style="width: {{ $progressPercentage }}%"></div>
                            </div>
                            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                                <span>Started: {{ $project->start_date?->format('M j, Y') ?? 'N/A' }}</span>
                                <span>Due: {{ $project->deadline?->format('M j, Y') ?? 'N/A' }}</span>
                            </div>
                            <div class="mt-2 flex items-center justify-between text-sm">
                                <span class="text-gray-500 dark:text-gray-400">
                                    Paid: {{ number_format($project->paid_amount, 2) }} SR
                                </span>
                                <span class="text-gray-500 dark:text-gray-400">
                                    Due: {{ number_format($project->due_amount, 2) }} SR
                                </span>
                            </div>
                        </div>
                        @empty
                        <div class="p-6 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-project-diagram text-3xl mb-3 opacity-50"></i>
                            <p>No active projects</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="space-y-8">
                <!-- Recent Invoices -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                        <h2 class="section-header text-xl font-bold text-gray-800 dark:text-white">Recent Invoices</h2>
                        <a href="{{ route('dashboard.invoices') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                            View All
                        </a>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse(auth()->user()->invoices()->latest()->take(2)->get() as $invoice)
                        <div class="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-800 dark:text-white">{{ $invoice->invoice_number }}</h3>
                                <span class="text-lg font-bold text-gray-800 dark:text-white">
                                    {{ number_format($invoice->amount, 2) }} SR
                                </span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500 dark:text-gray-400">
                                    {{ $invoice->project->project_name ?? 'General Invoice' }}
                                </span>
                                @php
                                    $invoiceStatusColors = [
                                        'paid' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                        'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                        'overdue' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
                                    ];
                                @endphp
                                <span class="px-2 py-1 rounded-full text-xs font-medium {{ $invoiceStatusColors[$invoice->status] }}">
                                    {{ ucfirst($invoice->status) }}
                                </span>
                            </div>
                            @if($invoice->due_date)
                            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                Due: {{ $invoice->due_date->format('M j, Y') }}
                            </div>
                            @endif
                        </div>
                        @empty
                        <div class="p-6 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-file-invoice text-3xl mb-3 opacity-50"></i>
                            <p>No invoices found</p>
                        </div>
                        @endforelse
                    </div>
                </div>

                <!-- Recent Transactions -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                        <h2 class="section-header text-xl font-bold text-gray-800 dark:text-white">Recent Transactions</h2>
                        <a href="{{ route('dashboard.transactions') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                            View All
                        </a>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse(auth()->user()->transactions()->latest()->take(3)->get() as $transaction)
                        <div class="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center justify-between mb-1">
                                        <h3 class="font-semibold text-gray-800 dark:text-white">
                                            {{ $transaction->transaction_id ?? 'N/A' }}
                                        </h3>
                                        <span class="text-sm font-bold text-green-600 dark:text-green-400">
                                            {{ number_format($transaction->amount, 2) }} SR
                                        </span>
                                    </div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">
                                        {{ ucfirst(str_replace('_', ' ', $transaction->payment_method)) }}
                                    </p>
                                    <div class="mt-2 flex items-center text-xs text-gray-500 dark:text-gray-400">
                                        <i class="fas fa-calendar mr-1"></i>
                                        <span>{{ $transaction->payment_date }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="p-6 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-exchange-alt text-3xl mb-3 opacity-50"></i>
                            <p>No transactions found</p>
                        </div>
                        @endforelse
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="section-header text-xl font-bold text-gray-800 dark:text-white">Quick Actions</h2>
                    </div>
                    <div class="p-6 grid grid-cols-2 gap-4">
                       
                        <a href="{{ route('dashboard.invoices') }}" 
                           class="flex flex-col items-center justify-center p-4 rounded-2xl bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors duration-200">
                            <i class="fas fa-file-invoice text-xl mb-2"></i>
                            <span class="text-sm font-medium">Pay Invoice</span>
                        </a>
                        <a href="{{ route('dashboard.projects') }}" 
                           class="flex flex-col items-center justify-center p-4 rounded-2xl bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors duration-200">
                            <i class="fas fa-project-diagram text-xl mb-2"></i>
                            <span class="text-sm font-medium">Projects</span>
                        </a>
                        <a href="{{ route('dashboard.profile') }}" 
                           class="flex flex-col items-center justify-center p-4 rounded-2xl bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-900/30 transition-colors duration-200">
                            <i class="fas fa-user-cog text-xl mb-2"></i>
                            <span class="text-sm font-medium">Profile</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .stat-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        .dark .stat-card {
            background: #1f2937;
            border-color: #374151;
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background-color: #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
        }

        .dark .progress-bar {
            background-color: #374151;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .hover-lift {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hover-lift:hover {
            transform: translateY(-2px);
        }
    </style>
@endsection