@extends("admin.admin_app")

@section("content")
<div id="main">
    <ul class="list list-inline quick_links">
        <li><span><em>Quick Links - </em></span></li>
			 <li class="{{classActivePath('add_city')}}"><a href="{{ URL::to('admin/add_city') }}">City/District</a></li> 
             <li class="{{classActivePath('community')}}"><a href="{{ URL::to('admin/community') }}">Community</a></li> 
             <li class="{{classActivePath('sub_community')}}"><a href="{{ URL::to('admin/sub_community') }}">Sub Community</a></li> 
             <li class="{{classActivePath('location')}}"><a href="{{ URL::to('admin/location') }}">Building Location</a></li>
		</ul>
	<div class="page-header">
		
		<div class="pull-right">
			<a href="{{URL::to('admin/location/addlocation')}}" class="btn btn-primary">Add Location <i class="fa fa-plus"></i></a>
		</div>
		<h2>Building Location</h2>
	</div>
	@if(Session::has('flash_message'))
				    <div class="alert alert-success">
				    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
				        {{ Session::get('flash_message') }}
				    </div>
	@endif
     <div class="row">
         <div class="col-sm-12">
             <div class="panel panel-default panel-shadow">
                <div class="panel-body">
                 <form method="post" action="" enctype="multipart/form-data">
                     {{ csrf_field() }}
                     <div class="form-group col-sm-4">
                         <label>Select Country</label> 
                         <select class="form-control" name="country_id" onchange="get_state(this.value)" required>
                             <option value="">Select</option>
                             @foreach($countries as $country)
                                <option value="{{$country->id}}"> {{ $country->name}}</option>
                             @endforeach
                         </select>
                     </div>
                     <div class=" col-sm-4">
                         <div class="form-group" style="display:none" id="state_div">
                         <label id="state_label">Select State</label>
                         <select class="form-control" name="state_id" id="state_list" onchange="get_cities(this.value)" required>
                             <option value="">Select</option>
                             
                         </select>
                         </div>
                     </div>
                     <div class="form-group col-sm-4">
                         <label id="city_label">City</label>
                         <select class="form-control" name="city_id" id="city_list" onchange="get_community(this.value)" required>
                             <option value="">Select</option>
                            
                         </select>
                     </div>
                     <div class="form-group col-sm-6">
                         <label>Select Community</label>
                         <select class="form-control" name="community_id" id="community_list" onchange="get_sub_community(this.value)"required>
                             <option value="">Select</option>
                            
                         </select>
                     </div>
                     <div class="form-group col-sm-6">
                         <label>Select Sub Community</label>
                         <select class="form-control" name="sub_community_id" id="sub_community_list" required>
                             <option value="">Select</option>
                            
                         </select>
                     </div>
                     
                     
                     <div class="form-group col-sm-4">
                         <label>Building </label>
                         <input type="text" name="building" class="form-control" placeholder="Building" required>
                     </div>
                     <div class="form-group col-sm-4">
                         <label>Zip/pin code</label>
                         <input type="text" name="zip_code" class="form-control" placeholder="Zip code" required>
                     </div>
                     <div class="form-group col-sm-4">
                         <label>location Image</label>
                         <input type="file" name="location_img" class="form-control" required >
                     </div>
                     <div class="form-group col-sm-4">
                         <label>MAP highlighter</label>
                         <input type="text" name="name" id="ownPlaces" class="form-control" placeholder="map marker" required>
                     </div>
                     <div class="form-group col-sm-4">
                         <label>Longitude</label>
                         <input type="text" name="latitude" id="latitude" class="form-control"  readonly>
                     </div>
                     <div class="form-group col-sm-4">
                         <label>Latitude</label>
                         <input type="text" name="longitude" id="longitude" class="form-control"  readonly>
                     </div>
                     <div class="form-group col-sm-12">
                         <label>City Description</label>
                         <textarea class="form-control" id="editor1" name="description" rows="7" required> </textarea>
                     </div>
                     <div class="form-group col-sm-12">
                        
                         <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                     </div>
                 </form>
             </div>
            </div>
             
         </div>
         <div class="col-sm-12">
             <div class="panel panel-default panel-shadow">
                <div class="panel-body">
                     
                    <table id="data-table" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
                        <thead>
            	            <tr>	                
            	                <th>#</th>
            	                <th>Img</th>
            	                <th>Location name</th>
            	                <th>sub community/community /Building/Zip /Country </th>
            	                <th>Description</th>
            	                <th>Status</th>
            	                 
            	                <th class="text-center width-100">Action</th>
            	            </tr>
                        </thead>
            
                        <tbody>
                                                                                
                         
                        </tbody>
                    </table>
                </div>
                <div class="clearfix"></div>
            </div>
         </div>
     </div>
        

</div>



@endsection


@push('scripts')
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyBQuyW9WSi0ATrrt3-BD4QE9LZL07nk290"></script>
<script type="text/javascript">
     CKEDITOR.replace( 'editor1' );
            
    /*AIzaSyBQuyW9WSi0ATrrt3-BD4QE9LZL07nk290*/

   /* google.maps.event.addDomListener(window, 'load', function (){
        var places = new google.maps.places.Autocomplete(document.getElementById('ownPlaces'));
        google.maps.event.addListener(places, 'place_changed', function (){});
    });*/
    
     google.maps.event.addDomListener(window, 'load', function (){
        var places = new google.maps.places.Autocomplete(document.getElementById('ownPlaces'));
        google.maps.event.addListener(places, 'place_changed', function (){
            var place = places.getPlace();
            //document.getElementById('ownPlaces').value = place.name;
            document.getElementById('latitude').value = place.geometry.location.lat();
            document.getElementById('longitude').value = place.geometry.location.lng();
        });
    });
    function get_state(pid){
        //alert(pid);
         $('#state_div').css('display','block');
        if(pid=='250'){
            $('#state_label').html('City');
            $('#city_label').html('District');
        }else{
            $('#state_label').html('State');
            $('#city_label').html('City');
        }
        $.ajax({
               type:'POST',
               url:'{{ url('/')}}/admin/getStateList',
               data:{
                   "pid" : pid,
                   "_token": "{!! csrf_token() !!}"
                   },
             /*beforeSend: function(){
                 $("#loading_overlay").css("display", "block");
                    },*/
               success:function(res) {
                  console.log(res);
                  $('#state_list').html(res);
                  //$("#loading_overlay").css("display", "none");
               }
            });
    }
    function get_cities(pid){
        //alert(pid);
        $.ajax({
               type:'POST',
               url:'{{ url('/')}}/admin/getCityList',
               data:{
                   "pid" : pid,
                   "_token": "{!! csrf_token() !!}"
                   },
             /*beforeSend: function(){
                 $("#loading_overlay").css("display", "block");
                    },*/
               success:function(res) {
                  console.log(res);
                  $('#city_list').html(res);
                  //$("#loading_overlay").css("display", "none");
               }
            });
    }
    
    function get_community(pid){
        //alert(pid);
        $.ajax({
               type:'POST',
               url:'{{ url('/')}}/admin/getCommunityList',
               data:{
                   "pid" : pid,
                   "_token": "{!! csrf_token() !!}"
                   },
             /*beforeSend: function(){
                 $("#loading_overlay").css("display", "block");
                    },*/
               success:function(res) {
                  console.log(res);
                  $('#community_list').html(res);
                  //$("#loading_overlay").css("display", "none");
               }
            });
    }
    function get_sub_community(pid){
        //alert(pid);
        $.ajax({
               type:'POST',
               url:'{{ url('/')}}/admin/getSubCommunityList',
               data:{
                   "pid" : pid,
                   "_token": "{!! csrf_token() !!}"
                   },
             /*beforeSend: function(){
                 $("#loading_overlay").css("display", "block");
                    },*/
               success:function(res) {
                  console.log(res);
                  $('#sub_community_list').html(res);
                  //$("#loading_overlay").css("display", "none");
               }
            });
    }
    
    //change status
    function change_status(pid, status,type){
        //alert(pid);
        
        $.ajax({
               type:'POST',
               url:'{{ url('/')}}/admin/changeStatus',
               data:{
                   "pid" : pid,
                   "status" : status,
                   "type"   : type,
                   "_token": "{!! csrf_token() !!}"
                   },
               beforeSend: function(){
                 //$("#loading_overlay").css("display", "block");
                },
               success:function(res) {
                  console.log(res);
                  if(res==1){
                      alert('Successfully Updated');
                  }else{
                      alert('Failed !!! Please try again');
                  }
                  location.reload();
                 // $("#loading_overlay").css("display", "none");
               }
            });
    }
</script>
@endpush