@extends('layouts.app')

@section('title', 'Food Categories')

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

@section('content')
<div x-data="categoriesManager()">
  <!-- 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">Food Categories</h1>
        <p class="text-slate-600 mt-1">Manage menu item categories</p>
      </div>
      <button
        @click="showModal = true; editingId = null; form = { name: '', description: '', icon: '' }"
        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 Category
      </button>
    </div>
  </div>

  <!-- Categories Table -->
  <div 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">Description</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Items Count</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="category in categories" :key="category.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="category.name"></td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="category.description"></td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="category.items_count"></td>
              <td class="px-6 py-4 text-sm space-x-2">
                <button
                  @click="editCategory(category)"
                  class="text-blue-600 hover:text-blue-700 font-medium"
                >
                  Edit
                </button>
                <button
                  @click="deleteCategory(category.id)"
                  class="text-red-600 hover:text-red-700 font-medium"
                >
                  Delete
                </button>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Edit Modal -->
  <div x-show="showModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div @click.away="showModal = false" class="bg-white rounded-lg shadow-lg max-w-md w-full p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4" x-text="editingId ? 'Edit Category' : 'Add Category'"></h2>

      <form @submit.prevent="saveCategory()" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Name <span class="text-red-500">*</span></label>
          <input
            type="text"
            x-model="form.name"
            placeholder="e.g., Breakfast"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Description</label>
          <textarea
            x-model="form.description"
            placeholder="Describe this category..."
            rows="3"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          ></textarea>
        </div>

        <div class="flex gap-3 justify-end pt-4 border-t border-slate-200">
          <button
            type="button"
            @click="showModal = false"
            class="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium"
          >
            Cancel
          </button>
          <button
            type="submit"
            class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium"
          >
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  function categoriesManager() {
    return {
      showModal: false,
      editingId: null,
      form: {
        name: '',
        description: '',
        icon: ''
      },
      categories: [
        { id: 1, name: 'Breakfast', description: 'Morning breakfast items', items_count: 2 },
        { id: 2, name: 'Lunch', description: 'Lunch specialties', items_count: 4 },
        { id: 3, name: 'Dinner', description: 'Dinner entrees', items_count: 3 },
        { id: 4, name: 'Beverages', description: 'Hot and cold drinks', items_count: 5 },
        { id: 5, name: 'Desserts', description: 'Sweet desserts', items_count: 3 }
      ],

      editCategory(category) {
        this.editingId = category.id;
        this.form = { ...category };
        this.showModal = true;
      },

      saveCategory() {
        if (!this.form.name) {
          alert('Please enter a category name');
          return;
        }

        if (this.editingId) {
          const index = this.categories.findIndex(c => c.id === this.editingId);
          if (index !== -1) {
            this.categories[index] = { ...this.categories[index], ...this.form };
          }
        } else {
          this.categories.push({
            id: Math.max(...this.categories.map(c => c.id), 0) + 1,
            ...this.form,
            items_count: 0
          });
        }

        this.showModal = false;
      },

      deleteCategory(id) {
        if (confirm('Are you sure you want to delete this category?')) {
          this.categories = this.categories.filter(c => c.id !== id);
        }
      }
    };
  }
</script>
@endsection