<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(); $('#rsvpForm')[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