@extends('layouts.app')

@section('title', 'Menu Management')

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

@section('content')
<div x-data="menuManager()">
  <!-- Header Section -->
  <div class="mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold text-slate-900">Menu Items</h1>
        <p class="text-slate-600 mt-1">Manage food items and pricing</p>
      </div>
      <a href="{{ route('menu.create') }}" 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="M12 4v16m8-8H4"></path>
        </svg>
        Add Item
      </a>
    </div>
  </div>

  <!-- View Toggle & Filters -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-4 mb-6">
    <div class="flex flex-col sm:flex-row sm:items-center gap-4">
      <!-- View Toggle -->
      <div class="flex items-center gap-2">
        <button
          @click="viewMode = 'grid'"
          :class="viewMode === 'grid' ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
          class="px-3 py-2 rounded-lg font-medium transition-colors duration-200"
        >
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"></path>
          </svg>
        </button>
        <button
          @click="viewMode = 'list'"
          :class="viewMode === 'list' ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
          class="px-3 py-2 rounded-lg font-medium transition-colors duration-200"
        >
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"></path>
          </svg>
        </button>
      </div>

      <!-- Category Filter -->
      <select
        x-model="selectedCategory"
        class="px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent flex-1"
      >
        <option value="">All Categories</option>
        <option value="breakfast">Breakfast</option>
        <option value="lunch">Lunch</option>
        <option value="dinner">Dinner</option>
        <option value="beverages">Beverages</option>
        <option value="desserts">Desserts</option>
      </select>

      <!-- Search -->
      <div class="relative flex-1 sm:flex-none">
        <svg class="absolute left-3 top-2.5 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 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>
  </div>

  <!-- Grid View -->
  <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <template x-for="item in filteredItems" :key="item.id">
      <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
        <!-- Image -->
        <div class="w-full h-40 bg-gradient-to-br from-slate-200 to-slate-300 flex items-center justify-center overflow-hidden">
          <img :src="item.image" :alt="item.name" class="w-full h-full object-cover">
        </div>

        <!-- Content -->
        <div class="p-4 space-y-3">
          <div>
            <p class="font-semibold text-slate-900" x-text="item.name"></p>
            <p class="text-xs text-slate-600 mt-1" x-text="item.category"></p>
          </div>

          <p class="text-sm text-slate-600 line-clamp-2" x-text="item.description"></p>

          <div class="flex items-center justify-between pt-2 border-t border-slate-200">
            <p class="text-lg font-bold text-primary-600" x-text="`$${item.price.toFixed(2)}`"></p>
            <button
              @click="toggleAvailability(item.id)"
              :class="item.available ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-red-100 text-red-700 hover:bg-red-200'"
              class="px-2 py-1 rounded text-xs font-medium transition-colors duration-200"
              x-text="item.available ? 'Available' : 'Unavailable'"
            ></button>
          </div>

          <div class="flex gap-2">
            <a :href="`/menu/${item.id}/edit`" class="flex-1 px-3 py-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors duration-200 font-medium text-center text-sm">
              Edit
            </a>
            <button
              @click="deleteItem(item.id)"
              class="flex-1 px-3 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors duration-200 font-medium text-sm"
            >
              Delete
            </button>
          </div>
        </div>
      </div>
    </template>
  </div>

  <!-- List View -->
  <div x-show="viewMode === 'list'" class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="bg-slate-50 border-b border-slate-200">
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Name</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Category</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Price</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Cost</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Availability</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Featured</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <template x-for="item in filteredItems" :key="item.id">
            <tr class="hover:bg-slate-50 transition-colors duration-200">
              <td class="px-6 py-4 text-sm font-medium text-slate-900" x-text="item.name"></td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="item.category"></td>
              <td class="px-6 py-4 text-sm font-semibold text-slate-900" x-text="`$${item.price.toFixed(2)}`"></td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="`$${item.cost.toFixed(2)}`"></td>
              <td class="px-6 py-4 text-sm">
                <button
                  @click="toggleAvailability(item.id)"
                  :class="item.available ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                  class="px-2 py-1 rounded text-xs font-medium"
                  x-text="item.available ? 'Available' : 'Unavailable'"
                ></button>
              </td>
              <td class="px-6 py-4 text-sm">
                <span x-show="item.featured" class="bg-accent-100 text-accent-700 px-2 py-1 rounded text-xs font-medium">Featured</span>
              </td>
              <td class="px-6 py-4 text-sm space-x-2">
                <a :href="`/menu/${item.id}/edit`" class="text-blue-600 hover:text-blue-700 font-medium">Edit</a>
                <button @click="deleteItem(item.id)" class="text-red-600 hover:text-red-700 font-medium">Delete</button>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  function menuManager() {
    return {
      viewMode: 'grid',
      search: '',
      selectedCategory: '',
      items: [
        { id: 1, name: 'Eggs & Toast', category: 'Breakfast', price: 8.50, cost: 2.50, image: 'https://via.placeholder.com/200?text=Breakfast', description: 'Fresh eggs with toasted bread', available: true, featured: true },
        { id: 2, name: 'Pancakes', category: 'Breakfast', price: 7.50, cost: 2.00, image: 'https://via.placeholder.com/200?text=Pancakes', description: 'Fluffy pancakes with syrup', available: true, featured: false },
        { id: 3, name: 'Grilled Chicken', category: 'Lunch', price: 12.50, cost: 5.00, image: 'https://via.placeholder.com/200?text=Chicken', description: 'Grilled chicken breast with vegetables', available: true, featured: true },
        { id: 4, name: 'Fish & Chips', category: 'Lunch', price: 11.00, cost: 4.50, image: 'https://via.placeholder.com/200?text=Fish', description: 'Crispy fish with french fries', available: true, featured: false },
        { id: 5, name: 'Ribeye Steak', category: 'Dinner', price: 24.99, cost: 12.00, image: 'https://via.placeholder.com/200?text=Steak', description: 'Prime ribeye steak, cooked to perfection', available: true, featured: true },
        { id: 6, name: 'Pasta Carbonara', category: 'Dinner', price: 15.50, cost: 5.50, image: 'https://via.placeholder.com/200?text=Pasta', description: 'Classic Italian pasta with creamy sauce', available: true, featured: false },
        { id: 7, name: 'Coffee', category: 'Beverages', price: 3.50, cost: 0.50, image: 'https://via.placeholder.com/200?text=Coffee', description: 'Freshly brewed coffee', available: true, featured: false },
        { id: 8, name: 'Fresh Juice', category: 'Beverages', price: 4.50, cost: 1.00, image: 'https://via.placeholder.com/200?text=Juice', description: 'Fresh orange and apple juice', available: true, featured: false },
        { id: 9, name: 'Chocolate Cake', category: 'Desserts', price: 6.50, cost: 2.00, image: 'https://via.placeholder.com/200?text=Cake', description: 'Rich chocolate cake with frosting', available: true, featured: true },
        { id: 10, name: 'Ice Cream', category: 'Desserts', price: 5.00, cost: 1.50, image: 'https://via.placeholder.com/200?text=IceCream', description: 'Various flavors of ice cream', available: false, featured: false }
      ],

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

      toggleAvailability(id) {
        const item = this.items.find(i => i.id === id);
        if (item) {
          item.available = !item.available;
        }
      },

      deleteItem(id) {
        if (confirm('Are you sure you want to delete this item?')) {
          this.items = this.items.filter(i => i.id !== id);
        }
      }
    };
  }
</script>
@endsection