@extends('layouts.app')

@section('title', 'Add Food Item')

@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>
          <a href="{{ route('menu.index') }}" class="ml-1 text-sm font-medium text-slate-500 hover:text-slate-700">Menu</a>
        </div>
      </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">Add Item</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="menuForm()" class="max-w-2xl mx-auto">
  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-slate-900">Add Food Item</h1>
    <p class="text-slate-600 mt-1">Create a new menu item</p>
  </div>

  <form @submit.prevent="submit()" class="space-y-6">
    @csrf

    <!-- Basic Information -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Basic Information</h2>

      <div class="space-y-4">
        <!-- Name -->
        <div>
          <label for="name" class="block text-sm font-medium text-slate-700 mb-2">
            Item Name <span class="text-red-500">*</span>
          </label>
          <input
            type="text"
            x-model="form.name"
            name="name"
            placeholder="e.g., Grilled Chicken"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
          @error('name')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>

        <!-- Category & Price Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="category" class="block text-sm font-medium text-slate-700 mb-2">
              Category <span class="text-red-500">*</span>
            </label>
            <select
              x-model="form.category"
              name="category"
              class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              required
            >
              <option value="">Select category...</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>
            @error('category')
              <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <label for="price" class="block text-sm font-medium text-slate-700 mb-2">
              Price <span class="text-red-500">*</span>
            </label>
            <div class="relative">
              <span class="absolute left-3 top-2.5 text-slate-600">$</span>
              <input
                type="number"
                x-model.number="form.price"
                name="price"
                placeholder="0.00"
                step="0.01"
                min="0"
                class="w-full pl-7 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                required
              >
            </div>
            @error('price')
              <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Cost Price -->
        <div>
          <label for="cost_price" class="block text-sm font-medium text-slate-700 mb-2">
            Cost Price
          </label>
          <div class="relative">
            <span class="absolute left-3 top-2.5 text-slate-600">$</span>
            <input
              type="number"
              x-model.number="form.cost_price"
              name="cost_price"
              placeholder="0.00"
              step="0.01"
              min="0"
              class="w-full pl-7 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            >
          </div>
          @error('cost_price')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>

        <!-- Description -->
        <div>
          <label for="description" class="block text-sm font-medium text-slate-700 mb-2">
            Description
          </label>
          <textarea
            x-model="form.description"
            name="description"
            rows="3"
            placeholder="Describe the food item..."
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          ></textarea>
          @error('description')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>
      </div>
    </div>

    <!-- Image Upload -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Image</h2>

      <div class="space-y-4">
        <!-- Image Preview -->
        <div x-show="form.image_preview" class="relative">
          <img :src="form.image_preview" alt="Preview" class="w-full h-48 object-cover rounded-lg border border-slate-200">
          <button
            type="button"
            @click="clearImage()"
            class="absolute top-2 right-2 p-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>

        <!-- Upload Area -->
        <div
          @drop.prevent="handleDrop($event)"
          @dragover.prevent="dragActive = true"
          @dragleave="dragActive = false"
          :class="dragActive ? 'border-primary-500 bg-primary-50' : 'border-slate-300'"
          class="border-2 border-dashed rounded-lg p-8 text-center transition-colors duration-200"
        >
          <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          <p class="mt-2 text-sm text-slate-600">Drag and drop your image here, or</p>
          <label class="text-primary-600 hover:text-primary-700 font-medium cursor-pointer">
            choose from your computer
            <input
              type="file"
              name="image"
              accept="image/*"
              @change="handleImageUpload($event)"
              class="hidden"
            >
          </label>
        </div>
      </div>
    </div>

    <!-- Settings -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Settings</h2>

      <div class="space-y-4">
        <!-- Available Toggle -->
        <label class="flex items-center gap-3 p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
          <input
            type="checkbox"
            x-model="form.is_available"
            name="is_available"
            class="w-4 h-4 text-primary-600 rounded focus:ring-2 focus:ring-primary-500"
          >
          <div>
            <p class="font-medium text-slate-900">Available</p>
            <p class="text-sm text-slate-600">Make this item available for ordering</p>
          </div>
        </label>

        <!-- Featured Toggle -->
        <label class="flex items-center gap-3 p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
          <input
            type="checkbox"
            x-model="form.is_featured"
            name="is_featured"
            class="w-4 h-4 text-primary-600 rounded focus:ring-2 focus:ring-primary-500"
          >
          <div>
            <p class="font-medium text-slate-900">Featured</p>
            <p class="text-sm text-slate-600">Display this item prominently in the menu</p>
          </div>
        </label>
      </div>
    </div>

    <!-- Form Actions -->
    <div class="flex flex-col sm:flex-row gap-3 justify-end">
      <a href="{{ route('menu.index') }}" class="px-6 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium text-center">
        Cancel
      </a>
      <button
        type="submit"
        class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium"
      >
        Create Item
      </button>
    </div>
  </form>
</div>

<script>
  function menuForm() {
    return {
      form: {
        name: '',
        category: '',
        price: 0,
        cost_price: 0,
        description: '',
        is_available: true,
        is_featured: false,
        image_preview: null,
        image_file: null
      },
      dragActive: false,

      handleImageUpload(event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            this.form.image_preview = e.target.result;
            this.form.image_file = file;
          };
          reader.readAsDataURL(file);
        }
      },

      handleDrop(event) {
        const files = event.dataTransfer.files;
        if (files.length > 0 && files[0].type.startsWith('image/')) {
          const reader = new FileReader();
          reader.onload = (e) => {
            this.form.image_preview = e.target.result;
            this.form.image_file = files[0];
          };
          reader.readAsDataURL(files[0]);
          this.dragActive = false;
        }
      },

      clearImage() {
        this.form.image_preview = null;
        this.form.image_file = null;
      },

      submit() {
        if (!this.form.name || !this.form.category || this.form.price <= 0) {
          alert('Please fill in all required fields');
          return;
        }
        alert('Item created successfully! (Demo)');
        // In production, submit form to backend
      }
    };
  }
</script>
@endsection