<header>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</header>
<div class="p-4 md:p-8 bg-gray-50 min-h-screen rounded-xl">
    <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-8">
        <div>
            <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Dashboard</h1>
            <p class="text-sm text-gray-500 mt-1">Real-time delivery tracking and inquiry management.</p>
        </div>
        <div class="flex items-center gap-3">
            <div class="hidden md:flex bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200 text-sm font-semibold text-gray-700 items-center">
                <i class="bi bi-clock-history mr-2 text-blue-500"></i>
                Last updated: <?= date('H:i') ?>
            </div>
            <span class="bg-blue-600 px-4 py-2 rounded-xl shadow-md shadow-blue-200 text-sm font-bold text-white flex items-center">
                <i class="bi bi-calendar3 mr-2"></i><?= date('d M, Y') ?>
            </span>
        </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex justify-between items-start">
                <div class="p-3 bg-blue-50 text-blue-600 rounded-2xl">
                    <i class="bi bi-box-seam text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-sm font-medium text-gray-500">Active Shipments</p>
                <h3 class="text-3xl font-black text-gray-900 mt-1"><?= number_format($totalActive) ?></h3>
            </div>
        </div>
        <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex justify-between items-start">
                <div class="p-3 bg-orange-50 text-orange-600 rounded-2xl">
                    <i class="bi bi-person-badge text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-sm font-medium text-gray-500">Pending Dispatch</p>
                <h3 class="text-3xl font-black text-gray-900 mt-1"><?= number_format($pendingDispatch) ?></h3>
            </div>
            <p class="mt-2 text-xs text-orange-500 font-medium">Requires courier assignment</p>
        </div>
        <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex justify-between items-start">
                <div class="p-3 bg-red-50 text-red-600 rounded-2xl animate-pulse">
                    <i class="bi bi-clock-history text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-sm font-medium text-gray-500">Urgent Deadlines</p>
                <h3 class="text-3xl font-black text-red-600 mt-1"><?= number_format($urgentOrders) ?></h3>
            </div>
            <p class="mt-2 text-xs text-red-400 italic">Expiring within 24h</p>
        </div>
        <a href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'Contact', 'action' => 'allMessages']) ?>"
           class="group bg-white p-6 rounded-3xl shadow-sm border border-gray-100 hover:border-blue-300 hover:shadow-lg transition-all relative overflow-hidden">
            <div class="flex justify-between items-start relative z-10">
                <div class="p-3 bg-yellow-50 text-yellow-600 rounded-2xl group-hover:bg-yellow-100">
                    <i class="bi bi-chat-left-dots text-2xl"></i>
                </div>
                <?php if ($unreadMessagesCount > 0): ?>
                    <span class="flex h-3 w-3 relative">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                    </span>
                <?php endif; ?>
            </div>
            <div class="mt-4 relative z-10">
                <p class="text-sm font-medium text-gray-500">Unread Inquiries</p>
                <h3 class="text-3xl font-black text-gray-900 mt-1"><?= number_format($unreadMessagesCount) ?></h3>
            </div>
            <div class="mt-2 text-xs text-blue-600 font-bold group-hover:translate-x-1 transition-transform inline-flex items-center">
                Open Mailbox <i class="bi bi-chevron-right ml-1"></i>
            </div>
            <div class="absolute -right-4 -bottom-4 text-gray-50 group-hover:text-blue-50 transition-colors">
                <i class="bi bi-envelope-fill text-8xl"></i>
            </div>
        </a>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">
            <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-white">
                <h3 class="font-bold text-gray-900 text-lg">Recent Bookings</h3>
                <a href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'index']) ?>" class="text-xs font-bold text-blue-600 px-3 py-1.5 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">View Detailed Report</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left min-w-[700px]">
                    <thead class="bg-gray-50/50 text-[11px] uppercase tracking-widest font-bold text-gray-400">
                    <tr>
                        <th class="px-6 py-4">Ref No.</th>
                        <th class="px-6 py-4">Client / Shipper</th>
                        <th class="px-6 py-4">Method</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4 text-right">Date Created</th>
                    </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-gray-50">
                    <?php if (empty($recentBookings)): ?>
                        <tr><td colspan="5" class="px-6 py-10 text-center text-gray-400 italic">No recent bookings found.</td></tr>
                    <?php else: ?>
                        <?php foreach ($recentBookings as $booking): ?>
                            <tr class="hover:bg-blue-50/50 transition-all duration-200 group cursor-pointer relative">
                                <td class="px-6 py-4">
                                    <a href="<?= $this->Url->build(['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'view', $booking->id]) ?>"
                                       class="font-bold text-blue-600 hover:text-blue-800 hover:underline after:absolute after:inset-0 after:z-10">
                                        #<?= h($booking->booking_reference) ?>
                                    </a>
                                </td>
                                <td class="px-6 py-4 font-semibold text-gray-800">
                                    <?= h($booking->shipper_name) ?>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center text-gray-600 capitalize">
                                        <i class="bi bi-<?= match($booking->mode_of_transport) { 'air'=>'airplane', 'sea'=>'ship', default=>'truck' } ?> mr-2"></i>
                                        <?= h($booking->mode_of_transport) ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <?php
                                    $statusConfig = match($booking->status) {
                                        'Delivered' => ['bg' => 'bg-emerald-100', 'text' => 'text-emerald-700', 'dot' => 'bg-emerald-500'],
                                        'Pending' => ['bg' => 'bg-amber-100', 'text' => 'text-amber-700', 'dot' => 'bg-amber-500'],
                                        'In Transit' => ['bg' => 'bg-sky-100', 'text' => 'text-sky-700', 'dot' => 'bg-sky-500'],
                                        default => ['bg' => 'bg-slate-100', 'text' => 'text-slate-700', 'dot' => 'bg-slate-400']
                                    };
                                    ?>
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold <?= $statusConfig['bg'] ?> <?= $statusConfig['text'] ?> relative z-20">
                                        <span class="w-1.5 h-1.5 rounded-full mr-1.5 <?= $statusConfig['dot'] ?>"></span>
                                        <?= h($booking->status) ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right text-gray-400 font-medium">
                                    <?= $booking->created->format('d M, H:i') ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="space-y-8">
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                <h3 class="font-bold text-gray-900 text-lg mb-6 flex items-center">
                    <i class="bi bi-pie-chart mr-2 text-indigo-500"></i> Analytics
                </h3>
                <div class="space-y-5">
                    <?php foreach ($modeData as $data): ?>
                        <div>
                            <div class="flex justify-between text-xs font-bold mb-2">
                                <span class="text-gray-500 uppercase tracking-wide"><?= h($data->mode) ?></span>
                                <span class="text-gray-900"><?= $data->count ?> units</span>
                            </div>
                            <div class="w-full bg-gray-100 rounded-full h-2">
                                <?php $percent = ($totalActive > 0) ? ($data->count / $totalActive) * 100 : 0; ?>
                                <div class="bg-indigo-500 h-2 rounded-full shadow-sm shadow-indigo-200" style="width: <?= min(100, $percent) ?>%"></div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                <h3 class="font-bold text-gray-900 text-lg mb-4 flex items-center">
                    <i class="bi bi-lightning-charge mr-2 text-yellow-500"></i> New Inquiries
                </h3>
                <div class="space-y-3">
                    <?php if ($latestUnreadMessages->isEmpty()): ?>
                        <div class="text-center py-6">
                            <i class="bi bi-check2-all text-4xl text-green-200"></i>
                            <p class="text-xs text-gray-400 mt-2">All caught up!</p>
                        </div>
                    <?php else: ?>
                        <?php foreach ($latestUnreadMessages as $msg): ?>
                            <a href="<?= $this->Url->build(['prefix' => false, 'controller' => 'Contact', 'action' => 'all_messages']) ?>"
                               class="flex items-center space-x-4 p-3 rounded-2xl hover:bg-gray-50 border border-transparent hover:border-gray-100 transition-all cursor-pointer group block">
                                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-black text-sm shrink-0 shadow-lg shadow-indigo-100">
                                    <?= strtoupper(substr($msg->first_name, 0, 1)) ?>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-bold text-gray-900 truncate"><?= h($msg->first_name) ?></p>
                                    <p class="text-xs text-gray-500 truncate mt-0.5"><?= h($msg->message) ?></p>
                                </div>
                                <i class="bi bi-chevron-right text-gray-300 group-hover:text-indigo-500 transition-colors"></i>
                            </a>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>
