@extends('admin.layouts.admin')
@section('title')
Admin | Find Restaurants (API)
@endsection

@section('styles')
<style type="text/css">
    
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-7">
            <h1 class="m-0 text-dark">Fetch Restaurants / Nightlife from Google API</h1>
          </div><!-- /.col -->
          <div class="col-sm-5">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Services</a></li>              
              <li class="breadcrumb-item active">Find Restaurants (API)</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
        <div class="col-md-12">
        <div class="card card-primary">

            @if ($errors->any())            
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
              <!-- <div class="card-header"> -->
                <!-- <h3 class="card-title">Quick Example</h3> -->
              <!-- </div> -->
              <!-- /.card-header -->
              <!-- form start -->
              <span>
              </span>
              <form method="post" name="gooleAPI" enctype="multipart/form-data" action="{{url('admin/services/saveResAPI')}}">
              @csrf              
                <div class="card-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-9 pb-md-0 pb-lg-0 pb-3">
                                <!-- <textarea class="form-control" placeholder="Enter Address " name="address" id="address1" rows="3"></textarea> -->
                                <input type="text" class="form-control" placeholder="Enter Address to find location in Google Map" name="address" id="address" rows="3">
                            </div>
                            <div class="col-md-3 pb-md-0 pb-lg-0 pb-3">
                                <a href="#" class="btn btn-primary col-sm-12 search-button" >Search</a>
                            </div>
                        </div>

                        <div class="row loader" style="display: none;">
                            <div class="col-md-12 text-center">
                                <p></p>
                                <img src="{{ asset('images/admin-loader.gif')}}">
                            </div>                            
                        </div>
                    </div>

                    <div class="form-group lat-long-div-text" style="display: none;">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="control-label">Latitude</label>
                                <input type="text" name="latitude" class="form-control latitude" readonly="">
                            </div>
                            <div class="col-md-6">
                                <label class="control-label">Longitude</label>
                                <input type="text" name="longitude" class="form-control longitude" readonly="">
                            </div>
                        </div>
                    </div>  

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-12" id="map" >
                                <div class="hpadding20">
                                    <div id="map_canvas" class="">
                                    </div>
                                </div>
                                <div class="lat-long-div-text" style="display: none;">
                                    <span class="text-danger"><label>[ NOTE *: You can drag the marker ]</label></span>        
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group address-valid" style="display: none;">
                        <div class="row">
                            <div class="col-md-3" >
                                <label>Is it the right location? <span class="text-danger">*</span></label> 
                            </div>
                            <div class="col-xs-1 col-md-1" >
                                <div class="custom-control custom-checkbox">
                                    <input type="radio" class="custom-control-input filter-radio" id="defaultYes" name="radio" value="yes">
                                    <label class="custom-control-label" for="defaultYes">YES</label>
                                </div>                               
                            </div>
                            <div class="col-xs-1 col-md-1" >
                                <div class="custom-control custom-checkbox">
                                    <input type="radio" class="custom-control-input filter-radio" id="defaultNo" name="radio" value="no">
                                    <label class="custom-control-label" for="defaultNo">NO</label>
                                </div>
                            </div>
                            <div class=" col-md-7"></div>
                        </div>                        
                    </div>


                    <div class="filters" style="display: none;">
                        <div class="row">
                            <div class="col-md-6" >
                                <label>Enter range to search and store nearest restaurants (0 - 50000 meters): <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-4" >
                                <input type="text" class="form-control" placeholder="Enter number in meters" name="range" value="">
                            </div>
                            <div class="col-md-2" >
                                <!-- <a href="#" class="btn btn-primary col-sm-12 search-button" >Search</a> -->
                                <button type="submit" class="btn btn-primary search-store">Search and store</button>
                                
                                <div class="row loader after-submit" style="display: none;">
                                    <div class="col-md-12 text-center">    <img style="width: 25%;" src="{{ asset('images/admin-loader.gif')}}">
                                    </div>                            
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-12" ><p>&nbsp;</p></div>
                            </div>
                        </div>
                    </div>

                    

                </div>
                <!-- /.card-body -->

                <!-- <div class="card-footer"> -->
                  <!-- <a href="{{ route('admin.service.types') }}" class="btn btn-danger">Back</a>&nbsp; -->
                  <!-- <button type="submit" class="btn btn-primary">Add</button> -->
                  <!-- <a href="#" class="btn btn-primary">Search</a> -->
                <!-- </div> -->
              </form>
            </div>


          
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
      <button id="scrollTopBtn" class="scrollTopBtn" title="Go to top" style="display: none;">Top</button>
    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<!-- <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBIyEci4FBpt-so1PxCB-9cs5LPLz0kimo"></script> -->


<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{env('APP_GOOGLE_API', '')?:'AIzaSyAYTlKiMDnDt-rv-ocbSg7qm73A0fqsJ8c'}}"></script>
<script>
    // AIzaSyAYTlKiMDnDt-rv-ocbSg7qm73A0fqsJ8c
    // AIzaSyBIyEci4FBpt-so1PxCB-9cs5LPLz0kimo --
    // AIzaSyALeOLZsMu7vM72t6HqpuLIHAAYJsASCLg

    // var autocomplete = new google.maps.places.Autocomplete($("#address1")[0], {});

    // google.maps.event.addListener(autocomplete, 'place_changed', function() {
    //     var place = autocomplete.getPlace();
    //     //console.log(place.address_components);
    // });
</script>

<script>
    $(document).ready(function () {        
        $(".search-button").on("click", function(){
            $('.loader').show();
            var address  = $('input[name=address]').val().trim();

            if(address == '')
            {
                alert("Please enter address");
                $('.loader').hide();
                return false;
            }
            var geocoder = new google.maps.Geocoder();            

            geocoder.geocode( { 'address': address}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude  = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    $('input[name=latitude]').val(latitude);
                    $('input[name=longitude]').val(longitude);

                    setTimeout(function () {
                        initialize(latitude, longitude)
                    }, 1000);
                }
                else{
                    $('input[name=latitude]').val('');
                    $('input[name=longitude]').val('');
                    alert("Please enter valid address");
                    return false;
                } 
            });
        });

        //initialize(22.572804, 88.434936);
        $('input[type=radio]').prop('indeterminate', false);

        $(".filter-radio").bind("click", "change", function(){
            //console.log($(this).val());
            var status = $(this).val();
            $(".filters").hide();
            if(status == "yes")
            {
                $(".filters").show();
            }
        });
    });

    function initialize(latitude, longitude) {
        $('.loader').hide();
        $("#map_canvas").css({height: '300px', width: '100%' });
        $(".lat-long-div-text, .address-valid").show();        
        var myLatLng = {lat: latitude, lng: longitude};
        
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: myLatLng,
            zoom: 14                    
        });
                
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            title: latitude + ', ' + longitude 
        }); 

        google.maps.event.addListener(marker,'dragend',function(event){
            $('input[name=latitude]').val(event.latLng.lat());
            $('input[name=longitude]').val(event.latLng.lng());
        });                  
    }

    $(".search-store").on("click", function(event){        
        var range    = $("input[name=range]").val();
        var intRegex = /^\d+$/;
        
        if(intRegex.test(range) && 0 <= parseInt(range) && parseInt(range) <= 50000) {
           event.preventDefault();
           $("form[name=gooleAPI]").submit();
           $(this).hide();
           $(".after-submit").show();
        }
        else{
            alert('Incorrect range value');
        }

        return false;
    });


</script>
@endsection