@extends('layouts.app')

@section('head')
@endsection

@section('content')
    <nav class="navbar navbar-expand-lg navbar-light navbar-stick-dark stick" data-navbar="sticky">
      <div class="container">
        <div class="navbar-left">
          <button class="navbar-toggler" type="button">☰</button>
          <a class="navbar-brand" href="{{url('/')}}">
            <img class="logo-dark" src="assets/img/logo_dark.png" alt="logo">
            <img class="logo-light" src="assets/img/logo_light.png" alt="logo">
          </a>
        </div>

        <section class="navbar-mobile">
          <nav class="nav nav-navbar mr-auto">
            <a class="nav-link" href="{{url('/')}}">Home</a>
            <a class="nav-link" href="{{url('/solutions')}}">Solutions</a>
            <a class="nav-link" href="{{url('/about')}}">About</a>
            <a class="nav-link active" href="{{url('/contact')}}">Contact Us</a>
          </nav>
        </section>

        <!-- <a class="btn btn-xs btn-round btn-success" href="#" data-toggle="modal" data-target="#modal-login-3">Login</a> -->

      </div>
    </nav>
    <header class="header p-0">
      <div class="h-500" data-provide="map" data-style="dark" data-lat="28.634253" data-lng="77.369864" data-marker-lat="28.634253" data-marker-lng="77.369864" data-info="<strong>Our office</strong><br>5/17, Moulsiri Road, Shipra Suncity" data-style="light" data-remove-controls="true" style="position: relative; overflow: hidden;"><div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-err-container"><div class="gm-err-content"><div class="gm-err-icon"><img src="https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png" draggable="false" style="user-select: none;"></div></div></div></div></div>
    </header>
    <main class="main-content">
      <section class="section">
        <div class="container">

          <form class="row gap-y">
            <div class="col-lg-7">
              <h3>Contact Us</h3>
              <br>

              <!-- <div class="alert alert-success d-on-success">We received your message and will contact you back soon.</div> -->

              <div class="form-row">
                <div class="form-group col-md-6">
                  <input class="form-control form-control-lg" id="name" type="text" name="name" placeholder="Name">
                </div>

                <div class="form-group col-md-6">
                  <input class="form-control form-control-lg" id="email" type="email" name="email" placeholder="Email">
                </div>
              </div>

              <div class="form-group">
                <textarea class="form-control form-control-lg" id="message" rows="4" placeholder="Message" name="message"></textarea>
              </div>

              <button class="btn btn-lg btn-primary" id="sendmessage" type="button">Send message</button>

            </div>

            <div class="col-lg-4 ml-auto text-center text-lg-left">
    		<hr class="d-lg-none">
    		<h3>Head Office</h3>
    		<hr>
    		<p><i class="fa fa-map-marker"></i> 1145 E 35th Street<br>Brooklyn, New York 11210</p>
    		<hr>
    		<h3>Find Us</h3>
    		<hr>
    		<p><i class="fa fa-map-marker"></i> 5/17, Moulsiri Road, Shipra Suncity<br>Indrapuram, 201014, India</p>
    		<p><i class="fa fa-phone"></i> +91 8699902209 (Mobile)</p>
    		<p><i class="fa fa-phone"></i> +91 1354090299 (Landline)</p>
   		 <p><i class="fa fa-envelope"></i> care@incogtech.com</p>
	    </div>

          </form>

        </div>

      </section>
    </main>
    <footer class="footer">
        <div class="container">
          <div class="row gap-y align-items-center">

            <div class="col-md-6 text-center text-md-left">
              <small>© Incogtech 2019, All rights reserved.</small>
            </div>

            <div class="col-md-6 text-center text-md-right">
              <div class="social">
                <!-- <a class="social-twitter" href="#"><i class="fa fa-twitter"></i></a> -->
                <a class="social-facebook" href="https://www.facebook.com/incogtech/"><i class="fa fa-facebook"></i></a>
                <a class="social-instagram" href="https://instagram.com/incogtech"><i class="fa fa-instagram"></i></a>
                <a class="social-dribbble" href="https://www.linkedin.com/company/19208566"><i class="fa fa-dribbble"></i></a>
              </div>
            </div>

          </div>
        </div>
    </footer>
    <button class="btn btn-primary btn-lg" type="hidden" id="btnTrigger" data-toggle="popup" data-target="#popup-thankyou"></button>
    <div id="popup-thankyou" class="popup col-6 col-md-4" data-animation="slide-up" data-autohide="3000">
      <button type="button" class="close" data-dismiss="popup" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <div class="media">
        <img class="avatar mr-5" src="assets/img/avatar/1.jpg" alt="avatar">
        <div class="media-body">
          <h5 id="help-head">Thank You</h5>
          <p class="mb-0" id="help-p">We will get back to you asap.</p>
        </div>
      </div>
    </div>

@endsection

@section('foot')
<script>
$( document ).ready(function() {
    $("#sendmessage").on("click", function(e){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
            }
        });
        e.preventDefault();
        let action = "contact_us";
        let name = $("#name").val();
        
        let email = $("#email").val();
        let mobile = $("#mobile").val();
        let message = $("#message").val();
        $.ajax({
            type: "POST",
            url: baseUrl+'/notify',
            data: { action:action,name:name,email:email,message:message}, 
        }).done(function(data, status, xhr) {
            data = $.parseJSON(data);
            if(data.status == 0) {
                $("#modal-project-2-close").click();
                $('.modal-backdrop').remove();
                $("#btnTrigger").click();
                $("#help-head").html("Thank You");
                $("#help-p").html("We will contact you asap");
            }
            if(data.status == 1){
                $("#btnTrigger").click();
                $("#help-head").html("Something Went Wrong");
                $("#help-p").html(data.message);
            }
        }).fail(function(data, status, xhr) {
            
        }).always(function(xhr, status, err) {
            $("#modal-project-2 .overlay").fadeOut();
        })
    });
});
</script>
@endsection