<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{config('app.name')}}</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<meta name="csrf-token" content="{{ csrf_token() }}">
@vite(['resources/css/app.css'])
</head>
<body class="antialiased font-serif">
<audio id="player" autoplay="autoplay" loop>
<source src="{{asset('assets/background-music.mp3')}}" type="audio/mp3">
</audio>
<div class="section bg-babyblue h-screen w-screen flex justify-center items-center">
<div class="flex flex-col gap-3 w-4/5 z-10">
<div class="flex justify-center">
<p class="font-normal text-base text-navbarcolor uppercase">MAJLIS PERKAHWINAN ALIFF & AYUNA</p>
</div>
<div class="flex justify-center pt-8 pb-6">
<img src="{{ asset('assets/logosmallest.png') }}" alt="Logo">
</div>
<div class="flex justify-center">
<p class="font-normal text-2xl text-navbarcolor uppercase">RSVP</p>
</div>
<div class="flex justify-center">
<form id="RSVPForm" class="flex flex-col gap-3">
@csrf
<label class="input input-sm input-bordered flex items-center gap-2">
Name :
<input type="text" name="name" class="grow"/>
</label>
<label class="input input-sm input-bordered flex items-center gap-2">
Bilangan :
<input type="number" name="member" class="grow"/>
</label>
<label class="input input-sm input-bordered flex items-center gap-2">
No. Tel :
<input type="number" name="phone" class="grow"/>
</label>
<button id="submitForm" class="bg-babybluedark rounded-lg py-2 text-navbarcolor">Hantar</button>
</form>
</div>
<div class="flex justify-center pt-2">
<a onclick="contact.showModal()" class="bg-white rounded-full py-3 px-4 text-navbarcolor">
<i class="fa-solid fa-phone"></i>
</a>
@include('modals.contact-modal')
</div>
</div>
<img src="{{asset('assets/flower-left.png')}}" alt="" class="fixed -left-3/4 top-28">
<img src="{{asset('assets/flower-right.png')}}" alt="" class="fixed -right-3/4 top-8">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#submitForm').click(function(e) {
e.preventDefault();
var formData = $('#RSVPForm').serialize();
$.ajax({
url: '{{ route('rsvp.save') }}',
type: 'POST',
data: formData,
success: function(response) {
if ('{{ session('success') }}') {
showSuccessMessage('{{ session('success') }}');
}
$('#RSVPForm')[0].reset();
},
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>
</body>
</html>