@include('layouts.header')
		<!-- /Header -->
		@include('layouts.sidebar')

		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>Product Varient</h4>
						
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="{{ route('product_varient')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Product Varient</a>
							</div>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
						</li>
					</ul>
					
				</div>
				<!-- /add -->
				@if(session()->has('success'))
                    <div class="alert alert-success">
                        {{ session()->get('success') }}
                    </div>
					@endif
					@if(session()->has('error'))
					<div class="alert alert-danger">
						{{ session()->get('error') }}
					</div>
				    @endif
				<form action="{{ route('update_product_varient')}}" method="post" enctype="multipart/form-data">
					@csrf
                    <input type="hidden" name="id" value="{{ $product_varient->id}}">
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="accordionExample">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"  aria-controls="collapseOne">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Product Information</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
									<div class="accordion-body">
										<div class="row">
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label>Varient Code</label>
													<input type="text" name="varient_code" readonly id="varient_code" required class="form-control list" value="{{ $product_varient->varient_code}}">
													
												</div>
											</div>
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Product </label>
													<select class="select" name="product_id" required>
														<option>select</option>
														@foreach($products as $row)
														<option value="{{ $row->id}}" {{ $product_varient->product_id == $row->id ? 'selected' : '' }}>{{ $row->product_name}}</option>
														@endforeach 
													</select>
												</div>
											</div>
                                          
										</div>
										<div class="row">
											
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Varient Name</label>
													<input type="text"  name="varient_name" id="varient_name" class="form-control" required value="{{$product_varient->varient_name}}">
												</div>
											</div>
										
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label>Varient Image</label>
													<input type="file" accept=".jpg,.png,.jpeg" name="single_image" readonly id="single_image" required class="form-control list">
													
												</div>
											</div>
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="mb-3 add-product">
                                                    <label class="form-label">Varient Additional Image</label>
                                                    <input type="file"  name="varient_image[]" id="varient_image_input" multiple class="form-control"  accept=".jpg,.png,.jpeg">
                                                </div>
                                            </div>
										</div>
										<div class="">
											<p style="color:#5B6670;font-weight: 600">Choosen Images</p>
											<div id="image_preview_container" class="row"></div>
										</div>
										<div class="row">
											<!-- Show previously uploaded images -->
											<div class="col-lg-12">
												<div class="row" id="existing_images">
													@foreach($varient_images as $row)
													<div class="col-lg-3 col-sm-6 col-12 mb-3 image-preview" id="image_{{ $row->id }}">
														<img src="{{ url('uploads/products/'.$row->image) }}" alt="Varient Image" class="img-fluid" style="height: 100px;">
														<button type="button" class="btn btn-danger btn-sm mt-2" onclick="removeImage({{ $row->id }})">Remove</button>
													</div>
													@endforeach
												</div>
											</div>
										</div>
										
										<!-- Editor -->
										<div class="row">
                                       

										
									</div>
                                        <!-- /Editor -->
									</div>
									</div>
								</div>
							</div>

							
							
						</div>
					</div>
					<!-- Add this hidden input field -->
<input type="hidden" name="removed_images" id="removed_images" value="">

					<div class="col-lg-12">
						<div class="btn-addproduct mb-4">
							<button type="button" class="btn btn-cancel me-2">Cancel</button>
							<button type="submit" class="btn btn-submit">Save Product</button>
						</div>
					</div>
				</form>
			<!-- /add -->

		</div>
	</div>
	</div>
	<!-- /Main Wrapper -->

	



	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
   

	  // Function to generate product code
	  // function generateProductCode(name) {
   //      const words = name.split(" ");
   //      let initials = '';

   //      words.forEach(word => {
   //          if (word.length > 0) {
   //              initials += word[0].toUpperCase();
   //          }
   //      });

   //      return '#' + initials + '01';
   //   }

     // Event listener for the product name input
     // document.getElementById('varient_name').addEventListener('input', function() {
     //    const productName = this.value.trim();
     //    if (productName.length > 0) {
     //        const productCode = generateProductCode(productName);
     //        document.getElementById('varient_code').value = productCode;
     //    } else {
     //        document.getElementById('varient_code').value = '';
     //    }
     // });	

	 function removeImage(imageId) {
    // Remove the image preview from the DOM
    document.getElementById('image_' + imageId).remove();

    // Add the image ID to the hidden field so it's sent with the form
    let removedImagesField = document.getElementById('removed_images');
    let currentValues = removedImagesField.value ? removedImagesField.value.split(',') : [];
    currentValues.push(imageId);
    removedImagesField.value = currentValues.join(',');
}


document.getElementById('varient_image_input').addEventListener('change', function(event) {
    // Clear previous previews
    let imagePreviewContainer = document.getElementById('image_preview_container');
    imagePreviewContainer.innerHTML = '';

    // Get selected files
    let files = event.target.files;

    // Loop through selected files and create a preview for each
    Array.from(files).forEach((file, index) => {
        let fileReader = new FileReader();
        
        fileReader.onload = function(e) {
            // Create a container for the preview and the remove button
            let previewDiv = document.createElement('div');
            previewDiv.className = 'col-lg-3 col-sm-6 col-12 image-preview';
            previewDiv.style.position = 'relative';

            // Create the image element
            let img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100px';
            img.style.height = '100px';
            img.style.objectFit = 'cover';
            img.style.margin = '5px';

            // Create the remove button
            let removeButton = document.createElement('button');
            removeButton.innerHTML = 'Remove';
            removeButton.type = 'button';
            removeButton.style.position = 'absolute';
            removeButton.style.top = '5px';
            removeButton.style.right = '55px';
            removeButton.className = 'btn btn-danger btn-sm';

            // Add event listener for removing the image
            removeButton.addEventListener('click', function() {
                // Remove the image preview
                previewDiv.remove();

                // Remove the file from the input (we need to filter it out)
                const dataTransfer = new DataTransfer();
                Array.from(files).forEach((file, i) => {
                    if (i !== index) { // Keep all files except the one to remove
                        dataTransfer.items.add(file);
                    }
                });
                document.getElementById('varient_image_input').files = dataTransfer.files;
            });

            // Append image and button to the preview div
            previewDiv.appendChild(img);
            previewDiv.appendChild(removeButton);

            // Append the preview div to the container
            imagePreviewContainer.appendChild(previewDiv);
        };
        
        // Read the file as a data URL
        fileReader.readAsDataURL(file);
    });
});

</script>

	@include('layouts.footer')