{% load i18n static %} {% load iclock_tags %}
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ LANGUAGE_CODE }}" xml:lang="{{ LANGUAGE_CODE }}" {% if LANGUAGE_BIDI %}dir="rtl" {% endif %}>

<head>
    <meta charset="UTF-8">
    <title>{{ software_title }}</title>
    <link rel="shortcut icon" href="{{ MEDIA_URL }}images/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32 64x64">
    <link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/it-theme-style.css' %}">
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}?v=1.0.2">
    <link rel="stylesheet" href="{% static 'css/user.login.css' %}?v=1.0.3">
    <link href="{% static 'easytimepro/css/easy-login.css' %}?v=1.0.6" rel="stylesheet">
    <script src="{% static 'cloud/static/js/jquery/jquery-3.5.1.min.js' %}?v=2.2.4"></script>
    <script src="{% static 'js/jquery/jquery.form.js' %}?v=4.2.3"></script>
    <script src="{% static 'locale/i18n.js' %}?v=1.2"></script>
    <script src="{{ STATIC_URL }}locale/i18n_{{ LANGUAGE_CODE }}.js?v=1.3"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'easytimepro/js/easy-login.min.js' %}?v=1.4" type='text/javascript'></script>
    <script src="{% static 'layer/layer.js' %}?v=1.0.1"></script>
    <script src="{% static 'layui/layui.js' %}?v=2.4.3" type="text/javascript"></script>
</head>

<body>
    <div class="container-fluid easy-login-main">
        <div class="row">
            <div class="col-lg-5 order-lg-2 col-md-6 order-md-2" id="reset-form-div">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2" id="easyLoginForm">
                        <div class="easy-margin-top">
                            {% if software_type == 10 %}
                            <div class="easy-logo-box d-flex justify-content-center">
                                <img src="{% static 'easytimepro/images/logo_easyTimePro.png' %}" alt="easyTimePro" class="easy-time-pro-logo center-block">
                            </div>
                            {% endif %}
                            <div class="mb-3 card easy-login-card">
                                <div class="card-header border-0 p-0 text-center" style="background: none;min-height:40px !important">
                                </div>
                                <div class="card-body p-0">


                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="reset-form">
                                            <form action="" method="post" class="easy-login-form" id="reset-forms" onclick="adminReset()">
                                                {% csrf_token %}
                                                {% if software_type == 10 %}

                                                <div class="card-header border-0 p-0 text-center" id="header-badge" style="background: none; min-height: 40px !important;">
                                                <a class="btn btn-lg active btn-figma align-items-center justify-content-center btn-block" style="pointer-events: none; border-radius:34px;background-color:#365F95; color:white; box-shadow:none;">Set up a new password</a>
                                                </div>
                                                {% else %}
                                    <div class="row">
                                        <div class="col-lg-10 col-lg-offset-1" id="easyLoginTab">
                                            <div class="easy-logo-box">
                                                <img src="{% static 'easytimepro/images/easy-wdms-logo.png' %}" alt="easyWdms" class="easy-time-pro-logo center-block">
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                                <p class="error_tip m" style="padding:10px;">&nbsp;</p>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <i class="fa fa-eye-slash easy-icon easy-icon-pass" id="admin_old_password_icon" onclick="viewPassword('admin_old_password')"></i>
                                                        <input type="password" autocomplete="off" name="old_password" required class="form-control admin-password" id="admin_old_password" placeholder="Old Password" style="margin-bottom:10px" oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"
                                                        />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <i class="fa fa-eye-slash easy-icon easy-icon-pass" id="admin_new_password_icon" onclick="viewPassword('admin_new_password')"></i>
                                                        <input type="password" autocomplete="off" name="new_password" required class="form-control admin-password" id="admin_new_password" placeholder="New password" style="margin-bottom:10px" oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"
                                                        />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <i class="fa fa-eye-slash easy-icon easy-icon-pass" id="admin_confirm_password_icon" onclick="viewPassword('admin_confirm_password')"></i>
                                                        <input type="password" autocomplete="off" name="confirm_password" required class="form-control admin-password" id="admin_confirm_password" placeholder="Confirm Password" style="margin-bottom:10px" oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"
                                                        />
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="d-flex justify-content-center" id="btncontainer">
                                                        <button id="id_reset" class="btn btn-default easy-login-btn reset-login-btn w-50" style="background-color: #365F95;" onmouseover="this.style.backgroundColor='#365F95';" onmouseout="this.style.backgroundColor='#365F95';">
                                                            Reset
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>




            <div class="col-lg-7 order-lg-1 col-md-6 order-md-1 easy-login-bg">
                <div class="row">
                    <div class="col-md-4 col-sm-6 col-xs-12 text-left">
                        <img src="{% static 'easytimepro/images/zkteco-logo.png' %}" alt="ZKTeco Logo" class="img-responsive easy-zk-logo" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-9 col-md-12 col-sm-12">
                        {% if software_type == 10 %}
                        <div id="easyCarousel" class="carousel carousel-fade  slide easy-login-carousel" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-bs-target="#easyCarousel" data-bs-slide-to="0" class="active"></li>
                                <li data-bs-target="#easyCarousel" data-bs-slide-to="1"></li>
                                <li data-bs-target="#easyCarousel" data-bs-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="{% static 'easytimepro/images/features/geo-fencing.png' %}" alt="Outdoor Management">
                                    <div class="carousel-caption">
                                        <h2 class="carousel-title">Outdoor Management</h2>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img src="{% static 'easytimepro/images/features/geo-fencing2.png' %}" alt="Notifications">
                                    <div class="carousel-caption">
                                        <h2 class="carousel-title">Notification Service</h2>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img src="{% static 'easytimepro/images/features/geo-fencing1.png' %}" alt="Geo Fencing">
                                    <div class="carousel-caption">
                                        <h2 class="carousel-title">GeoFencing</h2>
                                    </div>
                                </div>
                            </div>
                            <!-- Left and right controls -->
                        </div>
                        {% else %}
                        <div id="easyCarousel" class="carousel carousel-fade  slide easy-login-carousel" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-bs-target="#easyCarousel" data-bs-slide-to="0" class="active"></li>
                                <li data-bs-target="#easyCarousel" data-bs-slide-to="1"></li>
                                <li data-bs-target="#easyCarousel" data-bs-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="{% static 'easytimepro/images/features/geo-fencing3.png' %}" alt="Outdoor Management">
                                    <div class="carousel-caption">
                                        <h2 class="carousel-title">Third Party Integration</h2>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img src="{% static 'easytimepro/images/features/geo-fencing4.png' %}" alt="Notifications">
                                    <div class="carousel-caption">
                                        <h2 class="carousel-title">Raw Data Collector</h2>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img src="{% static 'easytimepro/images/features/geo-fencing5.png' %}" alt="Geo Fencing">
                                    <div class="carousel-caption">
                                        <h2 class="carousel-title">Notification Service</h2>
                                    </div>
                                </div>
                            </div>
                            <!-- Left and right controls -->
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <footer class="easy-footer">
            <div class="row justify-content-center">
                <div class="col-md-8 col-md-offset-2">
                    <p class="easy-copyright">{% trans 'Copyright ©2019 ZKTECO CO.,LTD.All rights reserved.' %}&nbsp;&nbsp;<a class="easy-forgot-pass" href="javascript:void(0);" onclick="license_details('{% url 'biotime:license' %}');">{% trans 'system_about' %}</a></p>
                </div>
            </div>
            {% if "DEMO"|get_params:request == '1' %}
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <p class='easy-copyright' style='margin-top:3px;'>{% trans 'IPAdress: 52.172.153.207 Port: 80' %}</p>
                </div>
            </div>
            {%endif%}



        </footer>
    </div>
    <!-- //End -->
    <script>
        function login() {
        window.location.href = "{% url 'biotime:login' %}"
    }


    $("#admin_password").on('input', function(){
        $("#id_reset").css({"background": "#365F95","box-shadow": "0px 10px 10px #00000033", "color": "#FFF"});
    });
    function expiredDaysCheck() {
        $.ajax({
            url: '/expiredDays/',
            type: "GET",
            dataType: "json",
            success: function (response) {
                var msg = response.msg;
                if (msg !== '') {
                    var tip = '<img src="/media/images/tip.png" style="margin-right: 4px;margin-top: -3px"/>' + msg;
                    $(".error_tip").html(tip);
                    $(".error_tip1").html(tip);
                }
            }, error: function () {

            }
        });
    }

    expiredDaysCheck();
    function adminReset(){
        $("#password_Error").text(" ");
        $('.error_tip').text(" ");
    }
        $("#reset-forms").submit(function (e) {
        e.preventDefault();
        let form = $(this);
        let csrf_token = $("input[name='csrfmiddlewaretoken']").val();
        let user_token = "{{ value }}";
        let role = "{{ role }}";
        let form_data = 'encrypt_data='+encodeURIComponent(zkEncrypt(form.serialize(),csrf_token))+'&csrfmiddlewaretoken='+encodeURIComponent(csrf_token)+'&usertoken='+encodeURIComponent(user_token)+'&role='+encodeURIComponent(role);
        $.ajax({
            type: "POST",
            url: '/reset_password/',
            data: form_data, // serializes the form's elements.
            dataType: "json",
            success: function (callback) {
                if (callback.ret === 0) {
                    $('#reset-forms').remove();
                    $('.nav-item').remove();
                    $('#header-badge').remove();
                    $('#reset-form').append(`<div class=button-container" style="text-align: center;"><p class="card-body p-0" style="color: #2b2929; font-weight: bold; text-align: center; font-size: 20px;">
                    {% trans 'password_reset_successfully' %}</p>
                    <button class="btn btn-default active easy-login-btn reset-login-btn mr-4 id ="redirectLogin" style="background-color: #365F95 !important; color: white; onmouseover="this.style.backgroundColor='#365F95';" onmouseout="this.style.backgroundColor='#365F95';"" onclick="login();">{% trans "btn_user_login" %}</button></div>`);
                } else {
                  //  var error_msg = gettext('_login_fail')
                    $(".error_tip").html(callback['message']);
                }
            }
        });
    });
   function remove_and_render(){
        $("#password_Error").text(" ");
        $('.error_tip').text(" ");
    }
    function license_details(url) {
        $.ajax({
            url: url,
            type: "GET",
            dataType: "html",
            success: function (panel) {
                layer.closeAll();
                layer.open({
                    title: 'About the system'
                    , type: 1
                    , zIndex: 1001
                    , area: ['620px', '490px']
                    , content: panel
                    , cancel: function (index) {
                        window.location.reload();
                        return true;
                    }
                });
            }, error: function () {

            }
        });
    }

    function reset_password() {
        $('#reset-form-div').css('display', 'none');
    }
    </script>
</body>

</html>