@extends('backend.layout.layouts')

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

            </div>


          <form id="addProductForm" action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data" class="p-4">
    @csrf
                <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2">

                    <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 {{ old('category') == '' ? 'selected' : '' }}>Select a category
                            </option>
                            <option value="All Products" {{ old('category') == 'All Products' ? 'selected' : '' }}>All
                                Products</option>
                            <option value="Beauty" {{ old('category') == 'Beauty' ? 'selected' : '' }}>Beauty</option>
                            <option value="Family Care" {{ old('category') == 'Family Care' ? 'selected' : '' }}>Family Care
                            </option>
                            <option value="Home Care" {{ old('category') == 'Home Care' ? 'selected' : '' }}>Home Care
                            </option>
                            <option value="Health & Wellness"
                                {{ old('category') == 'Health & Wellness' ? 'selected' : '' }}>Health & Wellness</option>
                        </select>
                        @error('category')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <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') }}" 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>



                    <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') }}" 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>



                  

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

<!-- CKEditor Script -->



                </div>
                <div class="grid grid-cols-1 gap-2 mx-10 my-10 md:grid-cols-2">
                    <div>
                        <p class="text-2xl font-bold ">Products Variant </p>
                        <div id="imageFields">
                            <div class="flex items-center mb-4 space-x-4 form-group">
                                <input type="file" name="picture_channel[]"
                                    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('picture_channel.*') border-red-500 @enderror">
                            </div>
                        </div>

                        <button type="button" onclick="addImageField()"
                            class="h-10 mb-2 text-white bg-blue-400 hover:text-gray-300 w-44">Add More Images</button>
                    </div>

                    <div>
                        <p class="text-2xl font-bold ">Products Feature </p>
                        <div id="featureFields">
                            <div class="flex items-center mb-4 space-x-4 form-group">

                                <input type="text" name="particulars[]" placeholder="Particulars"
                                    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('particulars.*') border-red-500 @enderror">
                            </div>
                        </div>

                        <button type="button" onclick="addfeatureField()"
                            class="h-10 mb-2 text-white bg-blue-400 hover:text-gray-300 w-44">Add Feature</button>
                    </div>
                    <div>
                        <div id="variantFields">
                            <div class="flex items-center mb-4 space-x-4 form-group">
                                <input type="text" name="variant[]" placeholder="Variant"
                                    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('variant.*') border-red-500 @enderror">
                                <input type="text" name="price1[]" placeholder="Price"
                                    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('price1.*') border-red-500 @enderror">
                                <input type="number" name="quantity[]" placeholder="quantity"
                                    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('quantity.*') border-red-500 @enderror">

                            </div>
                        </div>
                    </div>


                    <button type="button" onclick="addVariantField()"
                        class="h-10 text-white bg-blue-400 hover:text-gray-300 w-44">Add Variant</button>
                </div>

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

    <script>
        function addImageField() {
            const container = document.getElementById('imageFields');
            const index = container.children.length + 1; // Simple index for each new field

            const newField = document.createElement('div');
            newField.className = 'form-group flex items-center space-x-4 mb-4';
            newField.innerHTML = `
              
                <input type="file" name="picture_channel[]" 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">
                 `;
            container.appendChild(newField);
        }

        function addfeatureField() {
            const container = document.getElementById('featureFields');
            const index = container.children.length + 1; // Simple index for each new field

            const newField = document.createElement('div');
            newField.className = 'form-group flex items-center space-x-4 mb-4';
            newField.innerHTML = `
              
                    <input type="text" name="particulars[]" placeholder="Particulars" 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">
              `;
            container.appendChild(newField);
        }

        function addVariantField() { // Corrected function name
            const container = document.getElementById('variantFields');
            const index = container.children.length + 1; // Simple index for each new field

            const newField = document.createElement('div');
            newField.className = 'form-group flex items-center space-x-4 mb-4';
            newField.innerHTML = `
                  <input type="text" name="variant[]" placeholder="Variant" 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">
           <input type="text" name="price1[]" placeholder="Price1" 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">
            <input type="number" name="quantity[]" placeholder="quantity" 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">
           `;
            container.appendChild(newField);
        }
    </script>
    <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