{% load static %}
    <!-- jQuery 3 -->
    <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
    <script src="{% static 'bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-number/2.1.6/jquery.number.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
    <!-- iCheck 1.0.1 -->
    <script src="{% static 'plugins/iCheck/icheck.min.js' %}"></script>
    <script src="{% static 'bower_components/moment/moment.js' %}"></script>
    <!-- DataTables -->
    {% comment %} <script src="{% static 'bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script> {% endcomment %}
    {% comment %} <script src="{% static 'bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script> {% endcomment %}
    {% comment %} <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script> {% endcomment %}
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <!-- SlimScroll -->
    <script src="{% static 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'bower_components/fastclick/lib/fastclick.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <!-- Data Table Initialize -->
    <script src="{% static 'toastr/toastr.min.js' %}"></script>

    
    <script type="text/javascript" src="{% static 'js/printThis.js' %}"></script>


    <script>
      /*
      $(function () {
        $('#example1').DataTable()
        var bookTable = $('#booklist').DataTable({
          'paging'      : true,
          'lengthChange': true,
          'searching'   : true,
          'ordering'    : true,
          'info'        : false,
          'autoWidth'   : false,
          'responsive'  : true,
          'columnDefs': [
            { "orderable": false, "targets": 0 }
          ],
          dom: 'Bfrtip',
          buttons: [
              'copy', 'csv', 'excel', 'pdf', 'print'
          ],
          

        })
    
        $('#searchBox').on('keyup', function(){
          bookTable.search(this.value).draw();
      });
    
      })
      */
      $(document).ready(function() {
        $('#example1').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );
    } );
      
    </script>

    <script>
      $(function(){
        /** add active class and stay opened when selected */
        var url = window.location;
      
        // for sidebar menu entirely but not cover treeview
        $('ul.sidebar-menu a').filter(function() {
            return this.href == url;
        }).parent().addClass('active');
      
        // for treeview
        $('ul.treeview-menu a').filter(function() {
            return this.href == url;
        }).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
      
      });
      </script>
     {% if messages %}
        {% for message in messages  %}
    
        <!-- <script>
            swal("{{ message.tags|title }}", "{{ message }}", "{{ message.tags }}");
        </script> -->
    
          <script>
              toastr.{{ message.tags }}('{{ message }}', '{{ message.tags|title }}');
          </script>
        {% endfor %}
    {% endif %}



    <!--Side JS-->
    <script>
      document.addEventListener("DOMContentLoaded", function(){
        document.querySelectorAll('.sidebar .nav-link').forEach(function(element){
          
          element.addEventListener('click', function (e) {
      
            let nextEl = element.nextElementSibling;
            let parentEl  = element.parentElement;	
      
              if(nextEl) {
                  e.preventDefault();	
                  let mycollapse = new bootstrap.Collapse(nextEl);
                  
                  if(nextEl.classList.contains('show')){
                    mycollapse.hide();
                  } else {
                      mycollapse.show();
                      // find other submenus with class=show
                      var opened_submenu = parentEl.parentElement.querySelector('.submenu.show');
                      // if it exists, then close all of them
                      if(opened_submenu){
                        new bootstrap.Collapse(opened_submenu);
                      }
                  }
              }
          }); // addEventListener
        }) // forEach
      }); 
      // DOMContentLoaded  end

    </script>