@model PatientRegistrationViewModel

@using SimpleClinic.Core.Models

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.css" rel="stylesheet">

<link rel="stylesheet" href="~/css/site.css" />

<div class="login-container">
    <div class="login-box-container">
        <div class="box-right"></div>
        <div class="box-left">
            <div class="form-title">
                <h2>Welcome to the clinic!</h2>
                <h4>Please log in to your account</h4>
            </div>
            <form asp-action="RegisterPatient" asp-controller="Account" method="post">
                <input type="hidden" asp-for="FirstName" />
                <input type="hidden" asp-for="LastName" />
                <input type="hidden" asp-for="Email" />
                <input type="hidden" asp-for="Address" />
                <input type="hidden" asp-for="Password" />
                <input type="hidden" asp-for="PasswordRepeat" />
                <input type="hidden" asp-for="SelectedRole" />

                <div class="form-group" style="margin-bottom: 2rem">
                    <label class="mb-2">Do you have insurance?</label>
                    <div class="form-check form-check-inline">
                        <input asp-for="HasInsurance" class="form-check-input" type="checkbox" id="inlineCheckbox1" name="HasInsurance" value="true">
                        <label class="form-check-label" for="inlineCheckbox1">Yes</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input asp-for="HasInsurance" class="form-check-input" type="checkbox" id="inlineCheckbox2" name="HasInsurance" value="false">
                        <label class="form-check-label" for="inlineCheckbox2">No</label>
                    </div>
                </div>

                <div class="form-group" style="width: 20rem; margin: 0 auto">
                    <label class="mb-2" for="dobInput">Date of Birth</label>
                    <input asp-for="DateOfBirth" type="text" class="form-control" id="dobInput" placeholder="Select date">
                    <span asp-validation-for="DateOfBirth" class="text-danger"></span>
                </div>

                <div class="form-group text-center mt-4">
                    <button type="submit" class="btn btn-primary">Register</button>
                </div>

                <div class="text-center text-danger">
                    <span asp-validation-summary="All"></span>
                </div>
            </form>

        </div>
    </div>
</div>

@section Scripts
    {
    <script>
        $(document).ready(function () {
            $('#dobInput').datepicker({
                format: 'yyyy-MM-dd',
                autoclose: true,
                endDate: '-18y'
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#inlineCheckbox1').click(function () {
                $('#inlineCheckbox2').prop('checked', !$(this).prop('checked'));
            });

            $('#inlineCheckbox2').click(function () {
                $('#inlineCheckbox1').prop('checked', !$(this).prop('checked'));
            });
        });
    </script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.js"></script>

    <partial name="_ValidationScriptsPartial" />
}
