@page
@model Formulieren.Pages.ProeflesModel
@{
    ViewData["Title"] = "Proefles";
}

<h1>Proefles</h1>

<div condition="Model.ToonFormulier">
    <p>Vraag een proefles aan via het onderstaande formulier</p>

    <form method="post" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Naam" class="control-label"></label>
            <input asp-for="Naam" class="form-control" />
            <span asp-validation-for="Naam" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="EmailAdres" class="control-label"></label>
            <input asp-for="EmailAdres" class="form-control" />
            <span asp-validation-for="EmailAdres" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Telefoonnummer" class="control-label"></label>
            <input asp-for="Telefoonnummer" class="form-control" />
            <span asp-validation-for="Telefoonnummer" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="Foto" class="control-label"></label>
            <input asp-for="Foto" class="form-control-file"/>
            <span asp-validation-for="Foto" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="Niveau" class="control-label"></label>
            <select asp-for="Niveau" asp-items="Html.GetEnumSelectList<Niveaus>()" class="form-control">
                <option value="">kies een niveau</option>
            </select>
            <span asp-validation-for="Niveau" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="Frequentie" class="control-label"></label><br />
            @foreach (var frequentie in Model.Frequenties)
            {
                <input type="radio" asp-for="Frequentie" value="@frequentie" />@frequentie @:&nbsp;
            }
            <span asp-validation-for="Frequentie" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="VoorkeurDatum" class="control-label"></label>
            <input asp-for="VoorkeurDatum" class="form-control" />
            <span asp-validation-for="VoorkeurDatum" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="Beschrijving" class="control-label"></label>
            <textarea asp-for="Beschrijving" class="form-control"></textarea>
            <span asp-validation-for="Beschrijving" class="text-danger"></span>
        </div>

        <div class="form-group">
            <input asp-for="Akkoord" class="form-control-checkbox" />
            <label asp-for="Akkoord" class="control-label"></label><br />
            <span asp-validation-for="Akkoord" class="text-danger"></span>
        </div>
        
        <div class="form-group">
            <input type="submit" value="Verstuur" class="btn btn-primary" />
        </div>
    </form>
</div>

<div condition="Model.Verwerkt">
    <p>@Model.Naam, uw aanvraag voor een proefles @Model.Niveau is verwerkt.</p>
    <p>U wilt @Model.Frequentie per week gaan trainen.</p>
    <img src="/Image/@Model.FotoBestand" width="350">
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script>
    // extend range validator method to treat checkboxes differently
    var defaultRangeValidator = $.validator.methods.range;
    $.validator.methods.range = function(value, element, param) {
        if(element.type === 'checkbox') {
            // if it's a checkbox return true if it is checked
            return element.checked;
        } else {
            // otherwise run the default validation function
            return defaultRangeValidator.call(this, value, element, param);
        }
    }
</script>
}