@model Yavsc.Models.Haircut.HairCutQuery
@{ ViewData["Title"] = $"{ViewBag.Activity.Name}: Votre commande"; }
@await Html.PartialAsync("BrusherProfileScript",ViewData["PerfPrefs"])
@section header {
<script src="https://maps.googleapis.com/maps/api/js?key=@Startup.GoogleSettings.BrowserApiKey"></script>
<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" />
<style>
#map {
width: 100%;
height: 250px;
}
#Location_combo li {
cursor: pointer;
}
#Location_combo li:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
}
@section scripts {
<script>
var gtarif=tarifs[0];
var cutprice;
var techprice;
var dressprice;
var total;
function displayTarif(dn,price)
{
$('#'+dn).html( price+"€" );
}
function updateTarif () {
var len = $('#Prestation_Length').prop('selectedIndex');
var gen = $("#Prestation_Gender").prop('selectedIndex');
var tech = $("#Prestation_Tech").prop('selectedIndex');
var dress = $("#Prestation_Dressing").prop('selectedIndex');
var havecut = false;
var havetech = false;
total = 0;
if ($('#Prestation_Cut').prop('checked')) {
var cutprice = (gen==0) ? gtarif.cut[len] : gtarif.cut[0];
havecut = true;
total += cutprice;
displayTarif('CutPrice', cutprice);
} else displayTarif('CutPrice',0);
if (gen==0) {
if (tech>0) {
var techi=tech-1;
var colors = $("input[name='Prestation.Taints[]']:checked");
var colIds=[];
colors.each(function(i,item){colIds.push(item.value)});
$('#taintIds').val(colIds);
var techprice = (techi>0 || colors.length<2) ? gtarif.tech[techi][len] : gtarif.multicolor[len] ;
total += techprice;
havetech = true;
displayTarif('TechPrice', techprice);
} else displayTarif('TechPrice',0);
if (dress>0) {
var dressprice = gtarif.brush[dress-1];
total += dressprice;
displayTarif('DressPrice', dressprice);
} else displayTarif('DressPrice',0);
} else if (gen==1) {
if (dress>0) {
else displayTarif('DressPrice',0);
}
if ($('#Prestation_Shampoo').prop('checked')) {
displayTarif('ShampooPrice', gtarif.shampoo);
} else displayTarif('ShampooPrice', 0);
if ($('#Prestation_Cares').prop('checked')) {
displayTarif('CaresPrice', gtarif.care);
} else displayTarif('CaresPrice', 0);
if (havetech && havecut) {
total -= gtarif.feediscount;
$('#discount').html( "Remise au forfait coupe+technique: "+gtarif.feediscount+"€" ).removeClass('hidden');
} else $('#discount').addClass('hidden');
$('.btn-submit').prop('disabled', (total==0));
$('#Total').html( total.toFixed(2)+"€" );
}
function onTarif(tarif)
{
gtarif = tarif;
updateTarif();
}
// pas de coupe => technique
$(document).ready(function () {
$("#Prestation_Tech").on("change", function (ev) {
var nv = $(this).val();
if (nv == 'Color' || nv == 'Mech') { $("#taintsfs").removeClass('hidden') }
else { $("#taintsfs").addClass('hidden') }
});
$("#Prestation_Gender").on("change", function(ev) {
var nv = $(this).val();
if(nv=='Women') {
onTarif(tarifs[0]);
$("#techfs").removeClass('hidden');
$("#lenfs").removeClass('hidden');
$('#Prestation_Cut').prop('disabled', false);
$('#optbrush').prop('disabled', false);
$('#optfold').prop('disabled', false);
}
else {
var cv = $('#Prestation_Dressing').val();
if (nv=='Man') {
$('#optfold').prop('disabled', true);
$('#optbrush').prop('disabled', false);
onTarif(tarifs[1]);
if (cv=='Folding') { $('#Prestation_Dressing').val('Coiffage'); }
}
if (nv=='Kid') {
onTarif(tarifs[2]);
$('#optbrush').prop('disabled', true);
$('#optfold').prop('disabled', true);
if (cv=='Folding' ||
}
$("#techfs").addClass('hidden');
$("#lenfs").addClass('hidden');
$('#Prestation_Cut').val(true);
$('#Prestation_Cut').prop('checked', true);
$('#Prestation_Cut').prop('disabled', true);
}
});
$(".imptarif").on("change", function(ev) {
updateTarif();
});
var curgen = $("#Prestation_Gender").val();
if (curgen=='Women') {
gtarif=tarifs[0];
} else {
$("#techfs").addClass('hidden');
$("#lenfs").addClass('hidden');
if (curgen=='Man') {
gtarif=tarifs[1];
} else gtarif=tarifs[2];
}
onTarif(tarifs[0]);
});
</script>
<script>
$(document).ready(function () {
var config = {
mapId: 'map',
addrId: 'Location_Address',
longId: 'Location_Longitude',
latId: 'Location_Latitude',
addrValidationId: 'valloc',
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(config.mapId), {
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);
$('#' + config.longId).val(lng);
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 () {
},
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>
}
<em>@ViewBag.Activity.Description</em>
<h2>@ViewData["Title"]</h2>
@Html.DisplayFor(m=>m.PerformerProfile)
<form asp-controller="HairCutCommand" asp-action="CreateHairCutQuery" id="form">
<div class="form-horizontal">
<hr />
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Prestation.Gender" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="Prestation.Gender" asp-items="@ViewBag.Gender" class="form-control imptarif"></select>
<span asp-validation-for="Prestation.Gender" class="text-danger"></span>
</div>
</div>
<div class="form-group @ViewBag.TechClass" id="lenfs">
<label asp-for="Prestation.Length" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="Prestation.Length" asp-items="@ViewBag.HairLength" class="form-control imptarif"></select>
<span asp-validation-for="Prestation.Length" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<input asp-for="Prestation.Cut" class="imptarif"/>
<label asp-for="Prestation.Cut"></label>
<span id="CutPrice" class="price"></span>
</div>
</div>
</div>
<div class="form-group @ViewBag.TechClass" id="techfs">
<label asp-for="Prestation.Tech" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="Prestation.Tech" asp-items="@ViewBag.HairTechnos" class="form-control imptarif"></select>
<span asp-validation-for="Prestation.Tech" class="text-danger"></span>
<input name="taintIds" id="taintIds" type="hidden" />
<div class="form-group @ViewBag.ColorsClass" id="taintsfs">
<label asp-for="Prestation.Taints" class="col-md-2 control-label"></label>
<div class="col-md-10">
@foreach (HairTaint color in ViewBag.HairTaints) {
<label>
<input type="checkbox" value="@color.Id" name="Prestation.Taints[]" class="imptarif"/>
@await Html.PartialAsync("HairTaint",color)
</label> }
<input type="hidden" asp-for="Prestation.Taints" />
<span asp-validation-for="Prestation.Taints" class="text-danger"></span>
</div>
</div>
<span id="TechPrice" class="price"></span>
</div>
</div>
<div class="form-group">
<label asp-for="Prestation.Dressing" asp-items="@ViewBag.Dressing" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select class="form-control imptarif" data-val="true" data-val-required="The Coiffage field is required." id="Prestation_Dressing" name="Prestation.Dressing">
<option selected="selected" value="Coiffage">Coiffage</option>
<option value="Brushing" id="optbrush">Brushing</option>
<option value="Folding" id="optfold">Mise en plis</option>
</select>
<span asp-validation-for="Prestation.Dressing" class="text-danger"></span>
<span id="DressPrice" class="price"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<input asp-for="Prestation.Shampoo" class="imptarif"/>
<label asp-for="Prestation.Shampoo"></label>
<span id="ShampooPrice" class="price"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<input asp-for="Prestation.Cares" class="imptarif"/>
<label asp-for="Prestation.Cares"></label>
<span id="CaresPrice" class="price"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="EventDate" class="col-md-2 control-label">
@SR["Event date"]
</label>
<div class="col-md-10">
<div class="container">
<div class="row">
<div class='col-sm-6'>
@await Component.InvokeAsync("Calendar","EventDate", Model.PerformerProfile.Performer.DedicatedGoogleCalendar)
</div>
<span asp-validation-for="EventDate" class="text-danger">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="Location_Address" class="col-md-2 control-label">
@SR["Location"]
</label>
<div class="col-md-10">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div>
<input asp-for="Location.Address" type="text" name="Location.Address" id="Location_Address" class="form-control" data-val-required=@SR[
"SpecifyPlace"] data-val-remote=@SR[ "GoogleDidntGeoLocalized"]>
<span asp-validation-for="Location.Address" class="text-danger" id="valloc"></span>
<ul id="loccomb">
</ul>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="AdditionalInfo" class="col-md-2 control-label"></label>
<div class="col-md-offset-2 col-md-10">
<textarea asp-for="AdditionalInfo" class="form-control">
</textarea>
</div>
</div>
<div class="form-group">
<span id="discount" class="price"></span>
<span><img src="~/images/dollars.svg" style="width:2em;" /> Total : <span id="Total" class="total"></span>
</span><br/>
<label>
<input type="checkbox" asp-for="Consent" class="imptarif"></input> En cochant cette case, vous acceptez les
<a asp-action="CGV" class="btn btn-link">Conditions générales de vente</a> liées à cette commande de service.</label>
</div>
<input asp-for="ClientId" type="hidden" />
<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-medium.png" alt="PayPal Acceptance">
<input type="submit" class="btn btn-success btn-submit" value="@SR["Validez ce choix, et prendre rendez-vous"] avec @Model.PerformerProfile.Performer.UserName"/>
<environment names="Development">
<input type="submit" class="btn btn-success btn-submit" value="@SR["Validez ce choix, et prendre rendez-vous"] avec @Model.PerformerProfile.Performer.UserName [DEV+Location+Date]"/>
</environment>
</div>
@Html.HiddenFor(model=>model.Location.Latitude)
@Html.HiddenFor(model=>model.Location.Longitude)
<input type="hidden" name="performerId" value="@Model.PerformerProfile.PerformerId" />
<input type="hidden" name="activityCode" value="@ViewBag.Activity.Code" />
</form>
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
