digital-card/resources/views/modals/rsvp-modal.blade.php

<dialog id="rsvp" class="modal">
  <div class="modal-box w-11/12 max-w-5xl">
      <h3 class="text-lg font-bold">RSVP</h3>
      <form id="rsvpForm">
        @csrf
          <label class="form-control w-full max-w-xs">
              <div class="label">
                  <span class="label-text">Nama</span>
              </div>
              <input type="text" name="name" placeholder="Taip disini" class="input input-bordered input-sm input-accent w-full max-w-xs" />
          </label>
          <label class="form-control w-full max-w-xs">
              <div class="label">
                  <span class="label-text">Bilangan</span>
              </div>
              <input type="number" name="member" placeholder="Taip disini" class="input input-bordered input-sm input-accent w-full max-w-xs" />
          </label>
          <label class="form-control w-full max-w-xs">
            <div class="label">
                <span class="label-text">No. Tel</span>
            </div>
            <input type="number" name="phone" placeholder="Taip disini" class="input input-bordered input-sm input-accent w-full max-w-xs" />
        </label>
      </form>
      <div class="modal-action">
          <form method="dialog" id="closeRsvpForm"></form>
          <button type="button" class="btn bg-babybluedark" id="submitRsvpForm">Hantar</button>
          <button type="button" class="btn" id="submitCloseRsvpForm">Tutup</button>
      </div>
  </div>
</dialog>

@push('script')
  <script>
    $(document).ready(function() {
      $('#submitCloseRsvpForm').click(function(e) {
        $('#closeRsvpForm').submit();
      });

      $('#submitRsvpForm').click(function(e) {
        e.preventDefault();

        var formData = $('#rsvpForm').serialize();

        $.ajax({
          url: '{{ route('rsvp.save') }}',
          type: 'POST',
          data: formData,
          success: function(response) {
            $('#closeRsvpForm').submit();
            var alertContainer = $('.alert-success');
            alertContainer.find('span').text(response.message); // Set message text
            alertContainer.fadeIn().removeClass('hidden'); // Show the alert
            setTimeout(function() {
                alertContainer.fadeOut().addClass('hidden'); // Hide the alert after 5 seconds
            }, 3000);
          },
          error: function(xhr, status, error) {
            console.error('Error submitting form:', error);
          }
        });
      });
    });

    function showSuccessMessage(message) {
        // Create a dynamic success message element
        var successAlert = $('<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">' +
            '<span class="block sm:inline">' + message + '</span>' +
            '</div>');

        // Append the message to a suitable container in your HTML (e.g., modal, form, or body)
        $('#alert-success').append(successAlert);

        // Automatically remove the message after 3 seconds
        setTimeout(function() {
            successAlert.fadeOut('slow', function() {
                $(this).remove();
            });
        }, 3000); // 3 seconds
    }
  </script>
@endpush