@extends('layouts.app')

@section('head')
<style>
@media (max-height: 640px){
.h-fullscreen {
    height: 100vh !important;
}
}
</style>
@endsection

@section('content')
<nav class="navbar navbar-expand-lg navbar-light navbar-stick-dark" 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">
            <img class="logo-dark" src="assets/img/logo_dark.png" alt="logo">

          </a>
        </div>

        <section class="navbar-mobile">
          <span class="navbar-divider d-mobile-none"></span>

          <ul class="nav nav-navbar ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">@lang('coming.check') <span class="arrow"></span></a>
              <nav class="nav">
                <a class="nav-link" href="locale/hi">हिंदी</a>
                <a class="nav-link" href="locale/en">English</a>
              </nav>
            </li>
          </ul>
        </section>
      </div>
    </nav>
<!-- Header -->
    <!-- <header class="header text-white h-fullscreen py-0" style="background-image: url(assets/img/bg/1.jpg); " data-overlay="7"> -->
    <header class="header text-white h-fullscreen py-0 bg-fixed"  style="background-image: url(assets/img/bg/bg.png)" >
      <div class="overlay" style="background-image: linear-gradient(180deg,black,transparent);"></div>
      <div class="container text-center">

        <div class="row h-100 align-items-center">
          <div class="social social-vertical align-items-center">
              <a class="social-facebook" href="#"><i class="fa fa-facebook"></i></a>
              <a class="social-twitter" href="#"><i class="fa fa-twitter"></i></a>
              <a class="social-gplus" href="#"><i class="fa fa-google-plus"></i></a>
          </div>
          <div class="col-lg-8 mx-auto">
            <div class="col-md-6" style="margin-left:auto;margin-right:auto;">
                <img src="assets/img/logo_light.png" width="100%" alt="" srcset="">
            </div>
            <h1 class="text-uppercase ls-6 fw-500" style="font-size:1.5rem;">@lang('coming.head')</h1>
            <!-- <p class="lead" data-typing="@lang('coming.intro-1'), @lang('coming.intro-2')" data-back-speed="10" style="min-height:3.8em"></p> -->
            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <p class="lead">@lang('coming.intro-1')</p>
                </div>
                <div class="carousel-item">
                  <p class="lead">@lang('coming.intro-2')</p>
                </div>
              </div>  
            </div>
            <h1 class="display-5 text-uppercase ls-3 fw-500">Coming soon</h1>
            <br>
            <a class="btn btn-lg btn-round btn-success" href="#" data-toggle="popup" data-target="#popup-subscribe-3">Notify me</a>
            <br>
            <br>
            <h5><strong>We'll be ready in</strong></h5>
            <br>
            <div class="countdown countdown-sm countdown-outline countdown-light countdown-uppercase" data-countdown="2019/06/20"><div class="row gap-x-4"><div class="col"><h5>73</h5><small>Days</small></div><div class="col"><h5>05</h5><small>Hours</small></div><div class="col"><h5>20</h5><small>Minutes</small></div><div class="col"><h5>19</h5><small>Seconds</small></div></div></div>

          </div>
        </div>

      </div>
    </header>
    <section class="header bg-fixed text-white" style="background-image: url(assets/img/bg/bg.png)" >
        <div class="overlay" style="background-image: linear-gradient(0deg,white,transparent);"></div>
    </section>
    <section class="header bg-fixed text-dark">
    <div class="overlay"></div>
        <div class="container">
          <header class="section-header">
            <small>Sample Section</small>
            <h2>Gradient Overlay</h2>
            <hr>
            <p>This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.</p>
          </header>
          <p class="text-center">Include an <code>.overlay</code> element as a child of your section and style it as you want. It'll be a layer between your content and section background.</p>
        </div>
    </section>
    
    <div id="popup-subscribe-3" class="popup bg-img text-white col-10 col-md-4 p-6" data-animation="slide-up" style="background-image: url(assets/img/thumb/8.jpg)" data-overlay="1">
      <button type="button" class="close" data-dismiss="popup" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <form class="input-glass position-relative" id="form_subs" target="_blank">
        <h5 id="notify_head">Notify Me when Incogtech Goes Up</h5>
        <p id="notify_p">Latest updates direct to your inbox — <strong>no spam</strong>.</p>
        <div class="form-group">
          <input class="form-control" type="text" id="notify_fname" placeholder="First Name">
        </div>
        <div class="form-group">
          <input class="form-control" type="text" id="notify_lname" placeholder="Last Name">
        </div>

        <div class="form-group">
          <input class="form-control" type="email" id="notify_email" name="EMAIL" placeholder="Your Email Address">
        </div>

        <button class="btn btn-lg btn-block btn-success" id="notify_button" type="button">Notify Me</button>
      </form>
    </div>
   
@endsection

@section('foot')
    <script>
        $("#notify_button").on("click",function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
                }
            });
            let fname = $("#notify_fname").val();
            let lname = $("#notify_lname").val();
            let email = $("#notify_email").val();
            $.ajax({
                type: "POST",
                url: baseUrl + '/notify',
                data: { action:'earlyRelease',fname:fname,lname:lname,email:email}, 
            }).done(function(data, status, xhr) {
                data = $.parseJSON(data);
                console.log(data);
                if(data.status == 1){
                  $('#notify_head').css({'color':'Red'});
                  $('#notify_head').html("You already applied.");
                  $("#notify_p").html("Don't Worry we will get back to you asap");
                }
                if(data.status == 0){
                    $('#notify_head').css({'color':'Green'});
                    $('#notify_head').html("Thank You");
                    $("#notify_p").html("We will get back to you soon.");
                }
                if(data.status ==2){
                    $('#notify_head').css({'color':'Red'});
                    $('#notify_head').html("Oooppss");
                    $("#notify_p").html(data.message);
                   console.log(data.message);
                } 
                
            }).fail(function(xhr, status, err) {

            }).always(function(xhr, status, err) {
            
            });
        });
    </script>

@endsection