@extends('template.layouts.template-base')
@section('title', 'Edit Product')

@section('styles')
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
    />
   <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>

@endsection

@section('content')
  <section class="product-page">
      <!-- Header -->
    <div class="page-header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a  href="{{ route('backend.products.index') }}">  Product Management / <span class="breadcrumb-link">Edit Product</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

      <!-- Main Container -->
    <div class="container-fluid p-0">
      <form id="productEditForm" method="POST" action="{{ route('backend.products.update', $product->id) }}" enctype="multipart/form-data">
      @csrf
      @method('PUT')
      <!-- Section 1: Product -->
      <div class="add-product-section">
        <h2 class="section-title">Product</h2>

        <div class="row">
          <div class="col-lg-4">
            <label>Product Category <span class="required">*</span></label>
            <div class="view-dropdown">
              <div class="custom-dropdown">
                <button class="dropdown-btn" id="categoryDropdown" type="button">Select Category
                  <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                </button>
                <ul class="dropdown-menu-custom">
                  <li><label><input type="checkbox" id="selectAllCategories">All Category</label></li>
                  @foreach($categories as $category)
                    <li><label><input class="category-checkbox" type="checkbox" name="category_ids[]" value="{{ $category->id }}" @checked($product->categories->contains('id', $category->id))>
                      {{ $category->category_name_en }}
                      @if(!empty($category->category_name_tamil))
                          - {{ $category->category_name_tamil }}
                      @endif
                    </label></li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>

          <div class="col-lg-4">
            <label>Product Name English <span class="required">*</span></label>
            <input type="text" name="product_name_en" value="{{ $product->product_name_en }}"  placeholder="Enter Product English" />
          </div>

          <div class="col-lg-4">
            <label>Product Name Tamil</label>
            <input type="text" name="product_name_tamil" value="{{ $product->product_name_tamil }}" placeholder="Enter Product Tamil"/>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <label>Price 1 Kg  <span class="required">*</span></label>
            <div class="input-with-prefix">
              <span class="input-prefix">₹</span>
              <input type="number" name="per_kg_price" id="pricePerKg" value="{{ $product->per_kg_price }}" placeholder="Enter Amount" />
            </div>
          </div>
          <div class="col-lg-3">
                <label>HSN Code</label><br>
            <input type="number" name="hsn_code" value="{{ $product->hsn_code }}" placeholder="Enter HSN Code" />
          </div>
          <div class="col-lg-3">
            <label>GST</label>
            <div class="input-with-prefix">
              <span class="input-prefix">%</span>
              <input type="number" name="gst_percentage" value="{{ $product->gst_percentage }}" placeholder="Enter %" />
            </div>
          </div>
          <div class="col-lg-3">
            <label>Is Discount Applicable? <span class="required">*</span></label>
            <select id="discountApplied" name="is_discount_applied" class="form-select">
              <option value="no" @selected($product->productDiscount?->is_discount_applied === 0)>No</option>
              <option value="yes" @selected($product->productDiscount?->is_discount_applied === 1)>Yes</option>
            </select>
          </div>
        </div>
      </div>

      <div class="add-product-section inventory-sec d-none" id="discountSection">
        <div class="d-flex justify-content-between align-items-center">
            <h2 class="section-title">Overall Product Discount</h2>

        </div>
        <div class="row">
          <div class="col-lg-4">
              <label>Discount Type</label>
              <select name="discount_type" id="discountType" class="form-select discount-field">
                  <option value="">Select</option>
                  <option value="percentage" @selected($product->productDiscount?->discount_type === 'percentage')>Percentage (%)</option>
                  <option value="fixed" @selected($product->productDiscount?->discount_type === 'fixed')>Fixed Amount (₹)</option>
              </select>
          </div>
          <div class="col-lg-4">
              <label id="discountValueLabel">Discount Value</label>
              <div class="input-with-prefix">
                  <span class="input-prefix" id="discountPrefix">₹</span>
                  <input type="number"
                        name="discount_amount"
                        id="discountValue"
                        class="discount-field"
                        placeholder="Enter value"
                        value="{{ old('discount_amount', $product->productDiscount->discount_amount ?? '') }}">
              </div>
              <small class="text-danger d-none" id="discountError"></small>
          </div>

          <div class="col-lg-4">
            <label>After Discount Price(1Kg)</label>
            <div class="input-with-prefix">
              <span class="input-prefix">₹</span>
              <input type="number" name="final_price" id="finalPricePerKg" value="{{ $product->productDiscount?->final_price }}" placeholder="Enter Value" readonly/>
            </div>
          </div>
          <div class="col-lg-4">
            <label>Discount Validity</label>
            <select name="discount_validity" id="discountApplyType" class="form-select">
                <option value="">Select</option>
                <option value="always" @selected($product->productDiscount?->discount_validity === 'always')>Always</option>
                <option value="schedule" @selected($product->productDiscount?->discount_validity === 'schedule')>Schedule</option>
            </select>
          </div>
          <div class="row d-none" id="discountSchedule">
            <div class="col-lg-2">
              <div class="tab-content" id="date-range">
                <div class="date-input-group">
                  <div class="date-field">
                    <label>Start Date</label>
                    <input type="text" name="start_date" id="from-date" value="{{ $product->productDiscount?->start_date
    ? \Carbon\Carbon::parse($product->productDiscount->start_date)->format('d M, Y')
    : '' }}" placeholder="Select Date" readonly/>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-2">
              <div class="tab-content" id="date-range">
                <div class="date-input-group">
                  <div class="date-field">
                    <label>To Date</label>
                    <input type="text" name="end_date" id="to-date" value="{{ $product->productDiscount?->end_date
    ? \Carbon\Carbon::parse($product->productDiscount->end_date)->format('d M, Y')
    : '' }}" placeholder="Select Date" readonly/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Section 2: Size Variations -->
      <div class="add-product-section">
        <h2 class="section-title">Size Variations</h2>
        <div id="size-variations-container">
          @foreach($product->productPackPrice as $index => $productPackPrice)

            <div class="size-variation" data-index="{{$index}}">
              <input type="hidden" name="productSize[{{$index}}][delete]" value="0" class="delete-flag" data-index="{{$index}}">
              <input type="hidden" name="productSize[{{$index}}][table_id]" data-index="{{$index}}" value="{{$productPackPrice->id}}">


              <div class="row pack-size-row">
                <div class="col-lg-4">
                  <label>Pack Size <span class="required">*</span></label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">kg</span>
                    <input type="number" name="productSize[{{ $index }}][pack_size]" id="pack_size_{{ $index }}" data-index="{{$index}}" value="{{ rtrim(rtrim($productPackPrice->pack_size, '0'), '.') }}" placeholder="Example... 50kg" class="pack-size-input"/>
                  </div>
                  @error('pack_size')
                    <small class="text-danger pack-size-error">{{ $message }}</small>
                  @enderror
                </div>

                <div class="col-lg-4">
                  <label>MRP</label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">₹</span>
                    <input type="number" name="productSize[{{ $index }}][mrp]" id="mrp_{{ $index }}" data-index="{{$index}}" value="{{ $productPackPrice->mrp ?? '' }}" placeholder="Enter MRP Price" class="mrp-input"/>
                  </div>
                  <small class="text-danger price-error d-none">
                    MRP should be greater than Selling Price
                  </small>
                </div>

                <div class="col-lg-4">
                  <label>Selling Price <span class="required">*</span></label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">₹</span>
                    <input type="number" name="productSize[{{ $index }}][selling_price]" id="selling_price_{{ $index }}" data-index="{{$index}}" value="{{ $productPackPrice->selling_price ?? '' }}" placeholder="Enter Selling Price" class="selling-price-input selling-price"/>
                  </div>

                </div>
              </div>

              <div class="row">
                <div class="col-lg-4">
                  <label>Production Cost</label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">₹</span>
                    <input type="number" name="productSize[{{ $index }}][production_cost]" id="production_cost_{{ $index }}" data-index="{{$index}}" value="{{ $productPackPrice->production_cost ?? '' }}" placeholder="Enter Production Cost" />
                  </div>
                </div>

                <div class="col-lg-2">
                  <label>Stock Quantity</label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">kg</span>
                    <input type="number" name="productSize[{{ $index }}][stock_level]" id="stock_level_{{ $index }}" data-index="{{$index}}" value="{{ $productPackPrice->productPackInventory ? $productPackPrice->productPackInventory->stock_level ?? '':'' }}" placeholder="Enter Level" />
                  </div>
                </div>

                <div class="col-lg-2">
                  <label>Stock Alert</label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">kg</span>
                    <input type="number" name="productSize[{{ $index }}][stock_alert]" id="stock_alert_{{ $index }}" data-index="{{$index}}" value="{{ $productPackPrice->productPackInventory ? $productPackPrice->productPackInventory->stock_alert ?? '':'' }}" placeholder="Enter Alert" />
                  </div>
                </div>
              </div>

              <div class="col-lg-12">
                  <label>
                      Gallery Images <span class="required">*</span>
                      <span class="small-txt">(400px × 280px)</span>
                  </label>

                  <div class="row">
                      <!-- Upload box -->
                      <div class="col-lg-4">
                          <div class="image-upload-box-2 mt-2">
                              <input type="file" id="packImages_{{ $index }}" data-pack="{{ $index }}" name="productSize[{{ $index }}][pack_images][]" class="pack-image-input" multiple accept="image/png,image/jpeg,image/jpg" hidden>

                              <label for="packImages_{{ $index }}" class="upload-label">
                                  <div class="upload-content text-center">
                                      <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                          class="add-img mb-2">
                                      <div class="upload-text">Choose files or drag & drop</div>
                                      <div class="file-info">
                                          JPG, PNG, JPEG (Max 1 MB each, Max 3 images)
                                      </div>
                                  </div>
                              </label>
                          </div>
                      </div>

                      <!-- Preview area -->
                      <div class="col-lg-8">
                        <div id="imagePreview_{{ $index }}" class="d-flex flex-wrap gap-2">
                          {{-- Existing images --}}
                          @foreach($productPackPrice->ProductPackImages as $packImage)
                          <div class="image-box existing-image" data-id="{{ $packImage->id }}">
                              <img src="{{ asset($packImage->image_path) }}" class="preview-img">
                              <span class="remove-image remove-old-image"
                                    data-id="{{ $packImage->id }}">×</span>
                          </div>
                          @endforeach
                        </div>
                        <input type="hidden" name="productSize[{{ $index }}][deleted_images]" id="deletedImages_{{ $index }}" value="">
                      </div>
                  </div>
              </div>

             <button type="button" class="remove-btn" onclick="removeVariation(this)">Remove Variation</button>

            </div>

          @endforeach
        </div>
        <button type="button" class="btn btn-primary btn-add-more" onclick="addSizeVariation()"><span>Add More +</span></button>
      </div>

      <!-- Section 3: Product Order Rule -->
      <div class="add-product-section inventory-sec">
        <h2 class="section-title">Product Order Rule</h2>

        <div class="row">
          <div class="col-lg-4">
            <label>Maximum Order Quantity</label>
            <div class="input-with-prefix">
              <span class="input-prefix">kg</span>
              <input type="number" name="max_order_quantity" value="{{ $product->max_order_quantity }}" placeholder="Enter Maximum Quantity" />
            </div>
          </div>

          <div class="col-lg-4">
            <label>Minimum Order Quantity</label>
            <div class="input-with-prefix">
              <span class="input-prefix">kg</span>
              <input type="number" name="min_order_quantity" value="{{ $product->min_order_quantity }}" placeholder="Enter Minimum Quantity" />
            </div>
          </div>

          <div class="col-lg-4">
            <label>Minimum Buy Quantity for Free</label>
            <div class="input-with-prefix">
              <span class="input-prefix">kg</span>
              <input type="number" name="min_buy_qty_for_discount" value="{{ $product->min_buy_qty_for_discount }}" placeholder="Enter Buy Quantity" />
            </div>
          </div>

          <div class="col-lg-4">
            <label>Free Quantity</label>
            <div class="input-with-prefix">
              <span class="input-prefix">kg</span>
              <input type="number" name="free_quantity" value="{{ $product->free_quantity }}" placeholder="Enter Free Quantity" />
            </div>
          </div>
        </div>
      </div>

      <!-- Section 4: Product Details -->
      <div class="add-product-section">
        <div class="d-flex justify-content-between align-items-center">
            <h2 class="section-title"> Product Details</h2>

        </div>
        <div class="row">
          <div class="col-lg-4">
              <label class="form-label">Product Tags</label>
              <!-- Existing Tags -->
              <div id="tag-list" class="d-flex flex-wrap gap-2 mb-2">
                  @foreach ($tags as $tag)
                      <label class="tag-chip">
                          <input type="checkbox" name="tags[]" value="{{ $tag->id }}" @checked($product->tags->contains($tag->id))>
                          <span>{{ $tag->name_en }}</span>
                          {{-- <i class="tag-remove">&times;</i> --}}
                      </label>
                  @endforeach
              </div>
              <!-- Type & Enter -->
              <input type="text" id="new-tag" class="form-control form-control-sm"
                    placeholder="Type tag and press Enter">
              <small class="text-muted">Max 5 tags</small>
          </div>

          <div class="col-lg-4">
            <label>Select Animal Type</label><br>
              <div class="custom-dropdown">
                <button class="dropdown-btn" id="animalDropdown" type="button">
                  Select Animal
                  <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                </button>
                <ul class="dropdown-menu-custom">
                    <li><label><input type="checkbox" id="selectAllAnimals">All Animals</label></li>
                    @foreach($animal_types as $animal_type)
                      <li><label><input class="animal-checkbox" type="checkbox" name="animal_type_ids[]" value="{{    $animal_type->id }}" @checked($product->animalTypes->contains('id', $animal_type->id))>
                        {{ $animal_type->name_en }}
                        @if(!empty($animal_type->name_tamil))
                            - {{ $animal_type->name_tamil }}
                        @endif
                      </label></li>
                    @endforeach

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

          <div class="col-lg-4">
            <label>Product Status <span class="required">*</span></label>
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="status" value="1" @if($product->status == 1) checked @endif/>
                <span>Active</span>
              </label>
              <label class="radio-label">
                <input type="radio" name="status" value="0" @if($product->status == 0) checked @endif/>
                <span>Inactive</span>
              </label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <label>Product Description English</label>
            <textarea id="product-description" name="description_en" rows="5" placeholder="Type Here">{{ $product->description_en }}</textarea>
          </div>
          <div class="col-lg-6">
            <label>Product Benefits English</label>
            <textarea id="product-benefits" name="benefits_en" rows="5" placeholder="Type Here">{{ $product->benefits_en }}</textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <label>Product Description Tamil</label>
            <textarea id="product-description-ta" name="description_tamil" rows="5" placeholder="Type Here">{{ $product->description_tamil }}</textarea>
          </div>
          <div class="col-lg-6">
            <label>Product Benefits Tamil</label>
            <textarea id="product-benefits-ta" name="benefits_tamil" rows="5" placeholder="Type Here">{{ $product->benefits_tamil }}</textarea>
          </div>
        </div>
      </div>

      <!-- Section 5: Product Media -->
      <div class="add-product-section">
        <h2 class="section-title">Product Media</h2>
        <div class="row">
          <div class="col-lg-3">
            <label>Product Thumbnail Image <span class="required">*</span>
              <span class="small-txt">(110px*100px)</span></label>
            <div class="image-upload-box-2">
                <input type="file" name="thumbnail_image" id="productImage" hidden>
                <label for="productImage" class="upload-label">
                    <div class="upload-content">
                        <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"  class="add-img" alt="Images">
                          <div class="upload-text">Choose a file or drag and drop it here</div>
                <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                    </div>
                </label>
            </div>
          </div>
          <div class="col-lg-3">
            <div id="productImagePreview" class="d-flex flex-wrap gap-2">
              {{-- Existing images --}}
              @if(isset($product) && ($product->thumbnail_image))
              <div class="image-box existing-image">
                  <img src="{{ asset($product->thumbnail_image) }}" class="preview-img">
                  {{-- <span class="remove-image remove-old-image">×</span> --}}
              </div>
              @endif
            </div>
          </div>
          <div class="col-lg-6">
            <label>Product Video</label><br>
            <input type="text" name="video_url"  placeholder="Product Video URL Here" value="{{ $product->video_url }}"/>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="action-buttons">
        <button class="btn btn-secondary">Cancel</button>
        <button type="submit" class="btn btn-primary show-toast">Update Product</button>
      </div>
    </form>

    </div>
  </section>
  @include('template.layouts.error-modal')
@endsection
@section('scripts')
    <script>

      const editorConfig = {
        height: 150,
        toolbar: [
          { name: "styles", items: ["Format"] },
          { name: "basicstyles", items: ["Bold", "Italic", "Underline"] },
          {
            name: "paragraph",
            items: ["JustifyLeft", "JustifyCenter", "JustifyRight"],
          },
          { name: "insert", items: ["NumberedList", "BulletedList"] },
        ],
      };

      CKEDITOR.replace("product-description", editorConfig);
      CKEDITOR.replace("product-benefits", editorConfig);
      CKEDITOR.replace("product-description-ta", editorConfig);
      CKEDITOR.replace("product-benefits-ta", editorConfig);

      // Toggle collapsible section
      function toggleCollapse(button) {
        const chevron = button.querySelector(".chevron");
        chevron.classList.toggle("open");
      }

      // Add Size Variation
      let index = {{ $product->productPackPrice->count() ?? 1 }};
      function addSizeVariation() {

        const container = document.getElementById("size-variations-container");
        const newVariation = document.createElement("div");
        newVariation.className = "size-variation";
        newVariation.innerHTML = `
                <div class="row pack-size-row">
                    <div class="col-lg-4">
                        <label>Pack Size <span class="required">*</span></label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">kg</span>
                            <input type="number" name="productSize[${index }][pack_size]" id="pack_size_${index}" data-index="${index}" placeholder="Example... 50kg" class="pack-size-input">
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <label>MRP</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">₹</span>
                            <input type="number" name="productSize[${index }][mrp]" id="mrp_${index}" data-index="${index}" placeholder="Enter MRP Price" class="mrp-input">
                        </div>
                        <small class="text-danger price-error d-none">
                          MRP  should  be greater than Selling Price
                        </small>
                    </div>

                    <div class="col-lg-4">
                        <label>Selling Price <span class="required">*</span></label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">₹</span>
                            <input type="number" name="productSize[${index }][selling_price]" id="selling_price_${index}" data-index="${index}" placeholder="Enter Selling Price" class="selling-price-input selling_price">
                        </div>
                      </div>
                    </div>

                  <div class="row">
                    <div class="col-lg-4">
                        <label>Production Cost</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">₹</span>
                            <input type="number" name="productSize[${index }][production_cost]" id="production_cost_${index}" data-index="${index}" placeholder="Enter Production Cost">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <label>Stock Quantity</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">kg</span>
                            <input type="number" name="productSize[${index}][stock_level]" id="stock_level_${index}" data-index="${index}" placeholder="Enter Stock Quantity">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <label>Stock Alert</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">kg</span>
                            <input type="number" name="productSize[${index}][stock_alert]" id="stock_alert_${index}" data-index="${index}" placeholder="Enter Stock Alert">
                        </div>
                    </div>
                  </div>
                    <div class="col-lg-12">
                      <label>
                          Gallery Images <span class="required">*</span>
                          <span class="small-txt">(400px × 280px)</span>
                      </label>

                      <div class="row">
                        <div class="col-lg-4">
                          <div class="mt-2">
                            <div class="image-upload-box-2">
                              <input type="file" id="packImages_${index}" data-pack="${index}" name="productSize[${index}][pack_images][]" class="pack-image-input" multiple accept="image/png,image/jpeg,image/jpg" hidden data-max="5">
                                <label for="packImages_${index}" class="upload-label">
                                  <div class="upload-content text-center">
                                    <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}" class="add-img mb-2" alt="Images">
                                    <div class="upload-text">Choose files or drag & drop </div>
                                    <div class="file-info">JPG, PNG or JPEG (Max 1 MB each, Max 5 images)</div>
                                  </div>
                                </label>
                            </div>
                          </div>
                        </div>
                        {{-- Preview Area --}}
                        <div class="col-lg-8">
                            <div id="imagePreview_${index}" class="d-flex flex-wrap gap-2"></div>
                        </div>
                      </div>
                    </div>

                </div>
                </div>

                <button type="button" class="remove-btn" onclick="removeVariation(this)">Remove Variation</button>
            `;
        container.appendChild(newVariation);
        index++;
      }

      // Remove Size Variation
      function removeVariation(button)
      {
        const $row = $(button).closest('.size-variation');
        $row.find('.delete-flag').val(1);
        $row.hide();
      }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
      // Open filter modal
      function openFilterModal() {
        document.getElementById("filterModalOverlay").classList.add("active");
      }

      // Close filter modal
      function closeFilterModal() {
        document
          .getElementById("filterModalOverlay")
          .classList.remove("active");
      }

      // Close modal when clicking on overlay
      function closeFilterOnOverlay(event) {
        if (event.target === document.getElementById("filterModalOverlay")) {
          closeFilterModal();
        }
      }

      // Switch tabs
      function switchTab(event, tabName) {
        const tabs = document.querySelectorAll(".tab");
        const contents = document.querySelectorAll(".tab-content");

        tabs.forEach((tab) => tab.classList.remove("active"));
        contents.forEach((content) => content.classList.remove("active"));

        event.target.classList.add("active");
        document.getElementById(tabName).classList.add("active");
      }

      // Initialize Flatpickr for date inputs
      flatpickr("#from-date", {
        dateFormat: "d M, Y",
        // defaultDate: new Date(),
        onChange: function (selectedDates, dateStr, instance) {
          console.log("From Date selected:", dateStr);
        },
      });

      flatpickr("#to-date", {
        dateFormat: "d M, Y",
        // defaultDate: new Date(),
        onChange: function (selectedDates, dateStr, instance) {
          console.log("To Date selected:", dateStr);
        },
      });

      // Clear all filters
      function clearFilters() {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach((cb) => (cb.checked = false));

        const radios = document.querySelectorAll('input[type="radio"]');
        radios.forEach((radio) => (radio.checked = false));

        document.getElementById("from-date").value = "";
        document.getElementById("to-date").value = "";

        console.log("Filters cleared");
      }

      // Submit filters
      function submitFilters() {
        const filters = {
          stockStatus: Array.from(
            document.querySelectorAll("#stock-status input:checked"),
          ).map((cb) => cb.id),
          productStatus: Array.from(
            document.querySelectorAll("#product-status input:checked"),
          ).map((cb) => cb.id),
          weight: Array.from(
            document.querySelectorAll("#weight input:checked"),
          ).map((cb) => cb.id),
          price:
            document.querySelector('input[name="price"]:checked')?.id || null,
          soldStatus: Array.from(
            document.querySelectorAll("#sold-status input:checked"),
          ).map((cb) => cb.id),
          fromDate: document.getElementById("from-date").value,
          toDate: document.getElementById("to-date").value,
        };

        console.log("Filters submitted:", filters);
        closeFilterModal();
      }
    </script>

    <script>
      (() => {
        const btn = document.getElementById("categoryMsBtn");
        const menu = document.getElementById("categoryMsMenu");
        const selectedBox = document.getElementById("categoryMsSelected");
        const checkboxes = menu.querySelectorAll("input[type='checkbox']");

        // Toggle dropdown
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          menu.classList.toggle("show");
        });

        // Render selected items
        function renderCategorySelected() {
          selectedBox.innerHTML = "";

          const selected = [...checkboxes].filter(cb => cb.checked);

          if (selected.length === 0) {
            selectedBox.innerHTML =
              `<span class="category-ms-placeholder">Select Category</span>`;
            return;
          }

          selected.forEach(cb => {
            const tag = document.createElement("div");
            tag.className = "category-ms-tag";
            tag.innerHTML = `${cb.value} <span>&times;</span>`;

            tag.querySelector("span").addEventListener("click", (e) => {
              e.stopPropagation();
              cb.checked = false;
              renderCategorySelected();
            });

            selectedBox.appendChild(tag);
          });
        }

        // Checkbox change
        checkboxes.forEach(cb => {
          cb.addEventListener("change", renderCategorySelected);
        });

        // Close on outside click
        document.addEventListener("click", () => {
          menu.classList.remove("show");
        });
      })();
    </script>

    <script>
      (() => {
        const btn = document.getElementById("animalMsBtn");
        const menu = document.getElementById("animalMsMenu");
        const selectedBox = document.getElementById("animalMsSelected");
        const checkboxes = menu.querySelectorAll("input[type='checkbox']");

        // Toggle dropdown
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          menu.classList.toggle("show");
        });

        // Update selected tags
        function renderSelected() {
          selectedBox.innerHTML = "";

          const selected = [...checkboxes].filter(cb => cb.checked);

          if (selected.length === 0) {
            selectedBox.innerHTML =
              `<span class="animal-ms-placeholder">Select Animal</span>`;
            return;
          }

          selected.forEach(cb => {
            const tag = document.createElement("div");
            tag.className = "animal-ms-tag";
            tag.innerHTML = `${cb.value} <span>&times;</span>`;

            tag.querySelector("span").addEventListener("click", (e) => {
              e.stopPropagation();
              cb.checked = false;
              renderSelected();
            });

            selectedBox.appendChild(tag);
          });
        }

        // Checkbox change
        checkboxes.forEach(cb => {
          cb.addEventListener("change", renderSelected);
        });

        // Close on outside click
        document.addEventListener("click", () => {
          menu.classList.remove("show");
        });
      })();
    </script>

    <script>
        document.querySelectorAll(".accordion-header").forEach(header => {
      header.addEventListener("click", () => {
        const section = header.closest(".add-product-section");
        section.classList.toggle("active");
      });
    });
    </script>

    <script>
      document.querySelectorAll(".accordion-header").forEach(header => {
        header.addEventListener("click", () => {
          const section = header.closest(".add-product-section");
          section.classList.toggle("active");
        });
      });

    </script>

    <script>
      $(document).ready(function () {
          $('.js-example-basic-multiple').select2({
              placeholder: "Select cities",
              closeOnSelect: false,
              width: '100%'
          });
      });
    </script>

    <script>
      document.addEventListener('DOMContentLoaded', function () {

        /* SHOW / HIDE DISCOUNT SECTION ON LOAD */
        const discountApplied = document.getElementById('discountApplied');
        const discountSection = document.getElementById('discountSection');

        /*is discount applied or not*/
        if (discountApplied && discountApplied.value === 'yes')
        {
          discountSection.classList.remove('d-none');
        } else {
          discountSection.classList.add('d-none');
        }

        /* DISCOUNT TYPE (percentage / fixed) */
        const discountType = document.getElementById('discountType')?.value;
        const label  = document.getElementById('discountValueLabel');
        const prefix = document.getElementById('discountPrefix');

        if (discountType === 'percentage') {
            label.innerText = 'Discount Percentage';
            prefix.innerText = '%';
        } else if (discountType === 'fixed') {
            label.innerText = 'Discount Amount';
            prefix.innerText = '₹';
        }
        if (discountType && discountType.value) {
            discountType.dispatchEvent(new Event('change'));
        }

        /* SHOW SCHEDULE DATES IF NEEDED */
        const discountApplyType = document.getElementById('discountApplyType');
        const scheduleDiv = document.getElementById('discountSchedule');

        if (discountApplyType && discountApplyType.value === 'schedule') {
          scheduleDiv.classList.remove('d-none');
        } else if (scheduleDiv) {
            scheduleDiv.classList.add('d-none');
        }

        /* TRIGGER PRICE CALCULATION */
        if (typeof calculatePrices === 'function') {
          calculatePrices();
        }

        // validate pack size
        if (typeof validateAllPackSizes === 'function') {
          validateAllPackSizes();
        }

        // product image preview
        const input = document.getElementById('productImage');
        const preview = document.getElementById('productImagePreview');

        input?.addEventListener('change', function (e) {
            const file = e.target.files[0];

            if (!file) return;

            preview.innerHTML = ''; // clear old preview

            const reader = new FileReader();

            reader.onload = function (event) {

                const div = document.createElement('div');
                div.className = 'image-box new-image position-relative';

                div.innerHTML = `
                    <img src="${event.target.result}"
                        class="img-fluid rounded border preview-img">
                    <span class="remove-image position-absolute top-0 end-0 bg-danger text-white px-2"
                          style="cursor:pointer;">&times;</span>
                `;

                div.querySelector('.remove-image').addEventListener('click', function () {
                    div.remove();
                    input.value = ''; // reset file input
                });

                preview.appendChild(div);
            };

            reader.readAsDataURL(file);
        });

      });
    </script>

     <script>
        $(document).ready(function() {

            $("#productEditForm").validate({
                rules: {
                    category_ids: {
                        required: true,
                    },
                    product_name_en: {
                        required: true,
                    },
                    per_kg_price: {
                        required: true,
                    },
                    is_discount_applied: {
                      required: true,
                    }
                    discount_type: {
                        required: function(element) {
                            return $('input[name="is_discount_applied"]:checked').val() === "yes";
                        }
                    },
                    start_date: {
                        required: function(element) {
                            return $('input[name="discount_validity"]:checked').val() === "schedule";
                        }
                    },
                    end_date: {
                        required: function(element) {
                            return $('input[name="discount_validity"]:checked').val() === "schedule";
                        }
                    },
                    "productSize[][pack_size]": {
                        required: true,
                    },
                    description_en: {
                        required: true,
                    },
                    thumbnail_image: {
                         required: true,
                    },
                },

                messages: {},
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                }
            });

        });
    </script>

    {{-- image preview --}}
   <script>
document.addEventListener('change', function (e) {

    if (!e.target.classList.contains('pack-image-input')) return;

    const input   = e.target;
    const packId  = input.dataset.pack;
    const max     = parseInt(input.dataset.max);
    const preview = document.getElementById(`imagePreview_${packId}`);

    if (!preview) return;

    const existingCount = preview.querySelectorAll('.image-box').length;
    const newFiles      = Array.from(input.files);

    if (existingCount + newFiles.length > max) {
        alert(`Maximum ${max} images allowed for this pack`);
        return;
    }

    newFiles.forEach(file => {

        if (!file.type.startsWith('image/')) {
            alert('Only image files allowed');
            return;
        }

        if (file.size > 1024 * 1024) {
            alert('Each image must be under 1 MB');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (ev) {

            const div = document.createElement('div');
            div.className = 'image-box new-image';

            div.innerHTML = `
                <img src="${ev.target.result}" class="preview-img">
                <span class="remove-image">&times;</span>
            `;

            div.querySelector('.remove-image').onclick = function () {
                div.remove();
            };

            preview.appendChild(div);
        };

        reader.readAsDataURL(file);
    });

    //DO NOT reset input here
});
</script>


    {{-- tags --}}
    <script>
        const MAX_TAGS = 5;
        const tagList = document.getElementById('tag-list');
        const input = document.getElementById('new-tag');

        function selectedCount() {
            return tagList.querySelectorAll('input:checked').length;
        }

        function updateTagState() {
            const reached = selectedCount() >= MAX_TAGS;
            tagList.querySelectorAll('input:not(:checked)').forEach(cb => {
                cb.disabled = reached;
            });
        }

        // Enter to add
        input.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                let value = input.value.trim();
                if (!value || selectedCount() >= MAX_TAGS) return;

                let exists = false;
                tagList.querySelectorAll('span').forEach(span => {
                    if (span.childNodes[0].nodeValue.trim().toLowerCase() === value.toLowerCase()) {
                        exists = true;
                    }
                });
                if (exists) return;

                let label = document.createElement('label');
                label.className = 'tag-chip';
                label.innerHTML = `
                    <input type="checkbox" name="tags[]" value="${value}" checked>
                    <span>${value} <i class="tag-remove">&times;</i></span>
                `;
                tagList.appendChild(label);
                input.value = '';
                updateTagState();
            }
        });

        // remove tag
        tagList.addEventListener('click', function (e) {
            if (e.target.classList.contains('tag-remove')) {
                e.stopPropagation();
                e.target.closest('.tag-chip').remove();
                updateTagState();
            }
        });

        // toggle
        tagList.addEventListener('change', updateTagState);
        updateTagState();
    </script>

    {{-- delete existing image --}}
    <script>
      document.addEventListener('click', function (e) {
        if (!e.target.classList.contains('remove-old-image')) return;

        const imageId = e.target.dataset.id;
        const pack = e.target.closest('.size-variation').dataset.index;

        const input = document.getElementById('deletedImages_' + pack);

        let deleted = input.value ? input.value.split(',') : [];
        deleted.push(imageId);

        input.value = deleted.join(',');

        // remove preview
        e.target.closest('.existing-image').remove();
    });
    </script>

    {{--same packsize  --}}
    <script>
      document.addEventListener('input', function (e) {

        if (!e.target.classList.contains('pack-size-input')) return;

        validateAllPackSizes();
      });

      function validateAllPackSizes() {
          const inputs = document.querySelectorAll('.pack-size-input');
          const seen = {};

          inputs.forEach(input => {
              removeError(input);

              const value = input.value.trim();
              if (!value) return;

              if (seen[value]) {
                  showError(input, 'Same pack size is not allowed');
                  showError(seen[value], 'Same pack size is not allowed');
              } else {
                  seen[value] = input;
              }
          });
      }

      function showError(input, message) {
          if (input.parentNode.querySelector('.pack-size-error')) return;

          const error = document.createElement('small');
          error.className = 'text-danger pack-size-error d-block mt-1';
          error.innerText = message;


          input.classList.add('is-invalid');
          input.parentNode.appendChild(error);
      }

      function removeError(input) {
          input.classList.remove('is-invalid');

          const error = input.parentNode.querySelector('.pack-size-error');
          if (error) error.remove();
      }
  </script>

  {{-- discount applied or not --}}
    <script>
      document.addEventListener('change', function (e) {

          if (e.target.id !== 'discountApplied') return;

          const section = document.getElementById('discountSection');
          const fields = section.querySelectorAll('.discount-field');

          if (e.target.value === 'yes') {
              section.classList.remove('d-none');
              fields.forEach(f => f.disabled = false);
          } else {
              section.classList.add('d-none');
              fields.forEach(f => {
                  f.disabled = true;
                  f.value = '';
              });
          }
      });
    </script>

    {{-- dicount applied for always or specific date --}}
    <script>
      const discountApplyType = document.getElementById('discountApplyType');
      const scheduleDiv = document.getElementById('discountSchedule');

      discountApplyType.addEventListener('change', function () {
        if (this.value === 'schedule') {
          scheduleDiv.classList.remove('d-none');
        } else {
          scheduleDiv.classList.add('d-none');
          document.getElementById('from-date').value = '';
          document.getElementById('to-date').value = '';
        }
      });

      function isDiscountActive() {
        if (discountApplied.value !== 'yes') return false;

        if (discountApplyType.value === 'always') {
          return true;
        }

        if (discountApplyType.value === 'schedule') {
          let today = new Date().setHours(0,0,0,0);
          let start = new Date(document.getElementById('from-date').value).setHours(0,0,0,0);
          let end = new Date(document.getElementById('to-date').value).setHours(0,0,0,0);

          if (!start || !end) return false;

          return today >= start && today <= end;
        }

        return false;
      }

      document.getElementById('to-date').addEventListener('change', function () {
        let start = document.getElementById('from-date').value;
        if (start && this.value < start) {
          alert('End date must be after start date');
          this.value = '';
        }
      });
    </script>

    {{-- final price and pack size selling price calculation --}}
    <script>
      /* EVENT BINDINGS*/

      $(document).on(
        'keyup change',
        '#pricePerKg, #discountApplied, #discountType, #discountValue, .pack-size-input',
        calculatePrices
      );

      $('#discountApplied').on('change', function ()
      {
        if (this.value === 'yes') {
          $('#discountSection').removeClass('d-none');
        } else {
          $('#discountSection').addClass('d-none');
          $('#discountType').val('');
          $('#discountValue').val('');
          $('#finalPricePerKg').val('');
          $('#discountPrefix').text('');
          $('#discountValueLabel').text('Discount');
        }
        calculatePrices();
      });

      $('#discountType').on('change', function () {

        const type = $(this).val();

        const $label  = $('#discountValueLabel');
        const $prefix = $('#discountPrefix');
        const $input  = $('#discountValue');

        $input.val(''); // reset value

        if (type === 'percentage') {
            $label.text('Discount Percentage');
            $prefix.text('%');
            $input.attr({

                max: 100,
                placeholder: 'Enter discount %'
            });
        }
        else if (type === 'fixed') {
            $label.text('Discount Amount');
            $prefix.text('₹');
            $input.attr({

                placeholder: 'Enter discount amount'
            });
        }
        else {
            $label.text('Discount');
            $prefix.text('');
        }

        calculatePrices();
      });

      /* MAIN CALCULATION */
      function calculatePrices() {

        let pricePerKg = parseFloat($('#pricePerKg').val()) || 0;
        let discountApplied = $('#discountApplied').val();
        let discountType = $('#discountType').val();
        let discountValue = parseFloat($('#discountValue').val()) || 0;

        if (pricePerKg <= 0) return;

        let finalPricePerKg = pricePerKg;

        if (discountApplied === 'yes') {
          if (discountType === 'percentage') {
            finalPricePerKg = pricePerKg - (pricePerKg * discountValue / 100);
          }
          if (discountType === 'fixed') {
            finalPricePerKg = pricePerKg - discountValue;
          }
        }

        if (finalPricePerKg < 0) finalPricePerKg = 0;

        /* SHOW FINAL PRICE PER KG */
        $('#finalPricePerKg').val(finalPricePerKg.toFixed(2));

        /* LOOP EACH PACK SIZE */
        $('.size-variation').each(function () {

          let packSize = parseFloat($(this).find('.pack-size-input').val()) || 0;
          if (packSize <= 0) return;

          let sellingPrice = packSize * finalPricePerKg;

          $(this)
            .find('.selling-price-input')
            .val(sellingPrice.toFixed(2));
        });
      }
    </script>

    {{-- selling price should not greater than MRP --}}
    <script>
      document.addEventListener('input', function (e) {

        const row = e.target.closest('.pack-size-row');
        if (!row) return;

        const mrpInput     = row.querySelector('.mrp-input');
        const sellingInput = row.querySelector('.selling-price-input');
        const error        = row.querySelector('.price-error');

        const mrp     = parseFloat(mrpInput?.value) || 0;
        const selling = parseFloat(sellingInput?.value) || 0;

        // Only validate when MRP exists
        if (mrp > 0 && selling > 0) {

          if (mrp < selling) {
            error.innerText = 'MRP should not be less than Selling Price';
            error.classList.remove('d-none');
            mrpInput.classList.add('is-invalid');
          } else {
            error.classList.add('d-none');
            mrpInput.classList.remove('is-invalid');
          }

        } else {
          error.classList.add('d-none');
          mrpInput.classList.remove('is-invalid');
        }
      });
    </script>

  </script>
@endsection