@extends('partials.main')
@section('title')
    {{ 'Contact us' }}
@endsection
@section('content')
    <style>
        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
            padding: 20px;
        }

        .btn {
            margin-bottom: 5px;

        }
    </style>
    <!--************************************
                                          Inner Banner Start
                                        *************************************-->
    {{-- <section class="tg-parallax tg-innerbanner" data-appear-top-offset="600" data-parallax="scroll"
        data-image-src="../images/Home/aerial-view-doi-nang-non-mountains-thai-cave-tham-luang-chiang-rai-thailand.jpg">
        <div class="tg-sectionspace tg-haslayout">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h1>Map</h1>
                        <h2>Start your adventure today with Lanka Getaways!"</h2>
                        <ol class="tg-breadcrumb">
                            <li><a href="javascript:void(0);">Home</a></li>
                            <li class="tg-active">Map</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!--************************************
                                          Inner Banner End
                                        *************************************-->
    <!--************************************
                                          Main Start
                                        *************************************-->
    <main id="tg-main bg-map" class="tg-main tg-sectionspace tg-haslayout ">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div id="tg-content" class="tg-content">

                        <div class="">
                            <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
                                <h1>MAPS DISTANCE</h1>
                                <p>Let's Plan Your Next Trip Together</p>
                                <form class="form-horizontal">
                                    <!-- Origin input with autocomplete -->
                                    <div class="form-group">
                                        <label for="origin" class="col-xs-2 control-label">
                                            <i class="far fa-dot-circle"></i>
                                        </label>
                                        <div class="col-xs-10">
                                            <input type="text" id="origin" placeholder="Origin"
                                                class="form-control" />
                                        </div>
                                    </div>
                                    <!-- Destination inputs (dynamically added) -->
                                </form>
                                <div style="margin-bottom: 10px;" class="col-xs-offset-2 col-xs-10 ">
                                    <button class="btn btn-primary" onclick="addDestinationInput();">
                                        Add Destination
                                    </button>

                                    <button class="btn btn-success " onclick="calculateDistancesBetweenPoints();">
                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
                                        Calculate Distance
                                    </button>

                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                                <div id="output"></div> <br>
                                <div id="distanceInfo"></div>
                            </div>
                        </div>


                        <div class="container-fluid">
                            <div id="googleMap" style="width: 100%; height: 400px"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDql98PYRkfw52KazQjeaGgB6C3ZEaHR_4">
    </script>
    <!--************************************
                                          Main End
                                        *************************************-->
@endsection