@extends('layouts.user')

@section('title')
    Add Vendor Products
@endsection

@section('content')
<!-- Start Hero -->
<section class="relative table w-full py-36 lg:py-44 bg-[url('../../assets/images/hero/pages.html')] bg-no-repeat bg-center bg-cover" style="background-image: url('{{ asset('images/affiliate-vendor.jpg') }}');">
            <div class="absolute inset-0 bg-black opacity-80"></div>
            <div class="container relative">
                <div class="grid grid-cols-1 pb-8 mt-12 text-center">
                    <h3 class="text-4xl font-semibold leading-normal tracking-wider text-white">Add Products To Vendor Dashboard</h3>
                </div><!--end grid-->
            </div><!--end container-->

            <div class="absolute z-10 mx-3 text-center bottom-5 start-0 end-0">
                <ul class="tracking-[0.5px] mb-0 inline-block">
                    <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white/50 hover:text-white"><a href="{{ route('home') }}">Dashboard</a></li>
                    <li class="inline-block text-base text-white/50 mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="mdi mdi-chevron-right"></i></li>
                    <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white" aria-current="page">Add Products</li>
                </ul>
            </div>
        </section><!--end section-->
        <!-- End Hero -->

            <!-- Start Section-->
            <section class="relative py-6">

                <div class="container relative mt-16" id="add-product">
                    <div class="grid grid-cols-1 pb-8 text-center">
                        <h3 class="mb-4 md:text-[26px] md:leading-normal text-2xl leading-normal font-semibold">Add More Products Form</h3>

                        <p class="max-w-xl mx-auto text-slate-400">Join our community of affiliate vendors and let our arbitrageurs scale it up for for fast sales! Fill the form below to continue</p>

                        <p class="max-w-xl mx-auto my-3 text-red-600">Note: You can only add a minimum of products worth $10,000 in total value.</p>
                    </div><!--end grid-->

                    <x-alert/>

                    @if ($errors->any())
                        <div class="relative p-4 py-3 mb-4 bg-error-50 text-error-300 alert alert-danger" role="alert" style="background-color: #ffc9c9; border: 1px solid #720000; border-radius: 10px;">
                            <span class="block sm:inline">
                                <small style="color: #710000;">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>• {{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </small>
                            </span>
                        </div>
                    @endif

                    @if(request()->has('error'))
                        <div class="relative p-4 py-3 mb-4 bg-error-50 text-error-300 alert alert-danger" role="alert" style="background-color: #ffc9c9; border: 1px solid #720000; border-radius: 10px;">
                            <span class="block sm:inline"><small style="color: #710000;">{{ urldecode(request('error')) }}</small></span>
                        </div>
                    @endif

                    <div class="my-4">
                        <div class="text-start">
                            <label for="name" class="font-semibold">Amount of products you want to submit:</label>
                            <div class="relative mt-2 form-icon">
                                <input name="amount" required id="productCount" type="number" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" min="1" value="1">
                            </div>
                        </div>
                        <button type="submit" class="flex items-center mt-3 justify-center px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 border border-orange-500 rounded-md hover:bg-orange-600 hover:border-orange-600">
                            Done
                        </button>
                    </div>

                    <div class="lg:col-start-3 lg:col-span-8 md:col-start-2 md:col-span-10">
                            <div class="p-1 bg-white">
                                <form method="post" action="{{ route('vendor-applied') }}" enctype="multipart/form-data">
                                    @csrf
                                    <div id="productForms">
                                        <div class="p-4 my-6 rounded-md shadow singleForm dark:bg-slate-900 dark:shadow-gray-800 productForm">
                                            <h3 class="mb-4 md:text-[26px] md:leading-normal text-2xl leading-normal font-semibold">Product 1</h3>
                                            <p class="mb-0" id="error-msg"></p>
                                            <div id="simple-msg"></div>

                    <!-- Add a hidden input field to store the count of product forms -->
                    <input type="hidden" id="productCount" name="productCount" value="{{ old('productCount', 1) }}">

                                            <div class="mb-5">
                                                    <div class="text-start">
                                                        <label for="location" class="font-semibold">What's your location? *:</label>
                                                        <small>Kindly enter your current location so we get a drop-off location closest to you and thereby reducing delivery cost</small>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="map-pin" class="absolute size-4 top-3 start-4"></i>
                                                            <textarea name="products[1][location]" required id="location" class="w-full px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 h-28 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" 
                                                                placeholder="Enter Country, State, City/Town, House Address :"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            <div class="grid lg:grid-cols-12 lg:gap-6">
                                                
                                                <div class="mb-5 lg:col-span-6">
                                                    <div class="text-start">
                                                        <label for="name" class="font-semibold">Product Name *:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <input name="products[1][name]" required id="name" type="text" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Product Name :">
                                                        </div>
                                                    </div>
                                                </div>
                
                                                <div class="mb-5 lg:col-span-6">
                                                    <div class="text-start">
                                                        <label for="email" class="font-semibold">Product Category *:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <select name="products[1][category]" id="category" required class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                                                <option value="Beauty & personal care">Beauty & personal care</option>
                                                                <option value="Accessories">Accessories</option>
                                                                <option value="Home appliances and utensils">Home appliances and utensils</option>
                                                                <option value="Sports and outdoor">Sports and outdoor</option>
                                                                <option value="Toys and games">Toys and games</option>
                                                                <option value="Groceries">Groceries</option>
                                                                <option value="Gadgets and electronics">Gadgets and electronics</option>
                                                                <option value="Video games">Video games</option>
                                                                <option value="Lawn and garden">Lawn and garden</option>
                                                                <option value="Automotive kits">Automotive kits</option>
                                                                <option value="Books">Books</option>
                                                                <option value="Jewelry">Jewelry</option>
                                                                <option value="Babies">Babies</option>
                                                                <option value="General furnitures">General furnitures</option>
                                                                <option value="Instruments">Instruments</option>
                                                                <option value="Industrial">Industrial</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="grid lg:grid-cols-12 lg:gap-6">    
                                                <div class="mb-5 lg:col-span-6">
                                                    <div class="text-start">
                                                        <label for="subject" class="font-semibold">Product Value *:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="dollar-sign" class="absolute size-4 top-3 start-4"></i>
                                                            <input type="number" name="products[1][value]" required id="value" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="0.00">
                                                        </div>
                                                    </div>
                                                </div>
                
                                                <div class="mb-5 lg:col-span-6">
                                                    <div class="text-start">
                                                        <label for="subject" class="font-semibold">Product Quantity *:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="shopping-bag" class="absolute size-4 top-3 start-4"></i>
                                                            <input type="number" name="products[1][quantity]" required id="value" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-1">
                                                <div class="mb-5">
                                                    <div class="text-start">
                                                        <label for="subject" class="font-semibold">Product Main Image *:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="image" class="absolute size-4 top-3 start-4"></i>
                                                            <input type="file" name="products[1][image1]" required id="image1" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                                            @error('products.1.image1')
                                                                <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                                                    <small class="text-center">{{ $message }}</small>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-5">
                                                    <div class="text-start">
                                                        <label for="subject" class="font-semibold">Product Second Image:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="image" class="absolute size-4 top-3 start-4"></i>
                                                            <input type="file" name="products[1][image2]" id="image2" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                                            @error('products.1.image2')
                                                                <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                                                    <small class="text-center">{{ $message }}</small>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-5">
                                                    <div class="text-start">
                                                        <label for="subject" class="font-semibold">Product Third Image:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="image" class="absolute size-4 top-3 start-4"></i>
                                                            <input type="file" name="products[1][image3]" id="image3" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                                            @error('products.1.image3')
                                                                <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                                                    <small class="text-center">{{ $message }}</small>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-5">
                                                    <div class="text-start">
                                                        <label for="comments" class="font-semibold">Product Description *:</label>
                                                        <div class="relative mt-2 form-icon">
                                                            <i data-feather="message-circle" class="absolute size-4 top-3 start-4"></i>
                                                            <textarea name="products[1][description]" required id="description" class="w-full px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 h-28 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Description :"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="flex items-center justify-center px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 border border-orange-500 rounded-md hover:bg-orange-600 hover:border-orange-600">
                                        Submit Application
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div><!-- grid-->
                </div><!--end container-->
            </section><!--end section-->
            <!-- End Section-->




    <script>
    document.addEventListener("DOMContentLoaded", function() {
    const productCountInput = document.getElementById("productCount");
    const productFormsContainer = document.getElementById("productForms");

    productCountInput.addEventListener("change", function() {
        const count = parseInt(productCountInput.value);
        const existingFormCount = productFormsContainer.children.length;

        if (count > existingFormCount) {
        // Add new forms
        for (let i = existingFormCount + 1; i <= count; i++) {
            const newForm = document.createElement("div");
            newForm.classList.add("productForm");
            newForm.innerHTML = `
            <div class="p-4 my-6 rounded-md shadow productForm dark:bg-slate-900 dark:shadow-gray-800">
                <h3 class="mb-4 md:text-[26px] md:leading-normal text-2xl leading-normal font-semibold">Product ${i}</h3>
                <p class="mb-0" id="error-msg"></p>
                <div id="simple-msg"></div>

                <div class="mb-5">
                        <div class="text-start">
                            <label for="location" class="font-semibold">What's your location? *:</label>
                            <small>Kindly enter your current location so we get a drop-off location closest to you and thereby  reducing delivery cost</small>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="map-pin" class="absolute size-4 top-3 start-4"></i>
                                <textarea name="products[${i}][location]" required id="location" class="w-full px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 h-28 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" 
                                    placeholder="Enter Country, State, City/Town, House Address :"></textarea>
                            </div>
                        </div>
                    </div>
                    
                <div class="grid lg:grid-cols-12 lg:gap-6">
                    
                    <div class="mb-5 lg:col-span-6">
                        <div class="text-start">
                            <label for="name" class="font-semibold">Product Name *:</label>
                            <div class="relative mt-2 form-icon">
                                <input name="products[${i}][name]" required id="name" type="text" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Product Name :">
                            </div>
                        </div>
                    </div>

                    <div class="mb-5 lg:col-span-6">
                        <div class="text-start">
                            <label for="email" class="font-semibold">Product Category *:</label>
                            <div class="relative mt-2 form-icon">
                                <select name="products[${i}][category]" id="category" required class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                    <option value="Beauty & personal care">Beauty & personal care</option>
                                    <option value="Accessories">Accessories</option>
                                    <option value="Home appliances and utensils">Home appliances and utensils</option>
                                    <option value="Sports and outdoor">Sports and outdoor</option>
                                    <option value="Toys and games">Toys and games</option>
                                    <option value="Groceries">Groceries</option>
                                    <option value="Gadgets and electronics">Gadgets and electronics</option>
                                    <option value="Video games">Video games</option>
                                    <option value="Lawn and garden">Lawn and garden</option>
                                    <option value="Automotive kits">Automotive kits</option>
                                    <option value="Books">Books</option>
                                    <option value="Jewelry">Jewelry</option>
                                    <option value="Babies">Babies</option>
                                    <option value="General furnitures">General furnitures</option>
                                    <option value="Instruments">Instruments</option>
                                    <option value="Industrial">Industrial</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid lg:grid-cols-12 lg:gap-6">    
                    <div class="mb-5 lg:col-span-6">
                        <div class="text-start">
                            <label for="subject" class="font-semibold">Product Value *:</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="dollar-sign" class="absolute size-4 top-3 start-4"></i>
                                <input type="number" name="products[${i}][value]" required id="value" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="0.00">
                            </div>
                        </div>
                    </div>

                    <div class="mb-5 lg:col-span-6">
                        <div class="text-start">
                            <label for="subject" class="font-semibold">Product Quantity *:</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="shopping-bag" class="absolute size-4 top-3 start-4"></i>
                                <input type="number" name="products[${i}][quantity]" required id="value" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1">
                    <div class="mb-5">
                        <div class="text-start">
                            <label for="subject" class="font-semibold">Product Main Image *:</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="image" class="absolute size-4 top-3 start-4"></i>
                                <input type="file" name="products[${i}][image1]" required id="image1" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                @error('products.${i}.image1')
                                    <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                        <small class="text-center">{{ $message }}</small>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-5">
                        <div class="text-start">
                            <label for="subject" class="font-semibold">Product Second Image:</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="image" class="absolute size-4 top-3 start-4"></i>
                                <input type="file" name="products[${i}][image2]" id="image2" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                @error('products.${i}.image2')
                                    <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                        <small class="text-center">{{ $message }}</small>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-5">
                        <div class="text-start">
                            <label for="subject" class="font-semibold">Product Third Image:</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="image" class="absolute size-4 top-3 start-4"></i>
                                <input type="file" name="products[${i}][image3]" id="image3" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">
                                @error('products.${i}.image3')
                                    <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                        <small class="text-center">{{ $message }}</small>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-5">
                        <div class="text-start">
                            <label for="comments" class="font-semibold">Product Description *:</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="message-circle" class="absolute size-4 top-3 start-4"></i>
                                <textarea name="products[${i}][description]" required id="description" class="w-full px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-11 h-28 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Description :"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            `;
            // Append your form fields here
            productFormsContainer.appendChild(newForm);
        }
        } else if (count < existingFormCount) {
        // Remove excess forms
        while (existingFormCount > count) {
            productFormsContainer.removeChild(productFormsContainer.lastChild);
            existingFormCount--;
        }
        }
    });
    });
    </script>
@endsection