@extends('frontend.maintemplate.maintemplate')

@section('content')
    <style>
        .text-danger {
            color: red !important;
            font-size: 15px !important;
            margin-top: 5px !important;
            text-transform: none !important;
        }

        .alert-success {
            background-color: #d1e7dd;
            border: 1px solid #badbcc;
            color: #0f5132;
            padding: 15px;
            border-radius: 5px;
        }

        .about-promise-section .our-promise-section .our-promise-inner-container .our-promise-inner {
            margin-top: 0 !important;
        }
    </style>

    <!-- Banner Section  -->
    <div class="banner-with-text-section"
        style="background-image: url({{ asset('frontend/assets/images/about/about-baner-image.png') }});">
        <div class="banner-text-bg">
            <div class="container-fluid">
                <div class="banner-text-wrapper">
                    <h4>About Academy</h4>
                    <h2>Mumbai’s Premier Aesthetics<br />
                        Education Institute!</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Banner Section  -->

    <!-- Our Legacy Section  -->
    <div class="our-legacy-section">
        <div class="container-fluid">
            <div class="our-legacy-container">
                @if (session('success'))
                    <div class="alert alert-success" id="successMessage" style="margin-bottom: 20px;">
                        {{ session('success') }}
                    </div>
                @endif

                <div class="our-legacy-inner">
                    <div class="left-image-section">
                        <div class="image-wrapper">
                            <img src="{{ asset('frontend/assets/images/about/OurLegacy.jpg') }}" alt="">
                        </div>
                        <!-- Video Section -->
                        {{-- <div class="section section-4 video-section scroll-play-video">
                            <div class="video-container">
                                <video class="scroll-video" playsinline controls>
                                    <source src="{{ asset('frontend/assets/video/Dr-HB-Intro-Institute.mp4') }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="play-button-overlay">
                                    <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    <div class="right-legacy-content-section">
                        <div class="inner-wrapper">
                            <h4>Our Legacy</h4>
                            <p>With over 15 years of experience as one of India's leading aesthetic clinics, The AgeLess Clinic is proud to introduce the AgeLess Institute of Aesthetics. Renowned for our commitment to excellence, transformative results and being pioneers in bringing cutting-edge technologies and treatments to India, we have consistently set benchmarks in the field of aesthetic care.</p>
                            <p>Now, we are channelling this unmatched expertise into education. The AgeLess Institute of Aesthetics offers a comprehensive, industry-driven curriculum designed to produce highly skilled and competent professionals. Our courses are a blend of aesthetic science, hands-on experience and global best practices — empowering the next generation of aesthetic practitioners.</p>
                        </div>

                    </div>
                </div>
                <div class="legacy-box-wrapper">
                    <div class="legacy-box">
                        <div class="icon-wrapper">
                            <img src="{{ asset('frontend/assets/images/about/about-expert-faculty.png') }}" alt="">
                        </div>
                        <h5>Expert Faculty</h5>
                        <p>Learn from industry leaders</p>
                    </div>
                    <div class="legacy-box">
                        <div class="icon-wrapper">
                            <img src="{{ asset('frontend/assets/images/about/about-hands-training.png') }}" alt="">
                        </div>
                        <h5>Hands-on Training</h5>
                        <p>Practical experience</p>
                    </div>
                    <div class="legacy-box">
                        <div class="icon-wrapper">
                            <img src="{{ asset('frontend/assets/images/about/about-modern-facility.png') }}" alt="">
                        </div>
                        <h5>Technologically Advanced</h5>
                        <p>Train on latest aesthetic technologies</p>
                    </div>
                    <div class="legacy-box">
                        <div class="icon-wrapper">
                            <img src="{{ asset('frontend/assets/images/about/about-certification.png') }}" alt="">
                        </div>
                        <h5>Certification</h5>
                        <p>Industry recognized</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Our Legacy Section  -->

    <!-- Ageless Clicnic Section  -->
    {{-- <div class="ageless-clinic-section">
        <div class="top-image-section">
            <div class="image-wrapper">
                <img src="{{ asset('frontend/assets/images/about/about-ageless-clinic.png') }}" alt="">
            </div>
        </div>
        <div class="container-fluid">
            <div class="about-ageless-clinic-container">
                <div class="about-ageless-clinic-inner">
                    <div class="why-ageless-banner-section">
                        <h4>Why AgeLess Institute of Aesthetics?</h4>
                        <p>Building on our rich legacy, we are excited to introduce the AgeLess Institute of Aesthetics.
                            Our aim is to elevate the standard of professional training in the aesthetics industry. By
                            leveraging our extensive knowledge and experience, we have crafted a comprehensive
                            educational program designed to produce highly competent professionals.</p>
                    </div>
                    <div class="our-philosophy-section">
                        <div class="left-content-section">
                            <h4>Our Philosophy</h4>
                            <p>We believe that true expertise in aesthetics extends beyond theoretical knowledge.
                                Through our training programs, we address a critical gap in traditional aesthetic
                                education — the lack of practical experience. At the Ageless Institute, we emphasize
                                hands-on training that equips our students with not just knowledge but confidence; the
                                confidence that comes from real-world practice.</p>
                        </div>
                        <div class="right-image-section">
                            <div class="image-wrapper">
                                <img src="{{ asset('frontend/assets/images/about/about-philosophy.png') }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="ageless-clinic-section">
        <div class="ageless-band-section">
            <div class="container-fluid">
                <div class="ageless-band-inner">
                    <div class="left-content-section">
                        <h4>Why AgeLess Institute of Aesthetics?</h4>
                        <p>Building on our rich legacy, we are excited to introduce the AgeLess Institute of Aesthetics.
                            Our aim is to elevate the standard of professional training in the aesthetics industry. By
                            leveraging our extensive knowledge and experience, we have crafted a comprehensive
                            educational program designed to produce highly competent professionals.</p>
                    </div>
                    <div class="right-image-section">
                        <div class="image-wrapper">
                            <img src="{{ asset('frontend/assets/images/about/WhyAgeLessInstituteofAesthetics.JPG') }}" alt="Why AgeLess Institute">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="about-ageless-clinic-container">
                <div class="about-ageless-clinic-inner">
                    <div class="our-philosophy-section">
                        <div class="right-image-section">
                            <div class="image-wrapper">
                                <img src="{{ asset('frontend/assets/images/about/about-philosophy.png') }}" alt="">
                            </div>
                        </div>
                        <div class="left-content-section">
                            <h4>Our Philosophy</h4>
                            <p>We believe that true expertise in aesthetics extends beyond theoretical knowledge.
                                Through our training programs, we address a critical gap in traditional aesthetic
                                education — the lack of practical experience. At the Ageless Institute, we emphasize
                                hands-on training that equips our students with not just knowledge but confidence; the
                                confidence that comes from real-world practice.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Ageless Clicnic Section  -->

    <!-- About Promise Section  -->
    <div class="about-promise-section">
        <div class="top-promise-image-wrapper">
            <div class="image-wrapper">
                {{-- <img src="{{ asset('frontend/assets/images/about/OurPromise.jpg') }}" alt=""> --}}
            </div>
        </div>
        <div class="our-promise-section">
            <div class="container-fluid">
                <div class="our-promise-inner-container">
                    <div class="our-promise-inner">
                        <h4>Our Promise </h4>
                        <p>Graduates from the Ageless Institute of Aesthetics will not only be proficient in theoretical
                            aspects of the field but also adept in practical applications. Our rigorous training ensures
                            that our students are ready to excel in the industry and stand out in the job market.</p>
                        <div class="promise-box-wrapper">
                            <div class="promise-box">
                                <div class="icon-wrapper">
                                    <img src="{{ asset('frontend/assets/images/about/about-hands-experience.png') }}"
                                        alt="">
                                </div>
                                <h5>Hands-on Experience</h5>
                            </div>
                            <div class="promise-box">
                                <div class="icon-wrapper">
                                    <img src="{{ asset('frontend/assets/images/about/about-expert-knowledge.png') }}"
                                        alt="">
                                </div>
                                <h5>Expert Knowledge</h5>
                            </div>
                            <div class="promise-box">
                                <div class="icon-wrapper">
                                    <img src="{{ asset('frontend/assets/images/about/about-career-growth.png') }}"
                                        alt="">
                                </div>
                                <h5>Career Growth</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About Promise Section  -->



    <!-- Join us section  -->
    <div class="join-us-section">
        <div class="container-fluid">
            <div class="join-us-inner-container">
                <div class="join-us-inner">
                    <div class="top-title-para-section">
                        <h4>Join Us</h4>
                        <div class="para-wrapper">
                            <p>Embark on your journey to becoming a distinguished professional in the aesthetic industry
                                with Ageless Institute of Aesthetics. Gain the edge in your career through our
                                expert-driven courses and become the expert that top clinics and clients seek.</p>
                        </div>
                    </div>
                    <div class="mumbai-institute-section">
                        <h4>Mumbai’s Premier Aesthetics Education Institute!</h4>
                        <div class="join-content-box-wrapper">
                            <div class="box-wrapper">
                                <div class="icon-wrapper">
                                    <img src="{{ asset('frontend/assets/images/about/about-expert-training-academy.png') }}" alt="">
                                </div>
                                <div class="content-para">
                                    <h5>Expert Training Academy</h5>
                                    <p>At our institute, training is more than just meeting standards; it’s about
                                        setting benchmarks and exceeding them. We’ve established a premier training
                                        academy where aspiring professionals learn from the best to become leaders in
                                        the aesthetic industry.</p>
                                </div>
                            </div>
                            <div class="box-wrapper">
                                <div class="icon-wrapper">
                                    <img src="{{ asset('frontend/assets/images/about/about-cutting-edge-technologies.png') }}" alt="">
                                </div>
                                <div class="content-para">
                                    <h5>Cutting-Edge Technologies</h5>
                                    <p>Our institute is a hub for innovation in aesthetics education in India, boasting
                                        an extensive array of the latest global aesthetic technologies. Students gain
                                        hands-on experience with advanced equipment for comprehensive training in skin,
                                        hair, and body treatments.</p>
                                </div>
                            </div>
                            <div class="box-wrapper">
                                <div class="icon-wrapper">
                                    <img src="{{ asset('frontend/assets/images/about/about-luxurious-learning-environment.png') }}" alt="">
                                </div>
                                <div class="content-para">
                                    <h5>Luxurious Learning Environment</h5>
                                    <p>Experience luxury in education with our state-of-the-art facilities. We offer a
                                        learning environment that meets global standards, yet is tailored to be
                                        accessible and affordable. Enjoy high-quality, world-class education that equips
                                        you for success in the competitive aesthetics field.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="join-us-form-section" style="display: none;">
                        <div class="join-us-inner">
                            <form action="{{ route('about.submit') }}" id="joinUsForm" method="post">
                                @csrf
                                <div class="form-group">
                                    <label for="">Full Name</label>
                                    <input type="text" class="form-control" name="full_name">
                                </div>
                                <div class="form-group">
                                    <label for="">Email Address</label>
                                    <input type="email" class="form-control" name="email">
                                </div>
                                <div class="form-group">
                                    <label for="">Phone No.</label>
                                    <input type="text" class="form-control" name="phone_no">
                                </div>
                                <div class="submit-wrapper">
                                    <button type="submit" class="submit_btn">send</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Join us section  -->
@endsection
@section('custome_js')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script>
        $(document).ready(function() {

            $.validator.addMethod("validEmailChars", function(value, element) {

                return /^[a-zA-Z0-9@.]+$/.test(value);
            }, "Email can only contain letters, numbers, '.' and '@' characters");

            $("#joinUsForm").validate({
                rules: {
                    full_name: {
                        required: true,
                        maxlength: 50,
                    },
                    phone_no: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    email: {
                        required: true,
                        email: true,
                        maxlength: 100,
                        validEmailChars: true
                    },

                },
                messages: {
                    full_name: {
                        required: "Please enter the first name"
                    },
                    phone_no: {
                        required: "Please enter a mobile number",
                        digits: "Please enter a valid mobile number",
                    },
                    email: {
                        required: "Please enter an email address",
                        email: "Please enter a valid email address",
                        maxlength: "Email address cannot be more than 100 characters long",
                        validEmailChars: "Email can only contain letters, numbers, '.' and '@' characters"
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                },
                errorPlacement: function(error, element) {
                    error.addClass('text-danger');
                    error.insertAfter(element);
                },
                highlight: function(element, errorClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass('is-invalid');
                }
            });

        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const successMessage = document.getElementById('successMessage');
            if (successMessage) {
                // ✅ Scroll smoothly to the success message
                successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });

                // ✅ Hide after 4 seconds (4000ms)
                setTimeout(() => {
                    successMessage.style.opacity = '0';
                    setTimeout(() => successMessage.remove(), 500); // remove after fade
                }, 4000);
            }
        });
    </script>
@endsection