@using CandidateReviewContracts.ViewModels
@model UserViewModel

@{
    var title = @Model.Id <= 0 ? "Добавить сотрудника" : "Редактировать профиль";
    var userRole = APIClient.User?.Role == CandidateReviewDataModels.Enums.RoleEnum.Администратор ? true : false;
}

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2 class="mb-4">Редактирование профиля</h2>
            <form method="post" class="needs-validation" novalidate>
                <input type="hidden" name="id" value="@Model?.Id" />
                <input type="hidden" name="password" value="@Model?.Password" />

                <div class="mb-3">
                    <label for="Surname" class="form-label">Фамилия <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="Surname" name="Surname" value="@Model?.Surname" required />
                    <div class="invalid-feedback">Пожалуйста, введите фамилию.</div>
                </div>

                <div class="mb-3">
                    <label for="Name" class="form-label">Имя <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="Name" name="Name" value="@Model?.Name" required />
                    <div class="invalid-feedback">Пожалуйста, введите имя.</div>
                </div>

                <div class="mb-3">
                    <label for="LastName" class="form-label">Отчество</label>
                    <input type="text" class="form-control" id="LastName" name="LastName" value="@Model?.LastName" />
                    <div class="invalid-feedback">Пожалуйста, введите отчество.</div>
                </div>

                <div class="mb-3">
                    <label for="Email" class="form-label">Электронная почта <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="Email" name="Email" value="@Model?.Email" readonly/>
                    <div class="invalid-feedback">Пожалуйста, введите электронную почту.</div>
                </div>

                @if (Model.Id <= 0)
                {
                    <div class="mb-3">
                        <label for="Password" class="form-label">Пароль <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="Password" name="Password" value="@Model?.Password" />
                        <div class="invalid-feedback">Пожалуйста, введите пароль.</div>
                    </div>
                }

                <div class="mb-3">
                    <label for="PhoneNumber" class="form-label">Телефон</label>
                    <input type="tel" class="form-control" id="PhoneNumber" name="PhoneNumber" value="@Model?.PhoneNumber" />
                    <div class="invalid-feedback">Пожалуйста, введите телефон.</div>
                </div>
                <input type="hidden" name="Role" value="@Model?.Role" />
                <input type="hidden" name="CompanyId" value="@Model?.CompanyId" />

                <div class="mb-3">
                    <label for="AvatarFilePath" class="form-label">Аватар</label>
                    <input type="file" class="form-control" id="AvatarFilePath" name="AvatarFilePath" accept=".jpg,.jpeg,.png" />
                    <img id="avatarPreview" src="@Model?.AvatarFilePath" alt="Предварительный просмотр аватара" style="max-width: 100px; max-height: 100px;" />
                    <div class="invalid-feedback">Выберите файл изображения.</div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary">Сохранить</button>
                    <button class="btn btn-secondary" onclick="window.history.back();">Назад</button>
                </div>
            </form>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7-beta.29/jquery.inputmask.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#PhoneNumber').inputmask({
                mask: '+7 (999) 999-99-99',
                showMaskOnHover: false,
                onincomplete: function () {
                    $(this).removeClass('is-valid').addClass('is-invalid');
                },
                oncleared: function () {
                    $(this).removeClass('is-valid is-invalid');
                },
                oncomplete: function () {
                    $(this).removeClass('is-invalid').addClass('is-valid');
                }
            });
        });

        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
    <script>
        const avatarInput = document.getElementById('AvatarFilePath');
        const avatarPreview = document.getElementById('avatarPreview');

        avatarInput.addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    avatarPreview.src = e.target.result;
                }
                reader.readAsDataURL(file);
            } else {
                avatarPreview.src = "@Model?.AvatarFilePath"; 
            }
        });
    </script>
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}