{% set custom_signup_content = frappe.db.get_single_value("LMS Settings", "custom_signup_content") %}
<form class="signup-form" role="form">
    <div class="page-card-body">
        <div class="form-group">
            <label class="form-label sr-only" for="signup_fullname"> {{ _("Full Name") }} </label>
            <input type="text" id="signup_fullname" class="form-control" placeholder="{{ _('Jane Doe') }}"
            required autofocus>
        </div>
        <div class="form-group">
            <label class="form-label sr-only" for="signup_email"> {{ _("Email") }} </label>
            <input type="email" id="signup_email" class="form-control"
            placeholder="{{ _('jane@example.com') }}" required>
        </div>
        <div class="form-group">
            <label class="form-label sr-only" for="signup_phone"> {{ _("Phone") }} </label>
            <input type="phone" id="signup_phone" class="form-control"
            placeholder="{{ _('+79990009900') }}" required>
        </div>

        {% if frappe.db.get_single_value("LMS Settings", "user_category") %}
        <div class="form-group">
            <label class="form-label sr-only"> {{ _("Role") }} </label>
            <div class="control-input-wrapper">
                <div class="control-input flex align-center">
                    <select type="text" id="user_role" data-fieldname="user_role" style="color: var(--text-muted)"
                    class="input-with-feedback form-control ellipsis" data-fieldtype="Select" required>
                        <option value=""> {{ _("Role") }} </option>
                        <option value="LMS Student"> {{ _("Student") }} </option>
                        <option value="LMS Schoolchild"> {{ _("Ученик 11 класса") }} </option>
                        <option value="Course Creator"> {{ _("Учитель/Репетитор") }} </option>
                        <option value="Parent"> {{ _("Parent") }} </option>
                    </select>
                </div>
            </div>
        </div>
        {% endif %}

        {% if custom_signup_content %}
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <span class="input-area">
                    <input type="checkbox" autocomplete="off" class="input-with-feedback"
                        data-fieldtype="Check" data-fieldname="terms" id="signup-terms" required>
                    </span>
                    <span class="label-area">
                    {{ custom_signup_content }}
                    </span>
                </label>
            </div>
        </div>
        {% endif %}
    </div>
    <p style="font-size: 12px;">
        {{ _("Проверьте почту — там письмо для подтверждения регистрации. Если его нет во «Входящих», проверьте «Спам».") }}
    </p>
    <div class="page-card-actions">
        <button class="btn btn-sm btn-primary btn-block btn-signup"
            type="submit">{{ _("Sign up") }}</button>

        <p class="text-center sign-up-message">
            <a href="#login" class="blue">{{ _("Have an account? Login") }}</a>
        </p>
    </div>
</form>

<script>
    frappe.ready(function () {
        $("#user_category").on("change", (e) => {
            style_category(e);
        });

        $(".signup-form").on("submit", (e) => {
            signup(e);
        });
    });

    const style_category = (e) => {
        let category_color = $(e.currentTarget).val() ? "var(--text-color)" : "var(--text-muted)";
        $("#user_category").css("color", category_color);
    }

    const signup = (e) => {
        e.preventDefault();
        const email = ($("#signup_email").val() || "").trim();
        const full_name = frappe.utils.xss_sanitise(($("#signup_fullname").val() || "").trim());
        const phone = ($("#signup_phone").val() || "").trim();

        if (!email || !validate_email(email) || !full_name || !validate_phone(phone)) {
            login.set_status('{{ _("Valid email, name, and phone required") }}', 'red');
            return false;
        }

        frappe.call({
            method: "lms.overrides.user.sign_up",
            args: {
                "email": email,
                "full_name": full_name,
                "phone": phone,
                "verify_terms": $("#signup-terms").prop("checked") ? 1 : 0,
                "user_category": $("#user_category").length ?  $("#user_category").val() : "",
                "user_role": $("#user_role").length ? $("#user_role").val() : ""
            },
            statusCode: login.login_handlers
        })
        return false;
    }

    const validate_phone = (phone) => {
        const phone_regex = /^[0-9\-\+\s]{10,15}$/;
        return phone_regex.test(phone);
    }
</script>