@extends('frontend.maintemplate.maintemplate')

@section('content')
    <!-- Banner Section  -->
    <div class="banner-with-text-section"
        style="background-image: url({{ asset('frontend/assets/images/information/contact-image.png') }});">
        <div class="banner-text-bg">
            <div class="container-fluid">
                <div class="banner-text-wrapper">
                    <h2>Have Questions?<br />
                        Connect with Experts.</h2>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Section ₹  -->

    <!-- Get in Touch Section  -->
    <div class="get-in-touch-section">
        <div class="container-fluid">
            <div class="get-in-touch-container">
                <div class="get-in-touch-inner-wrapper">
                    <div class="top-section">
                        <div class="title-wrapper">
                            <h2>Get in Touch</h2>
                        </div>
                        <div class="inner-wrapper">
                            <div class="call-email-time-schedule-section">
                                <div class="addresses-box-wrapper">
                                    <div class="box-wrapper">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/contact/call.png') }}" alt="">
                                        </div>
                                        <p>Mobile</p>
                                        <a href="tel:+91 8976711586" target="_blank">+91 8976711586</a>
                                    </div>
                                    <div class="box-wrapper">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/contact/wp.png') }}" alt="">
                                        </div>
                                        <p>WhatsApp</p>
                                        <a href="https://api.whatsapp.com/send?phone=918976711586" target="_blank">+91 8976711586</a>
                                    </div>
                                    <div class="box-wrapper">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/contact/email.png') }}" alt="">
                                        </div>
                                        <p>Email Address</p>
                                        <a href="mailto:contact@ageless.institute"
                                            target="_blank">contact@ageless.institute</a>
                                    </div>
                                    <div class="box-wrapper">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/contact/time.png') }}" alt="">
                                        </div>
                                        <p>Working Hours</p>
                                        <a href="javascript:void(0);">Mon - Sat 10 am to 7 pm</a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-wrapper">
                                <div class="form-inner">
                                    <form action="{{ route('contact.submit') }}" method="post" id="contact_form">

                                        @csrf

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">First Name</label>
                                                    <input type="text" name="first_name" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">Last Name</label>
                                                    <input type="text" name="last_name" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">Email Address</label>
                                                    <input type="email" name="email" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">Contact No.</label>
                                                    <input type="text" name="contact_no" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="">Subject</label>
                                                    <input type="text" name="subject" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="">Message</label>
                                                    <textarea name="message" id="" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </div>

                                        @if(session('success') || session('error'))
                                            <p id="form-message" style="color: {{ session('success') ? 'green' : 'red' }}; font-weight: 500; padding-top: 10px;text-align: center">
                                                {{ session('success') ?? session('error') }}
                                            </p>
                                        @endif

                                        <div class="submit-wrapper">
                                            <button type="submit" class="submit_btn">Send</button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-map-section">
                        <div class="bottom-map-inner">
                            <div class="top-address">
                                <p>Address</p>
                                <h6>Address: 201 / 202, 2nd Floor, Makani Centre, 35th Rd, off Linking Road, behind
                                    National College,<br />
                                    Khar, Bandra West, Mumbai, Maharashtra 400050</h6>
                            </div>
                            <div class="map-inner">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7541.882315339295!2d72.82827794465652!3d19.06632456883602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b619b215892b%3A0xd841a72cd74f885d!2sAGELESS%20INSTITUTE%20OF%20AESTHETICS!5e0!3m2!1sen!2sbd!4v1756196066329!5m2!1sen!2sbd"
                                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Get in Touch Section  -->

@endsection
@section('custome_js')
    <!-- Load validation plugin -->
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>

    <script>
        $(document).ready(function () {
            $("#contact_form").validate({
                rules: {
                    first_name: {
                        required: true,
                    },
                    last_name: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    contact_no: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15
                    },
                    subject: {
                        required: true
                    },
                    message: {
                        required: true,
                        minlength: 10
                    }
                },
                messages: {
                    first_name: {
                        required: "Please enter your first name",
                    },
                    last_name: {
                        required: "Please enter your last name",
                    },
                    email: {
                        required: "Please enter your email address",
                        email: "Please enter a valid email address"
                    },
                    contact_no: {
                        required: "Please enter your contact number",
                        digits: "Only numbers are allowed",
                        minlength: "Contact number must be at least 10 digits",
                        maxlength: "Contact number cannot exceed 15 digits"
                    },
                    subject: {
                        required: "Please enter a subject"
                    },
                    message: {
                        required: "Please enter your message",
                        minlength: "Message must be at least 10 characters long"
                    }
                },
                errorElement: "span",
                errorClass: "text-danger",
                highlight: function (element) {
                    $(element).addClass("is-invalid");
                },
                unhighlight: function (element) {
                    $(element).removeClass("is-invalid");
                },
                submitHandler: function(form) {
                    // Form is valid, proceed with submission
                    console.log('Form is valid, submitting...');
                    form.submit();
                }
            });

            if ($("#form-message").length) {
                $('html, body').animate({
                    scrollTop: $("#form-message").offset().top - 100
                }, 800);
            }

            if ($("#form-message").length) {
                $('html, body').animate({
                    scrollTop: $("#form-message").offset().top - 100
                }, 800);

                $("#form-message").hide().fadeIn(500).delay(5000).fadeOut(500);
            }

        });
    </script>
@endsection