@model Location
@section header {
<style>
    #amap {
        width: 100%;
        height: 250px;
    }
</style>
}
  
<form asp-action="SetAddress">
<div asp-validation-summary="All" class="text-danger" id="ValidationSummary"></div>

    <div class="form-group">

        <label asp-for="Address" class="col-md-2 control-label">Address</label>
        <div class="col-md-10">
            <input asp-for="Address" class="form-control" type="text" data-val-required="Spécifier un lieu" />

            <span id="AddressError" asp-validation-for="Address" class="text-danger"></span>
            <ul id="LocationCombo" >
            </ul>
            <div id="amap"></div>
            <input class="text-box" id="Latitude" name="Latitude" type="hidden" value="@Model.Latitude" readonly/>
            <input class="text-box" id="Longitude" name="Longitude" type="hidden" value="@Model.Longitude" readonly/>

        </div>
    </div>
    <input type="submit" class="btn btn-success" value="Enregistrer" />
    
</form>
@section scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }
<script>
    $(document).ready(function(){
    $("#Address").googlegeocode({
        culture: '@System.Globalization.CultureInfo.CurrentCulture.Name',
        mapsApiKey: '@Startup.GoogleSettings.BrowserApiKey',
        mapId: 'amap',
        longId: 'Longitude',
        latId: 'Latitude',
        addrValidationId: 'AddressError',
        formValidId: 'ValidationSummary',
        locComboId: 'LocationCombo'})
    })
</script>
} 
