{% extends template ~ '.html.twig' %}

{% block title %}Регистрация пациента{% endblock %}

{% block js %}
    <script id="smartCaptcha" src="https://smartcaptcha.yandexcloud.net/captcha.js"></script>
{% endblock %}

{% block top %} 
    <div class="top-section">
        <h1 class="title" id="page-title">{{ title }}</h1>
    </div>
{% endblock %}

{% block body %}
    <div data-controller="registration" id="register" class="form">
        <div class="alert filter msg" role="alert"> 
            Поля, обозначенные звездочкой (<span class="text-danger">*</span>), обязательны для заполнения
        </div>
        <div class="register-start">
            <div class="form-group row">
                <label for="phone" class="col-sm-3 col-form-label">Телефон<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="phone" data-controller="inputMask">
                    <div class="msg-valid valid-phone"></div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-5 d-capcha-start"></div>
                <div class="col-md-7 license"></div>
            </div>
            <button class="btn btn-outline-secondary submit-filter filter__btn submit-filter" data-action="registration#btnStart">Далее</button>
        </div>

        <div class="register-init d-none">
            <div class="form-group row">
                <label for="lastName" class="col-sm-3 col-form-label">Фамилия<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="lastName">
                    <div class="msg-valid valid-lastName"></div>
                </div>
            </div>
            <div class="form-group row">
                <label for="firstName" class="col-sm-3 col-form-label">Имя<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="firstName">
                    <div class="msg-valid valid-firstName"></div>
                </div>
            </div>
            <div class="form-group row">
                <label for="middleName" class="col-sm-3 col-form-label">Отчество<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="middleName">
                    <div class="msg-valid valid-middleName"></div>
                </div>
            </div>
            
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-3 col-form-label">Email<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="email">
                    <div class="msg-valid valid-email">указывайте действующий e-mail, к&nbsp;которому привязан ваш аккаунт <br> на сайте Госуслуги</div>
                </div>
            </div>
            <div class="form-group row">
                <label for="birthDate" class="col-sm-3 col-form-label">Дата рождения<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="birthDate" data-controller = 'datePicker' range = 'false'>
                    <div class="msg-valid valid-birthDate"></div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Пол<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input gender" type="radio" name="gender" id="gender_0" value="1">
                      <label class="form-check-label" for="gender_0">
                        Мужской
                      </label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input gender" type="radio" name="gender" id="gender_1" value="2">
                      <label class="form-check-label" for="gender_1">
                        Женский
                      </label>
                    </div>
                    <div class="msg-valid valid-gender"></div>
                </div>

            </div>
            
            <div class="form-group row">
                <div class="col-md-5 d-capcha-init"></div>
                <div class="col-md-7 license"></div>
            </div>
            <button class="btn btn-back button d-inline" data-action="registration#btnBack">Назад</button>
            <button class="btn btn-outline-secondary submit-filter filter__btn submit-filter d-inline" data-action="registration#btnReg">Регистрация</button>
        </div>

        <div class="register-complete d-none" data-r-token="null" data-pwd-token="null" data-type="null"> 
            <div class="form-group row smsCode d-none">
                <div class="col-12">
                    <div class="alert alertSmsCode filter" role="alert"> 
                        На номер телефона <span class="smsView"></span> был выслан код подтверждения. Введите его в поле "Код из SMS" и нажмите "Подтвердить" <br>
                        Введите пароль, который вы хотите использовать для входа в свой личный кабинет на сайте
                    </div>    
                </div>
                <label for="smsCode" class="col-sm-2 col-form-label">Код из SMS<span class="text-danger">*</span></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="smsCode">
                    <div class="msg-valid valid-smsCode"></div>
                </div>
            </div>
            <div class="form-group row emailCode d-none">
                <div class="col-12">
                    <div class="alert alertEmailView filter" role="alert"> 
                        На адрес <span class="emailView"></span> был выслан код подтверждения. Введите его в поле "Код из почты" и нажмите "Подтвердить" <br>
                        Введите пароль, который вы хотите использовать для входа в свой личный кабинет на сайте
                    </div>    
                </div>
                <label for="emailCode" class="col-md-4 col-form-label">Код из почты<span class="text-danger">*</span></label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="emailCode">
                    <div class="msg-valid valid-emailCode"></div>
                </div>
            </div>

            <div class="form-group row">
                <label for="password" class="col-md-4 col-form-label">Придумайте пароль<span class="text-danger">*</span></label>
                <div class="col-sm-8">
                    <input type="password" class="form-control" id="password">
                    <div class="msg-valid valid-confirm valid-password">не менее 7 символов</div>
                </div>
            </div>

            <div class="license"></div>
            <button class="btn btn-back button d-inline" data-action="registration#btnBack">Назад</button>
            <button class="btn button d-inline" data-action="registration#btnComplite">Подтвердить</button>
        </div>
    </div>
{% endblock %}