{% extends 'pos_system/base.html' %}
{% load static %}

{% block content %}

<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">



        <div class="account-pages my-5">
            <div class="">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6 col-xl-5">
                        <div class="card overflow-hidden">
                            <div class="bg-primary bg-soft">
                                <div class="row">
                                    <div class="col-7">
                                        <div class="text-primary p-4">
                                            <h5 class="text-primary">Hello {{request.user}} !</h5>
                                            <p>Change Password</p>
                                        </div>
                                    </div>
                                    <div class="col-5 align-self-end">
                                        <img src="{% static 'images/profile-img.png' %}" alt="" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                            <div class="card-body pt-0"> 
                                <div class="auth-logo">
                                    <a href="index.html" class="auth-logo-light">
                                        <div class="avatar-md profile-user-wid mb-4">
                                            <span class="avatar-title rounded-circle bg-light">
                                                <img src="{% static 'images/logo-light.svg' %}" alt="" class="rounded-circle" height="34">
                                            </span>
                                        </div>
                                    </a>

                                    <a href="index.html" class="auth-logo-dark">
                                        <div class="avatar-md profile-user-wid mb-4">
                                            <span class="avatar-title rounded-circle bg-light">
                                                <img src="{% static 'images/logo.svg' %}" alt="" class="rounded-circle" height="34">
                                            </span>
                                        </div>
                                    </a>
                                </div>
                                <div class="p-2">
                                    <form class="form-horizontal" method="POST">
                                        {% csrf_token %}
                                        {% if error_message %}
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            {{ error_message }}
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>        
                                        </div>
                                        {% endif %}
                                        <div class="mb-3">
                                            <label for="username" class="form-label" >New Password</label>
                                            <div class="input-group auth-pass-inputgroup">
                                                <input onkeyup="check_password()" type="password" id="pass1" class="form-control" required placeholder="Password" >
                                                <button class="btn btn-light " type="button" id="password-addon"><i class="mdi mdi-eye-outline"></i></button>
                                            </div>
                                        </div>
                
                                        <div class="mb-3">
                                            <label class="form-label">Confirm Password</label>
                                            <div class="input-group auth-pass-inputgroup">
                                                <input  onkeyup="check_password()" type="password" name="new_password" class="form-control" required id="pass2" placeholder="Re-Type Password">
                                                <button class="btn btn-light " type="button" id="password-addon2"><i class="mdi mdi-eye-outline"></i></button>
                                            </div>
                                        </div>

                                        <!-- <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="remember-check">
                                            <label class="form-check-label" for="remember-check">
                                                Remember me
                                            </label>
                                        </div> -->
                                        
                                        <div class="mt-3 d-grid">
                                            <button id="btn" disabled class="btn btn-primary waves-effect waves-light" type="submit">Change Passowrd</button>
                                        </div>
                                    </form>
                                </div>
            
                            </div>
                        </div>

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



        <script>
            $('#password-addon2').click(function(){
                if ($('#pass2').attr('type') == 'password'){
                    $('#pass2').attr('type','text')
                }
                else{
                    $('#pass2').attr('type','password')
                }
            })
            function check_password () {
                var p1 = $('#pass1').val()
                var p2 = $('#pass2').val()

                if (p1==p2){
                    $('#btn').attr('disabled', false)
                    $('#pass1').css('border','1px solid green')
                    $('#pass2').css('border','1px solid green')
                }
                else{
                    $('#btn').attr('disabled', true)
                    $('#pass1').css('border','1px solid red')
                    $('#pass2').css('border','1px solid red')
                }   
            }
        </script>

{% endblock %}