@extends('ageless_new.maintemplate.maintemplate')
@section('title', 'Contact Us:: AgeLess Institute')
@section('content')
    <!-- Hero Section  -->
    <section class="hero-section-wrapper placement-hero-section contact-hero-section">
        <div class="bg-wrapper" style="background-image: url('{{ asset('ageless-new/assets/images/courses/contact-banner.jpg') }}');">
            <div class="container-fluid">
                <div class="hero-section-inner">
                    <h2 data-aos="fade-up">Connect With. <br /><span class="last-span">AgeLess.</span> <br /><span class="last-span">Institute.</span>
                    </h2>
                    <p data-aos="fade-up" data-aos-delay="50">Reach out to our academic counsellors today and take the first step towards your career in clinical aesthetics.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Hero Section  -->

    <!-- Update Contact Section  -->
    <section class="contact-section-update-wrapper">
        <div class="container-fluid">
            <div class="contact-section-update-inner">
                <div class="contact-update-left-section">
                    <div class="inner-wrapper">
                        <h3>Send us a message</h3>
                        <div class="update-form-inner">
                            @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif
                            @if (session('error'))
                                <div class="alert alert-danger">{{ session('error') }}</div>
                            @endif
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                             <form action="{{ route('contact.submit') }}" method="POST" id="contactForm">
                                @csrf
                                <div class="form-group">
                                    <label for="name">Name<span>*</span></label>
                                    <input type="text" id="name" name="name" placeholder="Your Name" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="contact">Contact No<span>*</span></label>
                                    <input type="text" id="contact" name="contact_no" placeholder="Your Contact No" class="form-control" maxlength="10"  inputmode="numeric" pattern="[0-9]{10}" oninput="this.value = this.value.replace(/\D/g, '').slice(0, 10);">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email Id<span>*</span></label>
                                    <input type="email" id="email" name="email" placeholder="Your Email Id" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="city">City<span>*</span></label>
                                    <input type="text" id="city" name="city" placeholder="Your City" class="form-control">
                                </div>
                                <div class="form-group">
                                    <div class="captcha-wrapper">
                                        <div class="g-recaptcha" data-sitekey="6Lfi4bQsAAAAANL0UiHnv9yvz5BGaXx_AKc5b33t" data-callback="onContactCaptchaSuccess"></div>
                                        <div id="contactCaptchaError" style="color:#dc3545; font-size:.875em; display:none;">Please verify you are human.</div>
                                        <!-- Secret Key  -->
                                        <!--    6LfV4-AqAAAAAFJlY0f8hgaKG_8truJV8q7X0Vlc     -->
                                        <!-- Secret Key  -->
                                    </div>
                                </div>
                                <button type="submit" class="submit_btn">Submit <svg xmlns="http://www.w3.org/2000/svg"
                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
                                        <g clip-path="url(#clip0_957_285)">
                                            <path
                                                d="M9.69119 14.4577C9.71652 14.5208 9.76055 14.5747 9.81737 14.6121C9.87419 14.6494 9.94109 14.6685 10.0091 14.6668C10.0771 14.665 10.1429 14.6426 10.1977 14.6023C10.2526 14.5621 10.2938 14.506 10.3159 14.4417L14.6492 1.77503C14.6705 1.71596 14.6746 1.65203 14.6609 1.59073C14.6473 1.52943 14.6164 1.47329 14.572 1.42888C14.5276 1.38447 14.4715 1.35363 14.4102 1.33996C14.3489 1.32629 14.2849 1.33036 14.2259 1.3517L1.55919 5.68503C1.49485 5.70709 1.4388 5.74831 1.39857 5.80314C1.35833 5.85798 1.33584 5.92381 1.33409 5.9918C1.33235 6.05979 1.35145 6.12669 1.38883 6.18351C1.4262 6.24034 1.48007 6.28437 1.54319 6.3097L6.82986 8.4297C6.99698 8.49661 7.14882 8.59667 7.27623 8.72385C7.40364 8.85103 7.50398 9.00269 7.57119 9.1697L9.69119 14.4577Z"
                                                stroke="white" stroke-width="1.33333" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path d="M14.5687 1.43164L7.27539 8.72431" stroke="white"
                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_957_285">
                                                <rect width="16" height="16" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg></button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="contact-update-right-section">
                    <div class="inner-wrapper">
                        <div class="top-address-section">
                            <div class="box-wrapper">
                                <a href="tel:+91 74004 03841">
                                    <div class="icon-wrapper">
                                        <span class="material-icons">
                                            phone
                                        </span>
                                    </div>
                                    <h5>Contact No</h5>
                                    <h4>+91 74004 03841</h4>
                                </a>
                            </div>
                            <div class="box-wrapper">
                                <a href="mailto:contact@ageless.institute">
                                    <div class="icon-wrapper">
                                        <span class="material-icons">
                                            email
                                        </span>
                                    </div>
                                    <h5>Email</h5>
                                    <h4>contact@ageless.institute</h4>
                                </a>
                            </div>
                        </div>
                        <div class="bottom-address-wrapper">
                            <div class="box-wrapper">
                                <div class="inner-wrapper">
                                    <div class="icon-wrapper">
                                        <span class="material-icons">
                                            location_on
                                        </span>
                                    </div>
                                    <div class="address-content">
                                        <h5>Address</h5>
                                        <p>201/202, 2nd Floor, Makani Centre, behind National College, 35th Road, off
                                            Linking
                                            Road, Khar, Bandra West, Mumbai 400050</p>
                                    </div>
                                </div>
                            </div>
                            <div class="box-wrapper">
                                <div class="map-section">
                                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d18049.56864556326!2d72.8251624!3d19.0652599!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c9ad57c40133%3A0x6955998cfa03829b!2sAgeless%20Institute%20of%20Aesthetics!5e1!3m2!1sen!2sbd!4v1777011148590!5m2!1sen!2sbd"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Update Contact Section  -->
@endsection

@section('custome_js')
    <script>
        function onContactCaptchaSuccess() {
            $("#contactCaptchaError").hide();
        }

        $(document).ready(function() {
            setTimeout(function() {
                $('.update-form-inner .alert').fadeOut(500, function() {
                    $(this).remove();
                });
            }, 5000);

            $.validator.addMethod("strictEmail", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}$/i.test(value);
            }, "Please enter a valid email address.");

            $.validator.addMethod("exactPhone", function(value, element) {
                return this.optional(element) || /^[0-9]{10}$/.test(value);
            }, "Contact number must be exactly 10 digits.");

            $('#contactForm .submit_btn').on('click', function() {
                if ($('#contactForm').find('[name="g-recaptcha-response"]').val() === "") {
                    $("#contactCaptchaError").show();
                } else {
                    $("#contactCaptchaError").hide();
                }
            });

            $("#contactForm").validate({
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        strictEmail: true
                    },
                    contact_no: {
                        required: true,
                        exactPhone: true,
                    },
                    city: "required",
                },
                messages: {
                    name: "Please enter your name",
                    email: "Please enter a valid email address",
                    contact_no: {
                        required: "Please enter contact number",
                        exactPhone: "Contact number must be exactly 10 digits",
                    },
                    city: "Please enter city",
                },
                errorElement: "span",
                errorPlacement: function(error, element) {
                    error.addClass("invalid-feedback");
                    element.closest(".form-group").append(error);
                },
                highlight: function(element) {
                    $(element).addClass("is-invalid");
                },
                unhighlight: function(element) {
                    $(element).removeClass("is-invalid");
                },
                submitHandler: function(form) {
                    if ($(form).find('[name="g-recaptcha-response"]').val() === "") {
                        $("#contactCaptchaError").show();
                        return false;
                    }

                    $("#contactCaptchaError").hide();
                    var submitBtn = $(form).find('.submit_btn');
                    submitBtn.html('<i class="fa fa-spinner fa-spin"></i> Please wait...');
                    submitBtn.prop('disabled', true);
                    form.submit();
                }
            });
        });
    </script>
@endsection