@extends('layouts.dynamic')
@section('container')
    <div class="contact">
        <div class="contact_banner">
            <img loading='lazy' src="{{ asset('images/group/bg-contact.jpg') }}"
                alt="{{ asset('images/group/bg-contact.jpg') }}">
            <div class="contact_banner_text">
                <p>
                    Connect With Us
                </p>
                <h2>
                    Contact Us
                </h2>
                <p>For bookings and enquiries, please call us or write to us.</p>
            </div>
        </div>
        <div class="container contact_items">
            <div class="contact_items_display">
                <div class="image_">
                    <img loading='lazy' src="{{ asset('images/group/contact-city.jpg') }}"
                        alt="{{ asset('images/group/contact-city.jpg') }}">
                </div>
                <div class="desc_">
                    <h2>
                        Contact Information
                    </h2>
                    <ul>
                        <li>Address: 168 Robinson Road, #30-01 Capital Tower - Singapore 068912</li>
                        <li>Phone Number: +65 22 345 67 88</li>
                        <li>Email: support@kimayagroup.com</li>
                    </ul>
                    <h2>Let's start a conversation</h2>
                    <div id="form_contact">
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="Your Name" id="name" >
                            <div class="invalid-feedback" id="alertName"></div>
                        </div>
                        <div class="mb-3">
                            <input type="email" class="form-control" placeholder="Your Email" id="email" >
                            <div class="invalid-feedback" id="alertEmail"></div>
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="Subject" id="subject" >
                            <div class="invalid-feedback" id="alertSubject"></div>
                        </div>
                        <div class="mb-3">
                            <textarea class="form-control" placeholder="Your Message" id="message" rows="3" ></textarea>
                            <div class="invalid-feedback" id="alertMessage"></div>
                        </div>
                        <button class="btn btn_purple" type="submit" id="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        @include('modals.success-contact') 

        @include('sections.signup-subscribe-two')
    </div>
@endsection

@push('scripts') 
    <script>
        const header = document.querySelector('.header_group');
        const bannerSection = document.querySelector('.contact_banner');

        window.addEventListener('scroll', () => {
            const scrollPosition = window.scrollY;
            const bannerPosition = bannerSection.offsetTop;
            if (scrollPosition > bannerPosition) {
                header.classList.add('lightscroll');
            } else {
                header.classList.remove('lightscroll');
            }
        });

        $('#submit').click(function(e) {
            e.preventDefault();

            let name = $('#name').val();
            let email = $('#email').val();
            let subject = $('#subject').val();
            let message = $('#message').val(); 
            let token = $("meta[name='csrf-token']").attr("content");
            $.ajax({
                url: `/contact`,
                type: "POST",
                cache: false,
                data: {
                    "name": name,
                    "email": email,
                    "subject": subject,
                    "message": message, 
                    "_token": token
                },
                success: function(response) {
                    $('#form_contact').find('input.is-invalid').removeClass('is-invalid');
                    $('#form_contact').find('textarea.is-invalid').removeClass('is-invalid');
                    $('#AlertModalSuccess').modal('show');
                },
                error: function(error) {
                    if (error.responseJSON.name) {
                        $('#name').addClass('is-invalid');
                        $('#alertName').html(error.responseJSON.name);
                    } else {
                        $('#name').removeClass('is-invalid');
                    }
                    if (error.responseJSON.email) {
                        $('#email').addClass('is-invalid');
                        $('#alertEmail').html(error.responseJSON.email);
                    } else {
                        $('#email').removeClass('is-invalid');
                    }
                    if (error.responseJSON.subject) {
                        $('#subject').addClass('is-invalid');
                        $('#alertSubject').html(error.responseJSON.subject);
                    } else {
                        $('#subject').removeClass('is-invalid');
                    }
                    if (error.responseJSON.message) {
                        $('#message').addClass('is-invalid');
                        $('#alertMessage').html(error.responseJSON.message);
                    } else {
                        $('#message').removeClass('is-invalid');
                    } 
                }
            });

        });

        $('#doneSubmit').click(function(e) {
            e.preventDefault();
            $('#name').val('');
            $('#email').val('');
            $('#subject').val(''); 
            $('#message').val('');
        });
    </script>
@endpush