<!DOCTYPE html>
<html lang="{Localisation::getCurrentHtmlLanguage()}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>{if $page_header}{$page_header}{else}{trans("Virtual Customer Service")}{/if}</title>
        <link rel="stylesheet" href="style/bclean/vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="{stylefile}">
        {$extra_css}
        <link href="{ConfigHelper::getConfig('userpanel.shortcut_icon', 'img/lms-net.gif')}" rel="shortcut icon">
        {include file="jquery.html" language=Localisation::getCurrentHtmlLanguage() lms_language=Localisation::getCurrentUiLanguage()}
        {$google_recaptcha_sitekey = ConfigHelper::getConfig('userpanel.google_recaptcha_sitekey')}
        {if $google_recaptcha_sitekey}
        <script>
			function recaptchaOnLoad() {
				grecaptcha.render('login-recaptcha', {
					'sitekey' : '{$google_recaptcha_sitekey}',
					'callback': function() {
						$('[name="loginform[submit]"]').removeClass('disabled').prop('disabled', false);
					},
					'expired-callback': function() {
						$('[name="loginform[submit]"]').addClass('disabled').prop('disabled', true);
					}
				});
				grecaptcha.render('remind-recaptcha', {
					'sitekey' : '{$google_recaptcha_sitekey}',
					'callback': function() {
						$('[name="remindform[submit]"]').removeClass('disabled').prop('disabled', false);
					},
					'expired-callback': function() {
						$('[name="remindform[submit]"]').addClass('disabled').prop('disabled', true);
                    }
				});
			}
        </script>
        <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit" async defer></script>
        {/if}
        <style>
            .form-signin {
                max-width: 400px;
                padding: 15px;
                margin: 0 auto;
            }
            .form-signin-header {
                max-width: initial;
            }
            .form-signin .form-signin-heading,
            .form-signin .checkbox {
                margin-bottom: 10px;
            }
            .form-signin .checkbox {
                font-weight: normal;
            }
            .form-signin .form-control {
                position: relative;
                height: auto;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 10px;
                font-size: 16px;
            }
            .form-signin .form-control:focus {
                z-index: 2;
            }
            .form-signin input[type="email"] {
                margin-bottom: -1px;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
            .form-signin input[type="password"] {
                margin-bottom: 10px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
            .center-block {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body class="login-form">
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <h2 class="form-signin-header text-center">
						{if $company_logo}
							<img src="{$company_logo}">
						{/if}
						{if $page_header}
							<br><small class="text-muted">{$page_header}</small>
						{/if}
						{if !$company_logo && !$page_header}
							<br><small class="text-muted">{trans('Virtual Customer Service')}</small>
						{/if}
                    </h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    {if $error}
                        <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center">
                            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000">
                                <div class="toast-header bg-light">
                                    <span class="badge badge-warning mr-1">&nbsp;</span>
                                    <strong class="mr-auto">{trans("Warning")}</strong>
                                    {button class="ml-2 mb-1 close" data-dismiss="toast" text="&times;"}
                                </div>
                                <div class="toast-body">
                                    {$error}
                                </div>
                            </div>
                        </div>
                    {/if}
                    {if $info}
                        <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center">
                            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000">
                                <div class="toast-header bg-light">
                                    <span class="badge badge-info mr-1">&nbsp;</span>
                                    <strong class="mr-auto">{trans("Information")}</strong>
                                    {button class="ml-2 mb-1 close" data-dismiss="toast" text="&times;"}
                                </div>
                                <div class="toast-body">
                                    {$info}
                                </div>
                            </div>
                        </div>
                    {/if}
                    {if !empty($authcode_required) && !$error && !$info}
                        <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center">
                            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000" style="display: none;">
                                <div class="toast-header bg-light">
                                    <span class="badge badge-info mr-1">&nbsp;</span>
                                    <strong class="mr-auto">{trans("Information")}</strong>
                                    {button class="ml-2 mb-1 close" data-dismiss="toast" text="&times;"}
                                </div>
                                <div class="toast-body">
                                </div>
                            </div>
                        </div>
                    {/if}
                    {if empty($authcode_required)}
                        {$auth_type=ConfigHelper::getConfig('userpanel.auth_type', $smarty.const.USERPANEL_AUTH_TYPE_ID_PIN)}
                        <form id="login" class="form-signin" method="post" action="{$target}">
                            <input type="submit" hidden>
                            <fieldset class="form-group">
                                <label for="inputLogin">{$_USERPANEL_AUTH_TYPES[$auth_type].label}</label>
                                <input type="text"  name="loginform[login]" id="inputLogin" class="form-control" required>
                            </fieldset>
                            <fieldset class="form-group">
                                <label for="inputPassword">{$_USERPANEL_AUTH_TYPES[$auth_type].label_secret}</label>
                                <input type="password" name="loginform[pwd]" id="inputPassword" class="form-control" required>
                            </fieldset>
                            {if $google_recaptcha_sitekey}
                                <div id="login-recaptcha" class="g-recaptcha"></div>
                            {/if}
                            <button class="btn btn-lg btn-primary btn-block{if $google_recaptcha_sitekey} disabled{/if}" name="loginform[submit]" type="submit"{if $google_recaptcha_sitekey} disabled{/if}>{trans('Login')}</button>
                            {if ConfigHelper::checkConfig('userpanel.sms_credential_reminders')
                                || ConfigHelper::checkConfig('userpanel.mail_credential_reminders')}
                                <a href="javascript:switch_form('remind');">{trans("Remind credentials")}</a>
                            {/if}
                        </form>
                    {else}
                        <form id="login" class="form-signin" method="post" action="{$target}">
                            <input type="submit" hidden>
                            <fieldset class="form-group phone-number-ui-control"{if empty($phone_numbers)} style="display: none;"{/if}>
                                <label for="phone-number">
                                    {trans("Select phone number to which one-time password will be sent.")}
                                </label>
                                <select name="loginform[phone-number]" id="phone-number" class="form-control"
                                    required
                                    {if empty($phone_numbers)} disabled{/if}>
                                    <option value="">-</option>
                                    {foreach $phone_numbers as $phone_number}
                                        {$masked_phone_number = Utils::maskPhoneNumber($phone_number)}
                                        <option value="{$masked_phone_number}">{$masked_phone_number}</option>
                                    {/foreach}
                                </select>
                            </fieldset>
                            <button class="btn btn-lg btn-primary btn-block phone-number-ui-control" id="phone-number-submit"
                                {if empty($phone_numbers)} style="display: none;"{/if}
                                >{trans("Send one-time password")}</button>
                            <fieldset class="form-group auth-code-ui-control"{if !empty($phone_numbers)} style="display: none;"{/if}>
                                <label for="authcode">{trans("One-time password")}</label>
                                <input type="text"  name="loginform[authcode]" id="authcode" class="form-control"
                                    pattern="{literal}[0-9]{6}{/literal}"
                                    required
                                    {if !empty($phone_numbers)} disabled{/if}>
                            </fieldset>
                            <button class="btn btn-lg btn-primary btn-block auth-code-ui-control" name="loginform[authcode-submit]" type="submit"
                                {if !empty($phone_numbers)} style="display: none;"{/if}
                                >{trans("Continue")}</button>
                            <p>
                                <input type="hidden" name="loginform[backtologinform]" value="1" disabled>
                                <a href="#" id="authcode-to-login-form-button">{trans("Login form")}</a>
                            </p>
                        </form>
                    {/if}
                    {if empty($authcode_required) &&
                        (ConfigHelper::checkConfig('userpanel.sms_credential_reminders')
                        || ConfigHelper::checkConfig('userpanel.mail_credential_reminders'))}
                        {$reminder_type=ConfigHelper::getConfig('userpanel.reminder_type', $smarty.const.USERPANEL_REMINDER_TYPE_SSNTEN)}
                        <form id="remind" class="form-signin" method="post" action="{$target}" style="display:none;">
                            {if ConfigHelper::checkConfig('userpanel.sms_credential_reminders') && !ConfigHelper::checkConfig('userpanel.mail_credential_reminders')}
                                <input type="hidden" name="remindform[type]" id="remindType" value="2">
                            {else}
                                <input type="hidden" name="remindform[type]" id="remindType" value="1">
                            {/if}
                            {$sms_service = ConfigHelper::getConfig('sms.service', '', true)}
                            {if !empty($sms_service) && ConfigHelper::checkConfig('userpanel.sms_credential_reminders')
                                && ConfigHelper::checkConfig('userpanel.mail_credential_reminders')}
                                <ul class="nav nav-tabs">
                                    <li class="nav-item">
                                        <a id="remindMail" class="nav-link active" onclick="javascript:show_email_phone('email');">{trans('E-mail')}</a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="remindPhone" class="nav-link"  onclick="javascript:show_email_phone('phone');">{trans('SMS')}</a>
                                    </li>
                                </ul>
                                <hr>
                            {/if}
                            {if ConfigHelper::checkConfig('userpanel.mail_credential_reminders')}
                                <fieldset id="email" class="form-group">
                                    <label>{trans('E-Mail')} <input type="text" name="remindform[email]" class="form-control"></label>
                                </fieldset>
                            {/if}
                            {if ConfigHelper::checkConfig('userpanel.sms_credential_reminders')}
                                <fieldset id="phone" class="form-group" style="{if ConfigHelper::checkConfig('userpanel.mail_credential_reminders')}display:none;{/if}">
                                    <label>{trans('Phone')} <input type="text" name="remindform[phone]"  class="form-control"></label>
                                </fieldset>
                            {/if}
                            <fieldset class="form-group">
                                <label>{$_USERPANEL_REMINDER_TYPES[$reminder_type].label} <input type="text" name="remindform[{$_USERPANEL_REMINDER_TYPES[$reminder_type].input}]" id="inputReminderType" class="form-control"></label>
                            </fieldset>
                            {if $google_recaptcha_sitekey}
                                <div id="remind-recaptcha" class="g-recaptcha"></div>
                            {/if}
                            <button class="btn btn-lg btn-primary btn-block{if $google_recaptcha_sitekey} disabled{/if}" type="submit" name="remindform[submit]" value="{trans('Remind')}"{if $google_recaptcha_sitekey} disabled{/if}>{trans('Remind')}</button>
                            <p><a href="javascript:switch_form('login');">{trans('Login form')}</a></p>
                        </form>
                    {/if}
                </div>
            </div>
        </div> <!-- /container -->
        <script src="style/bclean/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script>

            function switch_form(type) {
                if (type == 'login') {
                    document.getElementById('login').style.display = '';
                    document.getElementById('remind').style.display = 'none';
                } else {
                    document.getElementById('login').style.display = 'none';
                    document.getElementById('remind').style.display = '';
                }
            }

            function show_email_phone(type) {
                if (type == 'email') {
                    var remindMail = document.getElementById("remindMail");
                    remindMail.classList.add("active");
                    var remindPhone = document.getElementById("remindPhone");
                    remindPhone.classList.remove("active");
                    document.getElementById('email').style.display = '';
                    document.getElementById('phone').style.display = 'none';
                    document.getElementById('remindType').value = '1';
                } else {
                    var remindPhone = document.getElementById("remindPhone");
                    remindPhone.classList.add("active");
                    var remindMail = document.getElementById("remindMail");
                    remindMail.classList.remove("active");
                    document.getElementById('email').style.display = 'none';
                    document.getElementById('phone').style.display = '';
                    document.getElementById('remindType').value = '2';
                }
            }

            $(function() {
                $("#authcode-to-login-form-button").click(function() {
                    $('[name="loginform[backtologinform]"]').prop('disabled', false);
                    $("#login").submit();
                });

                $("#phone-number-submit").click(function() {
                    $(".auth-code-ui-control").show().find('.form-control').prop('disabled', false);
                    $(".phone-number-ui-control").hide().prop('disabled', true);
                    $.ajax({
                        url: "{$target}",
                        method: "POST",
                        dataType: 'json',
                        data: {
                            loginform: {
                                "phone-number": $("#phone-number").val()
                            }
                        },
                        success: function(data) {
                            if (data.hasOwnProperty("info")) {
                                $(".toast-body").text(data.info);
                                $(".toast").show().toast('show');
                            }
                        }
                    });
                });
            });

            (function() {
                var href = window.location.href;
                if (href.match(/#remind.*$/)) {
                    switch_form('remind');
                    show_email_phone(href.match(/#remind-(sms|phone)$/) ? 'phone' : 'email');
                }

                $(function() {
                    $(".toast").toast('show');
                    if (href.match(/#remind.*$/)) {
                        $("#remind").find(".form-control:visible").first().focus();
                    } else {
                        $("#inputlogin").focus();
                    }
                });
            })();

        </script>
    </body>
</html>
