@model HealthchoiceMVC.NonDbModels.RegisterPracticeViewModel


<script type="text/javascript">
    //$(function () {
    //    $("[rel='tooltip']").tooltip();
    //});
    //<a href="#" rel="tooltip" data-placement="right" title="A nice tooltip">test</a>
    //$(document).ready(function () {
    //    $("#Password").tooltip({ trigger: 'hover' });
    //});

    $(document).ready(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
        $("body").popover({ selector: '[data-toggle=popover]' });
        //$('#ContactNumber').inputmask("+27(99)999-9999");
        $('#ContactNumber').mask("+27(00)000-0000", { placeholder: "+27(__)___-____" }); //specifying options
        $('#PracticePrimaryContactNumber').mask("+27(00)000-0000",{placeholder: "+27(__)___-____"}); //specifying options

    });
    // Insert this for either tooltip or popover.
    //    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    //<button type="button" id="btnTooltiptest" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right, but has lots of test in it now">Tooltip on right</button>
</script>

@{
    ViewBag.Title = "Healthchoice Registration";
}

<h2>@ViewBag.Title</h2>

@using (Html.BeginForm("RegisterPractice", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Register a new Practice</h4>
    <hr />
    <div class="row">
        <div class="col-md-12">
            <h2>Next Steps?</h2>
            <p>
                You are about to register a practice with Healthchoice. In order to continue you will need to register an account with Healthchoice and complete some additional information relating to your practice. The account you register will be used to manage your practice, practitioners and patients.
            </p>
            <p>
                You will receive an email from us to validate your email address. Once you have validated your email address, your practice will be activated.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h3>Your details</h3>
        </div>
    </div>
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.TitleId, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.DropDownListFor(m => m.TitleId, new SelectList(ViewBag.TitleList, "Value", "Text"), new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.TitleId, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.FirstName, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.LastName, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ContactNumber, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.ContactNumber, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Gender, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-8">
            @Html.DropDownListFor(m => m.Gender, new SelectList(ViewBag.GenderList, "Value", "Text"), new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.IDTypeId, htmlAttributes: new { @class = "control-label col-md-4 required" })
        <div class="col-md-8">
            @Html.DropDownListFor(m => m.IDTypeId, new SelectList(ViewBag.IdType, "Value", "Text"), new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.IdentityNumber, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.IdentityNumber, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.PasswordFor(m => m.Password, new
               {
                   @class = "form-control",
                   rel = "tooltip",
                   data_toggle = "tooltip",
                   title = "Password must be more than 6 characters and contain a number, both upper and lowercase letters and a special character.",
                   data_placement = "right",
               })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group" style="display:none;">
        @Html.LabelFor(m => m.AccountType, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.DropDownListFor(m => m.AccountType, new SelectList(ViewBag.UserTypeList, "Value", "Text"), new { @class = "form-control" })
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-12">
            <h3>Practice Details</h3>
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PracticeName, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.PracticeName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PracticeTradingName, new { @class = "col-md-4 control-label" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.PracticeTradingName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PracticeNumber, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.PracticeNumber, new
               {
                   @class = "form-control",
                   rel = "tooltip",
                   data_toggle = "tooltip",
                   title = "Practice Number is the last 7 digits of your practice number.",
                   data_placement = "right",
               })
            @Html.ValidationMessageFor(m => m.PracticeNumber, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.AffiliationNumber, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.AffiliationNumber, new
               {
                   @class = "form-control",
                   rel = "tooltip",
                   data_toggle = "tooltip",
                   title = "SASP number is the full SASP number without spaces.",
                   data_placement = "right",
               })
            @Html.ValidationMessageFor(m => m.PracticeNumber, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.VatNumber, new { @class = "col-md-4 control-label" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.VatNumber, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.RegistrationNumber, new { @class = "col-md-4 control-label" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.RegistrationNumber, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PracticePrimaryContactNumber, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.PracticePrimaryContactNumber, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PracticePrimaryContactEmail, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.PracticePrimaryContactEmail, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.AddressLineOne, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.AddressLineOne, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.AddressLineTwo, new { @class = "col-md-4 control-label" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.AddressLineTwo, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.AreaSuburb, new { @class = "col-md-4 control-label" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.AreaSuburb, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.CityTown, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.CityTown, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.PostalCode, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.TextBoxFor(m => m.PostalCode, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.NetworkAffiliationId, new { @class = "col-md-4 control-label required" })
        <div class="col-md-8">
            @Html.DropDownListFor(m => m.NetworkAffiliationId, new SelectList(ViewBag.NetworkAffiliationList, "Value", "Text"), new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @*@Html.LabelFor(m => m.TermsAndConditions, new { @class = "col-md-4 control-label" })*@
        <label class="col-md-4 control-label">I have read and accept the terms of use.<br />Click <a href="~/Home/Terms" target="_blank">here</a> to view.</label>
        @*@Html.LabelFor(m => m.TermsAndConditions, new { @class = "col-md-4 control-label" })*@
        <div class="col-md-8">
            @Html.CheckBoxFor(m => m.TermsAndConditions, new { @class = "form-control" })
            @*@Html.ValidationMessageFor(m => m.TermsAndConditions)*@
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-4 col-md-8">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js"></script>
<script>
    // extend jquery range validator to work for required checkboxes
    //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>