@extends('admin.layouts.main')

@section('title', 'Edit Menu Item')
@section('page-title', 'Edit Menu Item')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.menu.index') }}">Menu Management</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.menu.show', $menu['id']) }}">{{ $menu['name'] }}</a></li>
    <li class="breadcrumb-item active">Edit</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Edit Menu Item: {{ $menu['name'] }}</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.menu.update', $menu['id']) }}" method="POST" 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="card-title mb-0">Basic Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="name">Name *</label>
                                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                           id="name" name="name" value="{{ old('name', $menu['name']) }}" required>
                                                    @error('name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="category_id">Category *</label>
                                                    <select class="form-control select2 @error('category_id') is-invalid @enderror" 
                                                            id="category_id" name="category_id" required>
                                                        <option value="">Select Category</option>
                                                        @foreach($categories as $category)
                                                            <option value="{{ $category['id'] }}" 
                                                                {{ old('category_id', $menu['category_id']) == $category['id'] ? 'selected' : '' }}>
                                                                {{ $category['name'] }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('category_id')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="price">Price (Rp) *</label>
                                                    <input type="number" class="form-control @error('price') is-invalid @enderror" 
                                                           id="price" name="price" value="{{ old('price', $menu['price']) }}" 
                                                           min="0" step="100" required>
                                                    @error('price')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="stock">Stock</label>
                                                    <input type="number" class="form-control @error('stock') is-invalid @enderror" 
                                                           id="stock" name="stock" value="{{ old('stock', $menu['stock']) }}" 
                                                           min="0" placeholder="Leave empty for unlimited">
                                                    @error('stock')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="description">Description</label>
                                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                                      id="description" name="description" rows="3">{{ old('description', $menu['description']) }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <!-- Image Upload -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-title mb-0">Image</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="image">Menu Image</label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('image') is-invalid @enderror" 
                                                       id="image" name="image" accept="image/*">
                                                <label class="custom-file-label" for="image">Choose file</label>
                                                @error('image')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <small class="form-text text-muted">
                                                Recommended size: 500x500px. Max size: 2MB. Allowed: JPG, JPEG, PNG
                                            </small>
                                        </div>
                                        
                                        <div class="text-center">
                                            @if($menu['image_url'])
                                                <img id="imagePreview" src="{{ $menu['image_url'] }}" 
                                                     alt="{{ $menu['name'] }}" class="img-fluid rounded" style="max-height: 200px;">
                                                <div class="mt-2">
                                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                                            onclick="removeImage()">
                                                        <i class="fas fa-trash mr-1"></i> Remove Image
                                                    </button>
                                                    <input type="hidden" id="remove_image" name="remove_image" value="0">
                                                </div>
                                            @else
                                                <img id="imagePreview" src="https://via.placeholder.com/300x300?text=No+Image" 
                                                     alt="Preview" class="img-fluid rounded" style="max-height: 200px;">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Settings -->
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="card-title mb-0">Settings</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <div class="custom-control custom-switch mb-3">
                                                <input type="checkbox" class="custom-control-input" id="is_available" 
                                                       name="is_available" value="1" 
                                                       {{ old('is_available', $menu['is_available']) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="is_available">Available</label>
                                            </div>
                                            
                                            <div class="custom-control custom-switch mb-3">
                                                <input type="checkbox" class="custom-control-input" id="is_special" 
                                                       name="is_special" value="1" 
                                                       {{ old('is_special', $menu['is_special']) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="is_special">Mark as Special</label>
                                            </div>
                                            
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" id="is_best_seller" 
                                                       name="is_best_seller" value="1" 
                                                       {{ old('is_best_seller', $menu['is_best_seller']) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="is_best_seller">Mark as Best Seller</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('admin.menu.show', $menu['id']) }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left mr-1"></i> Cancel
                                    </a>
                                    <div>
                                        <a href="{{ route('admin.menu.index') }}" class="btn btn-outline-secondary mr-2">
                                            Back to List
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save mr-1"></i> Update Item
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Image preview
        const imageInput = document.getElementById('image');
        const imagePreview = document.getElementById('imagePreview');
        const removeImageInput = document.getElementById('remove_image');
        
        imageInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                }
                
                reader.readAsDataURL(this.files[0]);
                
                // Update file label
                const fileName = this.files[0].name;
                const label = this.nextElementSibling;
                label.textContent = fileName;
                
                // Reset remove image flag if new image is selected
                if (removeImageInput) {
                    removeImageInput.value = '0';
                }
            }
        });
        
        // Custom file input styling
        $('.custom-file-input').on('change', function() {
            let fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').addClass("selected").html(fileName);
        });
        
        // Initialize Select2
        $('.select2').select2({
            theme: 'bootstrap-5'
        });
    });
    
    function removeImage() {
        const imagePreview = document.getElementById('imagePreview');
        const removeImageInput = document.getElementById('remove_image');
        
        // Set preview to placeholder
        imagePreview.src = 'https://via.placeholder.com/300x300?text=No+Image';
        
        // Clear file input
        const fileInput = document.getElementById('image');
        fileInput.value = '';
        const label = fileInput.nextElementSibling;
        label.textContent = 'Choose file';
        label.classList.remove('selected');
        
        // Set remove image flag
        if (removeImageInput) {
            removeImageInput.value = '1';
        }
    }
</script>
@endsection