@page
@model EnotaryoPH.Web.Pages.RegisterModel
@{
}

<div class="container">
    <h1 class="my-4">Sign Up</h1>
    <div class="row">
        <div class="col-md-9 col-lg-12">
            <form method="post" asp-action="Register">
                <div class="row">
                    <div class="col-12 col-lg-3">
                        <label class="form-label" for="Email">Email</label>
                        <input id="Email" class="form-control" type="email" required asp-for="Email" />
                        @Html.ValidationMessageFor(x => x.Email)
                    </div>
                    <div class="col-12 col-lg-3"><label class="form-label" for="Password">Password</label><input id="Password" class="form-control" type="password" required asp-for="Password" />
                        @Html.ValidationMessageFor(x => x.Password)
                        </div>
                    <div class="col-12 col-lg-3">
                        <label class="form-label" for="ConfirmPassword">Confirm Password</label>
                        <input id="ConfirmPassword" class="form-control" type="password" required asp-for="ConfirmPassword" />
                        @Html.ValidationMessageFor(x => x.ConfirmPassword)
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-lg-3">
                        <label class="form-label" for="PhoneNumber">Phone number</label>
                        <input id="PhoneNumber" class="form-control mb-3" type="text" asp-for="PhoneNumber" />
                        @Html.ValidationMessageFor(x => x.PhoneNumber)
                    </div>
                    <div class="col-12 col-lg-3">
                        <label class="form-label" for="BirthDate">Birthdate</label>
                        <input id="BirthDate" class="form-control mb-3" type="date" required asp-for="BirthDate" />
                        @Html.ValidationMessageFor(x => x.BirthDate)
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <label class="form-label">Register As</label>
                        <div>
                            <div class="form-check form-check-inline"><input id="IsPrincipal" class="form-check-input" type="radio" name="RoleType" checked value="Principal" asp-for="RoleType" /><label class="form-check-label" for="IsPrincipal">Principal</label></div>
                            <div class="form-check form-check-inline"><input id="IsNotaryPublic" class="form-check-input" type="radio" name="RoleType" value="Notary" asp-for="RoleType" /><label class="form-check-label" for="IsNotaryPublic">Notary Public </label></div>
                        </div>
                    </div>
                </div>
                <div id="LawyerFields">
                    <div class="row mt-4">
                        <div class="col-12 col-lg-3"><label class="form-label" for="RollNumber">Roll Number</label><input id="RollNumber" class="form-control mb-3" type="text" required asp-for=RollNumber /></div>
                        <div class="col-12 col-lg-3"><label class="form-label">IBP Number</label><input id="IBPNumber" class="form-control mb-3" type="text" required asp-for="IBPNumber" /></div>
                        <div class="col-12 col-lg-3"><label class="form-label" for="MCLEComplianceNumber">MCLE Compliance Number</label><input id="MCLEComplianceNumber" class="form-control mb-3" type="text" required asp-for="MCLEComplianceNumber" /></div>
                        <div class="col-12 col-lg-3"><label class="form-label" for="MCLEDate">MCLE Date</label><input id="MCLEDate" class="form-control mb-3" type="date" required asp-for="MCLEDate" /></div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 col-lg-3"><label class="form-label" for="PTRNumber">PTR Number</label><input id="PTRNumber" class="form-control mb-3" type="text" required asp-for="PTRNumber" /></div>
                        <div class="col-12 col-lg-3"><label class="form-label" for="PTRDate">PTR Date</label><input id="PTRDate" class="form-control mb-3" type="date" required asp-for="PTRDate" /></div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 col-lg-3"><label class="form-label">Commission Number</label><input id="CommissionNumber" class="form-control mb-3" type="text" required asp-for="CommissionNumber" /></div>
                        <div class="col-12 col-lg-3"><label class="form-label">Commision Expiration</label><input id="CommisionExpiration" class="form-control mb-3" type="date" required asp-for="CommissionExpiration" /></div>
                    </div>
                    <div class="row mt-3">
                        <div class="col"><label class="form-label" for="OfficeAddress">Office Address</label><input id="OfficeAddress" class="form-control mb-3" type="text" required asp-for="OfficeAddress" /></div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col">
                        <div class="form-check"><input id="EighteenYearsOrOlder" class="form-check-input" type="checkbox" required asp-for="IsEighteenYearsOrOlder" /><label class="form-check-label" for="EighteenYearsOrOlder">I am 18 years old or older</label></div>
                        <button id="RegisterButton" class="btn btn-primary btn-lg" type="submit"><i class="fas fa-user-plus me-2"></i><span id="RegisterButtonText">Register as</span></button>
                    </div>
                </div>
                <input type="hidden" asp-for="RoleType" />
            </form>
        </div>
    </div>
</div>

@section Scripts {
    <script src="~/Pages/Register.cshtml.js"></script>
}