<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();
              $('#speechForm')[0].reset();
              var alertContainer = $('.alert-info');
              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);
            }
          });
        });
      });
    </script>
@endpush