<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>

<div id="ros-kitchen-app" class="ros-wrap ros-kitchen">

  <div class="ros-k-topbar">
    <div class="ros-k-topbar-left">
      <div class="ros-k-logo" id="ros-kitchen-logo">🍳</div>
      <div class="ros-k-brand">
        <span class="ros-k-brand-name" id="ros-k-restaurant-name">Kitchen Display</span>
        <span class="ros-k-brand-sub">Keuken Scherm</span>
      </div>
    </div>
    <div class="ros-k-topbar-right">
      <div class="ros-k-stats">
        <div class="ros-k-stat">
          <span class="ros-k-stat-num" id="ros-k-active-count">0</span>
          <span class="ros-k-stat-label">Actief</span>
        </div>
        <div class="ros-k-stat-divider"></div>
        <div class="ros-k-stat">
          <span class="ros-k-stat-num ros-k-stat-ready" id="ros-k-ready-count">0</span>
          <span class="ros-k-stat-label">Klaar</span>
        </div>
      </div>
      <div class="ros-k-clock" id="ros-kitchen-clock">00:00:00</div>
    </div>
  </div>

  <!-- Navigation tabs — full inline styles, no CSS dependency -->
  <div id="ros-k-tabs-bar" style="display:flex;flex-direction:row;background:#1C1C1C;border-bottom:2px solid rgba(201,169,110,0.2);padding:0 16px;margin:0;">
    <div id="ros-k-tab-tables"    class="ros-k-itab ros-k-itab-active" role="button" tabindex="0">🪑 Tafels</div>
    <div id="ros-k-tab-reserv"    class="ros-k-itab" role="button" tabindex="0">📅 Reserveringen</div>
    <div id="ros-k-tab-receipts"  class="ros-k-itab" role="button" tabindex="0">🧾 Bonnen</div>
  </div>

  <!-- ══ TABLE OVERVIEW SCREEN ══ -->
  <div id="ros-kscreen-tables" class="ros-kscreen active">
    <div class="ros-k-section-header">
      <h2>Tafeloverzicht</h2>
      <div class="ros-k-legend">
        <span class="ros-k-leg ros-k-leg-free">Vrij</span>
        <span class="ros-k-leg ros-k-leg-pending">Nieuw</span>
        <span class="ros-k-leg ros-k-leg-preparing">Bereiding</span>
        <span class="ros-k-leg ros-k-leg-ready">Klaar</span>
        <span class="ros-k-leg" style="background:rgba(201,169,110,0.15);color:#C9A96E">Betalen!</span>
        <span class="ros-k-leg" style="background:rgba(155,89,182,0.2);color:#bb8fe8">Gereserveerd</span>
      </div>
    </div>
    <div class="ros-k-tables-grid" id="ros-kitchen-tables-grid">
      <div class="ros-loader"><div class="ros-spinner ros-spinner-white"></div></div>
    </div>
  </div>

  <!-- ══ ORDER DETAIL SCREEN ══ -->
  <div id="ros-kscreen-order" class="ros-kscreen">
    <div class="ros-k-order-topbar">
      <button class="ros-k-back-btn" id="ros-k-back">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        Alle Tafels
      </button>
      <div class="ros-k-order-title-wrap">
        <h2 id="ros-k-order-title">Order</h2>
        <div class="ros-k-order-time" id="ros-k-order-time"></div>
      </div>
      <div class="ros-k-badge" id="ros-k-status-badge">Actief</div>
    </div>
    <div class="ros-k-order-body">
      <div class="ros-k-items-panel">
        <div class="ros-k-panel-label">Bestelde Gerechten</div>
        <div id="ros-k-order-items"></div>
        <div class="ros-k-notes-block" id="ros-k-order-notes"></div>
      </div>
      <div class="ros-k-actions-panel">
        <div class="ros-k-panel-label">Actie</div>
        <div id="ros-k-actions"></div>
      </div>
    </div>
  </div>

  <!-- ══ RESERVATIONS SCREEN ══ -->
  <div id="ros-kscreen-reserv" class="ros-kscreen">
    <div class="ros-k-section-header">
      <h2>📅 Reserveringen</h2>
    </div>
    <div class="ros-reserv-body">

      <!-- Add reservation form -->
      <div class="ros-reserv-form-card">
        <div class="ros-reserv-form-title">+ Nieuwe Reservering</div>
        <div class="ros-reserv-form-grid">
          <div class="ros-reserv-field">
            <label>Tafel</label>
            <select id="ros-reserv-table">
              <option value="">— Kies tafel —</option>
            </select>
          </div>
          <div class="ros-reserv-field">
            <label>Naam Gast</label>
            <input type="text" id="ros-reserv-name" placeholder="Naam klant">
          </div>
          <div class="ros-reserv-field">
            <label>Aankomsttijd</label>
            <input type="datetime-local" id="ros-reserv-time">
          </div>
          <div class="ros-reserv-field">
            <label>Aantal Personen</label>
            <input type="number" id="ros-reserv-persons" min="1" max="20" value="2">
          </div>
          <div class="ros-reserv-field ros-reserv-field-full">
            <label>Opmerkingen (optioneel)</label>
            <input type="text" id="ros-reserv-notes" placeholder="bijv. verjaardag, allergie...">
          </div>
        </div>
        <button class="ros-k-action-btn ros-k-action-accept" id="ros-reserv-submit" style="margin-top:14px;width:100%">
          📅 Tafel Reserveren
        </button>
        <div id="ros-reserv-msg" style="display:none;margin-top:10px;padding:10px 14px;border-radius:8px;font-size:0.85rem;font-weight:600;"></div>
      </div>

      <!-- Active reservations list -->
      <div class="ros-reserv-list-card">
        <div class="ros-k-panel-label" style="margin-bottom:14px">Actieve Reserveringen</div>
        <div id="ros-reserv-list">
          <p style="color:rgba(255,255,255,0.3);font-size:0.85rem">Laden...</p>
        </div>
      </div>

    </div>
  </div>

  <!-- ══ RECEIPTS ARCHIVE SCREEN ══ -->
  <div id="ros-kscreen-receipts" class="ros-kscreen">
    <div class="ros-k-section-header">
      <h2>🧾 Bonnen Archief</h2>
    </div>
    <div style="padding:0 20px 40px;overflow-x:auto">
      <table class="ros-k-receipts-table">
        <thead>
          <tr><th>#</th><th>Tafel</th><th>Datum & Tijd</th><th>Betaalwijze</th><th>Totaal</th><th>Actie</th></tr>
        </thead>
        <tbody id="ros-k-receipts-body">
          <tr><td colspan="6" style="text-align:center;padding:30px;color:rgba(255,255,255,0.3)">Laden...</td></tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<style>
/* Inline tab styles — immune to CSS caching */
.ros-k-itab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.38) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  cursor: pointer !important;
  margin-bottom: -2px !important;
  font-family: inherit !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.18s !important;
  white-space: nowrap !important;
}
.ros-k-itab:hover        { color: rgba(255,255,255,0.7) !important; }
.ros-k-itab.ros-k-itab-active { color: #C9A96E !important; border-bottom-color: #C9A96E !important; }

/* Reservations */
.ros-reserv-body { padding: 20px; max-width: 800px; margin: 0 auto; }
.ros-reserv-form-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.ros-reserv-form-title {
  font-size: 0.95rem; font-weight: 800; color: rgba(255,255,255,0.7);
  margin-bottom: 16px; letter-spacing: 0.03em;
}
.ros-reserv-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.ros-reserv-field-full { grid-column: 1 / -1; }
.ros-reserv-field label {
  display: block; font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.ros-reserv-field input,
.ros-reserv-field select {
  width: 100%; padding: 10px 13px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #fff;
  font-size: 0.88rem; font-family: inherit;
  -webkit-appearance: none;
}
.ros-reserv-field input:focus,
.ros-reserv-field select:focus { outline: none; border-color: #C9A96E; }
.ros-reserv-field select option { background: #1C1C1C; color: #fff; }

.ros-reserv-list-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 18px;
}
.ros-reserv-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(155,89,182,0.25);
  border-left: 4px solid #9b59b6;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.ros-reserv-item-info { flex: 1; min-width: 0; }
.ros-reserv-item-name {
  font-weight: 800; font-size: 1rem; color: #fff; margin-bottom: 4px;
}
.ros-reserv-item-meta {
  font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.6;
}
.ros-reserv-item-meta span { margin-right: 14px; }
.ros-reserv-table-badge {
  background: rgba(155,89,182,0.2); color: #bb8fe8;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  padding: 3px 10px; border-radius: 12px; letter-spacing: 0.06em;
  flex-shrink: 0; align-self: flex-start;
}
.ros-reserv-release-btn {
  background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.3);
  color: #e74c3c; font-size: 0.8rem; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  font-family: inherit; transition: all 0.15s; flex-shrink: 0;
  align-self: center;
}
.ros-reserv-release-btn:hover { background: #e74c3c; color: #fff; }

/* Reserved table card colour */
.ros-k-card-reserved {
  border-color: #9b59b6 !important;
  box-shadow: 0 0 16px rgba(155,89,182,0.3) !important;
}
.ros-k-card-reserved .ros-k-table-num { color: #bb8fe8 !important; }
.ros-k-tag-reserved {
  background: rgba(155,89,182,0.2) !important;
  color: #bb8fe8 !important;
}
</style>
