@extends('template.layouts.template-base')
@section('title', 'Add 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">Add Product</span></a>
                  </div>
              </div>
              <div class="col-auto cate-top-btns">
              {{-- <div class="position-relative">
                  <div class="custom-dropdown product-lang">
                        <button class="dropdown-btn  langu-drpdwn" type="button">
                          English
                          <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                      </button>
                      <ul class="dropdown-menu-custom">
                          <li class="active">English</li>
                          <li>Tamil</li>
                      </ul>
                  </div>
              </div> --}}
              </div>
          </div>
      </div>
    </div>

    <!-- Main Container -->
    <div class="container-fluid">
      <form id="productForm" method="POST" action="{{ route('backend.products.store') }}" enctype="multipart/form-data">
        @csrf
        <!-- 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 }}">
                          {{ $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" placeholder="Enter Product English" value="{{ old('product_name_en') }}"/>

            </div>

            <div class="col-lg-4">
              <label>Product Name Tamil</label>
              <input type="text" name="product_name_tamil" placeholder="Enter Product Tamil" value="{{ old('product_name_tamil') }}"/>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-3">
                <label>Price 1Kg <span class="required">*</span></label>
              <div class="input-with-prefix">
                <span class="input-prefix">₹</span>
                <input type="number" name="per_kg_price" id="pricePerKg" placeholder="Enter Amount" value="{{ old('per_kg_price') }}"/>
              </div>
            </div>
            <div class="col-lg-3">
                  <label>HSN Code</label><br>
              <input type="number" name="hsn_code" placeholder="Enter HSN Code" value="{{ old('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" placeholder="Enter %" value="{{ old('gst_percentage') }}"/>
              </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">No</option>
                <option value="yes">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>
              <span class="chevron">▼</span>
          </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">Percentage (%)</option>
                    <option value="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">
                </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" placeholder="Enter Value" value="{{ old('final_price') }}" readonly />
              </div>
            </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">Always</option>
                <option value="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" 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" placeholder="Select Date" readonly/>
                  </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">
            <div class="size-variation">
              <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[0][pack_size]" id="packSize" class="pack-size-input" placeholder="Example... 50kg" value=""/>
                  </div>
                 <small class="text-danger pack-size-error"></small>

                </div>

                <div class="col-lg-4">
                  <label>MRP</label>
                  <div class="input-with-prefix">
                    <span class="input-prefix">₹</span>
                    <input type="number" name="productSize[0][mrp]" placeholder="Enter MRP Price" value="" class="mrp-input"/>
                  </div>
                  <small class="text-danger price-error d-none"></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[0][selling_price]"  placeholder="Enter Selling Price" value="" class="selling-price-input selling-price" readonly/>
                  </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[0][production_cost]" placeholder="Enter Production Cost" value=""/>
                  </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[0][stock_level]" placeholder="Enter Level" value=""/>
                  </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[0][stock_alert]" placeholder="Enter Alert" value=""/>
                  </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_0" data-pack="0" name="productSize[0][pack_images][]" class="pack-image-input" multiple accept="image/png,image/jpeg,image/jpg" hidden data-max="3">
                        <label for="packImages_0" 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 3 images)</div>
                          </div>
                        </label>
                    </div>
                  </div>
                </div>
                {{-- Preview Area --}}
                <div class="col-lg-8">
                    <div id="imagePreview_0" class="d-flex flex-wrap gap-2"></div>
                </div>
              </div>
            </div>

            </div>
          </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" placeholder="Enter Maximum Quantity" value="{{ old('max_order_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" placeholder="Enter Minimum Quantity" value="{{ old('min_order_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" placeholder="Enter Buy Quantity" value="{{ old('min_buy_qty_for_discount') }}"/>
              </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" placeholder="Enter Free Quantity" value="{{ old('free_quantity') }}"/>
              </div>
            </div>
          </div>
        </div>

        <div class="add-product-section">
          <div class="d-flex justify-content-between align-items-center">
              <h2 class="section-title"> Product Details</h2>
              <span class="chevron">▼</span>
          </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->name_en }}">
                            <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 }}">
                          {{ $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" checked />
                  <span>Active</span>
                </label>
                <label class="radio-label">
                  <input type="radio" name="status" value="0" />
                  <span>Inactive</span>
                </label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-6">
              <label>Product Description English <span class="required">*</span></label>
              <textarea id="product-description" name="description_en" rows="5" placeholder="Type Here">{{ old('description_en') }}</textarea>
              @error('description_en')
                <small class="text-danger">{{ $message }}</small>
              @enderror
            </div>

            <div class="col-lg-6">
              <label>Product Benefits English</label>
              <textarea id="product-benefits" name="benefits_en" rows="5" placeholder="Type Here">{{ old('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">{{ old('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">{{ old('benefits_tamil') }}</textarea>
            </div>
          </div>
        </div>


        <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>

                @error('thumbnail_image')
                  <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <div class="col-lg-3">
              <div id="productImagePreview" class="d-flex flex-wrap gap-2">
            </div>
            </div>
            <div class="col-lg-6">
              <label>Product Video</label><br>
              <input type="text" name="video_url"  placeholder="Product Video URL Here" value="{{ old('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">Add 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);

      $('#selectAllCategories').on('change', function () {
          $('.category-checkbox').prop('checked', $(this).is(':checked'));
      });

      $('.category-checkbox, #selectAllCategories').on('change', function () {
        let selected = [];

        $('.category-checkbox:checked').each(function () {
            selected.push($(this).closest('label').text().trim());
        });

        if (selected.length === 0) {
            $('#categoryDropdown').text('Select Category');
        } else if (selected.length > 2) {
            $('#categoryDropdown').text(selected.length + ' Categories Selected');
        } else {
            $('#categoryDropdown').text(selected.join(', '));
        }
      });

      $('#selectAllAnimals').on('change', function () {
          $('.animal-checkbox').prop('checked', $(this).is(':checked'));
      });

      $('.animal-checkbox, #selectAllAnimals').on('change', function () {
          let selected = [];

          $('.animal-checkbox:checked').each(function () {
              selected.push($(this).closest('label').text().trim());
          });

          if (selected.length === 0) {
              $('#animalDropdown').text('Select Animal Type');
          } else if (selected.length > 2) {
              $('#animalDropdown').text(selected.length + ' Animal Type Selected');
          } else {
              $('#animalDropdown').text(selected.join(', '));
          }
      });

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

      // Add Size Variation
      let variationCount = 1;
      function addSizeVariation() {
        const i = variationCount++;
        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[${i}][pack_size]" class="pack-size-input" placeholder="Example... 50kg">
                      </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[${i}][mrp]" placeholder="Enter MRP Price" class="mrp-input">
                      </div>
                      <small class="text-danger price-error d-none">

                      </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[${i}][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[${i}][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[${i}][stock_level]" 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[${i}][stock_alert]" 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_${i}" data-pack="${i}" name="productSize[${i}][pack_images][]" class="pack-image-input" multiple accept="image/png,image/jpeg,image/jpg" hidden data-max="5">
                            <label for="packImages_${i}" 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 3 images)</div>
                              </div>
                            </label>
                        </div>
                      </div>
                    </div>
                    {{-- Preview Area --}}
                    <div class="col-lg-8">
                        <div id="imagePreview_${i}" class="d-flex flex-wrap gap-2"></div>
                    </div>
                  </div>
                </div>

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

      // Remove Size Variation
      function removeVariation(button) {
        button.closest(".size-variation").remove();
      }



    </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>
    document.addEventListener('DOMContentLoaded', 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() {

            $("#productForm").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>

    <script>
      const MAX_IMAGES_PER_PACK = 3;

      document.addEventListener('change', function (e) {
          if (!e.target.classList.contains('pack-image-input')) return;

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

          if (!preview) return;

          //Limit check
          if (input.files.length > MAX_IMAGES_PER_PACK) {
              alert(`You can upload only ${MAX_IMAGES_PER_PACK} images for this pack size.`);
              input.value = ''; // reset input
              preview.innerHTML = '';
              return;
          }

          preview.innerHTML = '';

          Array.from(input.files).forEach(file => {
              const reader = new FileReader();
              reader.onload = function (e) {
                  const div = document.createElement('div');
                  div.className = 'image-box new-image';


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

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


                  preview.appendChild(div);
              };
              reader.readAsDataURL(file);
          });
      });
    </script>
    <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>

    {{--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
        $input.attr({ min: 0 }); // always

        if (type === 'percentage') {
            $label.text('Discount Percentage');
            $prefix.text('%');
            $input.attr({
                step :1,
                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>

@endsection