{% extends "base_AdminLTE.html"%}
{% block title %}Docklet | UserList{% endblock %}

{% block panel_title %}UserList{% endblock %}

{% block panel_list %}
<ol class="breadcrumb">
  <li>
      <a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
  </li>
  <li class="active">
      <strong>UserList</strong>
  </li>
</ol>
{% endblock %}

{% block css_src %}

<link href="//cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables_themeroller.css" rel="stylesheet">
<link href="/static/dist/css/modalconfig.css" rel="stylesheet">


{% endblock %}


{% block content %}
<div class="row">
  <div class="col-md-12">
      <div class="box box-info">
           <div class="box-header with-border">
             <h3 class="box-title">User List</h3>

             <div class="box-tools pull-right">
               <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
               </button>
               <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
             </div>
           </div>
           <div class="box-body">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#AddUserModal"><i class="fa fa-plus"></i> Add User</button>
	<div class="modal inmodal" id="AddUserModal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
             <div class="modal-content animated fadeIn">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                         <i class="fa fa-laptop modal-icon"></i>
                         <h4 class="modal-title">Add User</h4>
                         <small class="font-bold">Add a user in Docklet</small>
                     </div>
                     <div class="modal-body">
                       <form action="/user/add/" method="POST" id="addUserForm">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                          <div class="form-group">
                            <label>User Name</label>
                            <input type = "text" placeholder="Enter Username" class="form-control" name="username">
                          </div>
                          <div class="form-group">
                            <label>PASSWORD</label>
                            <input type = "password" placeholder="Enter Password" class="form-control" name="password">
                          </div>
                          <div class="form-group">
                            <label>E-mail</label>
                            <input type="email" placeholder="Enter E-mail Address" class="form-control" name="e_mail">
                          </div>
                        </form>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                         <button type="button" class="btn btn-primary" onClick="javascript:sendAddUser();">Submit</button>
                     </div>
             </div>
             </div>
           </div>
              <div class="table table-responsive">
               <table id="myDataTable" class="table table-striped table-bordered">
                 <thead>
                     <tr>
                         <th>ID</th>
                         <th>User</th>
                         <th>Name</th>
                         <th>E_mail</th>
                         <th>Tel</th>
                         <th>RegisterDate</th>
                         <th>Status</th>
                         <th>Group</th>
                         <th>Beans</th>
                         <th>Command</th>
                     </tr>
                 </thead>
                 <tbody>
                 </tbody>
                 <div class="modal inmodal" id="ModifyUserModal" tabindex="-1" role="dialog" aria-hidden="true">
                     <div class="modal-dialog">
                     <div class="modal-content animated fadeIn">
                             <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                 <i class="fa fa-laptop modal-icon"></i>
                                 <h4 class="modal-title">Modify User</h4>
                                 <small class="font-bold">Modify a user in Docklet</small>
                             </div>
                             <div class="modal-body">
                               <form action="/user/modify/" method="POST" id="modifyUserForm">
                                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                  <div class="form-group">
                                    <label>User Name</label>
                                    <input type = "text" placeholder="Enter Username" class="form-control" name="username" id="mUsername" readonly="readonly">
                                  </div>
                                  <div class="form-group">
                                    <label>Status</label>
                                    <select class="form-control" name="status" id="mStatus">
                                          <option>normal</option>
                                          <option>applying</option>
                                          <option>init</option>
                                          <option>locked</option>
                                    </select>
                                  </div>
                                  <div class="form-group">
                                    <label>True Name</label>
                                    <input type = "text" placeholder="Enter Truename" class="form-control" name="truename" id="mTruename">
                                  </div>
                                  <div class="form-group">
                                    <label>E-mail</label>
                                    <input type="email" placeholder="Enter E-mail Address" class="form-control" name="e_mail" id="mE_mail">
                                  </div>
                                  <div class="form-group">
                                    <label>Department</label>
                                    <input type = "text" placeholder="Enter Department" class="form-control" name="department" id="mDepartment">
                                  </div>
                                  <div class="form-group">
                                    <label>Student Number</label>
                                    <input type = "text" placeholder="Enter Student Number" class="form-control" name="student_number" id="mStudentNumber">
                                  </div>
                                  <div class="form-group">
                                    <label>Telephone Number</label>
                                    <input type = "text" placeholder="Enter Telephone Number" class="form-control" name="tel" id="mTel">
                                  </div>

                                  <!--div class="form-group">
                                    <label>Password</label>
                                    <input type="password" placeholder="Enter Password" class="form-control" name="password" id="mPassword">
                                  </div-->

                                  <div class="form-group">
                                    <label>User Group</label>
                                    <select class="form-control" name="group" id="mUserGroup">
                                        {% for group in groups %}
                                          <option>{{ group }}</option>
                                        {% endfor %}
                                    </select>
                                  </div>
                                  <div class="form-group">
                                    <label>Auth Method</label>
                                    <select class="form-control" name="auth_method" id="mAuthMethod">
                                          <option>local</option>
                                          <option>pam</option>
                                          <option>iaaa</option>
                                    </select>
                                  </div>

                                  <div class="form-group">
                                    <label>Description</label>
                                    <textarea class="form-control" name="description" id="mDescription" readonly="readonly">

                                    </textarea>
                                  </div>
                                </form>
                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                           <a class="btn btn-danger" data-toggle="modal" data-target="#ChpasswordModal" onClick="" id="ChpasswordButton">Change Password</a>
                           <button type="button" class="btn btn-primary" onClick="javascript:sendModifyUser();">Submit</button>
                       </div>
                     </div>
                     </div>
                 </div>
                 <div class="modal inmodal" id="ChpasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
                     <div class="modal-dialog">
                     <div class="modal-content animated fadeIn">
                             <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                 <i class="fa fa-laptop modal-icon"></i>
                                 <h4 class="modal-title">Changing Password</h4>
                             </div>
                             <div class="modal-body">
                               <form action="/user/change/" method="POST" id="chpasswordForm">
                                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                  <div class="form-group">
                                    <label>User Name</label>
                                    <input type = "text" placeholder="Enter Username" class="form-control" name="username" id="mpUsername" readonly="readonly">
                                  </div>

                                  <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" placeholder="Enter Password" class="form-control" name="password" id="mpPassword">
                                  </div>
                               </form>
                               <div class="form-group">
                                 <label>Retype Password</label>
                                 <input type="password" placeholder="Enter Password" class="form-control" id="mpPassword2">
                               </div>
                               <p style="color:red" id="notCorrectFlag"></p>

                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                           <button type="button" class="btn btn-primary" onClick="javascript:sendChpassword();">Submit</button>
                       </div>
                     </div>
                     </div>
                 </div>

         </table>
       </div>

     </div>
  </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-info">
    <div class="box-header with-border">
       <h3 class="box-title">Processing Beans Applications</h3>
       <div class="box-tools pull-right">
         <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
         </button>
         <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
       </div>
     </div>
       <div class="box-body">
                   <div class="table table-responsive">
                     <table class="table table-striped table-bordered table-hover table-image" >
                        <thead>
                    	<tr>
                        <th>Application ID</th>
                        <th>Username</th>
                        <th>Number</th>
                        <th>Submission Time</th>
                        <th>Reason</th>
                        <th>Command</th>
                    	</tr>
                    	</thead>
                    <tbody>
                      {% for application in applications %}
                      <tr>
                      <td>{{ application.id }}</td>
                      <td>{{ application.username }}</td>
                      <td>{{ application.number }} beans</td>
                      <td>{{ application.time }}</td>
                      <td>{{ application.reason }}</td>
                      <td><a class="btn btn-xs btn-info" href="/beans/admin/{{ application.username }}/{{ application.id }}/agree/">Agree</a>&nbsp;&nbsp;&nbsp;&nbsp;
                          <a class="btn btn-xs btn-danger" href="/beans/admin/{{ application.username }}/{{ application.id }}/reject/">Reject</a></td>
                      </tr>
                      {% endfor %}
                    </tbody>
		  </table>
                </div>
	  </div>
        </div>
</div>
</div>
{% endblock %}

{% block script_src %}
<script src="//cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="//cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
      var oTable = $('#myDataTable').dataTable({
        "ajax": {
              "url": "/user/list/",
              "type": "POST"
          },
      //"scrollX": true,
      "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    str='<a class="btn btn-info btn-xs" data-toggle="modal" data-target="#ModifyUserModal" onClick="javascript:setFormUser(' + row[0] + ');">' + 'Edit' + '</a>';
                    if (row[6]=='applying')
                    {
                      str=str + '<a class="btn btn-danger btn-xs" onClick="javascript:setActivateUser(' + row[0] + ');">' + 'Activate' + '</a>';
                    }
                    return str;
                },
                "targets": 9
            },
          ]

      });
      var gTable = $('#myGroupTable').dataTable({
        "ajax": {
              "url": "/group/detail/",
              "type": "POST"
          },
      //"scrollX": true,
      "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return '<a class="btn btn-info btn-sm" data-toggle="modal" data-target="#ModifyGroupModal" onClick="javascript:setFormGroup(' + row[0] + ');">' + 'Edit' + '</a>';
                },
                "targets": 6
            },
          ]

      });
    });
    function sendAddUser(){
		    document.getElementById("addUserForm").submit();
    }
    function sendAddGroup(){
        document.getElementById("addGroupForm").submit();
    }
    function sendModifyUser(){
        document.getElementById("modifyUserForm").submit();
    }
    function sendChpassword(){
        if ($("#mpPassword").val() == $("#mpPassword2").val())
        {
          document.getElementById("chpasswordForm").submit();
        }
        else
        {
          $("#notCorrectFlag").html("Two passwords are not identical");
        }
    }
    function sendModifyGroup(){
        document.getElementById("modifyGroupForm").submit();
    }
    function setFormUser(arg){
      $.post("/user/query/",
      {
        ID: arg,
      },
      function(data,status){
        var result = eval("("+data+")").data;
        $("#mUsername").val(result.username);
        $("#mTruename").val(result.truename);
        $("#mE_mail").val(result.e_mail);
        $("#mDepartment").val(result.department);
        $("#mStudentNumber").val(result.student_number);
        $("#mTel").val(result.tel);
        $("#mStatus").val(result.status);
        $("#mUserGroup").val(result.group);
        $("#mAuthMethod").val(result.auth_method);
        $("#mDescription").val(result.description);
        $("#ChpasswordButton").attr("onClick", "javascript:setFormChpassword(\"" + result.username + "\");");
      });
    }
    function setFormChpassword(arg){
      $("#mpUsername").val(arg);
    }
    function setActivateUser(arg){
      $.post("/user/change/",
      {
        ID: arg,
        Instruction: "Activate",
      },
      function(data,status){
        location.reload();
      });
    }
    $(document).ready(function() {
      $(".table-image").DataTable();
    });
</script>
{% endblock %}