{% load i18n static %}
<html lang="en">
<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 href="{% static 'easytimepro/css/easy-login.css' %}" rel="stylesheet">
    <script src="{% static 'cloud/static/js/jquery/jquery-3.5.1.min.js' %}?v=2.2.4"></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.js' %}" 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">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2" id="easyLoginForm">
                    <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" id="form_card">
                                <form action="" method="post" class="easy-login-form m-0" id="password_reset">
                                    {% csrf_token %}
                                    <h4 class="easy-login-heading mb-2">{% trans "password_reset" %}</h4>
                                    <p class="error_tip1" style="color:red;">&nbsp;</p>
                                    <input name="code" id="code" value="{{ id }}" type="hidden">
                                    <div class="form-group mb-4">
                                        <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" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                                   title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                                                   id="admin_password" name="password" required
                                                   class="form-control admin_password"
                                                   placeholder="{% trans 'user_field_password' %}"/>
                                        </div>
                                    </div>
                                    <div class="form-group mb-4">
                                        <div class="inner-addon right-addon">
                                            <i class="fa fa-eye-slash easy-icon easy-icon-pass"
                                               id="confirm_password_icon"
                                               onclick="viewPassword('confirm_password')"></i>
                                            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                                   title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                                                   id="confirm_password" name="confirm_password" required
                                                   class="form-control confirm_password"
                                                   placeholder="{% trans 'user_createForm_passwordConfirmation' %}"/>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class=button-container" style="text-align: center;">
                                            <button class="btn btn-default easy-login-btn reset-login-btn mr-4"
                                                    onclick="login();">{% trans "btn_user_login" %}</button>
                                            <button class="btn btn-default easy-login-btn reset-login-btn ml-4">{% trans "reset_password" %}</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-md-9 col-sm-12">
                    <div id="easyCarousel" class="carousel carousel-fade  slide easy-login-carousel"
                         data-bs-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <button data-bs-target="#easyCarousel" data-bs-slide-to="0" class="active"></button>
                            <button data-bs-target="#easyCarousel" data-bs-slide-to="1"></button>
                            <button data-bs-target="#easyCarousel" data-bs-slide-to="2"></button>
                        </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">Notifications</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">Geo Fencing</h2>
                                </div>
                            </div>
                        </div>
                        <!-- Left and right controls -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //End -->
<script>
    function login() {
        window.location.href = "{% url 'biotime:login' %}"
    }

    $("#password_reset").submit(function (e) {
        e.preventDefault();
        var data = {
            'code': $('#code').val(),
            'password': $('#admin_password').val(),
            'confirm_password': $('#confirm_password').val(),
            csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val()
        };
        var form = $(this);
        $.ajax({
            type: "POST",
            url: "/accounts/easytime_reset_pwd/",
            data: data,
            dataType: "json",
            success: function (callback) {
                if (callback.ret === 0) {
                    $('#password_reset').remove();
                    $('#form_card').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: 40px;">
                            {% trans 'password_reset_successfully' %}</p>
                        <button class="btn btn-default easy-login-btn reset-login-btn mr-4"
                            onclick="login();">{% trans "btn_user_login" %}</button>
                    </div>`);
                } else {
                    $(".error_tip1").html(callback.msg);
                }
            }
        });
    });
</script>
</body>
</html>
