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

<dialog id="guestbook" class="modal">
    <div class="modal-box w-11/12 max-w-5xl">
      <h3 class="text-lg font-bold">Ucapan</h3>
      <form id="speechForm">
        @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">Ucapan anda</span>
          </div>
          <textarea class="textarea textarea-accent" name="speech" placeholder="Taip disini"></textarea>
        </label>
      </form>
      <div class="modal-action">
        <form method="dialog" id="closeSpeechForm"></form>
        <button type="button" class="btn bg-babybluedark" id="submitSpeechForm">Hantar</button>
        <button type="button" class="btn" id="submitCloseSpeechForm">Tutup</button>
      </div>
    </div>
</dialog>

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

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

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

          $.ajax({
            url: '{{ route('speech.save') }}',
            type: 'POST',
            data: formData,
            success: function(response) {
              $('#closeSpeechForm').submit();
              if ('{{ session('success') }}') {
                  showSuccessMessage('{{ session('success') }}');
              }
            },
            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

          // session()->forget('success');
      }
    </script>
@endpush