@extends('layouts.app')
@section('title', 'Home')
@section('head')
@parent
<style type="text/css"></style>
@endsection
 
@section('content')


      <div class="wrapper row3">
  <main class=" container clear"> 

@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>


&nbsp;     <strong>{{ $message }}</strong>

@if ($message = Session::get('success2'))
 

&nbsp;     <h2>{{ $message }}</h2>


 
@endif


</div>
@endif





      @if (count($errors) > 0)

      <div class="alert alert-danger">
      <button type="button" class="close" data-dismiss="alert">×</button>

      <ul>
      @foreach ($errors->all() as $error)
      <li>{{ $error }}</li>
      @endforeach
      </ul>
      </div>
      @endif

 @if($Owner)
    <form enctype="multipart/form-data" style="padding-left: 200px;" method="post" action="Active/{{$Owner->id}}" id="updateform" name="updateform" enctype="multipart/form-data" novalidate>
 
<input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}" />
 <input type="hidden" name="_method" value="PUT"> 

<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Name:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('owner_name', 'has-error') }}">
<input  style="width:500px;" value="{{$Owner->owner_name}}"  type="text" value="" name="owner_name" id="owner_name" class="form-control input-md" placeholder="Owner Name" required>
<div class="col-sm-11"> {!! $errors->first('owner_name', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>

<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Email:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('email', 'has-error') }}">
<input  style="width:500px;"  value="{{$Owner->email}}" type="email"  pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"    id="email" name="email" class="form-control input-md" placeholder="Owner Email" required>
<div class="col-sm-11"> {!! $errors->first('email', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>

<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Address:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('address', 'has-error') }}">
<input  style="width:500px;"  value="{{$Owner->address}}" type="text"   name="address" id="address" class="form-control input-md" placeholder="Owner Address" required>
<div class="col-sm-11"> {!! $errors->first('address', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>





<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Country:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('country', 'has-error') }}">
<input  style="width:500px;"  value="{{$Owner->country}}"  type="text"   name="country" id="country" class="typeahead form-control input-md" placeholder="Country" required>
<div class="col-sm-11"> {!! $errors->first('country', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>


<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>City:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('city', 'has-error') }}">
<input  style="width:500px; "  type="text" value="{{$Owner->city}}" name="city" id="city" class="typeahead form-control input-md" placeholder="City" required>
<div class="col-sm-11"> {!! $errors->first('city', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>



 



<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Location:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-inline {{ $errors->first('la', 'has-error') }}">
<input class="form-control" style="width:185px;" type="text" id="la" name="la" class="" placeholder="lat " value="{{$Owner->la}}" required>

<input class="form-control" style="width:185px;" type="text" id="lo" name="lo" class="" placeholder="lng " value="{{$Owner->lo}}" required>

<button type="button" id="viewMapId" style="display: inline;" class="btn-success btn-lg" data-toggle="modal" data-target="#myModalmap"> <i class="fa fa-map-marker red" data-dismiss="modal" data-toggle="modal"></i>

&nbsp;    Get Google Map</button>





<div class="col-sm-11"> {!! $errors->first('la', '<span style="color:red;">:message</span>') !!} </div>
</div>




<div class="col-sm-11"> {!! $errors->first('lo', '<span style="color:red;">:message</span>') !!} </div>
</div>


</div>


<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Profile Image:</strong>  <span style="color:red;">*</span></div>

<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('pic', 'has-error') }}" >

<div class="fileinput fileinput-new" data-provides="fileinput">
<div id="image-holder" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px; min-height:120px;">
 <img id="previewingtest" src="images/owners/{{$Owner->pic}}" style="width: 190px;height: 140px; line-height: 10px;"  >


</div>
 

 <div class="fileUpload btn btn-primary btn-sm">
    <span>Upload</span>
    <input type="file" class="upload" name="pic" id="pic"  required />
 
</div>
 
{{ csrf_field() }}


 
</div>
<div class="col-sm-11">{!! $errors->first('pic', '<span style="color:red;">:message</span>') !!}
</div></div>
</div>
</div>

 
<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Personal Number:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('personal_no', 'has-error') }}">
<input  style="width:500px; " type="text" value="{{$Owner->personal_no}}"  name="personal_no" id="personal_no" class="form-control input-md" placeholder="Personal Number" required>
<div class="col-sm-11"> {!! $errors->first('personal_no', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>


<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Office Number:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('office_no', 'has-error') }}">
<input  style="width:500px;"  type="text" value="{{$Owner->office_no}}"  name="office_no" id="office_no" class="form-control input-md" placeholder="Office Number" required>
<div class="col-sm-11"> {!! $errors->first('office_no', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>


<div class="modal-footer">



 
<button type="submit" class="btn btn-primary">Submit</button>
</div>                 
</form>
@endif


@if(!$Owner)
    <form enctype="multipart/form-data" style="padding-left: 200px;" method="post" action="{!! URL::route('Active.store') !!}" id="updateform" name="updateform" enctype="multipart/form-data" novalidate>
 
<input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}" />
 

<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Name:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('owner_name', 'has-error') }}">
<input  style="width:500px;" value=""  type="text" value="" name="owner_name" id="owner_name" class="form-control input-md" placeholder="Owner Name" required>
<div class="col-sm-11"> {!! $errors->first('owner_name', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>

<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Email:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('email', 'has-error') }}">
<input  style="width:500px;"  value="" type="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"  name="email" id="email" class="form-control input-md" placeholder="Owner Email" required>
<div class="col-sm-11"> {!! $errors->first('email', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>

<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Address:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('address', 'has-error') }}">
<input  style="width:500px;"  value="" type="text"   name="address" id="address" class="form-control input-md" placeholder="Owner Address" required>
<div class="col-sm-11"> {!! $errors->first('address', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>





<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Country:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('country', 'has-error') }}">
<input  style="width:500px;"  value=""  type="text"   name="country" id="country" class="typeahead form-control input-md" placeholder="Country" required>
<div class="col-sm-11"> {!! $errors->first('country', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>


<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>City:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('city', 'has-error') }}">
<input  style="width:500px; "  type="text" value="" name="city" id="city" class="typeahead form-control input-md" placeholder="City" required>
<div class="col-sm-11"> {!! $errors->first('city', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>



 



<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Owner Location:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-inline {{ $errors->first('la', 'has-error') }}">
<input class="form-control" style="width:185px;" type="text" id="la" name="la" class="" placeholder="lat " value="" required>

<input class="form-control" style="width:185px;" type="text" id="lo" name="lo" class="" placeholder="lng " value="" required>

<button type="button" id="viewMapId" class="btn-success btn-lg" data-toggle="modal" data-target="#myModalmap"> <i class="fa fa-map-marker red" data-dismiss="modal" data-toggle="modal"></i>

&nbsp;    Get Google Map</button>





<div class="col-sm-11"> {!! $errors->first('la', '<span style="color:red;">:message</span>') !!} </div>
</div>




<div class="col-sm-11"> {!! $errors->first('lo', '<span style="color:red;">:message</span>') !!} </div>
</div>


</div>


<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Profile Image:</strong>  <span style="color:red;">*</span></div>

<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('pic', 'has-error') }}" >

<div class="fileinput fileinput-new" data-provides="fileinput">
<div id="image-holder" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px; min-height:120px;">
 


</div>
 

 <div class="fileUpload btn btn-primary btn-sm">
    <span>Upload</span>
    <input type="file" class="upload" name="pic" id="pic"  required />
 
</div>
 
{{ csrf_field() }}


 
</div>
<div class="col-sm-11">{!! $errors->first('pic', '<span style="color:red;">:message</span>') !!}
</div></div>
</div>
</div>

 
<div class="item form-group row">
<div class="col-xs-3 col-sm-6 col-md-3"> <strong>Personal Number:</strong>  <span style="color:red;">*</span></div>
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group {{ $errors->first('personal_no', 'has-error') }}">
<input  style="width:500px; " type="text" value=""  name="personal_no" id="personal_no" class="form-control input-md" placeholder="Personal Number" required>
<div class="col-sm-11"> {!! $errors->first('personal_no', '<span style="color:red;">:message</span>') !!} </div>
</div>
</div>
</div>




<div class="modal-footer">



 
<button type="submit" class="btn btn-primary">Submit</button>
</div>                 
</form>
@endif
</main>
</div>

<div class="modal fade" data-backdrop="static" id="myModalmap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id="a">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Drag The Mark</h4>
</div>
<div class="modal-body" id="b">
<div id="map-canvas" style="width:auto;height:350px;">
</div>

</div>
<div class="modal-footer" id="c">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
@endsection



@section('footer')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script> 
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQjMMG10tSt4dDmmfYgRFUdoawXWfbhXc&amp;sensor=false&amp;signed_in=true&amp;libraries=geometry,places"></script>



 <script type="text/javascript">
 $(document).ready(function(){  
var url = "{{ route('typeahead.response') }}";
$('#city').typeahead({
  
source:  function (query, process) {
 
return $.get(url, { query: query }, function (data) {

return process(data);
});
}
});

var url2 = "{{ route('typeaheadcountries') }}";
$('#country').typeahead({
  
source:  function (query, process) {
 
return $.get(url2, { query: query }, function (data) {

return process(data);
});
}
});




});



 
var lat =  '';
var lng =  '';
var map;
var id=1;
/*
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {

lat=p.coords.latitude;
lng=p.coords.longitude;


$.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
            });

 

 $.ajax({
 type: 'get',
 url: '/post_latlng',
        
data:{

la : lat, 
lo : lng,
 
 
},
 


contentType:'application/json; charset=utf-8',
 dataType: "json",

 success: function(data) {
  
  // alert(data);



},


beforeSend: function(){
                    // $('#loading').show()
                  },
                  complete: function(){
                    // $('#loading').hide();
                  },
});
 



});
}


else {
alert('Geo Location feature is not supported in this browser.');
}
*/
$(document).ready(function() {
$("#viewMapId").click(function() {
setTimeout( function(){google.maps.event.addDomListener(window,'load', initialize(id,lat,lng));} , 400);
}); 
  
});


function initialize(id,lat, lng) 
{
var mapOptions ={ center: new google.maps.LatLng(lat, lng),zoom: 2};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
loadProperty(id,lat,lng);
}

function loadProperty(id,lat,lng)
{
addMarker(id,lat, lng);
}

function addMarker(id, lat, lng) 
{
var marker = new google.maps.Marker(
{ 
position: new google.maps.LatLng(lat, lng),
map: map,
title:'Drag Me',
draggable: true
}                              );

google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById('la').value = event.latLng.lat();
document.getElementById('lo').value = event.latLng.lng();
 

});
}




$("#pic").on('change', function () {

//Get count of selected files
var countFiles = $(this)[0].files.length;

var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();

if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {

//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {

var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"height": "140" ,
"width": "190",

"class": "thumb-image"
}).appendTo(image_holder);
}

image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}

} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
</script>


<script type="text/javascript">
  


   $(document).ready(function(e) { 

 });
</script>
 

@endsection