@model PerformerProfile 
@{ ViewData["Title"] = "Setup your performer profile"; } 
@section header{ 
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
    <script src="https://maps.googleapis.com/maps/api/js?key=@ViewBag.GoogleSettings.BrowserApiKey"></script>
}
<style>
    #map {
        width: 100%;
        height: 250px;
    }
</style>
} 
@section scripts{
<script>
     $(document).ready(function(){
         var config = {
        mapId: 'map',
        addrId: 'OrganizationAddress_Address',
        longId: 'OrganizationAddress_Longitude',
        latId: 'OrganizationAddress_Latitude',
        addrValidationId: 'AddressError',
        formValidId: 'valsum',
        locComboId: 'loccomb'
    };
     $.validator.setDefaults({
       messages: {
        remote:  "Ce lieu n'est pas identifié par les services de géo-localisation Google",
        required: "Veuillez renseigner ce champ"
       }
   });

    var gmap = new google.maps.Map(document.getElementById('map'), {
	    zoom: 16,
	    center: { lat: 48.862854, lng: 2.2056466 }
	  });
    var marker;

   function chooseLoc(sender,loc) {
        if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
        var pos = loc.geometry.location;
        var lat = new Number(pos.lat);
        var lng = new Number(pos.lng);
        $('#'+config.latId).val(lat.toLocaleString('en'));
        $('#'+config.longId).val(lng.toLocaleString('en'));
        gmap.setCenter(pos);
        if (marker) { 
            marker.setMap(null);
        }
        marker = new google.maps.Marker({
            map: gmap,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: pos
            });
        google.maps.event.addListener(marker, 'dragend', function() {
            // TODO reverse geo code
            var pos = marker.getPosition();
                $('#'+config.latId).val(pos.lat);
                $('#'+config.longId).val(pos.lng);
        });
        $('#'+config.addrId).valid();
        $('#'+config.addrValidationId).empty();
        $('#'+config.formValidId).empty();
        return true;
    }

    $('#'+config.addrId).rules("add",
    {
        remote: {
            url: 'https://maps.googleapis.com/maps/api/geocode/json',
            type: 'get',
            data: {
                sensor: false,
                address: function () { return $('#'+config.addrId).val() }
                },
            dataType: 'json',
            dataFilter: function(datastr,type) {
                $('#'+config.locComboId).html("");
                var data = JSON.parse(datastr);
                data.results.forEach(function(element) {
                    if (element.formatted_address !== $('#'+config.addrId).val()) {
                        $('<li>'+element.formatted_address+'</li>')
                        .data("geoloc",element)
                        .click(function() { chooseLoc('user',$(this).data("geoloc")) })
                        .appendTo($('#'+config.locComboId));}
                    else {  }
                });
               if  ((data.status === 'OK') && (data.results.length == 1))
                { 
                    chooseLoc('google',data.results[0]);
                    return true;
                } 
                return false;
                },
            error: function(xhr, textStatus, errorThrown)
                {
                console.log('ajax loading error ... '+textStatus+' ... '+ errorThrown);
                return false;
                }
         }
        });
    });
    </script>

<h2>@ViewData["Title"].</h2>

@{ await Html.RenderPartialAsync("_PerformerPartial", Model) ; }

<form id="FrmSetAct" asp-controller="Manage" asp-action="SetActivity" method="post" class="form-horizontal" role="form">
    <h4>@SR["Choose below your main activity"]:</h4>
    <hr />
    <div asp-validation-summary="ValidationSummary.All" class="text-danger" id="valsum"></div>
    <div class="form-group">
        <label asp-for="ActivityCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="ActivityCode" asp-items=@ViewBag.Activities class="form-control">
            </select>
            <span asp-validation-for="ActivityCode" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="AcceptNotifications" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="AcceptNotifications" class="form-control" />
            <span asp-validation-for="AcceptNotifications" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="AcceptPublicContact" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="AcceptPublicContact" class="form-control" />

            <span asp-validation-for="AcceptPublicContact" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="AcceptGeoLocalization" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="AcceptGeoLocalization" class="form-control" />

            <span asp-validation-for="AcceptGeoLocalization" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="WebSite" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="WebSite" class="form-control" />

            <span asp-validation-for="WebSite" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="MinDailyCost" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="MinDailyCost" class="form-control" />

            <span asp-validation-for="MinDailyCost" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="MaxDailyCost" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="MaxDailyCost" class="form-control" />

            <span asp-validation-for="MaxDailyCost" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="Active" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Active" class="form-control" />

            <span asp-validation-for="Active" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="SIREN" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="SIREN" class="form-control" />

            <span asp-validation-for="SIREN" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">

        <label asp-for="OrganizationAddress.Address" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="OrganizationAddress.Address" class="form-control" type="text" />

            <span id="AddressError" asp-validation-for="OrganizationAddress.Address" class="text-danger"></span>
            <ul id="loccomb" >
            </ul>
            <div id="map"></div>
        </div>
    </div>
    @Html.Hidden("OrganizationAddress.Latitude") @Html.Hidden("OrganizationAddress.Longitude") @Html.Hidden("PerformerId")
    <button type="submit" class="btn btn-default">Save these settings</button>

</form>

<form asp-controller="Manage" asp-action="UnsetActivity" method="post" class="form-horizontal" role="form">
    @Html.Hidden("PerfomerId")
    <button type="submit" class="btn btn-default">Remove my professional profile</button>
</form>