@model RdvQuery
@section header {
<style>
#map {
    width: 100%;
    height: 250px;
}
</style>

<script type="text/javascript" src="~/lib/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="~/lib/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />

}
@{ ViewData["Title"] = $"Proposition de rendez-vous à {Model.PerformerProfile.Performer.UserName} [{ViewBag.Activity.Name}]"; } 
<h2>@ViewData["Title"]</h2>
<form asp-action="Create" method="post">
    <div class="form-horizontal">
        <h4>Saisissez votre demande de rendez-vous</h4>
        <hr />
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group" has-feedback>
            <fieldset>
                <legend>La date de votre évennement</legend>
                <label for="EventDate" class="col-md-2 control-label">
                    Date de l'évennement
                </label>
                <div class="col-md-10">
                    <div class="container">
                        <div class="row">
                            <div class='col-sm-6'>
                                <div class='input-group date' id='datetimepicker2'>
                                    <input class="form-control" name="EventDate" />
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>

                            <span asp-validation-for="EventDate" class="text-danger">
                            </span>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>

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

                    <span id="AddressError" asp-validation-for="Location.Address" class="text-danger"></span>
                    <ul id="LocationCombo" >
                    </ul>
                    <div id="map"></div>
                </div>
            </fieldset>
        </div>

        <div class="form-group">
            <fieldset>
                <label asp-for="Reason" class="col-md-2 control-label">
                Donnez ici une raison à cette demande
                </label>
                <div class="col-md-10">
                    <div class="container">
                        <div class="row">
                            <div class='col-sm-6'>
                                <div id='reason1'>
                                    <textarea rows="15" asp-for="Reason" type="text" name="Reason" id="Reason" maxlength="4096" class="form-control"></textarea>
                                    <span asp-validation-for="Reason" class="text-danger"></span> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" class="btn btn-default" value="Créer" />
            </div>
        </div>
    </div>
    @Html.HiddenFor(model=>model.ClientId) 
    @Html.HiddenFor(model=>model.PerformerId) 
    @Html.HiddenFor(model=>model.ActivityCode)
    @Html.HiddenFor(model=>model.Location.Latitude)
    @Html.Hidden("Location.Longitude") 
</form>
@section scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }
<script>
    $(document).ready(function(){
    $("#Location_Address").googlegeocode({
        culture: '@System.Globalization.CultureInfo.CurrentCulture.Name',
        mapsApiKey: '@Startup.GoogleSettings.BrowserApiKey',
        mapId: 'map',
        longId: 'Location_Longitude',
        latId: 'Location_Latitude',
        addrValidationId: 'AddressError',
        formValidId: 'ValidationSummary',
        locComboId: 'LocationCombo'});

        $('#datetimepicker2').datetimepicker({
            locale: 'fr',
            format: "YYYY/MM/DD HH:mm"
        });
    })
</script>
}