<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>
<script>
    const firebaseConfig = {
        apiKey: "ISI_API_KEY_MU",
        authDomain: "PROJECT_ID.firebaseapp.com",
        databaseURL: "https://PROJECT_ID.firebaseio.com",
        projectId: "PROJECT_ID",
        storageBucket: "PROJECT_ID.appspot.com",
        messagingSenderId: "....",
        appId: "...."
    };

    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();

    // Ambil data dari root Firebase
    db.ref('/').on('value', (snapshot) => {
        const data = snapshot.val();
        renderTables(data);
    });

    function renderTables(data) {
        const tableBody = document.getElementById('firebase-table-body');
        tableBody.innerHTML = ''; // kosongkan isi lama

        for (const key in data) {
            const table = data[key];
            const row = document.createElement('tr');

            row.innerHTML = `
                <td class="p-2 border">${key}</td>
                <td class="p-2 border">${table.reserved_by || 'N/A'}</td>
                <td class="p-2 border">${table.table_occupied ? 'Terisi' : 'Kosong'}</td>
                <td class="p-2 border">${table.sensors?.table_activation_sensor_active ? 'Aktif' : 'Tidak'}</td>
                <td class="p-2 border">${table.time_remaining_minutes ?? 0} menit</td>
                <td class="p-2 border">
                    <button class="bg-red-600 text-white px-2 py-1 text-xs rounded hover:bg-red-700"
                        onclick="clearTable('${key}')">
                        Kosongkan
                    </button>
                </td>
            `;
            tableBody.appendChild(row);
        }
    }

    function clearTable(tableId) {
        db.ref(`/${tableId}`).update({
            reserved_by: 'N/A',
            table_occupied: 0,
            sensors: {
                table_activation_sensor_active: 0
            }
        }).then(() => {
            alert(`Meja ${tableId} berhasil dikosongkan`);
        }).catch((error) => {
            alert('Gagal kosongkan meja: ' + error.message);
        });
    }
</script>
<div class="p-4">
    <h2 class="text-xl font-bold mb-4">Status Meja dari Firebase (Realtime)</h2>
    <table class="table-auto w-full border text-sm">
        <thead class="bg-gray-200">
            <tr>
                <th class="p-2 border">ID Meja</th>
                <th class="p-2 border">Nama Pemesan</th>
                <th class="p-2 border">Status</th>
                <th class="p-2 border">Sensor Aktif</th>
                <th class="p-2 border">Sisa Waktu</th>
                <th class="p-2 border">Aksi</th>
            </tr>
        </thead>
        <tbody id="firebase-table-body">
            <tr>
                <td colspan="6" class="text-center text-gray-500 p-4">Memuat data meja...</td>
            </tr>
        </tbody>
    </table>
</div>
