<!-- Main Sidebar -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="<?= base_url('dashboard') ?>" class="brand-link">
        <span class="brand-text font-weight-light">Joy Course</span>
    </a>

    <div class="sidebar" data-widget="treeview" role="menu">
        <!-- Sidebar Menu -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" role="menu" data-accordion="false">
                
            <li class="nav-item has-treeview">
                    <a href="<?= base_url('dashboard') ?>" class="nav-link">
                        <i class="nav-icon fas fa-database"></i>
                        <p>
                        dashboard
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                </li>

                <!-- Data Master Menu -->
                <li class="nav-item has-treeview">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-database"></i>
                        <p>
                            Data Master
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="<?= base_url('siswa') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Data Siswa</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="<?= base_url('data-guru') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Data Guru</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="<?= base_url('data-Buku') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Data Buku</p>
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Data Kelas Menu -->
                <li class="nav-item has-treeview">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-school"></i>
                        <p>
                            Data Kelas
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="<?= base_url('data-kelas') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Data Kelas</p>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a href="<?= base_url('jadwal') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Data Jadwal</p>
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Data Pendapatan Menu -->
                <li class="nav-item has-treeview">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-money-check-alt"></i>
                        <p>
                            Data Pendapatan
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="<?= base_url('pembayaran_spp') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Bayar SPP</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="<?= base_url('pendapatan-buku') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Pendapatan Buku</p>
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Data Pengeluaran Menu -->
                <li class="nav-item has-treeview">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-money-check-alt"></i>
                        <p>
                            Data Pengeluaran
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="<?= base_url('pengeluaran') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Pengeluaran Les</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="<?= base_url('pembayaran_gaji') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Pembayaran Gaji Guru</p>
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Data Laporan Menu -->
                <li class="nav-item has-treeview">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-chart-line"></i>
                        <p>
                            Data Laporan
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="<?= base_url('laporan-akuntansi') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Laporan Les</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="<?= base_url('Riwayat_spp') ?>" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Riwayat SPP</p>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</aside>

<!-- jQuery Script to handle the sidebar dropdown -->
<script>
    $(document).ready(function() {
        $('.nav-item.has-treeview > a').on('click', function(e) {
            e.preventDefault();
            var $this = $(this).parent();

            if ($this.hasClass('menu-open')) {
                $this.removeClass('menu-open');
                $this.find('.nav-treeview').slideUp();
            } else {
                $('.nav-item.has-treeview').removeClass('menu-open');
                $('.nav-treeview').slideUp();
                $this.addClass('menu-open');
                $this.find('.nav-treeview').slideDown();
            }
        });
    });
</script>
