@extends('layouts.app')

@section('title')
    Contact Us
@endsection

@section('style')
@endsection
@section('content')

    <section id="contact-us-cus-sec" class="clearfix">
        <div class="overlay">
            <div class="container d-flex h-100">
                <div class="row justify-content-center align-self-center">
                    <div class="col-md-12 intro-info order-md-first order-last">
                        <h2>Ceed Solutions<br>for Your <span>Business!</span></h2>
                        <div class="inline-block-cus">
                            <a href="{{route('login')}}" class="btn-get-started scrollto">Sign in</a>
                        </div>
                        <div class="inline-block-cus">
                            <a href="{{route('personal_info_page')}}" class="btn-get-started scrollto rig-cus-btn">Sign up</a>
                        </div>
                    </div>

                    <div class="col-md-6 intro-img order-md-last order-first">
                        <!--<img src="img/right-banner.png" alt="" class="img-fluid">-->
                    </div>
                </div>

            </div>
        </div>
    </section>

    <main id="main">

        <section id="faq">
            <div class="container">

                <header class="section-header">
                    <h3>Contact Us</h3>
                    <p>Here’s Where You Can Find Us</p>
                </header>
                <div class="row">
                    <div class="col-lg-6">
                        <img src="{{asset('assets/img/map.jpg')}}" style="width:100%;max-width:100%;">

                    </div>

                    <div class="col-lg-6 ">

                        <div class="form">

                            <h4>Send us a message</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
                            <form action="" method="post" role="form" class="contactForm">
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                                    <div class="validation"></div>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                                    <div class="validation"></div>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                                    <div class="validation"></div>
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                                    <div class="validation"></div>
                                </div>

                                <div id="sendmessage">Your message has been sent. Thank you!</div>
                                <div id="errormessage"></div>

                                <div class="text-center">
                                    <button type="submit" title="Send Message">Send Message</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </section>

    </main>


@endsection

@section('script')
    <script>
        jQuery(window).scroll(function() {
            var scroll = jQuery(window).scrollTop();
            if (scroll >= 100) {
                jQuery(".top-header").addClass("darkHeader");
            } else {
                jQuery('.top-header').removeClass('darkHeader');
            }
        });
    </script>
    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
        }
    </script>

    <script>
        $(document).ready(function() {
            $(".fa-bars").click(function() {
                $(".main-nav").toggle();
            });
        });
    </script>


@endsection