<?php
include 'includes/auth.php';
include 'db.php';
include 'includes/header.php';
$username = $_SESSION['username'] ?? 'Guest';
?>

<style>
.kitchen-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fdfdfd;
    transition: 0.2s;
}
.kitchen-card:hover { box-shadow: 0px 3px 8px rgba(0,0,0,0.2); }
.kitchen-title { font-weight: bold; font-size: 1.1rem; }
.kitchen-subtitle { font-size: 0.9rem; color: #555; }
.kitchen-actions { margin-top: 10px; }
</style>

<div class="container mt-4">
     <div class="welcome-msg">
        <i class="fa fa-user-circle"></i> Welcome, <strong><?= htmlspecialchars($_SESSION['username'] ?? 'Guest') ?></strong>!
    </div>
      <button class="btn btn-secondary btn-custom" onclick="history.back()">
    <i class="fa fa-arrow-left"></i> Back
</button>
    <div class="welcome-msg">
        <i class="fa fa-user-circle"></i> Welcome, <strong><?= htmlspecialchars($username) ?></strong>!
    </div>
   
      
    <h3 class="text-center mb-4">👨‍🍳 Orders</h3>



    <!-- Restaurant Orders -->
    <h4>Restaurant Orders</h4>
    <div id="restaurant-orders">
        <!-- Orders will load here via AJAX -->
    </div>

    <hr>

    <!-- Room Check-ins for Breakfast -->
    <h4>Room Check-ins for Breakfast Preparation</h4>
    <div id="breakfast-checkins">
        <!-- Breakfast check-ins will load here via AJAX -->
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function loadKitchenData() {
    // Load restaurant orders
    $.get('kitchen_live_data.php?type=restaurant_orders', function(data){
        $('#restaurant-orders').html(data);
    });

    // Load breakfast check-ins
    $.get('kitchen_live_data.php?type=breakfast_checkins', function(data){
        $('#breakfast-checkins').html(data);
    });
}

// Initial load
loadKitchenData();

// Refresh every 10 seconds
setInterval(loadKitchenData, 10000);
</script>

<?php include 'includes/footer.php'; ?>
