{% extends 'base.html' %}
{% load static %}
{% block title %}
<title>Change Password</title>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
<link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


{% endblock %}
{% block content %}
<div class="container-scroller">
   {% ifequal request.session.userrole 'customer' %}
   {% include 'customer_header.html' %}
   {% endifequal %}
   {% ifequal request.session.userrole 'driver' %}
   {% include 'driver_header.html' %}
   {% endifequal %}
   {% ifequal request.session.userrole 'admin' %}
   {% include 'admin_header.html' %}
   {% endifequal %}
   {% ifequal request.session.userrole 'superadmin' %}
   {% include 'admin_header.html' %}
   {% endifequal %}
   <div class="container-fluid page-body-wrapper">
      {% ifequal request.session.userrole 'customer' %}
      {% include 'customer_sidebar.html' %}
      {% endifequal %}
      {% ifequal request.session.userrole 'driver' %}
      {% include 'driver_sidebar.html' %}
      {% endifequal %}
      {% ifequal request.session.userrole 'admin' %}
      {% include 'admin_sidebar.html' %}
      {% endifequal %}
      {% ifequal request.session.userrole 'superadmin' %}
      {% include 'admin_sidebar.html' %}
      {% endifequal %}
      <div class="main-panel chnge-pwd  change-pwd-c">
         <div class="content-wrapper">
            <!-- <div class="page-header justify-content-center">
               <h3 class="page-title  text-sec">Change Password</h3>
               </div> -->
            <div class="">
               <div class="row">
                  <div class="col-md-4">
                     <div class="profile-sec">
                        <div class="profile-header">
                           <h5> Profile </h5>
                        </div>
                        <div class="profile-sec-img">
                           <img src="{% if userimage %}{{userimage}}{% else %}{% static 'images/camera.png' %}{% endif %}">
                        </div>
                        <div class="profile-data">
                           <h4>{{userdetail.name}}</h4>
                           
                           {% ifequal request.session.userrole 'customer' %}<h5>Customer</h5>{% endifequal %}
                           {% ifequal request.session.userrole 'driver' %}<h5>Driver</h5>{% endifequal %}
                           {% ifequal request.session.userrole 'admin' %}<h5>Admin</h5>{% endifequal %}
                           {% ifequal request.session.userrole 'superadmin' %}
                           <h5>SuperAdmin</h5>   
                           <div class="socl-icons">
                              <a href="#"><i class="mdi mdi-email-outline menu-icon"></i></a>
                              <a href="#"><i class="mdi mdi-phone menu-icon"></i></a>
                              <a href="#"><i class="mdi mdi-heart menu-icon"></i></a>
                           </div>
                           {% endifequal %}
                        </div>
                        {% ifequal request.session.userrole 'superadmin' %}
                        <div class="profile-text">
                           <p>A SuperAdmin can :</p>
                           <ul>
                              <li> Manage the access and level of responsibility of all users on all sites on your network </li>
                              <li>Manage the jobs assignment, closing the jobs, driver assignment, and users restrictions</li>
                              <li>Create new users and new jobs</li>
                              <li>Edit posts, pages, can chat with any driver</li>
                              <li>Reset passwords and change users’ profile details and more</li>
                           </ul>
                        </div>
                        {% endifequal %}
                        {% ifequal request.session.userrole 'driver' %}
                        <div class="profile-email-data">
                           <h5 class="email-t"><span class="e">Email  </span>   <span  class="e1"> :</span> <span class="e2">{{userdetail.email}} </span></h5>
                           <h5  class="email-d" ><span class="e3">Designation </span><span class="e4"> : </span> <span class="e5"> Driver </span> </h5>

                        </div>
                        {% endifequal %}
                     </div>
                  </div>
                  <div class="col-md-8">
                     <div class="right-sec-profile">
                        <div class="upper-text">
                           <h2 style="">You can change your Account Password Here. </h2>
                           <h4 style="">Make sure to set a Strong Password
                           </h4>
                        </div>
                        {% csrf_token %}
                        <form class="forms-sample">
                           <div class="form-group">
                              <label for="oldpassword">Old Password</label>
                              <input type="password" class="form-control" id="oldpassword">
                              <span toggle="#oldpassword" class="mdi fa-eye fa  menu-icon icon-eye-1 field-icon toggle-password"></span>
                              <span class="text-danger" id="oldpassword_txt"></span>
                           </div>
                           <div class="form-group">
                              <label for="newpassword">New Password</label>
                              <input type="password" class="form-control" id="newpassword">
                              <span toggle="#newpassword" class="mdi fa-eye fa menu-icon icon-eye-1 field-icon toggle-password"></span>
                              <span class="text-danger" id="newpassword_txt"></span>
                           </div>
                           <div class="form-group">
                              <label for="confirmnewpassword">Confirm New Password</label>
                              <input type="password" class="form-control" id="confirmnewpassword">
                              <span toggle="#confirmnewpassword" class="mdi fa-eye fa menu-icon icon-eye-1 field-icon toggle-password"></span>
                              <span class="text-danger" id="confirmnewpassword_txt"></span>
                           </div>
                           <span id="userrole" hidden>{{userrole}}</span>
                           <button type="button" id="change-password-btn" class="btn btn-gradient-primary btn-rounded btn-fw">Update</button>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         {% include 'customer_footer.html' %}
      </div>
   </div>
</div>
<div id="loading-img" style="display:none;">
   <img src="{% static 'images/loading-12.gif' %}">
</div>
<div class="modal fade error-popup" id="ErrorMessageModal" role="dialog" >
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header border-0">
            <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
         </div>
         <div class="modal-body">
            <h3 id="error-msg"></h3>
            <button type="button"  id="close-btn" data-dismiss="modal">Ok</button>
         </div>
      </div>
   </div>
</div>
<div class="modal fade" id="success_modal_updated" role="dialog" >
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- <div class="modal-header border-0"> -->
          <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
   <!--      </div> -->
        <div class="modal-body">
         <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
          <h3 class="response-msg">Password updated successfully.</h3>
        </div>          
      </div>
    </div>
   </div>
{% endblock %}
{% block js %}
<script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
<script src="{% static 'assets/vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'assets/js/off-canvas.js' %}"></script>
<script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
<script src="{% static 'assets/js/misc.js' %}"></script>
<script src="{% static 'assets/js/dashboard.js' %}"></script>
<script src="{% static 'assets/js/todolist.js' %}"></script>
<script src="{% static '/js/changepassword.js' %}"></script>
{% endblock %}