<?php $__env->startSection('page-title', 'Dashboard'); ?>

<?php $__env->startSection('header-actions'); ?>
    <!-- Date Filter -->
    <form action="<?php echo e(route('dashboard')); ?>" method="GET" class="flex items-center gap-2">
        <div class="hidden md:flex items-center gap-2">
            <input type="date" name="start_date" value="<?php echo e($startDate); ?>" 
                class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-9">
            <span class="text-gray-500 text-sm">to</span>
            <input type="date" name="end_date" value="<?php echo e($endDate); ?>" 
                class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-9">
            <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition h-9">
                Filter
            </button>
        </div>
        
        <!-- Mobile Filter Button -->
        <div x-data="{ open: false }" class="md:hidden relative">
            <button @click="open = !open" type="button" class="p-2 text-gray-600 hover:text-indigo-600">
                <i class="fas fa-calendar-alt text-xl"></i>
            </button>
            
            <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-xl border border-gray-100 p-4 z-50">
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Start Date</label>
                        <input type="date" name="start_date" value="<?php echo e($startDate); ?>" 
                            class="w-full text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">End Date</label>
                        <input type="date" name="end_date" value="<?php echo e($endDate); ?>" 
                            class="w-full text-sm border-gray-300 rounded-md">
                    </div>
                    <button type="submit" class="w-full py-2 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700">
                        Apply Filter
                    </button>
                </div>
            </div>
        </div>
    </form>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <div> <!-- Removed manual padding as layout handles it -->
        <!-- Key Metrics Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-8">
            <!-- Total Bookings -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-blue-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4">
                        <i class="fas fa-box fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Bookings</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800"><?php echo e(number_format($totalBookings)); ?></p>
                    </div>
                </div>
            </div>

            <!-- Total Income -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-green-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4">
                        <i class="fas fa-money-bill-wave fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Revenue</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">Rs. <?php echo e(number_format($totalIncome)); ?></p>
                    </div>
                </div>
            </div>

            <!-- Total Due -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-red-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-red-100 text-red-500 mr-4">
                        <i class="fas fa-exclamation-circle fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Outstanding Due</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">Rs. <?php echo e(number_format($totalDue)); ?></p>
                    </div>
                </div>
            </div>

            <!-- Total Weight -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-purple-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-4">
                        <i class="fas fa-weight-hanging fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Weight</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800"><?php echo e(number_format($totalWeight, 2)); ?> <span class="text-sm font-normal text-gray-500">kg</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status & Volume Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- Status Breakdown -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-6 lg:col-span-1">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Shipment Status</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-yellow-400 mr-2"></span>
                            <span class="text-gray-600">Pending</span>
                        </div>
                        <span class="font-semibold bg-yellow-100 text-yellow-800 py-1 px-3 rounded-full text-xs"><?php echo e($pendingShipments); ?></span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-blue-400 mr-2"></span>
                            <span class="text-gray-600">In Transit</span>
                        </div>
                        <span class="font-semibold bg-blue-100 text-blue-800 py-1 px-3 rounded-full text-xs"><?php echo e($inTransitShipments); ?></span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-green-400 mr-2"></span>
                            <span class="text-gray-600">Delivered</span>
                        </div>
                        <span class="font-semibold bg-green-100 text-green-800 py-1 px-3 rounded-full text-xs"><?php echo e($deliveredShipments); ?></span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-red-400 mr-2"></span>
                            <span class="text-gray-600">Damaged</span>
                        </div>
                        <span class="font-semibold bg-red-100 text-red-800 py-1 px-3 rounded-full text-xs"><?php echo e($damagedShipments); ?></span>
                    </div>
                </div>
            </div>

            <!-- Recent Bookings -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-6 lg:col-span-2">
                <div class="flex justify-between items-center mb-4 border-b pb-2">
                    <h3 class="text-lg font-semibold text-gray-800">Recent Bookings</h3>
                    <a href="<?php echo e(route('bookings.index')); ?>" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CNTR</th>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-3 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <?php $__empty_1 = true; $__currentLoopData = $recentBookings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $booking): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr>
                                <td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                    <?php echo e($booking->cntr_no); ?>

                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">
                                    <?php echo e($booking->customer->name ?? 'N/A'); ?>

                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">
                                    <?php echo e($booking->booking_date->format('M d')); ?>

                                </td>
                                <td class="px-3 py-3 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        <?php echo e($booking->status === 'Delivered' ? 'bg-green-100 text-green-800' : 
                                           ($booking->status === 'Pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800')); ?>">
                                        <?php echo e($booking->status); ?>

                                    </span>
                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-sm text-right font-medium">
                                    <?php echo e(number_format($booking->total_amount)); ?>

                                </td>
                            </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="5" class="px-3 py-4 text-center text-sm text-gray-500">
                                    No recent bookings found.
                                </td>
                            </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\al-wasi\Downloads\cargomanagement-system\cargo-management-system\resources\views/dashboard.blade.php ENDPATH**/ ?>