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('banner.update', $banner->id) }}" enctype="multipart/form-data">

@csrf
    @method('PUT')
    
    <div class="form-group">
        <label for="nama_kategori">Page: <span style="color: red">*</span></label>
        <input type="text" class="form-input" id="page" name="page" value="{{@$banner->page}}">
    </div>

<div class="form-group mb-2">
        <label for="headline">Image: <span style="color: red">*</span></label>
        <input class="form-input" type="file" id="image" name="image" accept="image/*" >
        <small class="text-primary">Max. Size 2 MB | 1470 x 540</small>
        <p>Existing File: <a href="{{ asset('assets/img/products/' . $banner->image) }}" target="_blank">{{ $banner->image }}</a></p>
    </div>

<div class="form-group">
        <label for="headline">Headline: <span style="color: red">*</span></label>
        <input class="form-input" type="text" id="headline" name="headline" value="{{ @$banner->headline }}">
    </div>

<div class="form-group">
        <label for="description">Description: <span style="color: red">*</span></label>
        <input class="form-input" type="text" id="description" name="description" value="{{ @$banner->description }}">
    </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>