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

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

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

{% block content %}
{% csrf_token %}

<div
  class="kitchen-page"
  data-orders-url="{% url 'restaurant:kitchen:api_kitchen_orders' %}"
  data-item-ready-url-template="{% url 'restaurant:kitchen:api_kitchen_item_ready' 0 %}"
  data-order-progress-url-template="{% url 'restaurant:kitchen:api_kitchen_order_progress' 0 %}"
  data-order-ready-url-template="{% url 'restaurant:kitchen:api_kitchen_order_ready' 0 %}"
  data-order-delivered-url-template="{% url 'restaurant:kitchen:api_kitchen_order_delivered' 0 %}"
  data-order-print-url-template="{% url 'restaurant:kitchen:kitchen_order_thermal_print' 0 %}"
  data-order-pdf-url-template="{% url 'restaurant:kitchen:kitchen_order_pdf' 0 %}"
  data-department-mode="{% if kitchen_department_mode %}1{% else %}0{% endif %}"
  data-refresh-ms="5000"
>
  <div class="kitchen-topbar">
    <div class="kitchen-title-wrap">
      <div class="kitchen-title">
        <i class="fas fa-utensils"></i>
        Kitchen Screen
      </div>

      <div class="kitchen-active-filter" id="kitchenActiveFilter">
        {% if kitchen_department_mode %}
          All Departments · All Orders
        {% else %}
          Kitchen Orders · All Orders
        {% endif %}
      </div>

      <div class="kitchen-updated">
        Updated:
        <strong id="kitchenLastUpdated">--:--:--</strong>
      </div>
    </div>

    <div class="kitchen-top-actions">
      <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>

  {% if kitchen_department_mode %}
    <div class="kitchen-dept-wrap">
      <div class="kitchen-dept-title">
        <i class="fas fa-layer-group"></i>
        Select Department
      </div>

      <div class="kitchen-dept-bar" id="kitchenDepartmentBar">
        <button
          type="button"
          class="kitchen-dept-card active"
          data-department-id="all"
          data-department-name="All Departments"
        >
          <span class="dept-card-title">All Departments</span>
          <span class="dept-card-count">0</span>
          <span class="dept-card-sub">All kitchen items</span>
        </button>
      </div>
    </div>
  {% endif %}

  <div class="kitchen-layout">
    <div class="kitchen-board-wrap">
      <div class="kitchen-board" id="kitchenBoard">
        <div class="kitchen-empty">
          No kitchen orders yet.
        </div>
      </div>
    </div>

    <aside class="kitchen-sidebar">
      <div class="kitchen-side-nav" id="kitchenSideNav">

        <button type="button" class="kitchen-nav-btn active" data-filter="all">
          <span class="nav-left">
            <i class="fas fa-list"></i>
            All Orders
          </span>
          <span class="nav-badge" id="kitchenOrderCount">0</span>
        </button>

        <button type="button" class="kitchen-nav-btn priority" data-filter="priority">
          <span class="nav-left">
            <i class="fas fa-bolt"></i>
            Priority
          </span>
          <span class="nav-badge priority" id="kitchenPriorityCount">0</span>
        </button>

        <button type="button" class="kitchen-nav-btn progress" data-filter="progress">
          <span class="nav-left">
            <i class="fas fa-fire"></i>
            In Progress
          </span>
          <span class="nav-badge progress" id="kitchenInProgressCount">0</span>
        </button>

        <button type="button" class="kitchen-nav-btn ready" data-filter="ready">
          <span class="nav-left">
            <i class="fas fa-check-circle"></i>
            Ready
          </span>
          <span class="nav-badge ready" id="kitchenReadyCount">0</span>
        </button>

        <button type="button" class="kitchen-nav-btn delivery" data-filter="delivery">
          <span class="nav-left">
            <i class="fas fa-motorcycle"></i>
            Delivery
          </span>
          <span class="nav-badge delivery" id="kitchenDeliveryCount">0</span>
        </button>

        <button type="button" class="kitchen-nav-btn delivered" data-filter="delivered">
          <span class="nav-left">
            <i class="fas fa-truck"></i>
            Delivered
          </span>
          <span class="nav-badge delivered" id="kitchenDeliveredCount">0</span>
        </button>

        <span id="kitchenItemCount" class="kitchen-hidden-count">0</span>
      </div>
    </aside>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'styles/restaurant/js/kitchen.js' %}?v=dept_kitchen_06"></script>
{% endblock %}