@extends('layouts.app')

@section('title', 'Kitchen Display - Pending Orders')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li>
        <a href="{{ route('dashboard') }}" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-700">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          Home
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          <span class="ml-1 text-sm font-medium text-slate-700">Kitchen Display</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="kitchenDisplay()" @load="initAutoRefresh()">
  <!-- Header -->
  <div class="mb-6 flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Kitchen Display System</h1>
      <p class="text-slate-600 mt-1">Pending Orders - Last updated: <span x-text="lastUpdate" class="font-mono text-sm"></span></p>
    </div>
    <button
      @click="manualRefresh()"
      class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium"
    >
      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
      </svg>
      Refresh
    </button>
  </div>

  <!-- Status Legend -->
  <div class="grid grid-cols-3 gap-4 mb-6">
    <div class="p-3 rounded-lg border-2 border-green-300 bg-green-50">
      <p class="text-sm font-medium text-green-900">Ready (< 10 min)</p>
      <p class="text-xs text-green-700 mt-1"><span x-text="orders.filter(o => o.status === 'ready').length" class="font-bold"></span> orders</p>
    </div>
    <div class="p-3 rounded-lg border-2 border-amber-300 bg-amber-50">
      <p class="text-sm font-medium text-amber-900">Preparing (10-20 min)</p>
      <p class="text-xs text-amber-700 mt-1"><span x-text="orders.filter(o => o.status === 'preparing').length" class="font-bold"></span> orders</p>
    </div>
    <div class="p-3 rounded-lg border-2 border-red-300 bg-red-50">
      <p class="text-sm font-medium text-red-900">Overdue (> 20 min)</p>
      <p class="text-xs text-red-700 mt-1"><span x-text="orders.filter(o => o.status === 'overdue').length" class="font-bold"></span> orders</p>
    </div>
  </div>

  <!-- Orders Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-max">
    <template x-for="order in orders" :key="order.id">
      <div
        :class="{
          'border-green-400 bg-green-50': order.status === 'ready',
          'border-amber-400 bg-amber-50': order.status === 'preparing',
          'border-red-400 bg-red-50 ring-2 ring-red-300 animate-pulse': order.status === 'overdue'
        }"
        class="border-2 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200"
      >
        <!-- Order Header -->
        <div class="flex justify-between items-start mb-3 pb-3 border-b-2"
          :class="{
            'border-green-300': order.status === 'ready',
            'border-amber-300': order.status === 'preparing',
            'border-red-300': order.status === 'overdue'
          }"
        >
          <div>
            <p class="text-lg font-bold text-slate-900" x-text="`Order #${order.number}`"></p>
            <p class="text-sm text-slate-600" x-text="`Table ${order.table}`"></p>
          </div>
          <span
            :class="{
              'bg-green-200 text-green-900': order.status === 'ready',
              'bg-amber-200 text-amber-900': order.status === 'preparing',
              'bg-red-200 text-red-900': order.status === 'overdue'
            }"
            class="px-2 py-1 rounded text-xs font-bold"
            x-text="order.statusLabel"
          ></span>
        </div>

        <!-- Order Items -->
        <div class="mb-4 space-y-2">
          <template x-for="item in order.items" :key="item.id">
            <div class="flex items-start gap-2 text-sm">
              <div x-show="item.special" class="mt-0.5 w-1.5 h-1.5 bg-red-500 rounded-full"></div>
              <div class="flex-1">
                <p class="font-medium text-slate-900" x-text="`${item.quantity}x ${item.name}`"></p>
                <p x-show="item.special" class="text-xs text-red-700 italic" x-text="`Special: ${item.special}`"></p>
              </div>
            </div>
          </template>
        </div>

        <!-- Timer & Actions -->
        <div class="space-y-3 pt-3 border-t-2"
          :class="{
            'border-green-300': order.status === 'ready',
            'border-amber-300': order.status === 'preparing',
            'border-red-300': order.status === 'overdue'
          }"
        >
          <div class="text-center">
            <p class="text-2xl font-bold"
              :class="{
                'text-green-700': order.status === 'ready',
                'text-amber-700': order.status === 'preparing',
                'text-red-700': order.status === 'overdue'
              }"
              x-text="`${order.elapsedTime} min`"
            ></p>
            <p class="text-xs text-slate-600">Elapsed time</p>
          </div>

          <button
            @click="markReady(order.id)"
            :disabled="order.status === 'ready'"
            class="w-full px-3 py-2 bg-green-600 text-white rounded font-medium hover:bg-green-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Mark Ready
          </button>
        </div>
      </div>
    </template>
  </div>

  <!-- Empty State -->
  <div x-show="orders.length === 0" class="flex flex-col items-center justify-center py-12">
    <svg class="w-16 h-16 text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <p class="text-slate-600 text-lg font-medium">All orders completed!</p>
    <p class="text-slate-500 text-sm mt-1">Great work! Check back soon for new orders.</p>
  </div>
</div>

<script>
  function kitchenDisplay() {
    return {
      orders: [
        {
          id: 1,
          number: '001',
          table: 5,
          status: 'preparing',
          statusLabel: 'Preparing',
          elapsedTime: 12,
          items: [
            { id: 1, quantity: 2, name: 'Grilled Chicken', special: null },
            { id: 2, quantity: 1, name: 'Pasta Carbonara', special: 'No garlic' },
            { id: 3, quantity: 2, name: 'Fresh Juice', special: null }
          ]
        },
        {
          id: 2,
          number: '002',
          table: 2,
          status: 'ready',
          statusLabel: 'Ready',
          elapsedTime: 8,
          items: [
            { id: 4, quantity: 1, name: 'Fish & Chips', special: null },
            { id: 5, quantity: 1, name: 'Caesar Salad', special: 'Extra dressing' }
          ]
        },
        {
          id: 3,
          number: '003',
          table: 8,
          status: 'overdue',
          statusLabel: 'Overdue!',
          elapsedTime: 25,
          items: [
            { id: 6, quantity: 2, name: 'Ribeye Steak', special: 'Medium rare' },
            { id: 7, quantity: 2, name: 'Baked Potato', special: 'Extra butter' },
            { id: 8, quantity: 1, name: 'Red Wine', special: null }
          ]
        }
      ],
      lastUpdate: new Date().toLocaleTimeString(),
      refreshInterval: null,

      initAutoRefresh() {
        // Auto-refresh every 30 seconds
        this.refreshInterval = setInterval(() => {
          this.manualRefresh();
        }, 30000);
      },

      manualRefresh() {
        this.lastUpdate = new Date().toLocaleTimeString();
        // In production, fetch from backend
        console.log('Refreshing orders...');
      },

      markReady(orderId) {
        const order = this.orders.find(o => o.id === orderId);
        if (order) {
          order.status = 'ready';
          order.statusLabel = 'Ready';
          alert(`Order #${order.number} marked as ready!`);
        }
      },

      destroy() {
        if (this.refreshInterval) {
          clearInterval(this.refreshInterval);
        }
      }
    };
  }
</script>

<style>
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>
@endsection