@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">✏️ Edit Menu Item</h1>
                    <p class="text-muted">
                        <i class="fas fa-store"></i> {{ $vendor->vendor_name }}
                        • <i class="fas fa-tag"></i> {{ $item->bizspotMainCategory->name }}
                    </p>
                </div>
                <div>
                    <a href="{{ route('admin.vendors.menu.index', $vendor) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Menu
                    </a>
                    @if($item->variants->count() > 0)
                        <a href="{{ route('admin.vendors.menu.variants', [$vendor, $item]) }}" class="btn btn-outline-info">
                            <i class="fas fa-layer-group"></i> Manage Variants ({{ $item->variants->count() }})
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6><i class="fas fa-exclamation-circle"></i> Please fix the following errors:</h6>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Edit Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                Edit "{{ $item->name }}"
                @if($item->is_featured)
                    <span class="badge badge-warning ms-2"><i class="fas fa-star"></i> Featured</span>
                @endif
                @if(!$item->is_available)
                    <span class="badge badge-secondary ms-2">Unavailable</span>
                @endif
            </h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.vendors.menu.items.update', [$vendor, $item]) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <div class="row">
                    <div class="col-md-8">
                        <!-- Basic Information -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold">Basic Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">Item Name *</label>
                                        <input type="text" class="form-control" id="name" name="name" 
                                               value="{{ old('name', $item->name) }}" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="bizspot_main_category_id" class="form-label">Main Category</label>
                                        <input type="text" class="form-control" value="{{ $item->bizspotMainCategory->name }}" readonly>
                                        <input type="hidden" name="bizspot_main_category_id" value="{{ $item->bizspot_main_category_id }}">
                                        <small class="form-text text-muted">Main category cannot be changed. Create a new item in a different category if needed.</small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="bizspot_sub_category_id" class="form-label">Sub Category</label>
                                        <select class="form-select" id="bizspot_sub_category_id" name="bizspot_sub_category_id">
                                            <option value="">Select Sub Category (Optional)</option>
                                            @foreach($subCategories as $subCategory)
                                                <option value="{{ $subCategory->id }}" {{ old('bizspot_sub_category_id', $item->bizspot_sub_category_id) == $subCategory->id ? 'selected' : '' }}>
                                                    {{ $subCategory->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="description" class="form-label">Description (English)</label>
                                    <textarea class="form-control" id="description" name="description" rows="3">{{ old('description', $item->description) }}</textarea>
                                </div>

                                <div class="mb-3">
                                    <label for="description_arabic" class="form-label">Description (Arabic)</label>
                                    <textarea class="form-control" id="description_arabic" name="description_arabic" rows="3">{{ old('description_arabic', $item->description_arabic) }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Pricing & Details -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold">Pricing & Details</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="price" class="form-label">Price (AED) *</label>
                                        <div class="input-group">
                                            <span class="input-group-text">AED</span>
                                            <input type="number" class="form-control" id="price" name="price" 
                                                   value="{{ old('price', $item->price) }}" step="0.01" min="0" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="preparation_time_minutes" class="form-label">Prep Time (minutes)</label>
                                        <input type="number" class="form-control" id="preparation_time_minutes" name="preparation_time_minutes" 
                                               value="{{ old('preparation_time_minutes', $item->preparation_time_minutes) }}" min="0">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="calories" class="form-label">Calories</label>
                                        <input type="number" class="form-control" id="calories" name="calories" 
                                               value="{{ old('calories', $item->calories) }}" min="0">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="ingredients" class="form-label">Ingredients</label>
                                        <textarea class="form-control" id="ingredients" name="ingredients" rows="2">{{ old('ingredients', $item->ingredients) }}</textarea>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="allergens" class="form-label">Allergens</label>
                                        <input type="text" class="form-control" id="allergens" name="allergens" 
                                               value="{{ old('allergens', $item->allergens) }}" 
                                               placeholder="e.g., Dairy, Nuts, Gluten">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Images -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold">Images</h6>
                            </div>
                            <div class="card-body">
                                @if($item->images && is_array($item->images) && count($item->images) > 0)
                                    <div class="mb-3">
                                        <label class="form-label">Current Images</label>
                                        <div class="row">
                                            @foreach($item->images as $image)
                                                <div class="col-md-3 mb-2">
                                                    <img src="{{ Storage::url($image) }}" class="img-thumbnail" style="height: 100px; width: 100%; object-fit: cover;">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <div class="mb-3">
                                    <label for="new_images" class="form-label">Upload New Images</label>
                                    <input type="file" class="form-control" id="new_images" name="new_images[]" multiple accept="image/*">
                                    <div class="form-text">You can select multiple images. Accepted formats: JPG, PNG, GIF</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <!-- Status & Availability -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold">Status & Availability</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_available" name="is_available" value="1" 
                                               {{ old('is_available', $item->is_available) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_available">
                                            <strong>Available for ordering</strong>
                                        </label>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" 
                                               {{ old('is_featured', $item->is_featured) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_featured">
                                            <strong>Featured item</strong> ⭐
                                        </label>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="sort_order" class="form-label">Display Order</label>
                                    <input type="number" class="form-control" id="sort_order" name="sort_order" 
                                           value="{{ old('sort_order', $item->sort_order) }}" min="1">
                                </div>
                            </div>
                        </div>

                        <!-- Dietary Information -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold">Dietary Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_vegetarian" name="is_vegetarian" value="1" 
                                               {{ old('is_vegetarian', $item->is_vegetarian) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_vegetarian">
                                            🥬 Vegetarian
                                        </label>
                                    </div>
                                </div>

                                <div class="mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_vegan" name="is_vegan" value="1" 
                                               {{ old('is_vegan', $item->is_vegan) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_vegan">
                                            🌱 Vegan
                                        </label>
                                    </div>
                                </div>

                                <div class="mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_halal" name="is_halal" value="1" 
                                               {{ old('is_halal', $item->is_halal) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_halal">
                                            🕌 Halal
                                        </label>
                                    </div>
                                </div>

                                <div class="mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_spicy" name="is_spicy" value="1" 
                                               {{ old('is_spicy', $item->is_spicy) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_spicy">
                                            🌶️ Spicy
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tags -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold">Tags</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="tags" class="form-label">Tags (comma separated)</label>
                                    <input type="text" class="form-control" id="tags" name="tags" 
                                           value="{{ old('tags', is_array($item->tags) ? implode(', ', $item->tags) : '') }}" 
                                           placeholder="e.g., popular, healthy, traditional">
                                    <div class="form-text">Add descriptive tags to help customers find this item</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <div>
                                <a href="{{ route('admin.vendors.menu.index', $vendor) }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Update Menu Item
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card shadow mt-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">🚀 Quick Actions</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 mb-2">
                    <form method="POST" action="{{ route('admin.vendors.menu.items.toggle-availability', [$vendor, $item]) }}" class="d-inline">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-outline-{{ $item->is_available ? 'warning' : 'success' }} btn-sm w-100">
                            <i class="fas fa-{{ $item->is_available ? 'eye-slash' : 'eye' }}"></i> 
                            {{ $item->is_available ? 'Mark Unavailable' : 'Mark Available' }}
                        </button>
                    </form>
                </div>
                <div class="col-md-3 mb-2">
                    <form method="POST" action="{{ route('admin.vendors.menu.items.toggle-featured', [$vendor, $item]) }}" class="d-inline">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-outline-{{ $item->is_featured ? 'secondary' : 'warning' }} btn-sm w-100">
                            <i class="fas fa-star"></i> 
                            {{ $item->is_featured ? 'Remove Featured' : 'Make Featured' }}
                        </button>
                    </form>
                </div>
                <div class="col-md-3 mb-2">
                    <a href="{{ route('admin.vendors.menu.variants', [$vendor, $item]) }}" class="btn btn-outline-info btn-sm w-100">
                        <i class="fas fa-layer-group"></i> Manage Variants
                    </a>
                </div>
                <div class="col-md-3 mb-2">
                    <form method="POST" action="{{ route('admin.vendors.menu.items.delete', [$vendor, $item]) }}" 
                          class="d-inline" onsubmit="return confirm('Are you sure you want to delete this item? This action cannot be undone.')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline-danger btn-sm w-100">
                            <i class="fas fa-trash"></i> Delete Item
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection