mirfalah-tech
/
digital-card


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!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 loop>
        <source src="{{'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">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>