@extends('backend.layout.layouts')

@section('content')
    <div class="container mx-auto">
        <div class="flex justify-between my-10">
            <h2 class="text-2xl">Update Product</h2>
        </div>

        <form id="updateProductForm" action="{{ route('products.update', $product->id) }}" method="POST"
              enctype="multipart/form-data" class="p-4">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2">
                <!-- Category -->
                <div class="form-group">
                    <label for="category" class="block text-sm font-medium text-gray-700">Category</label>
                    <select id="category" name="category"
                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('category') border-red-500 @enderror"
                            required>
                        <option value="" disabled>Select a category</option>
                        <option value="All Products" {{ $product->category == 'All Products' ? 'selected' : '' }}>All Products</option>
                        <option value="Beauty" {{ $product->category == 'Beauty' ? 'selected' : '' }}>Beauty</option>
                        <option value="Family Care" {{ $product->category == 'Family Care' ? 'selected' : '' }}>Family Care</option>
                        <option value="Home Care" {{ $product->category == 'Home Care' ? 'selected' : '' }}>Home Care</option>
                        <option value="Health & Wellness" {{ $product->category == 'Health & Wellness' ? 'selected' : '' }}>Health & Wellness</option>
                    </select>
                    @error('category')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Brand -->
                <div class="form-group">
                    <label for="brand" class="block text-sm font-medium text-gray-700">Brand</label>
                    <input type="text" id="brand" name="brand" value="{{ old('brand', $product->brand) }}"
                           required
                           class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('brand') border-red-500 @enderror">
                    @error('brand')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Name -->
                <div class="form-group">
                    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input type="text" id="name" name="name" value="{{ old('name', $product->name) }}"
                           required
                           class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('name') border-red-500 @enderror">
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div class="form-group">
                    <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                    <textarea id="description" name="description" 
                              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500"
                              rows="6">{{ old('description', $product->description) }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="flex justify-center p-4 bg-gray-200 border-t">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
    </div>

    <!-- CKEditor Initialization -->
    <script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#description'))
            .catch(error => {
                console.error(error);
            });
    </script>
@endsection