@extends('layouts.app')
@section('content')
<section class="py-auto text-center container col-4 h-100  mt-5">
    <div class="row align-items-center h-100">
        <div class="col-12 mx-auto">
        <i class="fa fa-map-marker text-primary h1"></i>    
        <h2 class="fw-light text-title">Enter your Location </h2>
            <div class="row py-lg-4">
            <p>Please provide your general town or city location so that you can view and connect with our growing global community</p>
            <!-- <b>Enter Mobile Number</b><br> -->
            <form  action="javascript:void(0)" id="enterLocationForm" method="post">
                <input type="text" autofocus value="{{ Auth::user()->location }}" name="location" id="location" class="form-rounded form-control" style="text-align: center" placeholder="Enter your Location">
                <div class="d-grid mt-4">
                        <a class="btn  btn-primary btn-rounded mb-3" onkeydown="return event.key != 'Enter';" id="btnEnterLocation" href="#">Proceed</a>
                        <!-- <a href="#" class="text-muted h6">Skip</a> -->
                </div>
            </form>
        </div>
    </div>
</section>
 @include('includes.footer1') 
@endsection
<script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDC-M1aaMpS2JHQGNq0Ap43hZ669ttcW8c&callback=initAutocomplete&libraries=places&v=weekly"
      async
></script>
<script>
    function initAutocomplete() {
    const input = document.getElementById("location");
    const searchBox = new google.maps.places.SearchBox(input);
    }
    window.initAutocomplete = initAutocomplete;
</script>


<style>
#focus-area .card-body{
    min-height: 100px;
}
</style>