
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SHMA | Update User</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css'%}">
  <!-- Bootstrap4 Duallistbox -->
  <link rel="stylesheet" href="{% static 'plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css'%}">
<!-- Font Awesome -->
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/custom.css' %}">
  <style>
    {% comment %} .spinner-container{
      display: block;
    } {% endcomment %}
</style>
</head>
<body class="hold-transition sidebar-mini layout-navbar-fixed">
<!-- Site wrapper -->
<div class="wrapper">
<!-- ========== Nav ==============-->
{% include 'parts/navbar.html' %}
<!--========== Nav ==============-->
<!-- ========== Aside ==============-->
{% include 'parts/sidemenu.html' %}
<!--========== Aside ==============-->
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Update User</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Update User</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Update User</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
         
          
                   <!--..spinner start-->
                   <div class="spinner-container" id="spinner-container-init-edit">
                    <div class="spinner-overlay">
                      <div class="spin"></div>
                    </div>
                  </div>
                  <!--spinner end-->
           <!--spinner end-->
           <form id="user-form">
            <div class="row">
              {% csrf_token %}
              <input type="hidden" value="{{ selected_user.token }}" class="form-control" id="selected-user-token">
              <!--Middle Name-->
              <div class="col-md-4">
              <div class="form-group">
                <label class="col-form-label" for="user-name">User Name:*</label>
                <input type="text" id="user-name" value="{{ selected_user.username }}" class="form-control form-control-sm"  placeholder="User Name ...">
              </div>
            </div>
            
              <!--First Name-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="first-name">First Name:*</label>
                  <input type="text" id="first-name" value="{{ selected_user.first_name }}" class="form-control form-control-sm"  placeholder="First Name ...">
                </div>
              </div>

              <!--Last Name-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="last-name">Last Name:*</label>
                  <input type="text" id="last-name" value="{{ selected_user.last_name }}" class="form-control form-control-sm"  placeholder="Last Name ...">
                </div>
              </div>

              <!--Phone Number-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="phoneno">Phone Number:</label>
                  <input type="text" id="phoneno"  value="{% if selected_user.profile.phoneno %}{{ selected_user.profile.phoneno }}{% endif %}" class="form-control form-control-sm"  placeholder="Phone Number ...">
                </div>
              </div>
              <!--Birth Date-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="birth-date">Birth Date:</label>
                  <input type="date" id="birth-date" value="{{ selected_user.profile.birth_date }}"  class="form-control form-control-sm">
                </div>
              </div>

              <!--District-->
              <div class="col-md-4 align-self-end">
                <!-- select -->
                <div class="form-group">
                  <label for="gender">Gender:*</label>
                  <select id="gender" class="form-control form-control-sm rounded-0">
                    <option>--SELECT GENDER--</option>
                    {% for gender in genders %}
                    <option value="{{ gender.id }}" {% if selected_user.profile.gender.id == gender.id %}selected{% endif %}>{{ gender.gender_name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <!--Village-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="email">Email:</label>
                  <input type="text" id="email" value="{{ selected_user.email }}" class="form-control form-control-sm" placeholder="Email ...">
                </div>
              </div>

              <!--Diagnosis-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="address">Address:</label>
                  <input type="textarea" id="address"  value="{% if selected_user.profile.address %}{{ selected_user.profile.address }}{% endif %}" class="form-control form-control-sm" placeholder="Address ..."></textarea>
                </div>
              </div>

              <!--Next Of Kin-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="new-password">New password (default: 123456):</label>
                  <input type="password" id="new-password" class="form-control form-control-sm" placeholder="New password...">
                </div>
              </div>

              <!--Nok Phone Number-->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label" for="confirm-password">Confirm password:</label>
                  <input type="password" id="confirm-password" class="form-control form-control-sm" placeholder="Confirm password ...">
                  {% comment %} <input type="text" id="nok-phoneno" class="form-control form-control-sm" > {% endcomment %}
                </div>
              </div>

              <!--Sent By-->
              <div class="col-md-8">
                <div class="form-group">
                  <label class="col-form-label" for="sent-by">Bio:</label>
                  <input type="text" id="bio" {{ selected_user.profile.bio }} class="form-control form-control-sm" placeholder="Bio ...">
                </div>
              </div>

              <div class="col-md-12">
                <h5>Permissions</h5>
                     <!--District-->
              <div class="col-md-12 d-flex justify-content-space-between">
                <div class="form-check">
                  <input class="form-check-input" id="is_staff" type="checkbox" {% if selected_user.is_staff %}checked{% endif %}>
                  <label for="is_staff" class="form-check-label">is staff</label>
                </div>

                <div class="form-check ml-4">
                  <input class="form-check-input" id="is_superuser" type="checkbox" {% if selected_user.is_superuser %}checked{% endif %}>
                  <label for="is_superuser" class="form-check-label">is superuser</label>
                </div>

                <div class="form-check ml-4">
                  <input class="form-check-input" id="is_active" type="checkbox" {% if selected_user.is_active %}checked{% endif %}>
                  <label for="is_active" class="form-check-label">is active</label>
                </div>

              </div>
              <div class="col-md-12 align-self-end">
                <!-- select -->
                <div class="form-group">
                  <label for="role-id">Role:*</label>
                  <select id="role-id" class="form-control form-control-sm rounded-0">
                    <option>--SELECT ROLE--</option>
                    {% for role in roles %}
                    <option value="{{ role.group_id }}" {% if selected_user.group.id == role.group_id %}selected{% endif %}>{{ role.group_name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
                <label>Add permissions</label>
                <select id="permissions-list" class="duallistbox" multiple="multiple">
                  {% for permission in permissions%}
                  <option value="{{ permission.permission_id }}">{{ permission.permission_name }}</option>
                  {% endfor %}
                </select>
              </div>
              <!--Is Disabled-->
              <div id="form-error" class="form-group pt-3 col-md-12" id="is-disabod">

              </div>
            </div>
          </form>
        </div>
        <!-- /.card-body -->
        <div class="card-footer d-flex justify-content-end">
          <button type="button" onclick="saveData()" class="btn btn-primary" id="save-btn"><i class="fa fa-save"></i> Update</button>
         </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <!-- /.content-wrapper -->
      <!-- /.content-wrapper -->
      <!-- /.content-wrapper -->
      {% include 'parts/footer.html' %}
      <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
      </aside>
      <!-- /.control-sidebar -->
      <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <!-- Bootstrap 4 -->
    <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'plugins/select2/js/select2.full.min.js' %}"></script>
   <!-- Bootstrap4 Duallistbox -->
   <script src="{% static 'plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' %}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
    <script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
    <script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <script src="{% static 'api/update-user.js' %}"></script>
</body>
</html>

