<% include partials/head %>

    <div class="main-wrapper">

        <% include partials/header %>
        
        <!-- Inner Page Banner -->

        <!-- <section class="inner-page-banner position-relative">
            <div class="container d-flex align-items-center justify-content-center h-100 px-0 position-relative">
                <div class="inner-banner-block d-flex align-items-center justify-content-center position-relative p-4">
                    <div class="text-center text-black">
                        <div class="heading lg position-relative pb-2">
                            <h1 class="text-expand font-weight-bold text-white">
                                Contact Us
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wavesshape shape">
                <img src="/images/waves-shape-2.svg" alt="Shape">
            </div>
        </section> -->

        <section class="inner-pages-img-banner position-relative text-white overlay-black d-flex align-items-center" style="background-image: url(../images/contect-banner.jpg)">
            <div class="container z-index-9 text-center">
                <div class="heading lg position-relative">
                    <h1 class="text-expand font-weight-bold text-white">
                        Contact Us
                    </h1>
                </div>
            </div>
        </section>
        <!-- End Inner Page Banner -->
        
        <!-- Main Contact Us form -->
        <section class="contact-us-wrapper py-lg-5 pt-5">
            <div class="container py-lg-4">
                <div class="row">
                    <div class="col-lg-8 col-12 pr-lg-5 order-0">
                        <div data-aos="fade-zoom-in" data-aos-easing="ease-in" data-aos-delay="00" data-aos-offset="0">
                            <div class="heading">
                                <h2 class="font-weight-semibold">Have any questions? <br>Send us a <span class="text-darkYellow">message</span> with your enquire and our team of experts will contact you soon.</h2>
                            </div>
                            <!-- <div class="text-darkGrey pt-md-4 pt-3 px-md-0">
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto quisquam, eveniet impedit facilis adipisci minus quos sequi magnam cum? Consequatur neque voluptates fugit nisi earum, illo nam ullam quisquam facilis?</p>
                            </div> -->
                            <form action="" method="post" class="pt-md-4 pt-3" id="contact-us-form">
                                <div class="row">
                                    <div class="col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="">Full Name</label>
                                            <input type="text" class="form-control" name="name" id="name" aria-describedby="fullName">
                                            <!-- <small id="fullName" class="form-text text-muted">Help text</small> -->
                                            <span class="error-message text-danger" id="nameError"></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="">Email Address</label>
                                            <input type="email" class="form-control" name="email" id="" aria-describedby="emailAddress">
                                            <!-- <small id="emailAddress" class="form-text text-muted">Help text</small> -->
                                            <span class="error-message text-danger" id="emailError"></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="">Contact Number</label>
                                            <input type="text" class="form-control" name="contact_no" id="" aria-describedby="contactNumber">
                                            <!-- <small id="contactNumber" class="form-text text-muted">Help text</small> -->
                                            <span class="error-message text-danger" id="contactError"></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="">Company Name</label>
                                            <input type="text" class="form-control" name="company_name" id="" aria-describedby="companyName">
                                            <!-- <small id="companyName" class="form-text text-muted">Help text</small> -->
                                            <span class="error-message text-danger" id="companyError"></span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Your Comments</label>
                                            <textarea class="form-control resize-none mh-150" name="comment" id="" rows="3"></textarea>
                                            <span class="error-message text-danger" id="commentError"></span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check pt-2 px-0">
                                            <label class="form-check-label custom-checkbox">
                                                <input type="checkbox" class="form-check-input" name="subscribe" id="" value="checkedValue" checked>
                                                <span class="checkmark d-flex align-items-center">
                                                    <span class="check"></span>
                                                    <span class="pl-1">Get emails with news, promos, and updates from Joga.</span>
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="pt-md-4 pt-3">
                                    <button type="button" onclick="contactUs();" class="btn btn-lg global-radius btn-yellow btn-hvr-shutter">Send Message</button>
                                    <!-- <button type="reset" class="btn btn-lg global-radius btn-black btn-hvr-shutter ml-3">Reset</button> -->
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-5 col-12 order-lg-1 order-2 pt-lg-0 pt-4 px-lg-3 px-0 d-none">
                        <section class="map-container">
                            <!-- Old Map Link
                            <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1K_EvmWsSIbmSCeroRe7HTU79HFrZdR8H" frameborder="0" style="border:0;" allowfullscreen=""></iframe> -->
                            <!-- <iframe src="https://www.google.com/maps/d/u/0/embed?mid=15CBt_iHaSRkrErk026Bb4fuqbZfem3Q&ehbc=2E312F" frameborder="0" style="border:0;" allowfullscreen=""></iframe> -->
                            <!-- <iframe src="https://www.google.com/maps/d/u/0/embed?mid=15CBt_iHaSRkrErk026Bb4fuqbZfem3Q&ehbc=2E312F" frameborder="0" style="border:0;" allowfullscreen=""></iframe> -->
                        </section>
                    </div>
                    <div class="col-12 order-lg-2 order-1 mt-lg-5 pt-4">
                        <div class="yellow-gradient-border position-relative pt-lg-4 pt-4" data-aos="fade-zoom-in" data-aos-easing="ease-in" data-aos-delay="100" data-aos-offset="0">
                            <div class="heading text-center py-lg-4 py-3">
                                <h2 class="text-fadeBlack font-weight-bold text-uppercase">Our  <span class="text-darkYellow">Offices</span></h2>
                            </div>
                            <div class="row pt-md-4 pt-3">
                                <div class="col-md-4 col-12">
                                    <div class="subheading line-after position-relative pb-md-3 pb-2">
                                        <h4 class="font-weight-normal">Singapore Office</h4>
                                    </div>
                                    <ul class="contact-info pt-1">
                                        <li>
                                            <div class="d-flex text-darkGrey py-2">
                                                <i class="fas fa-envelope mt-1"></i>
                                                <a class="text-darkGrey pl-3" href="mailto:contact@jogaapp.com">contact@jogaapp.com</a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="d-flex text-darkGrey py-2">
                                                <i class="fas fa-map-marker-alt mt-1"></i>
                                                <p class="d-inline-block pl-3">8 Eu Tong Sen Street, #14-94 The Central, Singapore, 059818</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="col-md-4 col-12 pt-md-0 pt-3">
                                    <div class="subheading line-after position-relative pb-md-3 pb-2">
                                        <h4 class="font-weight-normal">Switzerland Office</h4>
                                    </div>
                                    <ul class="contact-info pt-1">
                                        <li>
                                            <div class="d-flex text-darkGrey py-2">
                                                <i class="fas fa-envelope mt-1"></i>
                                                <a class="text-darkGrey pl-3" href="mailto:contact@jogaapp.com">contact@jogaapp.com</a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="d-flex text-darkGrey py-2">
                                                <i class="fas fa-map-marker-alt mt-1"></i>
                                                <p class="d-inline-block pl-3">Giselistrasse 8 6006 Luzern Switzerland</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="col-md-4 col-12 pt-md-0 pt-3">
                                    <div class="subheading line-after position-relative pb-md-3 pb-2">
                                        <h4 class="font-weight-normal">India Office</h4>
                                    </div>
                                    <ul class="contact-info pt-1">
                                        <li>
                                            <div class="d-flex text-darkGrey py-2">
                                                <i class="fas fa-envelope mt-1"></i>
                                                <a class="text-darkGrey pl-3" href="mailto:contact@jogaapp.com">contact@jogaapp.com</a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="d-flex text-darkGrey py-2">
                                                <i class="fas fa-map-marker-alt mt-1"></i>
                                                <p class="d-inline-block pl-3">Cyber Heights, 418, 4th Floor, Vibhuti Khand, Gomti Nagar, Lucknow, Uttar Pradesh, India 226010</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Main Contact Us form -->

    </div>

<% include partials/footer %>
<script>
    function contactUs(){
        event.preventDefault();
        // var name = $('#name').val();
        $.ajax({
            url: "contact-us",
            data: $('form').serialize(),
            type: 'POST',
            dataType: 'json',
            success: function(response){
                $(".error-message").html("");
                if(response.status == "fail" && Object.entries(response.error).length > 0)
                {
                    if(typeof response.error.nameError !== "undefined" && response.error.nameError)
                    {
                        $("#nameError").html(response.error.nameError);
                    }
                    if(typeof response.error.emailError !== "undefined" && response.error.emailError)
                    {
                        $("#emailError").html(response.error.emailError);
                    }
                    if(typeof response.error.contactError !== "undefined" && response.error.contactError)
                    {
                        $("#contactError").html(response.error.contactError);
                    }
                    if(typeof response.error.commentError !== "undefined" && response.error.commentError)
                    {
                        $("#commentError").html(response.error.commentError);
                    }
                    if(typeof response.error.commonError !== "undefined" && response.error.commonError)
                    {
                        Swal.fire({
                          type: 'error',
                          text: response.error.commonError,
                          showConfirmButton: true
                        });
                    }
                }
                else if(response.status == "success")
                {
                   Swal.fire({
                      type: 'success',
                      text: response.message,
                      showConfirmButton: true
                    }).then((result) => {
                        $('#contact-us-form').trigger("reset");
                    });
                }
                else
                {
                    Swal.fire({
                      type: 'error',
                      text: "There is error at our end. Please try again later.",
                      showConfirmButton: true
                    });
                }
            }
        });

    }
</script>