{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>BBDMS </title>
    <meta
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
      name="viewport"
    />


    <!-- Fonts and icons -->
    <script src="{% static 'assets/js/plugin/webfont/webfont.min.js'%}"></script>
    <script>
      WebFont.load({
        google: { families: ["Public Sans:300,400,500,600,700"] },
        custom: {
          families: [
            "Font Awesome 5 Solid",
            "Font Awesome 5 Regular",
            "Font Awesome 5 Brands",
            "simple-line-icons",
          ],
          urls: ["{% static 'assets/css/fonts.min.css'%}"],
        },
        active: function () {
          sessionStorage.fonts = true;
        },
      });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css'%}" />
    <link rel="stylesheet" href="{% static 'assets/css/plugins.min.css'%}" />
    <link rel="stylesheet" href="{% static 'assets/css/kaiadmin.min.css'%}" />

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link rel="stylesheet" href="{% static 'assets/css/demo.css'%}" />
  </head>
  <body>
    <div class="wrapper">
      <!-- Sidebar -->
      {% include 'includes/sidebar.html' %}
      <!-- End Sidebar -->

      <div class="main-panel">
        <div class="main-header">
          
          <!-- Navbar Header -->
          {% include 'includes/header.html' %}
          <!-- End Navbar -->
        </div>

        <div class="container">
            {% block content %}
            {% endblock %}
        </div>

        {% include 'includes/footer.html' %}
      </div>

      <!-- End Custom template -->
    </div>
    <!--   Core JS Files   -->
    <script src="{% static 'assets/js/core/jquery-3.7.1.min.js'%}"></script>
    <script src="{% static 'assets/js/core/popper.min.js'%}"></script>
    <script src="{% static 'assets/js/core/bootstrap.min.js'%}"></script>

    <!-- jQuery Scrollbar -->
    <script src="{% static 'assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js'%}"></script>

    <!-- Chart JS -->
    <script src="{% static 'assets/js/plugin/chart.js/chart.min.js'%}"></script>

    <!-- jQuery Sparkline -->
    <script src="{% static 'assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js'%}"></script>

    <!-- Chart Circle -->
    <script src="{% static 'assets/js/plugin/chart-circle/circles.min.js'%}"></script>

    <!-- Datatables -->
    <script src="{% static 'assets/js/plugin/datatables/datatables.min.js'%}"></script>

    <!-- Bootstrap Notify -->
    <script src="{% static 'assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js'%}"></script>

    <!-- jQuery Vector Maps -->
    <script src="{% static 'assets/js/plugin/jsvectormap/jsvectormap.min.js'%}"></script>
    <script src="{% static 'assets/js/plugin/jsvectormap/world.js'%}"></script>

    <!-- Sweet Alert -->
    <script src="{% static 'assets/js/plugin/sweetalert/sweetalert.min.js'%}"></script>

    <!-- Kaiadmin JS -->
    <script src="{% static 'assets/js/kaiadmin.min.js'%}"></script>

    <!-- Kaiadmin DEMO methods, don't include it in your project! -->
    <script src="{% static 'assets/js/setting-demo.js'%}"></script>
    <script>
      $(document).ready(function () {
        $("#basic-datatables").DataTable({});

        $("#multi-filter-select").DataTable({
          pageLength: 5,
          initComplete: function () {
            this.api()
              .columns()
              .every(function () {
                var column = this;
                var select = $(
                  '<select class="form-select"><option value=""></option></select>'
                )
                  .appendTo($(column.footer()).empty())
                  .on("change", function () {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());

                    column
                      .search(val ? "^" + val + "$" : "", true, false)
                      .draw();
                  });

                column
                  .data()
                  .unique()
                  .sort()
                  .each(function (d, j) {
                    select.append(
                      '<option value="' + d + '">' + d + "</option>"
                    );
                  });
              });
          },
        });

        // Add Row
        $("#add-row").DataTable({
          pageLength: 5,
        });

        var action =
          '<td> <div class="form-button-action"> <button type="button" data-bs-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-bs-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

        $("#addRowButton").click(function () {
          $("#add-row")
            .dataTable()
            .fnAddData([
              $("#addName").val(),
              $("#addPosition").val(),
              $("#addOffice").val(),
              action,
            ]);
          $("#addRowModal").modal("hide");
        });
      });
    </script>

  </body>
</html>
