@model DoctorRegistrationViewModel

@using SimpleClinic.Core.Models

<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>
            </div>

            <form asp-action="RegisterDoctor" asp-controller="Account" method="post" enctype="multipart/form-data">
                <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" />
                <input type="hidden" asp-for="CustomSpeciality" id="hiddenCustomSpeciality" />

                <div class="form-input-container">
                    <label asp-for="LicenseNumber"></label>
                    <input asp-for="LicenseNumber" class="text-center" />
                    <span asp-validation-for="LicenseNumber" class="text-danger"></span>
                </div>

                <div class="form-input-container">
                    <label asp-for="OfficePhoneNumber"></label>
                    <input asp-for="OfficePhoneNumber" class="text-center" type="password" />
                    <span asp-validation-for="OfficePhoneNumber" class="text-danger"></span>
                </div>

                <div class="form-input-container">
                    <label asp-for="PricePerAppointment"></label>
                    <input asp-for="PricePerAppointment" class="text-center" type="number" step="0.01" />
                    <span asp-validation-for="PricePerAppointment" class="text-danger"></span>
                </div>
                <div class="form-input-container">
                    <label asp-for="Biography"></label>
                    <textarea style="width: 20rem" asp-for="Biography" class="text-center"></textarea>
                    <span asp-validation-for="Biography" class="text-danger"></span>
                </div>
                <div class="mb-3 form-input-container">
                    <label asp-for="Files" class="form-label">Profile Picture</label>
                    <input style="width: 20rem; height:fit-content" asp-for="Files" class="form-control" type="file" name="files" accept="image/*">
                </div>
                <div class="form-group form-input-container">
                    <label asp-for="SpecialityId" class="form-label-add-edit">Speciality</label>
                    <select style="width:20rem" asp-for="SpecialityId" id="specialitySelect" class="form-control" aria-required="true">
                        <option value="" disabled selected>Select Speciality</option>
                        @foreach (var type in Model.Specialities)
                        {
                            <option value="@type.Id">@type.Name</option>
                        }
                        <option value="-1">Other</option>
                    </select>
                    <span asp-validation-for="SpecialityId" class="text-danger"></span>
                    <span asp-validation-for="CustomSpeciality" class="text-danger"></span>
                </div>

                <div class="form-group form-input-container" id="customSpecialityContainer" style="display: none;">
                    <label style="margin: 0 auto">Enter Custom Speciality:</label>
                    <input style="width: 20rem" id="customSpecialityInput" class="form-control" />
                </div>

                <div class="form-input-container">
                    <button type="submit" class="btn btn-primary col-3">Register</button>
                </div>

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

@section Scripts
    {
    <script>
        document.getElementById("specialitySelect").addEventListener("change", function () {
            const customSpecialityContainer = document.getElementById("customSpecialityContainer");
            const selectedSpeciality = this.value;

            if (selectedSpeciality === "-1") {
                customSpecialityContainer.style.display = "flex";
                document.getElementById("customSpecialityInput").setAttribute("required", "required");
            } else {
                customSpecialityContainer.style.display = "none";
                document.getElementById("customSpecialityInput").removeAttribute("required");
                document.getElementById("hiddenCustomSpeciality").value = "";
            }
        });

        document.getElementById("customSpecialityInput").addEventListener("input", function () {
            const customSpecialityValue = this.value;
            document.getElementById("hiddenCustomSpeciality").value = customSpecialityValue;
        });
    </script>
    <partial name="_ValidationScriptsPartial" />
}
