<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floors & Tables - RestPO Admin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }</style>
</head>
<body class="p-6">
    <div class="max-w-6xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">Floors & Tables Management</h1>
            <a href="/dashboard" class="text-gray-500 hover:text-gray-700">Back to Dashboard</a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Add Floor Form -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Add Floor</h3>
                <form action="/admin/floors/store" method="POST" class="flex gap-4">
                    <input type="text" name="name" required placeholder="Floor Name (e.g. Ground Floor)" class="flex-1 px-4 py-2 border rounded-lg outline-none focus:ring-2 focus:ring-purple-500">
                    <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg transition">Add</button>
                </form>

                <div class="mt-6 border-t pt-4">
                    <h4 class="font-medium text-gray-700 mb-2">Existing Floors</h4>
                    <ul class="space-y-2">
                        <?php foreach($floors as $floor): ?>
                        <li class="flex justify-between items-center bg-gray-50 px-4 py-2 rounded-lg border border-gray-100">
                            <span class="font-medium text-gray-800"><?php echo htmlspecialchars($floor['name']); ?></span>
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full"><?php echo $floor['status']; ?></span>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>

            <!-- Add Table Form -->
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Add Table</h3>
                <form action="/admin/tables/store" method="POST" class="space-y-4">
                    <div>
                        <select name="floor_id" required class="w-full px-4 py-2 border rounded-lg outline-none focus:ring-2 focus:ring-purple-500 bg-white">
                            <option value="">Select Floor</option>
                            <?php foreach($floors as $floor): ?>
                                <option value="<?php echo $floor['id']; ?>"><?php echo htmlspecialchars($floor['name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="flex gap-4">
                        <input type="text" name="name" required placeholder="Table Name (e.g. T1)" class="flex-1 px-4 py-2 border rounded-lg outline-none focus:ring-2 focus:ring-purple-500">
                        <input type="number" name="capacity" required placeholder="Capacity" class="w-32 px-4 py-2 border rounded-lg outline-none focus:ring-2 focus:ring-purple-500">
                    </div>
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg transition">Add Table</button>
                </form>
            </div>
        </div>

        <!-- Tables List -->
        <div class="mt-8 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800">All Tables</h3>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 p-6">
                <?php foreach($tables as $table): ?>
                <div class="border rounded-xl p-4 text-center bg-gray-50 hover:shadow-md transition">
                    <div class="text-gray-400 text-sm mb-1"><?php echo htmlspecialchars($table['floor_name']); ?></div>
                    <div class="text-2xl font-bold text-gray-800 mb-1"><?php echo htmlspecialchars($table['name']); ?></div>
                    <div class="text-xs text-gray-500 mb-2"><i class="fas fa-users mr-1"></i><?php echo $table['capacity']; ?> seats</div>
                    <span class="px-2 py-1 text-xs font-semibold rounded-full 
                        <?php echo $table['status'] == 'available' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>">
                        <?php echo ucfirst($table['status']); ?>
                    </span>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</body>
</html>
