@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Projects</h1>
                <p class="text-gray-500 dark:text-gray-400 mt-1">Manage and track all active projects</p>
               
            </div>
            
        </div>
    </div>

    <!-- 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 time 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 -->
    <div class="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">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h2 class="font-semibold text-gray-900 dark:text-white">Project List</h2>
                <div class="flex items-center gap-3">
                    <div class="relative">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="text" 
                               placeholder="Search projects..." 
                               class="pl-10 pr-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                      bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                      focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none
                                      transition-colors w-full sm:w-64">
                    </div>
                </div>
            </div>
        </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'] ?? 'N', 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">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.project.show.index', $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">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15 12H3m12 0l-4 4m4-4l-4-4m10 4a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        View
                                    </a>
                                </div>
                            </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-blue-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 mb-4">Get started by creating your first project</p>
                                    <button
                                            class="inline-flex items-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">
                                        <i class="fas fa-plus text-sm"></i>
                                        Create Project
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination (if needed) -->
        
        
    </div>
</div>

<style>
    .dark .bg-gray-700 {
        background-color: rgba(55, 65, 81, 0.5);
    }
    
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    
    thead th {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    tbody tr:last-child td {
        border-bottom: none;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Search functionality
        const searchInput = document.querySelector('input[type="text"]');
        if (searchInput) {
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                const rows = document.querySelectorAll('tbody tr');
                
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    if (text.includes(searchTerm)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        }
        
        // Animate progress bars on load
        const progressBars = document.querySelectorAll('.h-1\\.5 > div, .h-1 > div');
        progressBars.forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0';
            setTimeout(() => {
                bar.style.width = width;
            }, 300);
        });
    });
</script>
@endsection