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

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

  <!-- ══════════════════════════════
       SCREEN 1 — TABLE SELECTION
       ══════════════════════════════ -->
  <div id="ros-screen-tables" class="ros-screen active">

    <div class="ros-hero">
      <div class="ros-hero-logo" id="ros-logo-wrap">
        <div class="ros-logo-placeholder">🍽️</div>
      </div>
      <h1 class="ros-hero-name" id="ros-restaurant-name">Restaurant</h1>
      <p class="ros-hero-address" id="ros-restaurant-address"></p>
      <div class="ros-hero-wave">
        <svg viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#F8F6F2"/>
        </svg>
      </div>
    </div>

    <div class="ros-select-label">
      <span class="ros-select-line"></span>
      <span class="ros-select-text">Kies uw tafel</span>
      <span class="ros-select-line"></span>
    </div>

    <div class="ros-tables-grid" id="ros-tables-grid">
      <div class="ros-loader"><div class="ros-spinner"></div></div>
    </div>

  </div>

  <!-- ══════════════════════════════
       SCREEN 2 — MENU
       ══════════════════════════════ -->
  <div id="ros-screen-menu" class="ros-screen">

    <div class="ros-topbar">
      <button class="ros-topbar-back" id="ros-back-to-tables">
        <svg width="20" height="20" 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>
      </button>
      <div class="ros-topbar-brand">
        <span class="ros-topbar-logo" id="ros-menu-logo-sm"></span>
        <div class="ros-topbar-info">
          <strong id="ros-menu-rname"></strong>
          <small id="ros-menu-raddr"></small>
        </div>
      </div>
      <div class="ros-topbar-table" id="ros-current-table-label">Tafel 1</div>
    </div>

    <div class="ros-cat-tabs" id="ros-cat-tabs"></div>

    <div class="ros-dishes-wrap" id="ros-dishes-wrap">
      <div class="ros-loader"><div class="ros-spinner"></div></div>
    </div>

    <div class="ros-cart-bar" id="ros-cart-bar">
      <div class="ros-cart-left">
        <div class="ros-cart-bubble" id="ros-cart-bubble">0</div>
        <div class="ros-cart-info">
          <span class="ros-cart-label">Uw bestelling</span>
          <span class="ros-cart-total" id="ros-cart-total">$0.00</span>
        </div>
      </div>
      <button class="ros-cart-cta" id="ros-open-cart">
        Bekijken
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
    </div>

  </div>

  <!-- ══════════════════════════════
       SCREEN 3 — ORDER REVIEW
       ══════════════════════════════ -->
  <div id="ros-screen-order" class="ros-screen">

    <div class="ros-topbar">
      <button class="ros-topbar-back" id="ros-back-to-menu">
        <svg width="20" height="20" 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>
      </button>
      <div class="ros-topbar-title">Uw Bestelling</div>
      <div class="ros-topbar-table" id="ros-order-table-label">Tafel 1</div>
    </div>

    <!-- ITEMS -->
    <div class="ros-order-items-section">
      <div id="ros-order-list"></div>
    </div>

    <!-- TOTAAL + OPMERKINGEN + KNOP — gewoon in de flow onder de items -->
    <div class="ros-order-footer-section">

      <div class="ros-total-block">
        <span>Totaal</span>
        <strong id="ros-order-total-display">$0.00</strong>
      </div>

      <div class="ros-notes-wrap">
        <label>Opmerkingen / Allergieën</label>
        <textarea id="ros-order-notes" rows="2" placeholder="bijv. geen noten, extra saus..."></textarea>
      </div>

      <button class="ros-send-btn" id="ros-confirm-order">
        <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="22 2 15 22 11 13 2 9 22 2"/></svg>
        Bestelling Versturen naar Keuken
      </button>

    </div>

  </div>

  <!-- ══════════════════════════════
       SCREEN 4 — ORDER STATUS
       ══════════════════════════════ -->
  <div id="ros-screen-status" class="ros-screen">

    <div class="ros-status-wrap">
      <div class="ros-status-card">
        <div class="ros-status-anim">
          <div class="ros-status-ring"></div>
          <div class="ros-status-emoji" id="ros-status-icon">⏳</div>
        </div>

        <h2 class="ros-status-title" id="ros-status-title">Bestelling Ontvangen!</h2>
        <p class="ros-status-msg" id="ros-status-message">De keuken heeft uw bestelling ontvangen.</p>

        <div class="ros-status-meta">
          <span class="ros-status-order-count" id="ros-status-order-count" style="display:none"></span>
          <span class="ros-status-grand-total" id="ros-status-grand-total" style="display:none"></span>
        </div>

        <div class="ros-tracker">
          <div class="ros-track-item" id="ros-step-pending">
            <div class="ros-track-dot"></div>
            <div class="ros-track-line"></div>
            <span>Ontvangen</span>
          </div>
          <div class="ros-track-item" id="ros-step-accepted">
            <div class="ros-track-dot"></div>
            <div class="ros-track-line"></div>
            <span>Geaccepteerd</span>
          </div>
          <div class="ros-track-item" id="ros-step-preparing">
            <div class="ros-track-dot"></div>
            <div class="ros-track-line"></div>
            <span>Wordt bereid</span>
          </div>
          <div class="ros-track-item" id="ros-step-ready">
            <div class="ros-track-dot"></div>
            <div class="ros-track-line"></div>
            <span>Klaar!</span>
          </div>
        </div>

        <div class="ros-status-btns">
          <button class="ros-btn-outline" id="ros-order-more">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Meer bestellen
          </button>
          <button class="ros-btn-danger-outline" id="ros-close-order">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
            Afronden
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

<!-- ══ PAYMENT MODAL (injected by JS) ══ -->
<div id="ros-payment-modal" style="display:none">
  <!-- Built dynamically by JS -->
</div>
