@extends('layouts.user')

@section('title')
    Affiliate Vendorship
@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">Apply For Affiliate Vendorship</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="{{ url('/') }}">Home</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">Become A Vendor</li>
                </ul>
            </div>
        </section><!--end section-->
        <!-- End Hero -->

        <!-- Start Section-->
        <section class="relative py-16 md:py-24">
            <div class="container relative">
                <div class="grid items-center grid-cols-1 gap-6 md:grid-cols-12">
                    <div class="lg:col-span-5 md:col-span-6">
                        <div class="grid items-center grid-cols-12 gap-6">
                            <div class="col-span-6">
                                <div class="grid grid-cols-1 gap-6">
                                    <img src="assets/images/ab3.jpg" class="rounded-md shadow" alt="">
                                    <img src="assets/images/ab4.jpg" class="rounded-md shadow" alt="">
                                </div>
                            </div>

                            <div class="col-span-6">
                                <div class="grid grid-cols-1 gap-6">
                                    <img src="assets/images/ab1.jpg" class="rounded-md shadow" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-span-7 lg: md:col-span-6">
                        <div class="lg:ms-5">
                            <h3 class="mb-6 text-3xl font-semibold leading-normal">Join thousands of store owners and sell your own products</h3>

                            <p class="max-w-xl mb-2 text-slate-400">Are you passionate about your products and want to share them with a wider audience? Join our platform as an affiliate vendor and turn your passion into profits!</p>
                        
                            <h3 class="mt-4 mb-2 text-2xl font-semibold text-slate-400">How It Works:</h3>
                            <ol class="max-w-xl mb-2 text-slate-400">
                                <li><strong>Apply:</strong> Apply for the vendorship program by filling up the details below.</li>
                                <li><strong>Upload Your Products:</strong> Upload your products with detailed descriptions and appealing images for approval.</li>
                                <li><strong>Send Your Products To Us:</strong> Upon approval send your products through trusted courier platforms and get verified</li>
                                <li><strong>Products Uploaded:</strong> Your products willbe available for bidding and selling on the platform.</li>
                                <li><strong>Earn Commissions:</strong> Receive commissions on each sale initiated on your products.</li>
                            </ol>

                            {{--<div class="mt-6">
                                <a href="#" class="text-orange-500">Read More <i class="align-middle mdi mdi-chevron-right"></i></a>
                            </div>--}}
                        </div>
                    </div>
                </div><!--end grid-->
            </div><!--end container-->

            <div class="container relative mt-16 md:mt-24" 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">Vendorshp Application 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 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>

                                        <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