nyan

.primary__btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
  }

@media only screen and (min-width: 768px) {
    .primary__btn {
      line-height: 4rem;
      height: 4rem;
      padding: 0 2.2rem;
    }
  }

@media only screen and (min-width: 992px) {
    .primary__btn {
      font-size: 1.6rem;
      line-height: 4.5rem;
      height: 4.5rem;
      padding: 0 2.5rem;
    }
  }
</style>
<form id="form_edit" class="form_edit" method="post" action="{{ route('productImage.update', $productImage->id) }}"
  enctype="multipart/form-data">

@csrf
  @method('PUT')
  @if (!is_null($productImage->product_id))
    <div class="form-group">
      <label for="page">Product:<span class="contact__form--label__star">*</span></label>
      <select name="product_id">
        @foreach (json_decode(@$product) as $prdk)
          <option value="{{ $prdk->id }}" {{ $prdk->id == $productImage->product_id ? 'selected' : '' }}>
            {{ $prdk->name }}
          </option>
        @endforeach
      </select>
    </div>
  @else
    <div class="form-group">
      <label for="page">Product Type (SubProduct):<span class="contact__form--label__star">*</span></label>
      <select name="product_type_id">
        @foreach (json_decode(@$subproduct) as $type)
          <option value="{{ $type->id }}" {{ $type->id == $productImage->product_type_id ? 'selected' : '' }}>
            {{ $type->name }}
          </option>
        @endforeach
      </select>
    </div>
  @endif

<div class="form-group">
    <label for="headline">Image HD:<span class="contact__form--label__star">*</span></label>
    <input class="form-input" type="file" id="image_hd" name="image_hd" accept="image/*">
    <p class="mb-3">
      <small>Existing File:</small>
      <a href="{{ asset('assets/img/products/' . $productImage->image_hd) }}"
        target="_blank">{{ $productImage->image_hd }}</a>
    </p>
  </div>

<div class="form-group">
    <label for="headline">Image Low:</label>
    <input class="form-input" type="file" id="image_low" name="image_low" accept="image/*">
    @if (!is_null($productImage->image_low))
      <p class="mb-3">
        <small>Existing File:</small>
        <a href="{{ asset('assets/img/products/' . $productImage->image_low) }}"
          target="_blank">{{ $productImage->image_low }}</a>
      </p>
    @endif
  </div>

<div class="form-group">
    <label for="headline">Image HD Mobile:</label>
    <input class="form-input" type="file" id="image_hd_mobile" name="image_hd_mobile" accept="image/*">
    @if (!is_null($productImage->image_hd_mobile))
      <p class="mb-3">
        <small>Existing File:</small>
        <a href="{{ asset('assets/img/products/' . $productImage->image_hd_mobile) }}"
          target="_blank">{{ $productImage->image_hd_mobile }}</a>
      </p>
    @endif
  </div>

<div class="form-group">
    <label for="headline">Image Low Mobile:</label>
    <input class="form-input" type="file" id="image_low_mobile" name="image_low_mobile" accept="image/*">
    @if (!is_null($productImage->image_low_mobile))
      <p class="mb-3">
        <small>Existing File:</small>
        <a href="{{ asset('assets/img/products/' . $productImage->image_low_mobile) }}"
          target="_blank">{{ $productImage->image_low_mobile }}</a>
      </p>
    @endif
  </div>

<div class="text-end mt-3">
    <input id="btn-save" type="submit" class="primary__btn">
  </div>
</form>
<script>
  $(".form_edit").submit(function(e) {
    e.preventDefault();

var formData = new FormData(this);

$.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: formData,
      processData: false, // Important: prevent jQuery from processing the data
      contentType: false,
      dataType: 'json',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        swal.fire({
          type: 'success',
          icon: 'success',
          title: `${response.message}`,
          showConfirmButton: false,
          timer: 3000
        });

$('#modal-edit').modal('hide');
        $('.table').DataTable().ajax.reload();
        location.reload();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.error(errorThrown);
      }
    });
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>