{% extends "sample_base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
<title>Sample User Index</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 94%!important;
  }
  .data-search {
    justify-content: flex-start;
  }

</style>

{% endblock Style %}

{% block MainContent %}

<div class="contents">

    {% if messages %}
        {% for message in messages %}
            <div id="divID" class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
                role="alert">{{ message }}
                <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="style-name">
                        <h4>Sample User Index</h4>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'sample_app_user_create' %}">
                            <button class="cus-btn" id="mother-rganization" name="button" type="button">
                                <i aria-hidden="true" class="fa fa-plus-circle"></i>
                                Sample User
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
            <div class="table-header">
                <div class="row">
                  <div class="col-md-3">
                    <div class="data-search">
                      <div class="input-group search">
                        <input type="search" class="form-control" id="searchDepartment" placeholder="Search...">
                        <span class="input-group-text" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i></span>
                      </div>
                    </div>
                </div>
              </div>
            <div class="tables table-responsive" id="deptList">
            <table class="table  table-striped table-hover align-middle">
                <thead>
                    <tr>
                        <th class="text-center" scope="col">SL</th>
                        <th class="text-center" scope="col">Sample Section</th>
                        <th class="text-center" scope="col">User</th>
                        <th class="text-center" scope="col">User Type</th>
                        <th class="text-center" scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                {% if sample_user %}
                    {% for item in sample_user %}
                    <tr>
                        <td class="align-middle">{{forloop.counter}}</td>
                        <td class="align-middle">{{ item.section }}</td>
                        <td class="align-middle">{{ item.user }}</td>
                        <td class="align-middle">{{ item.user_type }}</td>
                        <td class="align-middle">
                            <ul class="action">
                                <li>
                                    <a href="{% url 'sample_app_user_update' item.id %}">
                                        <i aria-hidden="true" class="fa fa-pencil"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'sample_app_user_delete' item.id %}" onclick="SweetDelete(event,this.href)">
                                        <i aria-hidden="true" class="fa fa-trash"></i>
                                    </a>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="5" class="text-center">No Data Is Found</td></tr>
                {% endif %}
                </tbody>
            </table>
        </div>
          </div>
    </div>
</div>
{% endblock MainContent %}

{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}

<script type=text/javascript>
    var redirect_url = "{% url 'sample_app_user_index' %}"
    var ajax_user_url = "{% url 'sample_app_user_search' %}"
    
  </script>
    <script>
        $("#searchDepartment").keypress(function (e) { 
            console.log('worked')
            if (e.keyCode == 13){
            $("#search-btn").click();
            }
          });
          $("#search-btn").click(function () { 
            console.log('worked')
            console.log($("#searchDepartment").val())
            if($("#searchDepartment").val())
              $.ajax({                       
              url: ajax_user_url,                   
              data: {
                'user_obj': $("#searchDepartment").val()     
              },
              success: function (data) {   
                $("#deptList").html(data);  
              }
            });
            else
            location.href = redirect_url
          
          
          });

    </script>  
{% endblock JS %}