@extends('layouts.admin')

@section('title', 'Add New Menu Item - ' . $vendor->vendor_name)

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1">Add New Menu Item</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.index') }}">Vendors</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.menu.index', $vendor) }}">{{ $vendor->vendor_name }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.menu.items', [$vendor, $category->id]) }}">{{ $category->name }}</a></li>
                            <li class="breadcrumb-item active">Add New Item</li>
                        </ol>
                    </nav>
                </div>
                <a href="{{ route('admin.vendors.menu.items', [$vendor, $category->id]) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Items
                </a>
            </div>
        </div>
    </div>

    <!-- Create Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-plus me-2"></i>Item Details
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.vendors.menu.items.store', [$vendor, $category->id]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Basic Information -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Item Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name_arabic" class="form-label">Arabic Name</label>
                                    <input type="text" class="form-control @error('name_arabic') is-invalid @enderror" 
                                           id="name_arabic" name="name_arabic" value="{{ old('name_arabic') }}" dir="rtl">
                                    @error('name_arabic')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Descriptions -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="4">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="description_arabic" class="form-label">Arabic Description</label>
                                    <textarea class="form-control @error('description_arabic') is-invalid @enderror" 
                                              id="description_arabic" name="description_arabic" rows="4" dir="rtl">{{ old('description_arabic') }}</textarea>
                                    @error('description_arabic')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Category Selection -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bizspot_main_category_id" class="form-label">Main Category</label>
                                    <input type="text" class="form-control" value="{{ $category->name }}" readonly>
                                    <input type="hidden" name="bizspot_main_category_id" value="{{ $category->id }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bizspot_sub_category_id" class="form-label">Sub Category</label>
                                    <select class="form-select @error('bizspot_sub_category_id') is-invalid @enderror" 
                                            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') == $subCategory->id ? 'selected' : '' }}>
                                                {{ $subCategory->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('bizspot_sub_category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Pricing -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="price" class="form-label">Price (AED) <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">AED</span>
                                        <input type="number" class="form-control @error('price') is-invalid @enderror" 
                                               id="price" name="price" value="{{ old('price') }}" step="0.01" min="0" required>
                                        @error('price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="compare_price" class="form-label">Compare Price (AED)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">AED</span>
                                        <input type="number" class="form-control @error('compare_price') is-invalid @enderror" 
                                               id="compare_price" name="compare_price" value="{{ old('compare_price') }}" step="0.01" min="0">
                                        @error('compare_price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">Original price for showing discounts</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="cost_price" class="form-label">Cost Price (AED)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">AED</span>
                                        <input type="number" class="form-control @error('cost_price') is-invalid @enderror" 
                                               id="cost_price" name="cost_price" value="{{ old('cost_price') }}" step="0.01" min="0">
                                        @error('cost_price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">For profit margin calculations</small>
                                </div>
                            </div>
                        </div>

                        <!-- Options -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="preparation_time" class="form-label">Preparation Time (minutes)</label>
                                    <input type="number" class="form-control @error('preparation_time') is-invalid @enderror" 
                                           id="preparation_time" name="preparation_time" value="{{ old('preparation_time') }}" min="0">
                                    @error('preparation_time')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="calories" class="form-label">Calories</label>
                                    <input type="number" class="form-control @error('calories') is-invalid @enderror" 
                                           id="calories" name="calories" value="{{ old('calories') }}" min="0">
                                    @error('calories')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Checkboxes -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_halal" name="is_halal" value="1" 
                                               {{ old('is_halal') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_halal">
                                            <i class="fas fa-crescent-moon text-success me-1"></i>Halal
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_vegetarian" name="is_vegetarian" value="1" 
                                               {{ old('is_vegetarian') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_vegetarian">
                                            <i class="fas fa-leaf text-success me-1"></i>Vegetarian
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_vegan" name="is_vegan" value="1" 
                                               {{ old('is_vegan') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_vegan">
                                            <i class="fas fa-seedling text-success me-1"></i>Vegan
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_gluten_free" name="is_gluten_free" value="1" 
                                               {{ old('is_gluten_free') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_gluten_free">
                                            <i class="fas fa-wheat text-warning me-1"></i>Gluten Free
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_spicy" name="is_spicy" value="1" 
                                               {{ old('is_spicy') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_spicy">
                                            <i class="fas fa-pepper-hot text-danger me-1"></i>Spicy
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" 
                                               {{ old('is_featured') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_featured">
                                            <i class="fas fa-star text-warning me-1"></i>Featured
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="is_available" name="is_available" value="1" 
                                               {{ old('is_available', '1') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_available">
                                            <i class="fas fa-check-circle text-success me-1"></i>Available
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Image Upload -->
                        <div class="mb-3">
                            <label for="image" class="form-label">Item Image</label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                   id="image" name="image" accept="image/*">
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Recommended size: 800x600px. Max file size: 2MB</small>
                        </div>

                        <!-- Ingredients/Allergens -->
                        <div class="mb-3">
                            <label for="ingredients" class="form-label">Ingredients</label>
                            <textarea class="form-control @error('ingredients') is-invalid @enderror" 
                                      id="ingredients" name="ingredients" rows="3" 
                                      placeholder="List main ingredients separated by commas">{{ old('ingredients') }}</textarea>
                            @error('ingredients')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="allergens" class="form-label">Allergens</label>
                            <textarea class="form-control @error('allergens') is-invalid @enderror" 
                                      id="allergens" name="allergens" rows="2" 
                                      placeholder="List allergens separated by commas (e.g., nuts, dairy, gluten)">{{ old('allergens') }}</textarea>
                            @error('allergens')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.vendors.menu.items', [$vendor, $category->id]) }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Create Item
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar with help -->
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Quick Tips
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6><i class="fas fa-lightbulb text-warning me-2"></i>Pricing Tips</h6>
                        <ul class="small">
                            <li>Set competitive prices for your area</li>
                            <li>Use compare price to show discounts</li>
                            <li>Track cost price for profit analysis</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6><i class="fas fa-image text-primary me-2"></i>Image Guidelines</h6>
                        <ul class="small">
                            <li>Use high-quality, well-lit photos</li>
                            <li>Show the actual dish clearly</li>
                            <li>Recommended size: 800x600px</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6><i class="fas fa-tags text-success me-2"></i>Categories</h6>
                        <p class="small">Currently adding to: <strong>{{ $category->name }}</strong></p>
                        <p class="small">Sub-categories help customers find items more easily.</p>
                    </div>
                    
                    <div class="alert alert-info">
                        <small>
                            <i class="fas fa-info-circle me-1"></i>
                            After creating the item, you can add variants (sizes, options) from the item details page.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.form-check-inline {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}
</style>
@endpush