<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurants - RestPO SuperAdmin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
    </style>
</head>
<body class="text-gray-800" x-data="{ sidebarOpen: true }">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <aside class="bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col transition-all duration-300" :class="{'w-64': sidebarOpen, 'w-20': !sidebarOpen}">
            <div class="h-16 flex items-center justify-center bg-gray-950">
                <span class="text-xl font-bold tracking-wider" x-show="sidebarOpen">RestPO Admin</span>
                <span class="text-xl font-bold tracking-wider" x-show="!sidebarOpen">RP</span>
            </div>
            <div class="flex-1 overflow-y-auto py-4">
                <nav class="space-y-1 px-2">
                    <a href="/restpo/dashboard" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md">
                        <i class="fas fa-home w-6 text-center text-lg mr-3"></i> <span x-show="sidebarOpen">Dashboard</span>
                    </a>
                    <a href="/restpo/superadmin/restaurants" class="bg-purple-600 text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md">
                        <i class="fas fa-store w-6 text-center text-lg mr-3"></i> <span x-show="sidebarOpen">Restaurants</span>
                    </a>
                    <a href="/restpo/superadmin/packages" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md">
                        <i class="fas fa-box w-6 text-center text-lg mr-3"></i> <span x-show="sidebarOpen">Packages</span>
                    </a>
                    <a href="/restpo/superadmin/coupons" class="text-gray-300 hover:bg-gray-800 hover:text-white group flex items-center px-2 py-3 text-sm font-medium rounded-md">
                        <i class="fas fa-ticket-alt w-6 text-center text-lg mr-3"></i> <span x-show="sidebarOpen">Coupons</span>
                    </a>
                </nav>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <header class="h-16 bg-white shadow-sm flex items-center justify-between px-6 z-10">
                <div class="flex items-center">
                    <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 hover:text-gray-700 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <h2 class="text-xl font-semibold text-gray-800 ml-4">Manage Restaurants</h2>
                </div>
                <div>
                    <a href="/restpo/logout" class="text-red-500 hover:text-red-700 font-medium">Logout</a>
                </div>
            </header>

            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-6">
                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-bold text-gray-800">Restaurants</h1>
                    <a href="/restpo/superadmin/restaurants/create" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg shadow transition">
                        <i class="fas fa-plus mr-2"></i> Add Restaurant
                    </a>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
                                <th class="px-6 py-4 font-medium">Name</th>
                                <th class="px-6 py-4 font-medium">Email / Phone</th>
                                <th class="px-6 py-4 font-medium">Status</th>
                                <th class="px-6 py-4 font-medium">Sub. Ends</th>
                                <th class="px-6 py-4 font-medium text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <?php foreach ($restaurants as $rest): ?>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 font-medium text-gray-900"><?php echo htmlspecialchars($rest['name']); ?></td>
                                <td class="px-6 py-4 text-sm text-gray-500">
                                    <?php echo htmlspecialchars($rest['email']); ?><br>
                                    <?php echo htmlspecialchars($rest['phone']); ?>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                        <?php echo htmlspecialchars($rest['status']); ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">
                                    <?php echo $rest['subscription_ends_at'] ? date('M d, Y', strtotime($rest['subscription_ends_at'])) : 'None'; ?>
                                </td>
                                <td class="px-6 py-4 text-right text-sm">
                                    <button class="text-purple-600 hover:text-purple-900 mr-3"><i class="fas fa-edit"></i></button>
                                    <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    </div>
</body>
</html>
