nyan

{{-- <div class="alert alert-primary" role="alert">
  💡<strong>Tips!</strong> Kosongkan "Product" saat menambahkan image untuk "Product Type", dan sebaliknya.
</div> --}}

<div class="form-group mb-3">
  <label for="">Tambah image untuk:</label>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="image_group" value="Product" id="pilihProduct" checked>
    <label class="form-check-label" for="pilihProduct">
      Product
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="image_group" value="Subproduct" id="pilihType">
    <label class="form-check-label" for="pilihType">
      Subproduct
    </label>
  </div>
</div>

<div class="form-group" id="productFormGroup">
  <label for="page">Product:<span class="contact__form--label__star">*</span></label>
  <select name="product_id" id="product_id">
    <option value="" selected>Select Product</option>
    @foreach (json_decode(@$product) as $prd)
      <option value="{{ $prd->id }}">{{ $prd->name }}</option>
    @endforeach
  </select>
</div>

<div class="form-group" id="productTypeFormGroup" style="display: none;">
  <label for="page">Product Type (Subproduct):<span class="contact__form--label__star">*</span></label>
  <select name="product_type_id" id="product_type_id">
    <option value="" selected>Select Valid Product</option>
  </select>
</div>

<div class="form-group">
  <label for="image_hd">Image HD:<span class="contact__form--label__star">*</span></label>
  <input class="form-input mb-0" type="file" id="image_hd" name="image_hd" accept="image/*" required>
  <small class="text-primary">Max. Size 2 MB | 1025 x 769</small>
</div>

<div class="form-group">
  <label for="image_low">Image Low:</label>
  <input class="form-input" type="file" id="image_low" name="image_low" accept="image/*">
  <small class="text-primary">Max. Size 2 MB | 1025 x 769</small>
</div>

<div class="form-group">
  <label for="image_hd_mobile">Image HD Mobile:<span class="contact__form--label__star">*</span></label>
  <input class="form-input mb-0" type="file" id="image_hd_mobile" name="image_hd_mobile" accept="image/*">
  <small class="text-primary">Max. Size 2 MB | 1025 x 769</small>
</div>

<div class="form-group">
  <label for="image_low_mobile">Image Low Mobile:</label>
  <input class="form-input" type="file" id="image_low_mobile" name="image_low_mobile" accept="image/*">
  <small class="text-primary">Max. Size 2 MB | 1025 x 769</small>
</div>

{{-- <div class="form-group">
  <label for="deskripsi">WhatsApp Text:</label>
  <input class="form-input" type="text" id="wa_text" name="wa_text" required>
</div> --}}

subproductRadio.addEventListener('change', function() {
      if (this.checked) {
        productTypeFormGroup.style.display = "block"
      }
    });

const productRadio = document.getElementById("pilihProduct");
    productRadio.addEventListener('change', function() {
      if (this.checked) {
        productTypeFormGroup.style.display = "none";
      }
    });
  });
</script>

productSelect.addEventListener('change', function(event) {
      const selectedProductId = parseInt(event.target.value);

// Filter opsi pada select "Product Type" berdasarkan produk yang dipilih
      const filteredSubproducts = subproducts.filter(subproduct => {
        return subproduct.main_product_id === selectedProductId;
      });

// Perbarui opsi pada select "Product Type"
      productTypeSelect.innerHTML = '<option value="" selected>Select Type</option>';
      filteredSubproducts.forEach(subproduct => {
        const option = document.createElement('option');
        option.value = subproduct.id;
        option.textContent = subproduct.name;
        productTypeSelect.appendChild(option);
      });
    });
  });
</script>