@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) { total += gtarif.brush[0];  displayTarif('DressPrice', gtarif.brush[0]) }
            else displayTarif('DressPrice',0); 
        }
        if ($('#Prestation_Shampoo').prop('checked')) {
             total += gtarif.shampoo; 
            displayTarif('ShampooPrice', gtarif.shampoo);
        } else displayTarif('ShampooPrice', 0);
        if ($('#Prestation_Cares').prop('checked')) {
             total += gtarif.care;
            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' || cv == 'Brushing') { $('#Prestation_Dressing').val('Coiffage'); }
                }

                $("#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 () {  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>
}
<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"); }