<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>AdminLTE 3 | Dashboard</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">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
        <!-- Ionicons -->
        <link rel="stylesheet"
            href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <!-- Tempusdominus Bootstrap 4 -->
        <link rel="stylesheet"
            href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
        <!-- iCheck -->
        <link rel="stylesheet"
            href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
        <!-- JQVMap -->
        <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="dist/css/adminlte.min.css">
        <!-- overlayScrollbars -->
        <link rel="stylesheet"
            href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
        <!-- Daterange picker -->
        <link rel="stylesheet"
            href="plugins/daterangepicker/daterangepicker.css">
        <!-- summernote -->
        <link rel="stylesheet" href="plugins/summernote/summernote-bs4.min.css">
<style>
      .tree {
  font-family: Arial, sans-serif;
}

.caret {
  cursor: pointer;
  user-select: none;
}

.caret::before {
  content: "\25B6"; /* Right-pointing triangle */
  margin-right: 5px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.caret.down::before {
  transform: rotate(90deg);
}

.child,
.grandchild,
.great-grandchild {
  display: none;
}

.active {
  display: table-row;
}

            .form-control {
    display: block;
    width: 100%;
    height: calc(1.45rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 transparent;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
</style>
      
    </head>
    <body class="hold-transition sidebar-mini layout-fixed">
        <div class="wrapper">

            <!-- /.navbar -->

            <!-- Main Sidebar Container -->
            <aside class="main-sidebar sidebar-dark-primary elevation-4">
                <!-- Brand Logo -->
                <a href="index3.html" class="brand-link">
                    <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
                        class="brand-image img-circle elevation-3"
                        style="opacity: .8">
                    <span class="brand-text font-weight-light">AdminLTE 3</span>
                </a>

                <!-- Sidebar -->
                <div class="sidebar">
                    <!-- Sidebar user panel (optional) -->
                    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                        <div class="image">
                            <img src="dist/img/user2-160x160.jpg"
                                class="img-circle elevation-2" alt="User Image">
                        </div>
                        <div class="info">
                            <a href="#" class="d-block">Alexander Pierce</a>
                        </div>
                    </div>

                    <!-- SidebarSearch Form -->
                    <div class="form-inline">
                        <div class="input-group" data-widget="sidebar-search">
                            <input class="form-control form-control-sidebar"
                                type="search" placeholder="Search"
                                aria-label="Search">
                            <div class="input-group-append">
                                <button class="btn btn-sidebar">
                                    <i class="fas fa-search fa-fw"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Sidebar Menu -->
                    <nav class="mt-2">
                        <ul class="nav nav-pills nav-sidebar flex-column"
                            data-widget="treeview" role="menu"
                            data-accordion="false">
                            <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
                            <li class="nav-item menu-open">
                                <a href="#" class="nav-link active">
                                    <i
                                        class="nav-icon fas fa-tachometer-alt"></i>
                                    <p>
                                        Dashboard
                                        <i class="right fas fa-angle-left"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="./index.html"
                                            class="nav-link active">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Dashboard v1</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="./index2.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Dashboard v2</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="./index3.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Dashboard v3</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="pages/widgets.html" class="nav-link">
                                    <i class="nav-icon fas fa-th"></i>
                                    <p>
                                        Widgets
                                        <span
                                            class="right badge badge-danger">New</span>
                                    </p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-copy"></i>
                                    <p>
                                        Layout Options
                                        <i class="fas fa-angle-left right"></i>
                                        <span
                                            class="badge badge-info right">6</span>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/layout/top-nav.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Top Navigation</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/layout/top-nav-sidebar.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Top Navigation + Sidebar</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/layout/boxed.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Boxed</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/layout/fixed-sidebar.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Fixed Sidebar</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/layout/fixed-sidebar-custom.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Fixed Sidebar <small>+ Custom
                                                    Area</small></p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/layout/fixed-topnav.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Fixed Navbar</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/layout/fixed-footer.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Fixed Footer</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/layout/collapsed-sidebar.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Collapsed Sidebar</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-chart-pie"></i>
                                    <p>
                                        Charts
                                        <i class="right fas fa-angle-left"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/charts/chartjs.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>ChartJS</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/charts/flot.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Flot</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/charts/inline.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Inline</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/charts/uplot.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>uPlot</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-tree"></i>
                                    <p>
                                        UI Elements
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/UI/general.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>General</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/icons.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Icons</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/buttons.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Buttons</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/sliders.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Sliders</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/modals.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Modals & Alerts</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/navbar.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Navbar & Tabs</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/timeline.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Timeline</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/UI/ribbons.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Ribbons</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-edit"></i>
                                    <p>
                                        Forms
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/forms/general.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>General Elements</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/forms/advanced.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Advanced Elements</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/forms/editors.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Editors</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/forms/validation.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Validation</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-table"></i>
                                    <p>
                                        Tables
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/tables/simple.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Simple Tables</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/tables/data.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>DataTables</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/tables/jsgrid.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>jsGrid</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-header">EXAMPLES</li>
                            <li class="nav-item">
                                <a href="pages/calendar.html" class="nav-link">
                                    <i class="nav-icon far fa-calendar-alt"></i>
                                    <p>
                                        Calendar
                                        <span
                                            class="badge badge-info right">2</span>
                                    </p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="pages/gallery.html" class="nav-link">
                                    <i class="nav-icon far fa-image"></i>
                                    <p>
                                        Gallery
                                    </p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="pages/kanban.html" class="nav-link">
                                    <i class="nav-icon fas fa-columns"></i>
                                    <p>
                                        Kanban Board
                                    </p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon far fa-envelope"></i>
                                    <p>
                                        Mailbox
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/mailbox/mailbox.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Inbox</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/mailbox/compose.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Compose</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/mailbox/read-mail.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Read</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-book"></i>
                                    <p>
                                        Pages
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/examples/invoice.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Invoice</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/profile.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Profile</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/e-commerce.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>E-commerce</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/projects.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Projects</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/examples/project-add.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Project Add</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/examples/project-edit.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Project Edit</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/examples/project-detail.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Project Detail</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/contacts.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Contacts</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/faq.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>FAQ</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/contact-us.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Contact us</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon far fa-plus-square"></i>
                                    <p>
                                        Extras
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>
                                                Login & Register v1
                                                <i
                                                    class="fas fa-angle-left right"></i>
                                            </p>
                                        </a>
                                        <ul class="nav nav-treeview">
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/login.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Login v1</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/register.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Register v1</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/forgot-password.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Forgot Password v1</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/recover-password.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Recover Password v1</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>
                                                Login & Register v2
                                                <i
                                                    class="fas fa-angle-left right"></i>
                                            </p>
                                        </a>
                                        <ul class="nav nav-treeview">
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/login-v2.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Login v2</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/register-v2.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Register v2</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/forgot-password-v2.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Forgot Password v2</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a
                                                    href="pages/examples/recover-password-v2.html"
                                                    class="nav-link">
                                                    <i
                                                        class="far fa-circle nav-icon"></i>
                                                    <p>Recover Password v2</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/lockscreen.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Lockscreen</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/examples/legacy-user-menu.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Legacy User Menu</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a
                                            href="pages/examples/language-menu.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Language Menu</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/404.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Error 404</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/500.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Error 500</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/pace.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Pace</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/examples/blank.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Blank Page</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="starter.html" class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Starter Page</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-search"></i>
                                    <p>
                                        Search
                                        <i class="fas fa-angle-left right"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="pages/search/simple.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Simple Search</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="pages/search/enhanced.html"
                                            class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Enhanced</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-header">MISCELLANEOUS</li>
                            <li class="nav-item">
                                <a href="iframe.html" class="nav-link">
                                    <i class="nav-icon fas fa-ellipsis-h"></i>
                                    <p>Tabbed IFrame Plugin</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="https://adminlte.io/docs/3.1/"
                                    class="nav-link">
                                    <i class="nav-icon fas fa-file"></i>
                                    <p>Documentation</p>
                                </a>
                            </li>
                            <li class="nav-header">MULTI LEVEL EXAMPLE</li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="fas fa-circle nav-icon"></i>
                                    <p>Level 1</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon fas fa-circle"></i>
                                    <p>
                                        Level 1
                                        <i class="right fas fa-angle-left"></i>
                                    </p>
                                </a>
                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Level 2</p>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>
                                                Level 2
                                                <i
                                                    class="right fas fa-angle-left"></i>
                                            </p>
                                        </a>
                                        <ul class="nav nav-treeview">
                                            <li class="nav-item">
                                                <a href="#" class="nav-link">
                                                    <i
                                                        class="far fa-dot-circle nav-icon"></i>
                                                    <p>Level 3</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a href="#" class="nav-link">
                                                    <i
                                                        class="far fa-dot-circle nav-icon"></i>
                                                    <p>Level 3</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a href="#" class="nav-link">
                                                    <i
                                                        class="far fa-dot-circle nav-icon"></i>
                                                    <p>Level 3</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i
                                                class="far fa-circle nav-icon"></i>
                                            <p>Level 2</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="fas fa-circle nav-icon"></i>
                                    <p>Level 1</p>
                                </a>
                            </li>
                            <li class="nav-header">LABELS</li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i
                                        class="nav-icon far fa-circle text-danger"></i>
                                    <p class="text">Important</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i
                                        class="nav-icon far fa-circle text-warning"></i>
                                    <p>Warning</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i
                                        class="nav-icon far fa-circle text-info"></i>
                                    <p>Informational</p>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <!-- /.sidebar-menu -->
                </div>
                <!-- /.sidebar -->
            </aside>

            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <div class="content-header">
                    <div class="container-fluid">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <h1 class="m-0">Dashboard</h1>
                            </div><!-- /.col -->
                            <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">Dashboard
                                        v1</li>
                                </ol>
                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div><!-- /.container-fluid -->
                </div>
                <!-- /.content-header -->

                <!-- Main content -->
                <section class="content">
                    <div class="container-fluid">
                        <div class="card card-primary ">
                            <div class="card-header">
                                <h4 class="card-title">Report Options</h4>
                            </div>

                            <div class="card-body">
                                <form method="post" action id="FilterForm">
                                    <div class="row align-items-end">
                                        <div class="col-2">
                                            <div class="form-group">
                                                <label for="fromDate">Starting
                                                    Period</label>
                                                <input type="text"
                                                    class="form-control nepaliDatePicker"
                                                    name="fromDate"
                                                    value="2078-4-1"
                                                    id="fromDate"
                                                    aria-describedby="helpId_fromDate"
                                                    placeholder="Starting Period">

                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-group">
                                                <label for="toDate">Ending
                                                    Period</label>
                                                <input type="text"
                                                    class="form-control nepaliDatePicker"
                                                    name="toDate"
                                                    value="2079-3-32"
                                                    id="toDate"
                                                    aria-describedby="helpId_toDate"
                                                    placeholder="Ending Period">

                                            </div>
                                        </div>
                                        <div class="col-1 text-center">
                                            <div class="form-group">
                                                <label
                                                    for="showOB">Opening</label>
                                                <input type="checkbox"
                                                    class="form-control "
                                                    name="showOB" id="showOB"
                                                    aria-describedby="helpId_showOB"
                                                    placeholder="Show Opening Balance">

                                            </div>
                                        </div>
                                        <div class="col-1 text-center">
                                            <div class="form-group">
                                                <label
                                                    for="showClosing">Closing</label>
                                                <input type="checkbox"
                                                    class="form-control "
                                                    name="showClosing"
                                                    id="showClosing"
                                                    aria-describedby="helpId_showClosing"
                                                    placeholder="Show Closing Balance">

                                            </div>
                                        </div>
                                        <div class="col-1 text-center">
                                            <div class="form-group">
                                                <label
                                                    for="showPeriod">Period</label>
                                                <input type="checkbox"
                                                    class="form-control "
                                                    name="showPeriod"
                                                    id="showPeriod"
                                                    aria-describedby="helpId_showPeriod"
                                                    placeholder="Show Periodic Balance">

                                            </div>
                                        </div>

                                        <div class="col">
                                            <div
                                                class="form-group d-flex justify-content-end">
                                                <button
                                                    class="btn btn-secondary toggle-collapse mr-2"
                                                    id="toggleShowAll">Toggle
                                                    Collapse</button>
                                                <button type="submit"
                                                    class="btn btn-primary mr-2">Filter</button>
                                                <button
                                                    class="btn btn-success expand-all mr-2"
                                                    id="exportButton">Export</button>
                                                <button type="button"
                                                    class="btn btn-warning"
                                                    onclick="resetForm()">Reset</button>
                                            </div>
                                        </div>
                                    </div>
                                    <small>Currently Filter Option by period are
                                        not available</small>
                                </form>

                                <script>
                                    function resetForm() {
                                        document.getElementById("fromDate").value = "2078-4-1";
                                        document.getElementById("toDate").value = "2079-3-32";
                                        document.getElementById("showOB").checked = false;
                                        document.getElementById("showClosing").checked = false;
                                        document.getElementById("FilterForm").submit();
                                    }
                                </script>

                            </div>

                        </div>
                        <div class="card">
                            
                            <!-- ./card-header -->
                            <div class="card-body p-0">
                                <table class="table table-head-fixed text-nowrap table-bordered" id="treeTable">
                                    <thead>
                                        <tr>
                                            <th rowspan="2" class="col-6">Particulars</th>
                                            <th colspan="2" class="text-center col-2">Opening</th>
                                            <th colspan="2" class="text-center col-2">This Year</th>
                                            <th colspan="2" class="text-center col-2">Closing</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">Dr. Amount</th>
                                            <th class="text-center">Cr. Amount</th>
                                            <th class="text-center">Dr. Amount</th>
                                            <th class="text-center">Cr. Amount</th>
                                            <th class="text-center">Dr. Amount</th>
                                            <th class="text-center">Cr. Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="parent">
                                            <td><span class="caret" onclick="toggleNode(this)">Assets</span></td>
                                            <td>10</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="child">
                                            <td><span class="caret" onclick="toggleNode(this)">Current Assets</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="grandchild">
                                            <td><span class="caret" onclick="toggleNode(this)">Bank Assets</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="great-grandchild">
                                            <td>Nabil Bank</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="great-grandchild">
                                            <td>RBB Bank</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="grandchild">
                                            <td><span class="caret" onclick="toggleNode(this)">Another Grandchild</span></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="great-grandchild">
                                            <td>Child 1</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr class="great-grandchild">
                                            <td>Child 2</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            
                            </div>
                            <!-- /.card-body -->
                          </div>
                      
                    </div><!-- /.container-fluid -->
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer">
                <strong>Copyright &copy; 2014-2021 <a
                        href="https://adminlte.io">AdminLTE.io</a>.</strong>
                All rights reserved.
                <div class="float-right d-none d-sm-inline-block">
                    <b>Version</b> 3.2.0
                </div>
            </footer>

            <!-- Control Sidebar -->
            <aside class="control-sidebar control-sidebar-dark">
                <!-- Control sidebar content goes here -->
            </aside>
            <!-- /.control-sidebar -->
        </div>
        <!-- ./wrapper -->
        
        <script>
            function toggleNode(caret) {
                caret.classList.toggle('caret-down'); // Toggle caret icon
                let row = caret.parentElement.parentElement; // Get parent row
                let nextRow = row.nextElementSibling; // Get next row (child row)
    
                // Toggle visibility of child rows
                while (nextRow && (nextRow.classList.contains('child') || nextRow.classList.contains('grandchild') || nextRow.classList.contains('great-grandchild'))) {
                    if (nextRow.style.display === 'none') {
                        nextRow.style.display = 'table-row'; // Show child row
                    } else {
                        nextRow.style.display = 'none'; // Hide child row
                    }
                    nextRow = nextRow.nextElementSibling; // Move to the next row
                }
            }
        </script>
        
        <!-- jQuery -->
        <script src="plugins/jquery/jquery.min.js"></script>
        <!-- jQuery UI 1.11.4 -->
        <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
        <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
        <script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
        <!-- Bootstrap 4 -->
        <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
        <!-- ChartJS -->
        <script src="plugins/chart.js/Chart.min.js"></script>
        <!-- Sparkline -->
        <script src="plugins/sparklines/sparkline.js"></script>
        <!-- JQVMap -->
        <script src="plugins/jqvmap/jquery.vmap.min.js"></script>
        <script src="plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
        <!-- jQuery Knob Chart -->
        <script src="plugins/jquery-knob/jquery.knob.min.js"></script>
        <!-- daterangepicker -->
        <script src="plugins/moment/moment.min.js"></script>
        <script src="plugins/daterangepicker/daterangepicker.js"></script>
        <!-- Tempusdominus Bootstrap 4 -->
        <script
            src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
        <!-- Summernote -->
        <script src="plugins/summernote/summernote-bs4.min.js"></script>
        <!-- overlayScrollbars -->
        <script
            src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
        <!-- AdminLTE App -->
        <script src="dist/js/adminlte.js"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="dist/js/demo.js"></script>
        <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
        <script src="dist/js/pages/dashboard.js"></script>
    </body>
</html>