@extends('dashboard.layout')

@section('content')
<div class="flex flex-col h-full">
 <!-- Stats Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <!-- Total Projects -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Projects</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $projects->count() }}</p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
                    <i class="fas fa-layer-group text-blue-500 dark:text-blue-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                <p class="text-xs text-gray-500 dark:text-gray-400">All your projects</p>
            </div>
        </div>

        <!-- Active Projects -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Active</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ $projects->where('status', 'Active')->count() }}
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center">
                    <i class="fas fa-play-circle text-green-500 dark:text-green-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                @php
                    $activePercentage = $projects->count() > 0 ? ($projects->where('status', 'Active')->count() / $projects->count()) * 100 : 0;
                @endphp
                <div class="flex items-center gap-2">
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                        <div class="bg-green-500 h-1.5 rounded-full transition-all duration-300" 
                             style="width: {{ $activePercentage }}%"></div>
                    </div>
                    <span class="text-xs font-medium text-green-600 dark:text-green-400">{{ number_format($activePercentage, 0) }}%</span>
                </div>
            </div>
        </div>

        <!-- On Hold -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">On Hold</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ $projects->where('status', 'On Hold')->count() }}
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center">
                    <i class="fas fa-pause-circle text-orange-500 dark:text-orange-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Requires attention</span>
                </div>
            </div>
        </div>

        <!-- Completed -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Completed</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ $projects->where('status', 'Completed')->count() }}
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center">
                    <i class="fas fa-check-circle text-purple-500 dark:text-purple-400"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                @php
                    $completedPercentage = $projects->count() > 0 ? ($projects->where('status', 'Completed')->count() / $projects->count()) * 100 : 0;
                @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Success rate</span>
                    <span class="text-xs font-medium text-purple-600 dark:text-purple-400">{{ number_format($completedPercentage, 0) }}%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Projects Table (Desktop) -->
    <div class="hidden md:block bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
            <h2 class="font-semibold text-gray-900 dark:text-white">All Projects</h2>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Project
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Client
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Status
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Payment
                        </th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($projects as $project)
                        @php
                            $contactInfo = is_array($project->serviceRequest->contact_info)
                                ? $project->serviceRequest->contact_info
                                : json_decode($project->serviceRequest->contact_info, true) ?? [];
                        @endphp
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            <!-- Project Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-project-diagram text-white text-sm"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                            {{ $project->name ?? 'Unnamed Project' }}
                                        </p>
                                        <div class="flex items-center gap-2 mt-1">
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                ID: {{ $project->id }}
                                            </span>
                                            <span class="text-xs text-gray-400 dark:text-gray-500">•</span>
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $project->created_at->format('M d') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <!-- Client Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-xs">
                                        {{ strtoupper(substr($contactInfo['name'] ?? 'C', 0, 1)) }}
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                            {{ $contactInfo['name'] ?? ($project->user->name ?? 'N/A') }}
                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            {{ $contactInfo['company'] ?? 'No company' }}
                                        </p>
                                    </div>
                                </div>
                            </td>

                            <!-- Status Column -->
                            <td class="px-5 py-4">
                                @php
                                    $statusConfig = [
                                        'Active' => [
                                            'color' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                            'icon' => 'fa-play-circle',
                                            'border' => 'border border-green-200 dark:border-green-800'
                                        ],
                                        'On Hold' => [
                                            'color' => 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
                                            'icon' => 'fa-pause-circle',
                                            'border' => 'border border-orange-200 dark:border-orange-800'
                                        ],
                                        'Completed' => [
                                            'color' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                            'icon' => 'fa-check-circle',
                                            'border' => 'border border-blue-200 dark:border-blue-800'
                                        ]
                                    ];
                                    $config = $statusConfig[$project->status] ?? [
                                        'color' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
                                        'icon' => 'fa-question-circle',
                                        'border' => 'border border-gray-200 dark:border-gray-600'
                                    ];
                                @endphp
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium {{ $config['color'] }} {{ $config['border'] }}">
                                    <i class="fas {{ $config['icon'] }} text-xs"></i>
                                    {{ $project->status ?? 'Unknown' }}
                                </span>
                            </td>

                            <!-- Payment Column -->
                            <td class="px-5 py-4">
                                <div class="space-y-1">
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-gray-500 dark:text-gray-400">Paid</span>
                                        <span class="text-sm font-medium text-green-600 dark:text-green-400">
                                            {{ number_format($project->amount_paid ?? 0, 0) }} SR
                                        </span>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-gray-500 dark:text-gray-400">Total</span>
                                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ number_format($project->serviceRequest->total_price ?? 0, 0) }} SR
                                        </span>
                                    </div>
                                    @if(($project->amount_paid ?? 0) < ($project->serviceRequest->total_price ?? 0))
                                        <div class="mt-1">
                                            <div class="flex items-center justify-between text-xs mb-0.5">
                                                <span class="text-orange-600 dark:text-orange-400">Pending</span>
                                                <span class="font-medium text-orange-600 dark:text-orange-400">
                                                    {{ number_format(($project->serviceRequest->total_price ?? 0) - ($project->amount_paid ?? 0), 0) }} SR
                                                </span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1">
                                                @php
                                                    $totalPrice = $project->serviceRequest->total_price ?? 0;
                                                    $paidPercentage = $totalPrice > 0 ? (($project->amount_paid ?? 0) / $totalPrice) * 100 : 0;
                                                @endphp
                                                <div class="bg-gradient-to-r from-green-500 to-orange-500 h-1 rounded-full" 
                                                     style="width: {{ $paidPercentage }}%"></div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </td>

                            <!-- Actions Column -->
                            <td class="px-5 py-4">
                                <a href="{{ route('dashboard.project.show', $project->id) }}" 
                                   class="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-3 py-1.5 rounded-lg 
                                          hover:from-blue-600 hover:to-blue-700 active:scale-[0.97] transition-all shadow-sm hover:shadow text-sm">
                                    <i class="fas fa-eye text-xs"></i>
                                    View
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-5 py-12">
                                <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mb-4">
                                        <i class="fas fa-project-diagram text-white text-xl"></i>
                                    </div>
                                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400 mb-2">No projects found</p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500">Get started by requesting a service</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Projects Cards (Mobile) -->
    <div class="md:hidden space-y-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">All Projects</h2>
        
        @forelse($projects as $project)
            @php
                $contactInfo = is_array($project->serviceRequest->contact_info)
                    ? $project->serviceRequest->contact_info
                    : json_decode($project->serviceRequest->contact_info, true) ?? [];
                
                $statusConfig = [
                    'Active' => [
                        'color' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                        'icon' => 'fa-play-circle'
                    ],
                    'On Hold' => [
                        'color' => 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
                        'icon' => 'fa-pause-circle'
                    ],
                    'Completed' => [
                        'color' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                        'icon' => 'fa-check-circle'
                    ]
                ];
                $config = $statusConfig[$project->status] ?? [
                    'color' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
                    'icon' => 'fa-question-circle'
                ];
            @endphp
            
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-4 hover-lift">
                <!-- Header -->
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-project-diagram text-white text-sm"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                {{ $project->name ?? 'Unnamed Project' }}
                            </p>
                            <div class="flex items-center gap-2 mt-1">
                                <span class="text-xs text-gray-500 dark:text-gray-400">
                                    ID: {{ $project->id }}
                                </span>
                                <span class="text-xs text-gray-400 dark:text-gray-500">•</span>
                                <span class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $project->created_at->format('M d') }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium {{ $config['color'] }}">
                        <i class="fas {{ $config['icon'] }} text-xs"></i>
                        {{ $project->status ?? 'Unknown' }}
                    </span>
                </div>

                <!-- Client Info -->
                <div class="mb-3">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-xs">
                            {{ strtoupper(substr($contactInfo['name'] ?? 'C', 0, 1)) }}
                        </div>
                        <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Client</p>
                    </div>
                    <p class="text-sm text-gray-900 dark:text-white">{{ $contactInfo['name'] ?? ($project->user->name ?? 'N/A') }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $contactInfo['company'] ?? 'No company' }}</p>
                </div>

                <!-- Payment Info -->
                <div class="mb-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Amount Paid</span>
                        <span class="text-sm font-medium text-green-600 dark:text-green-400">
                            {{ number_format($project->amount_paid ?? 0, 0) }} SR
                        </span>
                    </div>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Total Amount</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ number_format($project->serviceRequest->total_price ?? 0, 0) }} SR
                        </span>
                    </div>
                    @if(($project->amount_paid ?? 0) < ($project->serviceRequest->total_price ?? 0))
                        <div class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs text-orange-600 dark:text-orange-400">Pending</span>
                                <span class="text-xs font-medium text-orange-600 dark:text-orange-400">
                                    {{ number_format(($project->serviceRequest->total_price ?? 0) - ($project->amount_paid ?? 0), 0) }} SR
                                </span>
                            </div>
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1">
                                @php
                                    $totalPrice = $project->serviceRequest->total_price ?? 0;
                                    $paidPercentage = $totalPrice > 0 ? (($project->amount_paid ?? 0) / $totalPrice) * 100 : 0;
                                @endphp
                                <div class="bg-gradient-to-r from-green-500 to-orange-500 h-1 rounded-full" 
                                     style="width: {{ $paidPercentage }}%"></div>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Action Button -->
                <a href="{{ route('dashboard.project.show', $project->id) }}" 
                   class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white 
                          px-4 py-2 rounded-lg hover:from-blue-600 hover:to-blue-700 active:scale-[0.98] transition-all shadow-sm hover:shadow text-sm">
                    <i class="fas fa-eye text-xs"></i>
                    View Details
                </a>
            </div>
        @empty
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-8 text-center">
                <div class="w-16 h-16 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mb-4 mx-auto">
                    <i class="fas fa-project-diagram text-white text-xl"></i>
                </div>
                <p class="text-lg font-medium text-gray-500 dark:text-gray-400 mb-2">No projects found</p>
                <p class="text-sm text-gray-400 dark:text-gray-500">Get started by requesting a service</p>
            </div>
        @endforelse
    </div>
</div>
@endsection