{% 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 rel="stylesheet" href="{% static 'easytimepro/css/easy-login.css' %}?v=1.0.6" >
    <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 h-100" id="login-form-div">
            <div class="row">
                <div class="col-lg-10 offset-lg-1" 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">
                                {% if software_type == 10 %}
                                    <div class="row d-flex justify-content-center">
                                        <div class="col-lg-10 col-lg-offset-1" id="easyLoginTab">
                                            <ul class="nav nav-tabs easy-nav-tabs" role="tablist"
                                                style="margin-left: 70px;min-width:400px;">
                                                <li class="nav-item"><a class="nav-link active" href="#login-form"
                                                                      data-bs-toggle="tab">{% trans "user_login" %}</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link" onclick="employeeLoginStatus()" href="#emp-login-form"
                                                       data-bs-toggle="tab">{% trans "employee_self" %}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="row">
                                        <div class="col-lg-10 col-lg-offset-1" id="easyLoginTab">
                                            <div class="easy-logo-box d-flex justify-content-center">
                                                <img src="{% static 'easytimepro/images/easy-wdms-logo.png' %}"
                                                     alt="easyWdms"
                                                     class="easy-time-pro-logo center-block">
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane show active" id="login-form">
                                        <form action="" method="post" class="easy-login-form" id="login-forms">
                                            {% csrf_token %}
                                            <p class="error_tip">&nbsp;</p>
                                            <div class="form-group">
                                                <div class="inner-addon right-addon">
                                                    <input type="text" id="id_username" autocomplete="off"
                                                           name="username" required class="form-control admin-email"
                                                           placeholder="{% trans 'user_field_username' %}*"
                                                           oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"/>
                                                </div>
                                                <p id="userName_Error" style="color:red;margin-left:12px;margin-bottom: 30px;margin-top: 4px;"></p>
                                            </div>
                                            <div class="form-group">
                                                <div class="inner-addon right-addon">
                                                    <i class="fa fa-eye-slash easy-icon easy-icon-pass"
                                                       id="admin_password_icon"
                                                       onclick="viewPassword('admin_password')"></i>
                                                    <input type="password" autocomplete="off"
                                                           name="password" required class="form-control admin-password"
                                                           id="admin_password"
                                                           placeholder="{% trans 'user_field_password' %}*"
                                                           oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"/>
                                                </div>
                                                <p id="password_Error" style="color:red;margin-left:12px;margin-top: 4px;margin-bottom:30px"></p>
                                            </div>
                                            <div class="row" style="visibility: hidden;">
                                                <div class="col-md-12">
                                                    <div class="text-right">
                                                        <a href="" class="easy-forgot-pass">Forgot Password?</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-md-8 col-sm-10 col-12 d-flex justify-content-center">
                                                    <button id="id_login"  onclick="adminLogin()"
                                                            class="btn btn-default easy-login-btn admin-login-btn w-75" style="max-width :180px;">
                                                        {% trans "btn_user_login" %}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="hidden"><input type="hidden" id="id_template10" value=""
                                                                       name="template10" alt=""/>
                                                <input type="hidden" style="display: none;" id="id_login_type"
                                                       name="login_type" alt=""
                                                       value='pwd'/></div>
                                        </form>
                                    </div>
                                    <div role="tabpanel" class="tab-pane " id="emp-login-form">
                                        <form action="" method="post" class="easy-login-form" id="emp-login-forms">
                                            {% csrf_token %}
                                            <p class="error_tip1" id="error-tip1" style="color:#ff0000;">&nbsp;</p>
                                            <div class="form-group">
                                                <div class="inner-addon right-addon">
                                                    <input type="text" id="emp-email" name="username" required
                                                           autocomplete="off"
                                                           class="form-control emp-email"
                                                           oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"
                                                           {% if "Multi_company"|get_params:request == '1' %}
                                                                placeholder="{% trans "email_id_or_mobile_no" %}*"/>
                                                            {% else %}
                                                                placeholder="{% trans "employee_id_email_id_or_mobile_no" %}*"/>
                                                            {% endif %}
                                                </div>
                                                <p id="empEmail_Error" style="color:red;margin-left:12px;margin-bottom: 30px;margin-top: 4px;"></p>
                                            </div>
                                            <div class="form-group">
                                                <div class="inner-addon right-addon">
                                                    <i class="fa fa-eye-slash easy-icon easy-icon-pass"
                                                       id="emp_password_icon"
                                                       onclick="viewPassword('emp_password')"></i>
                                                    <input type="password" name="password" required autocomplete="off"
                                                           class="form-control emp-password" id="emp_password"
                                                            placeholder="{% trans 'user_field_password' %}*"
                                                            oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')"/>
                                                </div>
                                                <p id="empPassword_Error" style="color:red;margin-left:12px;margin-top:4px;margin-bottom:30px"></p>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="text-right text-end">
                                                        <a href="javascript:void(0);" onclick="reset_password();"
                                                           class="easy-forgot-pass">{% trans "forgot_password" %}</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-md-8 col-sm-10 col-12 d-flex justify-content-center">
                                                    <button id="id_empLogin"  onclick="employeeLogin();"
                                                            class="btn btn-default easy-login-btn emp-login-btn w-75" style="max-width :180px;">
                                                        {% trans "btn_user_login" %}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="hidden" style="display: none;"><input type="hidden"
                                                                                              value="employee"
                                                                                              name="login_user"></div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
        <div class="col-lg-5 order-lg-2 col-md-6 order-md-2" id="password-confirm-div" style="display:none;">
            <div class="row d-flex justify-content-center">
                <div class="col-lg-9 col-lg-offset-2">
                    <div class="easy-pwd-reset-mt">
                        <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>
                        <div class="mb-3 card easy-login-card">
                            <div class="card-header border-0 p-0 text-left" style="background: none;">

                            </div>
                            <div class="card-body p-0">
                                <div class="easy-login-form m-0">
                                    <img src="{% static 'easytimepro/images/email-sent-icon.svg' %}" alt="email"
                                         class="img-responsive center-block email-confrm-img"/>
                                    <p id="easy-confirm-note"></p>
                                    <p class="easy-confirm-note-2">{% trans "click_on_the_link_in_your_email_to_reset_your_password" %}</p>

                                    <div class="d-flex justify-content-center">
                                        <button class="btn btn-default easy-login-btn reset-login-btn btn-block w-50"
                                                onclick="login();">{% trans "btn_user_login" %}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 order-lg-2 col-md-6 order-md-2" id="reset-password-form" style="display:none;">
            <div class="row d-flex justify-content-center">
                <div class="col-lg-9 col-lg-offset-2">
                    <div class="easy-pwd-reset-mt">
                        <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>
                        <div class="mb-3 card easy-login-card">
                            <div class="card-header border-0 p-0 text-left" style="background: none;">

                            </div>

                            <div class="card-body p-0">
                                <form action="" class="easy-login-form m-0" id="reset-loginPassword-forms">
                                    <h4 class="easy-login-heading">{% trans "password_reset" %}</h4>
                                    <p class="error_tip2" style="color:red;">&nbsp;</p>
                                    <div class="form-group">
                                        <div class="inner-addon right-addon">
                                            <i class="fa fa-envelope easy-icon easy-icon-email"></i>
                                            <input type="email" autocomplete="off" id="emp-email2" required
                                                   class="form-control registered-email"
                                                   placeholder="{% trans 'register_email_id' %}"/>
                                        </div>
                                    </div>
                                    <p class="easy-login-note">{% trans "we_will_send_you_the_reset_password_link" %}</p>

                                    <div class="row">
                                        <div class="button-container" style="text-align: center;">
                                            <button class="btn btn-default easy-login-btn reset-login-btn mr-4" style="width: 100px;"
                                                    onclick="login();">{% trans "btn_user_login" %}</button>
                                            <button class="btn btn-default easy-login-btn reset-login-btn ml-4">{% trans "send_link" %}</button>
                                        </div>
                                    </div>
                                </form>
                            </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-bs-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-bs-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 justify-content-center">
            <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>
    $("#admin_password").on('input', function(){
        $("#id_login").css({"background": "#365F95","box-shadow": "0px 10px 10px #00000033", "color": "#FFF"});
    });
    $("#emp_password").on('input', function(){
        $("#id_empLogin").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();
    $('#id_username').on('input focusout', function() {
        var usernameValue = $(this).val().trim();
        $("#userName_Error").text("");
            if (!usernameValue) {
                $("#userName_Error").text("Username is required");
            }
    });
     $('#id_username').bind("cut copy paste",function(e) {
         e.preventDefault();
     });
     $('#admin_password').bind("cut copy paste",function(e) {
         e.preventDefault();
     });

    $('#admin_password').on('input focusout', function() {
        var passwordValue = $(this).val().trim();
        $("#password_Error").text("");
        if (!passwordValue) {
            $("#password_Error").text("Password is required");
        }
    });

    function adminLogin(){
        var admin_name = $('#id_username').val().trim();
        var admin_pass = $('#admin_password').val().trim();
        if (!admin_name) {
            $("#userName_Error").text("Username is required");
        }
        if (!admin_pass) {
            $("#password_Error").text("Password is required");
        }
    }
        $("#login-forms").submit(function (e) {
        e.preventDefault();
        let form = $(this);
        let csrf_token = $("input[name='csrfmiddlewaretoken']").val()
        let form_data = 'encrypt_data='+encodeURIComponent(zkEncrypt(form.serialize(),csrf_token))+'&csrfmiddlewaretoken='+encodeURIComponent(csrf_token);
        $.ajax({
            type: "POST",
            url: {{ login_url }},
            data: form_data, // serializes the form's elements.
            dataType: "json",
            success: function (callback) {
                if (callback.ret === 0) {
                    location.reload();
                } else {
                  //  var error_msg = gettext('employee_login_fail')
                    $(".error_tip").html(callback['message']);
                }
            }
        });
    });

    $('#emp-email').on('input focusout', function() {
        var usernameValue = $(this).val().trim();
        var error_message = $('#emp-email').attr('placeholder')
        $("#empEmail_Error").text("");
        if (!usernameValue) {
            if (error_message == "{% trans "email_id_or_mobile_no" %}*"){
                $("#empEmail_Error").text("Email ID or Mobile No is required");
            }
            else {
                $("#empEmail_Error").text("Employee ID or Email ID or Mobile No is required");
            }
        }
    });

    $('#emp_password').on('input focusout', function() {
        var passwordValue = $(this).val().trim();
        $("#empPassword_Error").text("");
        if (!passwordValue) {
            $("#empPassword_Error").text("Password is required");
        }
    });

    $('#emp-email').bind("cut copy paste",function(e) {
         e.preventDefault();
     });
     $('#emp_password').bind("cut copy paste",function(e) {
         e.preventDefault();
     });

    function employeeLogin(){
        var emp_name = $('#emp-email').val().trim();
        var emp_pass = $('#emp_password').val().trim();
        var error_message = $('#emp-email').attr('placeholder')
        if (!emp_name) {
            if (error_message == "{% trans "email_id_or_mobile_no" %}*"){
                $("#empEmail_Error").text("Email ID or Mobile No is required");
            }
            else{
                $("#empEmail_Error").text("Employee ID or Email ID or Mobile No is required");
            }
        }
        if (!emp_pass) {
            $("#empPassword_Error").text("Password is required");
        }
    }
        $("#emp-login-forms").submit(function (e) {
        e.preventDefault();
        let form = $(this);
        let csrf_token = $("input[name='csrfmiddlewaretoken']").val()
        let form_data = 'encrypt_data='+encodeURIComponent(zkEncrypt(form.serialize(),csrf_token))+'&csrfmiddlewaretoken='+encodeURIComponent(csrf_token);
        $.ajax({
            type: "POST",
            url: {{ login_url }},
            data: form_data, // serializes the form's elements.
            dataType: "json",
            success: function (callback) {
                if (callback.ret === 0) {
                    location.reload();
                } else {
                    var error_msg = gettext('employee_login_fail')
                    $(".error_tip1").html(callback['message']);
                }
            }
        });
    });

    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() {
        $('#login-form-div').css('display', 'none');
        $("#reset-password-form").css('display', 'block');
    }

    $("#reset-loginPassword-forms").submit(function (e) {
        e.preventDefault();
        var email = $('#emp-email2').val();
        $.ajax({
            url: '/accounts/password_reset_mail_easytimepro/?email=' + email,
            type: "GET",
            dataType: "json",
            success: function (response) {
                if (response.msg == 'success') {
                    $('#easy-confirm-note').append(`<p style="text-align: center;padding-top: 25px;padding-bottom: 25px">
                        {% trans "we_will_send_you_the_link_to_reset_password" %}`+ " " + `<b style="color:red">${ response.count}</b> time.</p>`);
                    $("#reset-password-form").css('display', 'none');
                    $('#password-confirm-div').css('display', 'block');
                } else {
                    $('.error_tip2').html(response.msg);
                }
            }, error: function () {

            }
        });
    });
    function login() {
        location.reload();
    }
    function employeeLoginStatus(){
        var employee_login_status = {{employee_login_status}}
        if(employee_login_status==0){
         var login_message_display = '{{login_message_display}}'
             if(login_message_display.length > 250){
                 document.getElementById("error-tip1").style.overflow = "auto";
                 document.getElementById("error-tip1").style.height = "auto";
             }
             $(".error_tip1").html(login_message_display);
             $( "#emp_password" ).hide();
             $( "#emp-email" ).hide();
             $('.easy-forgot-pass').hide()
             $('#emp_password_icon').hide()
             $('#id_empLogin').hide()
         }
        
    //     $.ajax(
    //     {
    //         url: "/api/sys_settings/"
    //         ,type: "GET"
    //         ,dataType: "json"
    //         ,success: function (response) {
    //             if(response.employee_login_status){
    //                 if(response.login_message_display.length > 250){
    //                     document.getElementById("error-tip1").style.overflow = "auto";
    //                     document.getElementById("error-tip1").style.height = "auto";
    //                 }
    //                 $(".error_tip1").html(response.login_message_display);
    //                 $( "#emp_password" ).hide();
    //                 $( "#emp-email" ).hide();
    //                 $('.easy-forgot-pass').hide()
    //                 $('#emp_password_icon').hide()
    //                 $('#id_empLogin').hide()
    //             }
    //             else{
    //                 $('#emp_password_icon').show()
    //             }
    //         }
    //     }
    // )
    }
</script>
</body>
</html>
