@extends('cabMeWebsite.master')
<style>
    #map {
        width: 100%;
        height: 500px;
        background: grey;
    }

    .ui-autocomplete {
        position:relative !important;
        max-height: 300px;
        width: 1.5em;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .search-form .col-md-12 {
        background: #ff5639;
        padding: 25px!important;
        height: 500px;
    }
</style>
@section('content')
    <section id="banner">

        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

            <div class="carousel-inner">

                <div class="carousel-item active">

                    <img class="d-block w-100" src="{{asset('laravel-website')}}/img/banner.png" alt="First slide">

                    <div class="carousel-caption  d-md-block">

                        <h5>FOR THE BEST RIDESHARE<br />

                            EXPERIENCE</h5>

                        <h3>JOIN US FOR A RIDE!</h3>

                        
                        @if(isset($_SESSION['token']) && isset($_SESSION['userid']) )

                        @elseif (isset($_SESSION['token']) && isset($_SESSION['driverid']) )

                        @else

                        <p class="mt-2 mt-md-4">

                            <a href="{{ url('/createAccount') }}" class="theme-btn mr-5">Sign up to Ride</a>

                            <a href="{{ url('/createDriverAccount') }}" class="theme-btn ml-5">Sign up to Drive</a>

                        </p>
                        @endif
                    </div>

                </div>

            </div>

            <!-- <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

                <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

            </a>

            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

                <span class="carousel-control-next-icon" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

            </a> -->

        </div>

    </section>

    <section class="location">

        <div class="container-fluid p-0">

            <div class="col-12">

                <div class="row">

                    <div class="col-6 col-md-5">

                        <div class="location-inner">

                            <p class="text-center text-white">Pricing</p>

                            <h3 class="text-center text-white mb-3  mb-md-4">Get a fare estimate</h3>

                            <form class="locationFind">
                                <div id="menu-container" style="position:absolute; width: 400px;"></div>


                                <div class="pickup mb-2 mb-md-5">

                                    <input class="form-control search " type="text" name="pickup" id="pickup" required placeholder="Pickup Location" value=""/>
                                    <input class="form-control" type="hidden" name="pickup_latitude" id="pickup_latitude"  value=""/>
                                    <input class="form-control" type="hidden" name="pickup_longitude" id="pickup_longitude" value=""/>
                                    <input class="form-control" type="hidden" name="pickup_location" id="pickup_location" value=""  />

                                </div>

                                <div class="drop ">

                                    <input class="form-control search" type="text" name="dropoff" id="dropoff" required placeholder="Dropoff Location" value=""/>
                                    <input class="form-control" type="hidden" name="dropoff_latitude" id="dropoff_latitude" value=""/>
                                    <input class="form-control" type="hidden" name="dropoff_longitude" id="dropoff_longitude" value=""/>
                                    <input class="form-control" type="hidden" name="dropoff_location" id="dropoff_location" value=""  />
                                    <button class="go-tbn" id="searchbtn"><img src="{{asset('laravel-website')}}/img/arrow.png" alt="" /></button>

                                </div>

                            </form>

                        </div>

                    </div>

                    <div class="col-6 col-md-7 bg-frame p-0">
                        <div class="page-header">
                        </div>
                        <div id="map"></div>
                    </div>

                </div>

            </div>

        </div>

    </section>

    <section class="downloadApp">

        <div class="container">

            <div class="col-12">

                <div class="row">

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

                        <div class="download-text">

                            <h2>DOWNLOAD THE APP</h2>

                            <h5>DOWNLOAD FREE</h5>

                        </div>

                    </div>

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

                       <!--  <img src="{{asset('laravel-website')}}/img/mobile.png" width="" height="" alt="Download App" /> -->
                        <img src="{{asset('laravel-website')}}/img/web_cabme_screen2.gif" width="" height="" alt="Download App" />
                        

                    </div>

                </div>

            </div>
        </div>
    </section>
    <!--suppress VueDuplicateTag -->
    <script type="text/javascript">

        var here_app_id = '';
        var here_app_code = '';
        var here_api_key = '';

        var base_url = '