<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="color-scheme" content="light only">
<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">
<div role="alert" class="alert alert-info hidden z-40 fixed w-1/2 top-3 right-3">
<span></span>
</div>
<audio id="player" autoplay="autoplay" loop>
<source src="{{asset('assets/background-musicv2.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) {
$('#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>
</body>
</html>