@extends('layouts.app')

@section('title', 'POS - New Order')

@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">New Order</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="posOrder()" class="h-[calc(100vh-180px)] flex flex-col lg:flex-row gap-4">
  <!-- Menu Panel (Left) -->
  <div class="flex-1 lg:w-3/5 flex flex-col bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <!-- Search Bar -->
    <div class="p-4 border-b border-slate-200">
      <div class="relative">
        <svg class="absolute left-3 top-3 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <input
          type="text"
          x-model="search"
          placeholder="Search menu items..."
          class="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        >
      </div>
    </div>

    <!-- Category Tabs -->
    <div class="px-4 py-3 border-b border-slate-200 overflow-x-auto">
      <div class="flex gap-2 min-w-max">
        <button
          @click="selectedCategory = ''"
          :class="selectedCategory === '' ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
          class="px-4 py-2 rounded-lg font-medium transition-colors duration-200 whitespace-nowrap"
        >
          All Items
        </button>
        <template x-for="category in categories" :key="category.id">
          <button
            @click="selectedCategory = category.id"
            :class="selectedCategory === category.id ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
            class="px-4 py-2 rounded-lg font-medium transition-colors duration-200 whitespace-nowrap"
            x-text="category.name"
          ></button>
        </template>
      </div>
    </div>

    <!-- Menu Items Grid -->
    <div class="flex-1 overflow-y-auto p-4">
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-3">
        <template x-for="item in filteredItems" :key="item.id">
          <button
            @click="addToCart(item)"
            :disabled="!item.available"
            class="group relative h-40 bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <!-- Item Image -->
            <div class="w-full h-24 bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center overflow-hidden">
              <img :src="item.image" :alt="item.name" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
            </div>

            <!-- Item Info -->
            <div class="p-2 flex flex-col h-16">
              <h3 class="text-sm font-semibold text-slate-900 truncate" x-text="item.name"></h3>
              <p class="text-xs text-slate-600 flex-1" x-text="item.category"></p>
              <div class="flex justify-between items-center mt-auto">
                <span class="text-sm font-bold text-primary-600" x-text="`$${item.price.toFixed(2)}`"></span>
                <span x-show="!item.available" class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded">Out</span>
              </div>
            </div>

            <!-- Add Button Overlay -->
            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200 flex items-center justify-center">
              <svg class="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 4v16m8-8H4"></path>
              </svg>
            </div>
          </button>
        </template>
      </div>

      <!-- Empty State -->
      <div x-show="filteredItems.length === 0" class="flex flex-col items-center justify-center h-full text-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <p class="text-slate-600">No items found</p>
      </div>
    </div>
  </div>

  <!-- Order Panel (Right) -->
  <div class="w-full lg:w-2/5 flex flex-col bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <!-- Table Selection -->
    <div class="p-4 border-b border-slate-200">
      <label class="block text-sm font-medium text-slate-700 mb-2">Table Number</label>
      <select
        x-model="form.table_id"
        class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
      >
        <option value="">Select a table...</option>
        <option value="1">Table 1</option>
        <option value="2">Table 2</option>
        <option value="3">Table 3</option>
        <option value="4">Table 4</option>
        <option value="5">Table 5</option>
      </select>
    </div>

    <!-- Order Items -->
    <div class="flex-1 overflow-y-auto p-4 space-y-2">
      <template x-for="(item, index) in cart" :key="`${item.id}-${index}`">
        <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-lg group hover:bg-slate-100 transition-colors duration-200">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-slate-900 truncate" x-text="item.name"></p>
            <p class="text-xs text-slate-500" x-text="`$${item.price.toFixed(2)}`"></p>
          </div>

          <!-- Quantity Controls -->
          <div class="flex items-center gap-1 bg-white border border-slate-300 rounded-lg">
            <button
              @click="decrementQuantity(index)"
              type="button"
              class="px-2 py-1 text-slate-600 hover:bg-slate-100 transition-colors duration-200"
            >
              -
            </button>
            <span class="px-2 py-1 text-sm font-medium text-slate-900 min-w-[2rem] text-center" x-text="item.quantity"></span>
            <button
              @click="incrementQuantity(index)"
              type="button"
              class="px-2 py-1 text-slate-600 hover:bg-slate-100 transition-colors duration-200"
            >
              +
            </button>
          </div>

          <!-- Item Total & Remove -->
          <div class="text-right">
            <p class="text-sm font-semibold text-slate-900" x-text="`$${(item.price * item.quantity).toFixed(2)}`"></p>
            <button
              @click="removeFromCart(index)"
              type="button"
              class="text-xs text-red-600 hover:text-red-700 mt-1"
            >
              Remove
            </button>
          </div>
        </div>
      </template>

      <!-- Empty Cart Message -->
      <div x-show="cart.length === 0" class="flex flex-col items-center justify-center h-full text-center py-12">
        <svg class="w-12 h-12 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
        </svg>
        <p class="text-slate-600 text-sm">No items added yet</p>
      </div>
    </div>

    <!-- Discount & Totals -->
    <div class="p-4 space-y-3 border-t border-slate-200">
      <!-- Discount Input -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Discount (%)</label>
        <input
          type="number"
          x-model.number="form.discount_percent"
          @input="calculateTotals()"
          min="0"
          max="100"
          step="0.01"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        >
      </div>

      <!-- Summary -->
      <div class="space-y-2 p-3 bg-slate-50 rounded-lg">
        <div class="flex justify-between text-sm">
          <span class="text-slate-600">Subtotal</span>
          <span class="font-medium text-slate-900" x-text="`$${subtotal.toFixed(2)}`"></span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-slate-600">Tax (10%)</span>
          <span class="font-medium text-slate-900" x-text="`$${tax.toFixed(2)}`"></span>
        </div>
        <div x-show="discountAmount > 0" class="flex justify-between text-sm text-red-600">
          <span>Discount</span>
          <span class="font-medium" x-text="`-$${discountAmount.toFixed(2)}`"></span>
        </div>
        <div class="flex justify-between text-lg font-bold border-t border-slate-200 pt-2">
          <span class="text-slate-900">Total</span>
          <span class="text-primary-600" x-text="`$${grandTotal.toFixed(2)}`"></span>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="grid grid-cols-3 gap-2">
        <button
          @click="holdOrder()"
          :disabled="cart.length === 0"
          type="button"
          class="px-3 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium text-sm disabled:opacity-50"
        >
          Hold
        </button>
        <button
          @click="clearCart()"
          type="button"
          class="px-3 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition-colors duration-200 font-medium text-sm"
        >
          Clear
        </button>
        <button
          @click="placeOrder()"
          :disabled="cart.length === 0 || !form.table_id"
          type="button"
          class="px-3 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium text-sm disabled:opacity-50"
        >
          Place Order
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  function posOrder() {
    return {
      form: {
        table_id: '',
        discount_percent: 0
      },
      cart: [],
      search: '',
      selectedCategory: '',
      subtotal: 0,
      tax: 0,
      discountAmount: 0,
      grandTotal: 0,
      categories: [
        { id: 1, name: 'Breakfast' },
        { id: 2, name: 'Lunch' },
        { id: 3, name: 'Dinner' },
        { id: 4, name: 'Beverages' },
        { id: 5, name: 'Desserts' }
      ],
      items: [
        { id: 1, name: 'Eggs & Toast', category: 'Breakfast', price: 8.50, image: 'https://via.placeholder.com/100?text=Breakfast', available: true, categoryId: 1 },
        { id: 2, name: 'Pancakes', category: 'Breakfast', price: 7.50, image: 'https://via.placeholder.com/100?text=Pancakes', available: true, categoryId: 1 },
        { id: 3, name: 'Grilled Chicken', category: 'Lunch', price: 12.50, image: 'https://via.placeholder.com/100?text=Chicken', available: true, categoryId: 2 },
        { id: 4, name: 'Fish & Chips', category: 'Lunch', price: 11.00, image: 'https://via.placeholder.com/100?text=Fish', available: true, categoryId: 2 },
        { id: 5, name: 'Ribeye Steak', category: 'Dinner', price: 24.99, image: 'https://via.placeholder.com/100?text=Steak', available: true, categoryId: 3 },
        { id: 6, name: 'Pasta Carbonara', category: 'Dinner', price: 15.50, image: 'https://via.placeholder.com/100?text=Pasta', available: true, categoryId: 3 },
        { id: 7, name: 'Coffee', category: 'Beverages', price: 3.50, image: 'https://via.placeholder.com/100?text=Coffee', available: true, categoryId: 4 },
        { id: 8, name: 'Fresh Juice', category: 'Beverages', price: 4.50, image: 'https://via.placeholder.com/100?text=Juice', available: true, categoryId: 4 },
        { id: 9, name: 'Chocolate Cake', category: 'Desserts', price: 6.50, image: 'https://via.placeholder.com/100?text=Cake', available: true, categoryId: 5 },
        { id: 10, name: 'Ice Cream', category: 'Desserts', price: 5.00, image: 'https://via.placeholder.com/100?text=IceCream', available: false, categoryId: 5 }
      ],

      get filteredItems() {
        return this.items.filter(item => {
          const matchesSearch = item.name.toLowerCase().includes(this.search.toLowerCase());
          const matchesCategory = !this.selectedCategory || item.categoryId === this.selectedCategory;
          return matchesSearch && matchesCategory;
        });
      },

      addToCart(item) {
        const existingItem = this.cart.find(i => i.id === item.id);
        if (existingItem) {
          existingItem.quantity++;
        } else {
          this.cart.push({ ...item, quantity: 1 });
        }
        this.calculateTotals();
      },

      incrementQuantity(index) {
        this.cart[index].quantity++;
        this.calculateTotals();
      },

      decrementQuantity(index) {
        if (this.cart[index].quantity > 1) {
          this.cart[index].quantity--;
        } else {
          this.removeFromCart(index);
        }
        this.calculateTotals();
      },

      removeFromCart(index) {
        this.cart.splice(index, 1);
        this.calculateTotals();
      },

      calculateTotals() {
        this.subtotal = this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
        this.tax = this.subtotal * 0.1;
        this.discountAmount = (this.subtotal * this.form.discount_percent) / 100;
        this.grandTotal = this.subtotal + this.tax - this.discountAmount;
      },

      holdOrder() {
        if (this.cart.length === 0) {
          alert('Please add items to hold an order');
          return;
        }
        alert('Order held successfully! (Demo)');
      },

      clearCart() {
        if (this.cart.length > 0 && confirm('Are you sure you want to clear the cart?')) {
          this.cart = [];
          this.form.discount_percent = 0;
          this.calculateTotals();
        }
      },

      placeOrder() {
        if (!this.form.table_id) {
          alert('Please select a table');
          return;
        }
        if (this.cart.length === 0) {
          alert('Please add items to the order');
          return;
        }
        alert(`Order placed for Table ${this.form.table_id}! Total: $${this.grandTotal.toFixed(2)}`);
        // In production, submit to backend
      }
    };
  }
</script>

<style>
  /* Hide scrollbar but keep functionality */
  div::-webkit-scrollbar {
    width: 6px;
  }
  div::-webkit-scrollbar-track {
    background: transparent;
  }
  div::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }
  div::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
</style>
@endsection