mirfalah-tech
/
digital-card


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="en" data-theme="light">
<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">
    <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-success 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-success');
                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>