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" action="{{ route('recommendations.update') }}" method="post">
  @csrf
  @method('PUT')
  <h4 class="mb-3 text-center">{{ $seletectedCategory->name }}</h4>
  <input type="hidden" name="category_id" value="{{ $seletectedCategory->id }}">
  @for ($i = 1; $i <= 4; $i++)
    <div class="form-group">
      <label for="product{{ $i }}">Product {{ $i }}</label>
      <select name="product_id[]">
        <option value="">Select Product</option>
        @foreach ($seletectedCategory->products as $product)
          <option value="{{ $product->id }}"
            {{ isset($selectedProductIds[$i - 1]) && $product->id === $selectedProductIds[$i - 1] ? 'selected' : '' }}>
            {{ $product->name }}
          </option>
        @endforeach
      </select>
    </div>
  @endfor

var formData = $(this).serialize();

$.ajax({
      url: $(this).attr('action'),
      type: 'PUT',
      data: formData,
      dataType: 'json',
      success: function(response) {
        swal.fire({
          type: 'success',
          icon: 'success',
          title: `${response.message}`,
          showConfirmButton: false,
          timer: 3000
        });

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