<?php
require_once __DIR__ . '/includes/header.php';
?>
<div class="kds-wrapper" id="kds-wrapper">
    <div id="new-order-banner" class="kds-new-order-banner"></div>

    <div class="kds-topbar">
        <div class="kds-logo">
            <i class="fas fa-fire"></i>
            <span><?php echo sanitize($restaurantName); ?></span> Kitchen
        </div>

        <div class="kds-topbar-center">
            <span class="kds-order-count" id="total-orders-count">0 orders</span>
            <div class="kds-clock" id="kds-clock">00:00:00</div>
        </div>

        <div class="kds-topbar-actions">
            <button class="kds-btn" id="refresh-btn" title="Refresh">
                <i class="fas fa-sync-alt"></i>
            </button>
            <button class="kds-btn" id="fullscreen-btn" title="Fullscreen">
                <i class="fas fa-expand"></i>
            </button>
        </div>
    </div>

    <div class="kds-filter-bar">
        <button class="filter-btn active" data-filter="all">All</button>
        <button class="filter-btn" data-filter="dine_in">
            <i class="fas fa-utensils"></i> Dine-In
        </button>
        <button class="filter-btn" data-filter="takeaway">
            <i class="fas fa-shopping-bag"></i> Takeaway
        </button>
        <button class="filter-btn" data-filter="delivery">
            <i class="fas fa-motorcycle"></i> Delivery
        </button>
        <div style="flex:1;"></div>
        <label style="display:flex;align-items:center;gap:6px;color:var(--kds-text-muted);font-size:0.85rem;cursor:pointer;">
            <input type="checkbox" id="sound-toggle" checked style="accent-color:var(--kds-new);width:16px;height:16px;">
            <i class="fas fa-volume-up"></i> Sound
        </label>
    </div>

    <div class="kds-board">
        <div class="kds-column col-new">
            <div class="kds-column-header">
                <span><i class="fas fa-bell"></i> New</span>
                <span class="column-count" id="count-new">0</span>
            </div>
            <div class="kds-column-body" id="col-new"></div>
        </div>

        <div class="kds-column col-preparing">
            <div class="kds-column-header">
                <span><i class="fas fa-fire"></i> Preparing</span>
                <span class="column-count" id="count-preparing">0</span>
            </div>
            <div class="kds-column-body" id="col-preparing"></div>
        </div>

        <div class="kds-column col-ready">
            <div class="kds-column-header">
                <span><i class="fas fa-check-circle"></i> Ready</span>
                <span class="column-count" id="count-ready">0</span>
            </div>
            <div class="kds-column-body" id="col-ready"></div>
        </div>
    </div>
</div>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
