@extends('layouts.layout')
@section('content')
<div id="hero" class="hero jarallax" data-speed="0.7" data-img-position="50% 90%" style="background-image: url(public/jaltheme/img/base_bg_6_1.jpg);">
  <div class="container">
    <h3 class="hero__title"><span>Your Journey to a Japan Airlines Virtual Cockpit</span></h3>
  </div>
</div>

<section class="section">
					<div class="container">
						<div class="row justify-content-xl-between">
							<div class="col-12 col-lg-12">

            <div class="tripple-cols lighter-bg2  padding-top50 padding-bottom40">
            	<div class="custom-width">
            		<div class="main-title text-center">
                     <h3>Wish to know how to elevate your flightsim experience? It's simple!</h3>
                  </div>
            		<div class="row">
            			<div class="col-md-12">
                     <style>
                        .nav-tabs.wizard {
                        background-color: transparent;
                        padding: 0;
                        width: 100%;
                        margin: 1em auto;
                        border-radius: .25em;
                        clear: both;
                        border-bottom: none;
                        }
                        .nav-tabs.wizard li {
                        width: 100%;
                        float: none;
                        margin-bottom: 3px;
                        }
                        .nav-tabs.wizard li>* {
                        position: relative;
                        padding: 1em .8em .8em 2.5em;
                        color: #999999;
                        background-color: #dedede;
                        border-color: #dedede;
                        }
                        .nav-tabs.wizard li.completed>* {
                        color: #fff !important;
                        background-color: #00c3ff !important;
                        border-color: #00c3ff !important;
                        border-bottom: none !important;
                        }
                        .nav-tabs.wizard li.active>* {
                        color: #fff !important;
                        background-color: #ff6833 !important;
                        border-color: #ff6833 !important;
                        border-bottom: none !important;
                        }
                        .nav-tabs.wizard li::after:last-child {
                        border: none;
                        }
                        .nav-tabs.wizard > li > a {
                        opacity: 1;
                        font-size: 14px;
                        }
                        .nav-tabs.wizard a:hover {
                        color: #fff;
                        background-color: #ff6833;
                        border-color: #ff6833
                        }
                        span.nmbr {
                        display: inline-block;
                        padding: 10px 0 0 0;
                        background: #ffffff;
                        width: 35px;
                        line-height: 100%;
                        height: 35px;
                        margin: auto;
                        border-radius: 50%;
                        font-weight: bold;
                        font-size: 16px;
                        color: #555;
                        margin-bottom: 10px;
                        text-align: center;
                        }
                        @media(min-width:992px) {
                        .nav-tabs.wizard li {
                        position: relative;
                        padding: 0;
                        margin: 4px 4px 4px 0;
                        width: 19.6%;
                        float: left;
                        text-align: center;
                        }
                        .nav-tabs.wizard li.active a {
                        padding-top: 15px;
                        }
                        .nav-tabs.wizard li::after,
                        .nav-tabs.wizard li>*::after {
                        content: '';
                        position: absolute;
                        top: 1px;
                        left: 100%;
                        height: 0;
                        width: 0;
                        border: 45px solid transparent;
                        border-right-width: 0;
                        /*border-left-width: 20px*/
                        }
                        .nav-tabs.wizard li::after {
                        z-index: 1;
                        -webkit-transform: translateX(4px);
                        -moz-transform: translateX(4px);
                        -ms-transform: translateX(4px);
                        -o-transform: translateX(4px);
                        transform: translateX(4px);
                        border-left-color: #fff;
                        margin: 0
                        }
                        .nav-tabs.wizard li>*::after {
                        z-index: 2;
                        border-left-color: inherit
                        }
                        .nav-tabs.wizard > li:nth-of-type(1) > a {
                        border-top-left-radius: 10px;
                        border-bottom-left-radius: 10px;
                        }
                        .nav-tabs.wizard li:last-child a {
                        border-top-right-radius: 10px;
                        border-bottom-right-radius: 10px;
                        }
                        .nav-tabs.wizard li:last-child {
                        margin-right: 0;
                        }
                        .nav-tabs.wizard li:last-child a:after,
                        .nav-tabs.wizard li:last-child:after {
                        content: "";
                        border: none;
                        }
                        span.nmbr {
                        display: block;
                        }
                        }
                     </style>
                     <div class="tabbable">
                        <ul class="nav nav-tabs wizard">
                           <li><a data-target="#step1" data-toggle="tab" aria-expanded="false"><span class="nmbr">1</span>Step 01</a></li>
                           <li><a data-target="#step2" data-toggle="tab" aria-expanded="false"><span class="nmbr">2</span>Step 02</a></li>
                           <li><a data-target="#step3" data-toggle="tab" aria-expanded="false"><span class="nmbr">3</span>Step 03</a></li>
                           <li><a data-target="#step4" data-toggle="tab" aria-expanded="false"><span class="nmbr">4</span>Step 04</a></li>
                           <li><a data-target="#step5" data-toggle="tab" aria-expanded="true"><span class="nmbr">5</span>Step 05</a></li>
                        </ul>
                        <div class="tab-content">
                           <div class="tab-pane active" role="tabpanel" id="step0">
                        	<div class="text">
                        		<p>
                              <span style="color:#ff6833">
                        			<i class="fas fa-arrow-right fa-2x"></i>
                              </span>
                              Navigate throught these steps to know how easy it is to join our awesome Virtual Airline
                        		</p>
                        	</div>
                           </div>


                           <div class="tab-pane" role="tabpanel" id="step1">
                              <div class="col-md-12">

                                  <section class="section">
                                  					<div class="container">
                                  						<div class="section-heading section-heading--center">
                                  							<h6 class="__subtitle">Checklist</h6>

                                  							<h4 class="__title">Lets make sure<span> you match the Requirements</span></h4>
                                  						</div>

                                  						<div class="spacer py-6"></div>

                                  						<div class="row">
                                  							<div class="col-12">

                                  								<!-- start steps -->
                                  								<div class="steps steps--s1">
                                  									<div class="__inner">
                                  										<div class="row justify-content-center justify-content-xl-around">
                                  											<!-- start item -->
                                  											<div class="col-12 col-sm-9 col-md-4 col-xl-3">
                                  												<div class="__item">
                                  													<div class="mb-md-2">
                                  														<span class="__num">
                                  															<span class="__ico"><i class="fontello-ok"></i></span>
                                  														</span>
                                  													</div>

                                  													<h6 class="__title">I am aged 16 or older.</h6>

                                  													<p>

                                  													</p>
                                  												</div>
                                  											</div>
                                  											<!-- end item -->

                                  											<!-- start item -->
                                  											<div class="col-12 col-sm-9 col-md-4 col-xl-3">
                                  												<div class="__item">
                                  													<div class="mb-md-2">
                                  														<span class="__num">
                                  															<span class="__ico"><i class="fontello-ok"></i></span>
                                  														</span>
                                  													</div>

                                  													<h6 class="__title">I own working copy of FS2004, FSX, FSX:SE, Prepar3D or X-Plane.</h6>

                                  													<p>

                                  													</p>
                                  												</div>
                                  											</div>
                                  											<!-- end item -->

                                  											<!-- start item -->
                                  											<div class="col-12 col-sm-9 col-md-4 col-xl-3">
                                  												<div class="__item">
                                  													<div class="mb-md-2">
                                  														<span class="__num">
                                  															<span class="__ico"><i class="fontello-ok"></i></span>
                                  														</span>
                                  													</div>

                                  													<h6 class="__title">I agree to the rules and policies in the Pilot Handbook & SOP.</h6>

                                  													<p>

                                  													</p>
                                  												</div>
                                  											</div>

                                                        <div class="col-12 col-sm-9 col-md-4 col-xl-3">
                                                          <div class="__item">
                                                            <div class="mb-md-2">
                                                              <span class="__num">
                                                                <span class="__ico"><i class="fontello-ok"></i></span>
                                                              </span>
                                                            </div>

                                                            <h6 class="__title">I understand I will have to fly my first flight for Japan Airlines Virtual within two weeks of joining.</h6>

                                                            <p>

                                                            </p>
                                                          </div>
                                                        </div>
                                  											<!-- end item -->
                                  										</div>
                                  									</div>
                                  								</div>
                                  								<!-- end steps -->

                                  							</div>
                                  						</div>

                                                  <div style="display:none;" class="row justify-content-center justify-content-xl-around">
                                              <a href="#step2"  class="custom-btn custom-btn--medium custom-btn--style-3">
                                              Agree and proceed
                                            </a>
                                          </div>

                                  					</div>
                                  				</section>
                              </div>
                           </div>
                           <div class="tab-pane" role="tabpanel" id="step2">
                              <div class="col-md-12">
                              	<h4>
                              		Entrance Examination
                              	</h4>
                              	<p>
                                  10 Multiple Choice questions about IFR Operations, Metrology, Airmanship and Navigation.
                                  70% is required to pass.
                              		<center>

                              			<br>
                              		</center>
                              	</p>
                              </div>
                           </div>
                           <div class="tab-pane" role="tabpanel" id="step3">
                             <div class="col-md-12">
                              	<h4>
                              		Your registration is accepted.
                              	</h4>
                              	<p>
                              	   You now have access to Japan Airlines Virtual's pilot center, iCrew™
                              		<center>

                              			<br>
                              		</center>
                              	</p>
                              </div>
                           </div>
                           <div class="tab-pane" role="tabpanel" id="step4">
                             <div class="col-md-12">
                              	<h4>
                              		Choose your flight
                              	</h4>
                              	<p>
                                  Skydream Airlines offers an array of flight operation options for you to choose from.
                                  You can just scan the QR code to book the flight and fly
                              		<center>

                              			<br>
                              		</center>

                              	</p>
                              </div>
                           </div>
                           <div class="tab-pane" role="tabpanel" id="step5">
                              <div class="col-md-12">
                              	<h4>
                              		aaandd....FLY!
                              	</h4>
                              	<p>
                              		It's that simple
                              		<br><br>
                              		<center>
                                    <img style="width: 350px; height: auto;" src="https://cdn.dribbble.com/users/4908/screenshots/2760742/launching-rocket-dribbble.gif">
                              			<br>
                              			<br>
                              			<a href="https://icrew.jalvirtual.com/index.php/registration" target="_blank" class="custom-btn custom-btn--medium custom-btn--style-3">
                              			Take the Entrance exam today
                              		</a>
                              		</center>


                              	</p>
                              </div>
                           </div>
                        </div>
                        <script>
                           $('.wizard li').click(function() {
                           $(this).prevAll().addClass("completed");
                           $(this).nextAll().removeClass("completed")

                           });
                        </script>
                        <br><br>
                     </div>
                   </div>
            		</div>

            	</div>
            </div>
</div>
</div>
</div>
<link rel="stylesheet" href="{{ asset('public/bluerack/css/fontawesome-icons/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('public/bluerack/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('public/bluerack/style/other/aos.css') }}">
<link rel="stylesheet" href="{{ asset('public/bluerack/style/other/animate.css') }}">
<!-- Main css style -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.2.4.min.js"><\/script>')</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script type="text/javascript" src="{{ asset('public/jaltheme/js/main.min.js') }}"></script>
<!-- main responsive css file -->
<link rel="stylesheet" href="{{ asset('public/bluerack/style/responsive.css') }}">
<!-- CSS FILES end -->
<link rel="stylesheet" href="https://ianlunn.github.io/Hover/css/hover.css" />
<link rel="stylesheet" href="https://codeseven.github.io/toastr/build/toastr.min.css" />
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">
<!--https://emoji-css.afeld.me/-->

<script src="{{ asset('public/bluerack/js/jquery.js') }}"></script>
<script src="https://codeseven.github.io/toastr/build/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/6.0.3/typeit.min.js"></script>
</section>