

<?php $__env->startSection('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"><?php echo e($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">
                        <?php echo e($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;
                ?>
                <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: <?php echo e($activePercentage); ?>%"></div>
                    </div>
                    <span class="text-xs font-medium text-green-600 dark:text-green-400"><?php echo e(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">
                        <?php echo e($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">
                        <?php echo e($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;
                ?>
                <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"><?php echo e(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">
                    <?php $__empty_1 = true; $__currentLoopData = $projects; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $project): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $contactInfo = is_array($project->serviceRequest->contact_info)
                                ? $project->serviceRequest->contact_info
                                : json_decode($project->serviceRequest->contact_info, true) ?? [];
                        ?>
                        <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">
                                            <?php echo e($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: <?php echo e($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">
                                                <?php echo e($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">
                                        <?php echo e(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">
                                            <?php echo e($contactInfo['name'] ?? ($project->user->name ?? 'N/A')); ?>

                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            <?php echo e($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'
                                    ];
                                ?>
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium <?php echo e($config['color']); ?> <?php echo e($config['border']); ?>">
                                    <i class="fas <?php echo e($config['icon']); ?> text-xs"></i>
                                    <?php echo e($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">
                                            <?php echo e(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">
                                            <?php echo e(number_format($project->serviceRequest->total_price ?? 0, 0)); ?> SR
                                        </span>
                                    </div>
                                    <?php 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">
                                                    <?php echo e(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;
                                                ?>
                                                <div class="bg-gradient-to-r from-green-500 to-orange-500 h-1 rounded-full" 
                                                     style="width: <?php echo e($paidPercentage); ?>%"></div>
                                            </div>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </td>

                            <!-- Actions Column -->
                            <td class="px-5 py-4">
                                <a href="<?php echo e(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>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <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>
                    <?php endif; ?>
                </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>
        
        <?php $__empty_1 = true; $__currentLoopData = $projects; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $project): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?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'
                ];
            ?>
            
            <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">
                                <?php echo e($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: <?php echo e($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">
                                    <?php echo e($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 <?php echo e($config['color']); ?>">
                        <i class="fas <?php echo e($config['icon']); ?> text-xs"></i>
                        <?php echo e($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">
                            <?php echo e(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"><?php echo e($contactInfo['name'] ?? ($project->user->name ?? 'N/A')); ?></p>
                    <p class="text-xs text-gray-500 dark:text-gray-400"><?php echo e($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">
                            <?php echo e(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">
                            <?php echo e(number_format($project->serviceRequest->total_price ?? 0, 0)); ?> SR
                        </span>
                    </div>
                    <?php 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">
                                    <?php echo e(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;
                                ?>
                                <div class="bg-gradient-to-r from-green-500 to-orange-500 h-1 rounded-full" 
                                     style="width: <?php echo e($paidPercentage); ?>%"></div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Action Button -->
                <a href="<?php echo e(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>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <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>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('dashboard.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\crm_new\resources\views/dashboard/projects/index.blade.php ENDPATH**/ ?>