{% extends "pos/base.html" %}
{% load static %}

{% block title %}Kitchen Screen{% endblock %}
{% block heading %}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'hotel/restaurant/css/kitchen.css' %}">
{% endblock %}

{% block content %}
{% csrf_token %}

<div
  class="kitchen-page"
  data-orders-url="../api/kitchen/orders/"
  data-item-ready-url-template="../api/kitchen/item/0/ready/"
  data-order-ready-url-template="../api/kitchen/order/0/ready/"
  data-refresh-ms="5000"
>
  <!-- Header -->
  <div class="kitchen-header">
    <div class="kitchen-heading">
      <div class="kitchen-title">
        <i class="fas fa-utensils"></i>
        Kitchen Screen
      </div>

      <div class="kitchen-subtitle">
        POS se KOT / Push hone wale orders yahan automatically show honge.
      </div>
    </div>

    <div class="kitchen-actions">
      <div class="kitchen-pill">
        Orders: <span id="kitchenOrderCount">0</span>
      </div>

      <div class="kitchen-pill priority">
        Priority: <span id="kitchenPriorityCount">0</span>
      </div>

      <div class="kitchen-pill">
        Items: <span id="kitchenItemCount">0</span>
      </div>

      <button type="button" class="kitchen-btn" id="btnKitchenRefresh">
        <i class="fas fa-sync-alt"></i>
        Refresh
      </button>

      <a href="../pos/" class="kitchen-btn secondary">
        <i class="fas fa-cash-register"></i>
        POS
      </a>
    </div>
  </div>

  <!-- Meta / Legend -->
  <div class="kitchen-meta-row">
    <div class="kitchen-meta">
      Last updated:
      <strong id="kitchenLastUpdated">--:--:--</strong>
    </div>

    <div class="kitchen-legend">
      <span class="legend-item normal">
        <span></span> Normal
      </span>

      <span class="legend-item high">
        <span></span> High
      </span>

      <span class="legend-item urgent">
        <span></span> Urgent / Blink
      </span>
    </div>
  </div>

  <!-- Board -->
  <div class="kitchen-board" id="kitchenBoard">
    <div class="kitchen-empty">
      No kitchen orders yet.
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'hotel/restaurant/js/kitchen.js' %}"></script>
{% endblock %}