@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    use App\General\ProductClass;
    $logged_in_user = Auth::user();
@endphp

<style>
.img-preview {
  max-width: 200px;
  height: auto;
  margin: 10px;
}

.btn-remove {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.preview-wrapper {
  position: relative;
  display: inline-block;
  border: 2px solid transparent;
  margin: 5px;
}
.preview-wrapper.selected {
  border-color: #007bff;
}
.radio-button {
  position: absolute;
  top: 5px;
  left: 5px;
}
.select2-selection__choice__remove{
    display: none !important;
}
</style>

<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
   <!--================================-->
   <!-- Breadcrumb Start -->
   <!--================================-->
   <div class="pageheader pd-t-25 pd-b-35">
      <div class="d-flex justify-content-between">
         <div class="clearfix">
            <div class="pd-t-5 pd-b-5">
               <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Edit Product') }}</h1>
            </div>
            <div class="breadcrumb pd-0 mg-0">
               <a class="breadcrumb-item" href="{{url('/')}}/admin"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
               <a class="breadcrumb-item" href="{{url('/')}}/admin/products">Products</a>
               <span class="breadcrumb-item active">Edit</span>
            </div>
         </div>
         <div class="d-flex align-items-center">
            @if (Session::has('permissions') && in_array('Product List', Session::get('permissions')))
            <button type="button" onclick="window.location = '{{url('/')}}/admin/products'" class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
            <i data-feather="package" class="wd-16 mr-2"></i>Product List</button>
           @endif
            @if (Session::has('permissions') && in_array('Product Trash List', Session::get('permissions')))
            <button type="button" onclick="window.location = '{{url('/')}}/admin/products/list/trash'" class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
            <i data-feather="package" class="wd-16 mr-2"></i>Trash List</button>
           @endif
            @if (Session::has('permissions') && in_array('Create Product', Session::get('permissions')))
            <button type="button" onclick="window.location = '{{url('/')}}/admin/products/create'" class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
            <i data-feather="package" class="wd-16 mr-2"></i>Create Product</button>
         @endif
         </div>
      </div>
   </div>
   <!--/ Breadcrumb End -->
   <!--================================-->
        <!--================================-->
        <div class="col-md-12 col-lg-12 px-0">

            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                        <li>If you have already selected featured image, Please select it again!</li>
                    </ul>
                </div>
            @endif
            <form id="product-create-form" method="POST" action="{{ route('products.update', $product->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="created_by" value="{{$logged_in_user->id}}">
                <div class="row">
                    <div class="col-md-9">
                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Details (Compulsory)') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                                <div class="form-group">
                                    <label class="form-control-label active">Title: <span class="tx-danger">*</span></label>
                                    <input class="form-control form-control-lg  addTitle" type="text" name="title" placeholder="Shoulder Bag" value="{{ old('title',$product->title) }}" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Permalink: <span class="tx-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text input-group-text">{{url('/')}}/product-detail/</span>
                                        </div>
                                        <input class="form-control form-control  permalink" id="permalink" type="text" name="permalink" value="{{ old('permalink',$product->permalink) }}" placeholder="shoulder-bag" required>
                                    </div>
                                    <div class="text-danger permalink_error"></div>
                                    <input type="hidden" class="permalink_status" name="permalink_status" value="{{ old('permalink_status',1) }}" required>
                                </div>
                           </div>
                        </div>
                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Details (Optional)') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                                <div class="form-group">
                                    <label class="form-control-label active">Short Description: </label>
                                    <textarea class="form-control" id="short_description" name="short_description" placeholder="Short Description...">{{ old('short_description',$product->short_description) }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Long Description: </label>
                                    <textarea class="form-control" id="long_description" name="long_description" placeholder="Long Description..."> {{ old('long_description',$product->long_description) }}</textarea>
                                </div>
                           </div>
                        </div>
                             <div class="card mg-b-30">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="card-header-title tx-13 mb-0">{{ __('Gallery Media (Optional)') }}</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body gallery-media">
                                <div class="input-group mb-3">
                                    <input type="file" class="form-control" id="imageInput" name="gallery_media[]" multiple accept="image/*" placeholder="Select Images">
                                    <button type="button" class="btn btn-priamry" onclick="uploadImages()">Upload</button>
                                </div>

                                <div class="row mt-3" id="imagePreviewContainer">
                                    @if($product->gallery_media != '')
                                        @php
                                        $imagePaths = explode(',', $product->gallery_media);
                                        @endphp
                                        @foreach($imagePaths as $imagePath)
                                        <div class="col-md-3 image-item position-relative">
                                            <img class="m-1 img-fluid" src="{{ url('/').'/'.$imagePath }}" alt="Gallery Image">
                                            <!-- Cross button overlay -->
                                            <button type="button" 
                                                    class="btn btn-danger btn-sm px-2 py-0 delete-btn position-absolute" 
                                                    style="top:5px; right:5px;" 
                                                    data-image="{{ $imagePath }}"
                                                    data-product-id="{{ $product->id }}">
                                                &times;
                                            </button>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>

                                <div class="response_section"></div>
                                <small class="text-secondary">Select a gallery image by clicking on it.</small>
                            </div>
                            </div>
                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product SEO Details (Optional)') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                                <div class="form-group">
                                    <label class="form-control-label active">SEO Title: </label>
                                    <input type="text" class="form-control" name="_seo_title" value="{{ old('_seo_title', ProductClass::getOptionValue('_seo_title', $product->productMeta)) }}" placeholder="SEO Title...">
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">SEO Tags: </label>
                                    <input type="text" name="_seo_tags" value="{{ old('_seo_tags', ProductClass::getOptionValue('_seo_tags', $product->productMeta)) }}" class="form-control rounded-0" id="seo_tags">
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">SEO Description: </label>
                                    <textarea class="form-control" name="_seo_description" placeholder="SEO Description...">{{ old('_seo_description', ProductClass::getOptionValue('_seo_description', $product->productMeta)) }}</textarea>
                                </div>
                           </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Shipping Areas (Required)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body " style="padding: 1 rem !important;">
                            <div class="form-group">
                                                        @php
                                // Combine all groupmeta entries into one collection
                                $uniqueMetas = collect();
                                foreach ($areagroups as $areagroup) {
                                    $uniqueMetas = $uniqueMetas->merge($areagroup->groupsMeta);
                                }

                                // Filter them to unique by postcode (or title)
                                // Use 'postcode' if that’s the key that truly identifies uniqueness
                                $uniqueMetas = $uniqueMetas->unique('postcode')->values();
                            @endphp

                                <label>Select Shipping Area:</label>
                                <select class="select2-demo form-control" name="area_group_id[]" multiple>
                                    @php
                                        // Optionally include "All Countries"
                                    @endphp
                                    <option value="0"
                                        @if(in_array("0", old('area_group_id', explode(',', $product->area_group_id ?? ''))))
                                            selected
                                        @endif
                                    >
                                        All Countries
                                    </option>

                                    @foreach ($uniqueMetas as $meta)
                                        <option value="{{ $meta->postcode }}"
                                            @if(in_array($meta->postcode, old('area_group_id', explode(',', $product->area_group_id ?? ''))))
                                                selected
                                            @endif
                                        >
                                            {{ $meta->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('More Details (Optional)') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                           <div class="form-group">
                                <label class="form-control-label active">Brand: </label>
                                <select class="select2-demo form-control" name="brand_id" style="width: 100%">
                                <option value="0" selected>Select Brand</option>
                                    @foreach($brands as $brand)
                                        <option value="{{$brand->id}}" @if($product->brand_id == $brand->id) selected @endif>{{$brand->title}}</option>
                                    @endforeach
                                </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Discount: </label>
                                    <select class="form-control"  name="discount_id">
                                    <option value="0" selected>Select Discount On Product</option>
                                      @foreach($discounts as $discount)
                                      <option value="{{$discount->id}}" @if($product->discount_id == $discount->id) selected @endif>{{$discount->title}}</option>
                                      @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">GST Included: </label>
                                    <select class="form-control" id="_gst" name="_gst">
                                        <option value="1" @if(ProductClass::getOptionValue('_gst', $product->productMeta) == 1) selected @endif>True</option>
                                        <option value="0" @if(ProductClass::getOptionValue('_gst', $product->productMeta) == 0) selected @endif>False</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                <label class="form-control-label active">Product Type: </label>
                                <select class="select2-demo form-control" name="product_type" style="width: 100%" required>
                                    @foreach($producttypes as $producttype)
                                        <option value="{{$producttype->id}}" @if($product->product_type == $producttype->id) selected @endif>{{$producttype->title}}</option>
                                    @endforeach
                                </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Product Varient: </label>
                                    <select class="form-control" id="variant" name="variant">
                                        <option value="1"  @if(old('variant', $product->variant) == 1 ) selected @endif >Individual</option>
                                        <!-- <option value="2"  @if(old('variant', $product->variant) == 2 ) selected @endif >Kit Product</option> -->
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Stock Status:</label>
                                    <select class="form-control" name="_stock_status">
                                        <option value="in_stock"
                                            {{ old('_stock_status', ProductClass::getOptionValue('_stock_status', $product->productMeta)) === 'in_stock' ? 'selected' : '' }}>
                                            In Stock
                                        </option>
                                        <option value="out_stock"
                                            {{ old('_stock_status', ProductClass::getOptionValue('_stock_status', $product->productMeta)) === 'out_stock' ? 'selected' : '' }}>
                                            Out of Stock
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group regular_price_Section">
                                    <label class="form-control-label active">Buy Price: </label>
                                    <input class="form-control" type="number" min="0" value="{{ old('_buy_price', ProductClass::getOptionValue('_buy_price', $product->productMeta)) }}" step="0.1" name="_buy_price" required>
                                </div>
                               <div class="form-group regular_price_Section">
                                   <label class="form-control-label active">Price:</label>
                                   <input class="form-control" type="number" min="0" value="{{ old('_price', ProductClass::getOptionValue('_price', $product->productMeta)) }}" step="0.0001" name="_price" required>
                               </div>
                               <div class="form-group">
                                    <label class="form-control-label active">SKU:(Required) </label>
                                    <input class="form-control" type="text"  value="{{ old('sku',$product->sku) }}" name="sku"  required>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">weight(Kg) </label>
                                    <input class="form-control" value="{{ old('_weight', ProductClass::getOptionValue('_weight', $product->productMeta)) }}" type="number" min="0" step="0.001"  name="_weight" required >
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">UPC/Barcode:(Required) </label>
                                    <input class="form-control" type="text" value="{{ old('_upc', ProductClass::getOptionValue('_upc', $product->productMeta)) }}"  name="_upc" >
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Active Status: </label>
                                    <select class="form-control" name="active">
                                        <option value="0" @if(old('active', $product->active) == 0 ) selected @endif  >Draft</option>
                                        <option value="1" @if(old('active', $product->active) == 1 ) selected @endif>Public</option>
                                        <option value="2" @if(old('active', $product->active) == 2 ) selected @endif >Private</option>
                                        <option value="3" @if(old('active', $product->active) == 3 ) selected @endif >Trash</option>
                                    </select>
                                </div>

                                <hr>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="_virtual" value="1" id="customCheckvirtual" @if(old('_virtual',  ProductClass::getOptionValue('_virtual', $product->productMeta) == 1)) checked @endif>
                                        <label class="custom-control-label" for="customCheckvirtual">Is this a featured Product?</label>
                                    </div>
                                <hr>
                                <input class="btn btn-primary float-right" type="submit" value="Update">
                                <input class="btn btn-secondary float-right mx-1" type="button" onclick="window.location = '{{url('/')}}/admin/products'" value="Cancel">
                           </div>
                        </div>
                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Featured Media (Optional)') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                                <div class="form-group">
                                    <label class="form-control-label active">Featured Image: </label>
                                    <input class="form-control" name="featured_image" accept="image/*" type="file" id="featuredimageInput">
                                    <div class="text-secondary"><small>Preferred Dimension: (720px) x (800px)</small></div>
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label active">Featured Image Alt: </label>
                                    <input class="form-control" name="_alt" type="text" value="{{old('_alt', ProductClass::getOptionValue('_alt', $product->productMeta))}}">
                                </div>
                                <div id="featuredimagePreview">
                                    @if($product->featured_image != '')
                                        <img src="{{url('/')}}/{{$product->featured_image}}" width="100%" height="auto">
                                    @endif
                                </div>
                           </div>
                        </div>
                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Category (Optional)') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                              <div class="form-group">
                                <label class="form-control-label active">Main Category: </label>
                                <!-- Main Category -->
                                <select class="form-control" id="main_category" name="category_id" required>
                                    <option value="" selected>Select Category</option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->title}}</option>
                                    @endforeach
                                </select>
                              </div>
                              <div class="form-group d-none">
                                    <label class="form-control-label active">Child Category: </label>
                                    <!-- Child Category -->
                                    <select class="form-control" id="child_category" name="child_category">
                                        <!-- Default "None" option added -->
                                        <option value="" selected>None</option>
                                    </select>
                              </div>
                              <div class="form-group d-none">
                                    <label class="form-control-label active">Sub Child Category: </label>
                                    <!-- Sub Child Category -->
                                    <select class="form-control" id="grand_child_category" name="grand_child_category">
                                        <option value="" selected>None</option>
                                    </select>
                              </div>
                           </div>
                        </div>
                        <div class="card mg-b-30">
                           <div class="card-header">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Action') }}</h6>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                                 <p>Created By: @php print(ProductClass::CreateBy($product->created_by)); @endphp</p>
                                 <p>Created Date: {{$product->created_at->format('Y-m-d H:i:s')}}</p>
                                <p>Updated Date: {{$product->updated_at->format('Y-m-d H:i:s')}}</p>

                           </div>
                        </div>
                    </div>
                </div>
             </form>
        </div>
        <!--/  Order Active dataTable End -->
        <!--================================-->
</div>
<!--/ Page Inner End -->

@include('Admin.Includes.footer')

<script>

$(document).on('click', '.delete-btn', function(){
   var imagePath = $(this).data('image');
   var productId = $(this).data('product-id'); // Ensure your HTML element has this attribute
   var $btn = $(this);
   
   $.ajax({
      url: '/delete-gallery-image', // Route URL
      type: 'POST',
      data: {
         image: imagePath,
         product_id: productId,
         _token: '{{ csrf_token() }}'
      },
      success: function(response){
         if(response.success){
            // Remove the image container from the DOM
            $btn.closest('.image-item').remove();
         } else {
            alert(response.message);
         }
      },
      error: function(){
         alert('An error occurred. Please try again.');
      }
   });
});

 $('.addTitle').on('input', function() {
  // Trim leading/trailing whitespace
  var title = $(this).val().trim();

  // Replace any sequence of spaces with a single hyphen and convert to lowercase
  var sku = title.replace(/\s+/g, '-').toLowerCase();

  $('.permalink').val(sku);
  validate_permalink();
});

$('.permalink').on('input', function() {
  validate_permalink();
});
  function validate_permalink(){
        var permalink = $('#permalink').val();
        $.ajax({
            url: '{{route('Admin.Product.CheckPermalink')}}',
            method: 'POST',
            data: { permalink: permalink, _token: $('meta[name="csrf-token"]').attr('content') },
            dataType: 'json',
            success: function(response) {
                $('.permalink_status').val('1');
                $('.permalink_error').html('');
            },
            error: function(xhr, status, error) {
                console.log(xhr);
                $('.permalink_status').val('');
                $('.permalink_error').html('<small>This permalink is already in use or the field is empty! Please change the permalink.</small>');
            }
        });
  }

  // Initialize summernote editors
  $('#short_description').summernote({
     placeholder: 'Short Description...',
     tabsize: 2,
     height: 150,
     toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
      ]
  });
  $('#long_description').summernote({
     placeholder: 'Long Description...',
     tabsize: 2,
     height: 250,
     toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['link']],
            ['view', ['codeview']]
     ],
     popover: {
          image: [
            ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
            ['float', ['floatLeft', 'floatRight', 'floatNone']],
            ['remove', ['removeMedia']]
          ],
          link: [
            ['link', ['unlink']]
          ],
          air: [
            ['color', ['color']],
            ['font', ['bold', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']]
          ]
     }
  });
  $('#seo_tags').tagsinput({ tagClass: 'badge badge-primary' });

  // Preview featured image
  var imageInput = document.getElementById('featuredimageInput');
  var imagePreview = document.getElementById('featuredimagePreview');
  imageInput.addEventListener('change', function(event) {
        var selectedFile = event.target.files[0];
        if (selectedFile) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var imageElement = document.createElement('img');
                imageElement.src = event.target.result;
                imageElement.style.width = '100%';
                imageElement.style.height = 'auto';
                imagePreview.innerHTML = '';
                imagePreview.appendChild(imageElement);
            }
            reader.readAsDataURL(selectedFile);
        } else {
            imagePreview.innerHTML = '';
        }
  });

  // Upload Gallery Images with featured image selection check
  function uploadImages() {
    const fileInput = $('#imageInput');
    if (fileInput[0].files.length === 0) {
      alert('Please select at least one image.');
      return;
    }
    const radioInput = $('.radio-button:checked');
    if (radioInput.length === 0) {
      alert('Please select a featured image.');
      return;
    }
    const formData = new FormData();
    const selectedFiles = fileInput[0].files;
    for (let i = 0; i < selectedFiles.length; i++) {
      formData.append('gallery_media[]', selectedFiles[i]);
    }
    formData.append('featuredImage', radioInput.val());
    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': csrfToken,
      },
    });
    $.ajax({
      url: '/admin/products/add_product_variation',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function (response){
          $('.response_section').html('<div class="alert alert-success">' + response.message + '</div>');
      },
      error: function (xhr, status, error) {
          $('.response_section').html('<div class="alert alert-danger">Error saving data to the server.</div>');
      },
    });
  }

  // Helper function to convert data URI to Blob
  function dataURItoBlob(dataURI) {
      const byteString = atob(dataURI.split(',')[1]);
      const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
  }
</script>

<script>
    // Category Data passed from backend
    const childCategoriesData = {!! json_encode($childcats) !!};
    const grandChildCategoriesData = {!! json_encode($grandcats) !!};

    // Get select elements
    const mainCategorySelect = document.getElementById('main_category');
    const childCategorySelect = document.getElementById('child_category');
    const grandChildCategorySelect = document.getElementById('grand_child_category');

    // Clear options and add default "None" option
    function clearSelectOptions(selectElement) {
        selectElement.innerHTML = '';
        const defaultOption = document.createElement('option');
        defaultOption.textContent = 'None';
        defaultOption.value = '';
        defaultOption.selected = true;
        selectElement.appendChild(defaultOption);
    }

    // Populate select options given data array and key names
    function populateSelectOptions(selectElement, data, idField, textField) {
        data.forEach(item => {
            const option = document.createElement('option');
            option.value = item[idField];
            option.textContent = item[textField];
            selectElement.appendChild(option);
        });
    }

    // Update Child Categories based on selected Main Category
    function updateChildCategories(mainCategoryId) {
        clearSelectOptions(childCategorySelect);
        clearSelectOptions(grandChildCategorySelect);
        
        const filteredChildCategories = childCategoriesData.filter(child => child.main_parent_category == mainCategoryId);
        populateSelectOptions(childCategorySelect, filteredChildCategories, 'id', 'child_title');
    }

    // Update Grand Child Categories based on selected Child Category
    function updateGrandChildCategories(childCategoryId) {
        clearSelectOptions(grandChildCategorySelect);
        const filteredGrandChildCategories = grandChildCategoriesData.filter(grand => grand.mid_parent_category == childCategoryId);
        populateSelectOptions(grandChildCategorySelect, filteredGrandChildCategories, 'id', 'grand_title');
    }

    // Event listeners for category select changes
    mainCategorySelect.addEventListener('change', function () {
        updateChildCategories(this.value);
        // Enable child select when a main category is chosen
        childCategorySelect.disabled = false;
        // Reset grandchild select
        clearSelectOptions(grandChildCategorySelect);
        grandChildCategorySelect.disabled = true;
    });

    childCategorySelect.addEventListener('change', function () {
        if (this.value === '') {
            // If "None" is selected, clear and disable grandchild category
            clearSelectOptions(grandChildCategorySelect);
            grandChildCategorySelect.disabled = true;
        } else {
            updateGrandChildCategories(this.value);
            grandChildCategorySelect.disabled = false;
        }
    });

    // Initialize select2 for all selects with the class "select2-demo"
    $(function() {
        $('.select2-demo').each(function() {
            $(this)
            .wrap('<div class="position-relative"></div>')
            .select2({
                placeholder: 'Select value',
                allowClear: true,
                dropdownParent: $(this).parent()
            });
        });
    });

    // Populate category selects with previously selected values (if any)
    const selectedMainCategoryId = {!! json_encode($product->category_id) !!};
    const selectedChildCategoryId = {!! json_encode($product->child_category) !!};
    const selectedGrandChildCategoryId = {!! json_encode($product->grand_child_category) !!};

    if (selectedMainCategoryId) {
        mainCategorySelect.value = selectedMainCategoryId;
        updateChildCategories(selectedMainCategoryId);
        childCategorySelect.disabled = false;
    }
    if (selectedChildCategoryId) {
        childCategorySelect.value = selectedChildCategoryId;
        updateGrandChildCategories(selectedChildCategoryId);
        grandChildCategorySelect.disabled = false;
    }
    if (selectedGrandChildCategoryId) {
        grandChildCategorySelect.value = selectedGrandChildCategoryId;
    }
</script>