@extends('layouts.kitchen')

@section('title', 'Kitchen Display')
@section('page', 'kitchen')

@section('content')
  <div
    class="kitchen-display"
    id="kitchen-root"
    data-feed-url="{{ route('kitchen.feed') }}"
    data-status-url="{{ url('/kitchen/orders') }}"
  >
    <div class="kitchen-toolbar">
      <div class="kitchen-toolbar__left">
        <div>
          <h1 class="kitchen-toolbar__title">Kitchen Display</h1>
          <p class="kitchen-toolbar__sub mb-0">Live tickets from POS</p>
        </div>
        <span class="kitchen-live">
          <span class="kitchen-live__pulse" aria-hidden="true"></span>
          Live
        </span>
      </div>
      <div class="kitchen-toolbar__right">
        <button
          type="button"
          class="kitchen-mute-btn"
          id="kitchen-mute-toggle"
          aria-pressed="false"
          title="Mute new order sound"
        >
          <i class="bi bi-volume-up-fill" aria-hidden="true"></i>
          <span id="kitchen-mute-label">Sound On</span>
        </button>
        <button type="button" class="kitchen-refresh-btn" id="kitchen-refresh" title="Refresh">
          <i class="bi bi-arrow-clockwise"></i>
          <span class="d-none d-sm-inline">Refresh</span>
        </button>
      </div>
    </div>

    <div class="kitchen-stats">
      <div class="kitchen-stat kitchen-stat--pending">
        <div class="kitchen-stat__icon"><i class="bi bi-hourglass-split"></i></div>
        <div>
          <p class="kitchen-stat__label">Pending</p>
          <p class="kitchen-stat__value" id="kitchen-count-pending">0</p>
        </div>
      </div>
      <div class="kitchen-stat kitchen-stat--preparing">
        <div class="kitchen-stat__icon"><i class="bi bi-fire"></i></div>
        <div>
          <p class="kitchen-stat__label">Preparing</p>
          <p class="kitchen-stat__value" id="kitchen-count-preparing">0</p>
        </div>
      </div>
      <div class="kitchen-stat kitchen-stat--ready">
        <div class="kitchen-stat__icon"><i class="bi bi-check2-circle"></i></div>
        <div>
          <p class="kitchen-stat__label">Ready</p>
          <p class="kitchen-stat__value" id="kitchen-count-ready">0</p>
        </div>
      </div>
      <div class="kitchen-stat kitchen-stat--total">
        <div class="kitchen-stat__icon"><i class="bi bi-grid-3x3-gap"></i></div>
        <div>
          <p class="kitchen-stat__label">Active</p>
          <p class="kitchen-stat__value" id="kitchen-count-total">0</p>
        </div>
      </div>
    </div>

    <div class="kitchen-board" id="kitchen-board">
      <section class="kitchen-column kitchen-column--pending" aria-label="Pending orders">
        <header class="kitchen-column__head">
          <h2><span class="kitchen-column__dot"></span> Pending</h2>
          <span class="kitchen-column__count" id="kitchen-col-count-pending">0</span>
        </header>
        <div class="kitchen-column__body" id="kitchen-col-pending"></div>
      </section>
      <section class="kitchen-column kitchen-column--preparing" aria-label="Preparing orders">
        <header class="kitchen-column__head">
          <h2><span class="kitchen-column__dot"></span> Preparing</h2>
          <span class="kitchen-column__count" id="kitchen-col-count-preparing">0</span>
        </header>
        <div class="kitchen-column__body" id="kitchen-col-preparing"></div>
      </section>
      <section class="kitchen-column kitchen-column--ready" aria-label="Ready orders">
        <header class="kitchen-column__head">
          <h2><span class="kitchen-column__dot"></span> Ready</h2>
          <span class="kitchen-column__count" id="kitchen-col-count-ready">0</span>
        </header>
        <div class="kitchen-column__body" id="kitchen-col-ready"></div>
      </section>
    </div>

    <div class="kitchen-empty d-none" id="kitchen-empty">
      <div class="kitchen-empty__icon"><i class="bi bi-egg-fried" aria-hidden="true"></i></div>
      <p>All clear in the kitchen</p>
      <span>New POS orders will appear here with a sound alert</span>
    </div>
  </div>

  <div class="modal fade" id="kitchenCancelModal" tabindex="-1" aria-labelledby="kitchenCancelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content kitchen-confirm-modal">
        <div class="kitchen-confirm-modal__body">
          <span class="kitchen-confirm-modal__icon" aria-hidden="true">
            <i class="bi bi-exclamation-triangle-fill"></i>
          </span>
          <h2 class="kitchen-confirm-modal__title" id="kitchenCancelModalLabel">Cancel this order?</h2>
          <p class="kitchen-confirm-modal__text">
            Are you sure you want to cancel
            <strong id="kitchen-cancel-label">this order</strong>?
            This cannot be undone.
          </p>
        </div>
        <div class="kitchen-confirm-modal__footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Keep Order</button>
          <button type="button" class="btn btn-danger" id="kitchen-cancel-confirm">
            <i class="bi bi-x-circle" aria-hidden="true"></i> Yes, Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/kitchen.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/kitchen.js') }}?v=2"></script>
@endpush