Sindbad~EG File Manager

{% extends 'layout.html' %}
{% block title %}User Index{% endblock %}
{% block content %}
<div class="container bg-white mt-5">
  <div class="row"> 
    <div class="col-12 text-right input-group">
      <form id="SearchForm" action="{{ url_for('users.searchUsers') }}">
      <div class="input-group">
        <input type="text" class="form-control" name="search_text" placeholder="Search here.." aria-label="Search here.." aria-describedby="basic-addon2" required>
        
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="submit">Search</button>
          <a class="btn btn-outline-danger" href="{{ url_for('users.index')}}" >Clear</a>
          <button  id="btnAddUser"  type="button" class="btn btn-outline-primary">Add New User</button>
        </div>
      </div>
      </form>
      
    </div>
    <div class="col-12">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Action
            </th>
            <th>
              User Id
            </th>
            <th>
              Name
            </th>
            <th>
              Email
            </th>
            <th>
              Mobile
            </th>
          </tr>
        </thead>
        <tbody>
          <script type="text/javascript">
            var namelst=[],emaillst=[],mobilelst=[]
          </script>
          {% for user in users%}
          <script type="text/javascript">
            namelst[{{user.user_id}}] = "{{user.name}}" 
            emaillst[{{user.user_id}}] = "{{user.email}}" 
            mobilelst[{{user.user_id}}] = "{{user.mobile}}" 
          </script>
          <tr>
            <td>
              <button type="butt" class="btn btn-primary" onclick="edit_user('{{user.user_id}}')">Edit</button>
              <a href="{{ url_for('users.deleteUser',user_id=user.user_id) }}" onclick="return confirm('Are you sure want to delete this user?')" class="btn btn-danger">Delete</button>
            </td>
            <td>
              {{ user.user_id }}
            </td>
            <td>
              {{ user.name }}
            </td>
            <td>  
              {{ user.email }}
            </td>
            <td>
              {{ user.mobile }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>


<div class="modal fade" id="UserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="UserForm"  action="{{ url_for('users.postSaveUser') }}" method="POST"> 
        <div class="modal-body">
          <div class="mb-3">
            <input type="hidden" id="user_id" name="user_id" value="0">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" 
            value="">
          </div>
          <div class="mb-3">
            <label for="mobile" class="form-label"> Mobile</label>
            <input type="number" class="form-control" id="mobile" name="mobile" value="">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label"> Email</label>
            <input type="email" class="form-control" id="email" name="email" value="">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-primary" >Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block script %}
<script>


  $(document).ready(function() {
      formValidation()
      $("#btnAddUser").click(function (e) {
        $("#UserModal").modal('show');  
      });


      
  });

  
  function edit_user(user_id) {
    $("#user_id").val(user_id)
    $("#name").val(namelst[user_id])
    $("#email").val(emaillst[user_id])
    $("#mobile").val(mobilelst[user_id])
    $("#UserModal").modal('show');  
  }




  // function ajaxPageReady()
  // {
  //   alert("page load")
  //   $("#UserModal").modal('show');
  //   formValidation()
  // }

  // function fromSumit()
  // {
      
  //     return true
  //     if($("#UserForm").valid())
  //     {
  //        $.ajax({
  //         type: 'POST', 
  //         url: $("#UserForm").attr("action"), 
  //         data:$("#UserForm").serialize(), 
  //         dataType: 'json',
  //         success: function(data){
  //           if(data.status == 1)
  //           {
  //             $("#viewReference").html(data.html)
  //             $("#UserModal").modal('hide');  
  //             $('body').removeClass('modal-open');
  //             $('.modal-backdrop').remove();
  //           }
  //           else
  //           {
  //             showAlert('danger',data.msg)
  //           }
  //         },
  //         error: function(XMLHttpRequest, textStatus, errorThrown) {} 
                                              
  //       });   
  //     }
  // }

  function formValidation() {
    // alert("calling validation")
    // Initialize validation plugin on form
    $("#UserForm").validate({
      // Specify validation rules for each form field
      rules: {
        name: {
          required: true
        },
        mobile: {
          required: true
        },
        email: {
          required: true
        }
        
      },
      // Specify validation error messages
      messages: {
        // Name: {
        //   required: "Please enter a name"
        // },
        // Mobile: {
        //   required: "Please enter a mobile"
        // },
        // email: {
        //   required: "Please enter a email"
        // },
        // referenceAddress: {
        //   required: "Please enter a address"
        // }
      },
      // Handle form submission
      submitHandler: function(form) {
        form.submit();  
      }
    });
    
  }
    
  
</script>


{% endblock %}