<!DOCTYPE html>
    <html lang="en" class="light-style layout-menu-fixed" dir="ltr" data-theme="theme-default"
    data-assets-path="../assets/" data-template="vertical-menu-template-free">
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <title>Dashboard - AMetative HLE</title>
        <meta name="description" content="" />

        <!-- Favicon -->
        <link rel="icon" type="image/x-icon" href="{{ asset('publicc/backend/assets/img/logo/logo_ametative.png') }}" />

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
        href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
        rel="stylesheet" />

        <!-- Icons -->
        <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/fonts/boxicons.css') }}" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

        <!-- Core CSS -->
        <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/core.css') }}"
        class="template-customizer-core-css" />
        <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/theme-default.css') }}"
        class="template-customizer-theme-css" />
        <link rel="stylesheet" href="{{ asset('publicc/backend/assets/css/demo.css') }}" />

        <!-- Vendors CSS -->
        <link rel="stylesheet"
        href="{{ asset('publicc/backend/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
        <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/libs/apex-charts/apex-charts.css') }}" />

        <!-- Helpers -->
        <script src="{{ asset('publicc/backend/assets/vendor/js/helpers.js') }}"></script>
        <script src="{{ asset('publicc/backend/assets/js/config.js') }}"></script>
    </head>

    <body>
        <!-- Layout wrapper -->
        <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <!-- Sidebar Menu -->
            <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
            <div class="app-brand demo">
                <a href="dashboard" class="app-brand-link">
                <span class="app-brand-logo demo">
                    <img src="{{ asset('publicc/backend/assets/img/logo/logo_ametative.png') }}" alt="AMetative HLE"
                    style="width: 65px; height: auto;">
                </span>
                <span class="app-brand-text demo menu-text fw-bolder ms-2"
                    style="text-transform: none; font-size: 20px;">AMetative HLE</span>
                </a>
                <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                <i class="bx bx-chevron-left bx-sm align-middle"></i>
                </a>
            </div>

            <!-- Profil -->
            <div class="text-center p-3">
            <div style="width: 100px; height: 100px; background: #D9D9D9; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin: auto;">
            <img src="{{ asset('storage/' . Auth::user()->foto)}}" alt="Profile" class="rounded-circle" style="width: 100px; height: 100px;">
            </div>
            <div class="mt-2" style="color: #666; font-size: 16px; font-weight: 500;">
                {{ Auth::user()->nama_lengkap }}
            </div>
            <div style="color: #666; font-size: 14px;">
                {{ Auth::user()->nim }}
            </div>
            </div>


            <!-- Menu Navigasi -->
            <ul class="menu-inner py-1">
                <li class="menu-item active">
                <a href="" class="menu-link">
                    <i class="menu-icon tf-icons bx bx-home-circle"></i>
                    <div data-i18n="Analytics">Dashboard</div>
                </a>
                </li>

                <li class="menu-item">
                <a href="{{ route('kuesioner.show') }}" class="menu-link">
                    <i class="menu-icon tf-icons bx bx-pencil"></i>
                    <div data-i18n="Analytics">Kuesioner</div>
                </a>
                </li>

                <li class="menu-item">
                <a href="javascript:void(0)" class="menu-link menu-toggle">
                    <i class="menu-icon tf-icons bx bx-copy"></i>
                    <div data-i18n="Extended UI">Materi Pembelajaran</div>
                </a>
                <ul class="menu-sub">
                    <li class="menu-item">
                    <a href="/materi" class="menu-link">
                        <div data-i18n="Perfect Scrollbar">Enkapsulasi</div>
                    </a>
                    </li>
                </ul>
                </li>

                <li class="menu-item">
                <a href="/history_quis" class="menu-link">
                    <i class="menu-icon tf-icons bx bx-history"></i>
                    <div data-i18n="Analytics">History Kuisioner</div>
                </a>
                </li>
                <li class="menu-item">
                <a href="{{ route('resume.pembelajaran') }}" class="menu-link">
                    <i class="menu-icon tf-icons bx bx-task"></i>
                    <div data-i18n="Analytics">Resume Pembelajaran</div>
                </a>
                </li>
            </ul>
            </aside>

            <!-- Layout Page Start -->
            <div class="layout-page">

            <nav
                class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
                id="layout-navbar"
            >
                <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                    <i class="bx bx-menu bx-sm"></i>
                </a>
                </div>
                <div class="d-flex align-items-center">
                    <button 
                    onclick="toggleSidebar()" 
                    class="btn btn-sm btn-outline-secondary me-3 d-flex align-items-center"
                    title="Sembunyikan/Munculkan Menu"
                    >
                    <i id="sidebar-toggle-icon" class="bx bx-chevrons-left fs-5"></i>
                    </button>
                </div>

                <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                <!-- Search -->
                <!-- <div class="navbar-nav align-items-center">
                    <div class="nav-item d-flex align-items-center">
                    <i class="bx bx-search fs-4 lh-0"></i>
                    <input
                        type="text"
                        class="form-control border-0 shadow-none"
                        placeholder="Search..."
                        aria-label="Search..."
                    />
                    </div>
                </div> -->
                <!-- /Search -->

                <ul class="navbar-nav flex-row align-items-center ms-auto">
                    <!-- Notifikasi -->
                
                    <!-- User -->
                    <li class="nav-item navbar-dropdown dropdown-user dropdown">
                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                        <img src="{{ asset('storage/' . Auth::user()->foto) }}" 
                            alt="Profile" 
                            class="rounded-circle" 
                            style="width: 40px; height: 40px; object-fit: cover;" />
                    </div>
                    </a>

                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                        <a class="dropdown-item" href="">
                        <div class="d-flex">
                            <div class="flex-shrink-0 me-3">
                            <div class="avatar avatar-online">
                                <img src="{{ asset('storage/' . Auth::user()->foto) }}" alt="Profile Picture" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;" />
                            </div>
                            </div>
                            <div class="flex-grow-1">
                            <span class="fw-semibold d-block">{{ Auth::user()->nama_lengkap }}</span>
                            <small class="text-muted">{{ Auth::user()->nim }}</small>
                            </div>
                        </div>
                        </a>

                        </li>
                        <li>
                        <div class="dropdown-divider"></div>
                        </li>
                        <li>
                        <a class="dropdown-item" href="/profile">
                            <i class="bx bx-user me-2"></i>
                            <span class="align-middle">My Profile</span>
                        </a>
                        </li>
                        <li>
                        <!-- <a class="dropdown-item" href="#">
                            <i class="bx bx-cog me-2"></i>
                            <span class="align-middle">Settings</span>
                        </a> -->
                        </li>
                        <li>
                        <div class="dropdown-divider"></div>
                        </li>
                        <li>
                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#confirmlogout">
                            <i class="bx bx-power-off me-2"></i>
                            <span class="align-middle">Log Out</span>
                        </a>
                    </li>
                    </ul>
                    </li>
                    <!--/ User -->
                </ul>
                </div>
            </nav>

            <!-- Modal Konfirmasi -->
            <div class="modal fade" id="confirmlogout" tabindex="-1" aria-labelledby="confirmlogoutLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmlogoutLabel">Konfirmasi Logout</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Apakah Anda yakin ingin logout?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button>
                    <!-- Form logout yang di-submit ketika user klik "Ya" -->
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                    @csrf
                    </form>
                    <button type="button" class="btn btn-primary" onclick="document.getElementById('logout-form').submit();">Ya, Logout</button>
                </div>
                </div>
            </div>
            </div>


            <div class="content-wrapper">
            <!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">
        
                <!-- Selamat Datang -->
                <div class="row">
                    <div class="col-12 mb-4">
                        <div class="card">
                            <div class="row align-items-center">
                                <div class="col-md-7 col-12">
                                    <div class="card-body">
                                        <h5 class="card-title text-primary">Hai, {{ Auth::user()->nama_lengkap }} 🎉</h5>
                                        <p class="mb-4">Selamat Datang di Ametative HLE</p>
                                    </div>
                                </div>
                                <div class="col-md-5 col-12 text-md-end text-center">
                                    <div class="card-body pb-0">
                                        <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/welcome.jpg"
                                             class="img-fluid" alt="Welcome Illustration" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        
                <!-- 3 Kartu (KM, RM, Learning Style) -->
                <div class="row">
                    <!-- KM -->
                    <div class="col-md-4 col-12 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h5 class="card-title text-primary d-flex align-items-center justify-content-center mb-3">
                                    <span class="ms-1">Knowledge of Metakognitif (KM)</span>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="modal" data-bs-target="#knowledgeModal" style="cursor: pointer;"></i>
                                </h5>
                                @forelse ($historiPengisian as $item)
                                    <div class="mt-2">
                                        <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/knowledge.png"
                                             class="img-fluid rounded-circle mb-3" style="width: 120px; height: 120px;" alt="KM">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar"
                                                 style="width: {{ $item->km_total / 85 * 100 }}%;" aria-valuenow="{{ $item->km_total }}"
                                                 aria-valuemin="0" aria-valuemax="85"></div>
                                        </div>
                                        <div class="pt-1 d-flex justify-content-between">
                                            <span>Nilai anda</span>
                                            <span>{{ $item->km_total }} ({{ $item->km_class }})</span>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-muted mt-3">Belum mengisi kuesioner KM.</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
        
                    <!-- RM -->
                    <div class="col-md-4 col-12 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h5 class="card-title text-primary d-flex align-items-center justify-content-center mb-3">
                                    <span class="ms-1">Regulation of Metakognitif (RM)</span>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="modal" data-bs-target="#regulationModal" style="cursor: pointer;"></i>
                                </h5>
                                @forelse ($historiPengisian as $item)
                                    <div class="mt-2">
                                        <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/1.png"
                                             class="img-fluid rounded-circle mb-3" style="width: 120px; height: 120px;" alt="RM">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar"
                                                 style="width: {{ $item->rm_total / 175 * 100 }}%;" aria-valuenow="{{ $item->rm_total }}"
                                                 aria-valuemin="0" aria-valuemax="175"></div>
                                        </div>
                                        <div class="pt-1 d-flex justify-content-between">
                                            <span>Nilai anda</span>
                                            <span>{{ $item->rm_total }} ({{ $item->rm_class }})</span>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-muted mt-3">Belum mengisi kuesioner RM.</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
        
                    <!-- Learning Style -->
                    <div class="col-md-4 col-12 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h5 class="card-title text-primary d-flex align-items-center justify-content-center mb-3">
                                    <span class="ms-1">Learning Style</span>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="modal" data-bs-target="#learningstyleModal" style="cursor: pointer;"></i>
                                </h5>
                                <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/2.png"
                                     class="img-fluid rounded-circle mb-3" style="width: 120px; height: 120px;" alt="Learning Style">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar"
                                         style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="pt-1 d-flex justify-content-between">
                                    <span>Gaya Belajar Anda</span>
                                    <span>({{ $learningStyle ?? 'Belum mengisi kuesioner' }})</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        
                <!-- Kuesioner -->
                <div class="row justify-content-center mb-4">
                    <div class="col-lg-12">
                        <div class="card shadow border-0 learning-style-card">
                            <div class="card-header bg-white border-0 d-flex align-items-center" style="border-radius: 18px 18px 0 0;">
                                <h5 class="card-title text-primary mb-0" style="font-size: 20px;">
                                    <i class="bx bx-list-check me-2" style="font-size: 22px; vertical-align: middle;"></i>
                                    Pengisian Kuesioner
                                </h5>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive px-2 pb-3">
                                    <table class="table align-middle table-hover mb-0 history-table" style="border-radius: 12px; overflow: hidden;">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Kuesioner</th>
                                                <th class="text-center">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="text-center">
                                                    Kuesioner VARK dan MAI
                                                </td>
                                                <td class="text-center">
                                                    <a href="{{ route('kuesioner.show') }}"
                                                    class="btn btn-outline-primary btn-sm px-3 py-1"
                                                    style="border-radius: 20px; font-size: 14px;">
                                                        <i class="bx bx-edit"></i> Isi Kuesioner
                                                    </a>
                                                </td>
                                            </tr>
                                            @if(!isset($historiPengisian) || count($historiPengisian) == 0)
                                            <tr>
                                                <td colspan="2" class="text-center text-muted" style="font-size: 15px;">
                                                    <i class="bx bx-info-circle"></i> Belum ada data kuesioner yang terisi.
                                                </td>
                                            </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

              <div class="modal fade" id="knowledgeModal" tabindex="-1" aria-labelledby="knowledgeModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="knowledgeModalLabel">Penjelasan Knowledge of Metakognitif (KM)</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Knowledge of Metakognitif (KM) merupakan pengetahun individu terhadap kognitifnya. Knowledge of metacognitive terdiri dari 
                            pengetahuan prosedural yang merupakan pengetahuan bagaimana seseorang melakukan sesuatu, pengetahuan deklaratif mencakup 
                            pengetahuan tentang kegiatan yang akan dilakukan sebagai pembelajar dan apa yang mempengaruhi kegiatannya, serta pengetahuan 
                            kondisional yakni pengetahuan tentang kapan dan mengapa menggunakan pengetahuan prosedural dan deklaratif.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="regulationModal" tabindex="-1" aria-labelledby="knowledgeModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="knowledgeModalLabel">Penjelasan Regulation of Metakognitif (RM)</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Regulation of Metacognitif (RM) merupakan kemampuan mengontrol pembelajaran, melakukan sesuatu atau melakukan perbaikan terhadap 
                            kesalahannya. Pembelajar mengatur kegiatan pembelajarannya dengan melibatkan perencanaan dan pengawasan terhadap aktivitas
                            kognitif yang digunakan. Kemampuan metakognitif ini merupakan kunci bagi pengembangan berpikir kritis.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="learningstyleModal" tabindex="-1" aria-labelledby="knowledgeModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="knowledgeModalLabel">Penjelasan Learning Style</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Gaya belajar VARK merupakan pengembangan dari model belajar VAK yang dirumuskan oleh Walter Burke Barbe dan rekan kerjanya.
                            Lalu, Neil D. Fleming & Colleen E. Mills merumuskan ulang dan mengembangkannya di tahun 1992. Saat itu, mereka melakukan 
                            penelitian dengan membagikan kuesioner dan melakukan pengamatan di ruang-ruang kelas selama ribuan jam. Alhasil, lahirlah gaya belajar 
                            VARK yang kita ketahui sekarang.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            function toggleSidebar() {
                const sidebar = document.getElementById('layout-menu');
                const icon = document.getElementById('sidebar-toggle-icon');
                const layoutPage = document.querySelector('.layout-page');
                const layoutContainer = document.querySelector('.layout-container');

                // Toggle sidebar
                sidebar.classList.toggle('d-none');

                // Toggle icon direction
                if (sidebar.classList.contains('d-none')) {
                    icon.classList.remove('bx-chevrons-left');
                    icon.classList.add('bx-chevrons-right');

                    // Tambahkan class full width ke layout-page atau layout-container
                    layoutPage.classList.add('w-100');
                    layoutContainer.classList.add('sidebar-hidden');
                } else {
                    icon.classList.remove('bx-chevrons-right');
                    icon.classList.add('bx-chevrons-left');

                    // Hapus class full width
                    layoutPage.classList.remove('w-100');
                    layoutContainer.classList.remove('sidebar-hidden');
                }
            }
            script>
                document.addEventListener('DOMContentLoaded', function () {
                    var myModal = new bootstrap.Modal(document.getElementById('kuesionerModal'), {
                        backdrop: 'static', // tidak bisa klik di luar modal
                        keyboard: false     // tidak bisa tekan ESC
                    });
                    myModal.show();
                });
            </script>

            </script>
            @if ($perluIsiKuesioner)
            <div class="modal fade show" id="kuesionerModal" tabindex="-1" aria-labelledby="kuesionerModalLabel" aria-modal="true" role="dialog" style="display: block; background: rgba(0,0,0,0.5);">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content shadow-lg border-0 rounded-4">
                        <div class="modal-body p-4 position-relative">
                            <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close" onclick="document.getElementById('kuesionerModal').style.display='none'"></button>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-4">
                                    <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/image%204.png" class="img-fluid rounded-circle shadow" alt="View Badge User" style="width: 100px; height: 100px; object-fit: cover;" />
                                </div>
                                <div>
                                    <h5 class="card-title text-primary mb-2">Hai, {{ auth()->user()->nama_lengkap ?? 'Tamu' }}</h5>
                                    <p class="mb-3">Kamu belum mengisi kuesioner gaya belajar.<br>Yuk isi dulu agar bisa akses materi sesuai gaya belajarmu!</p>
                                    <a href="{{ route('kuesioner.show') }}" class="btn btn-primary px-4 py-2 rounded-pill shadow-sm">Isi Kuesioner</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Floating Help Button -->
            <div class="bantuan">
            <img id="helpButton"
                src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/3f11c161-28c5-4cc7-be53-61f6e90d9230.jfif-removebg-preview%203.png"
                alt="Pusat Bantuan"
                style="width: 80px; height: auto; position: fixed; bottom: 20px; right: 20px; z-index: 999; cursor: pointer;">
            </div>

            <!-- Kotak Instruksi Kecil -->
            <div id="instructionPopup" style="
            display: none;
            position: fixed;
            bottom: 90px; /* Naik di atas tombol */
            right: 20px;
            width: 400px;
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            ">
            <div id="instructionContent" style="font-size:15px; margin-bottom:12px;"></div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <button id="nextBtn" style="padding:6px 12px; font-size:13px; background-color:#4CAF50; color:white; border:none; border-radius:6px;">Next</button>
                <button id="closeModal" style="background:none; border:none; font-size:18px; color:#888;">&times;</button>
            </div>
            </div>

            <script>
            const steps = [
                "<strong>Selamat datang!</strong><br><strong>Kenalin aku Yura</strong><br>yang akan mengajak kamu untuk menjelajah fitur beranda!",
                "<p>Di Beranda, kamu bisa melihat beberapa informasi seperti Metakognitif dan Gaya Belajar Kamu, serta mengedit kuesioner.</p>",
                "<p>Terdapat juga penjelasan mengenai apa itu RM, KM dan Gaya Belajar.</p>"
            ];

            let currentStep = 0;
            const helpButton = document.getElementById("helpButton");
            const popup = document.getElementById("instructionPopup");
            const contentDiv = document.getElementById("instructionContent");
            const nextBtn = document.getElementById("nextBtn");
            const closeModal = document.getElementById("closeModal");

            // Tampilkan popup saat gambar diklik
            helpButton.addEventListener("click", () => {
                currentStep = 0;
                showStep(currentStep);
                popup.style.display = "block";
                nextBtn.textContent = "Next";
            });

            // Tombol Next
            nextBtn.addEventListener("click", () => {
                currentStep++;
                if (currentStep < steps.length) {
                showStep(currentStep);
                if (currentStep === steps.length - 1) {
                    nextBtn.textContent = "Selesai";
                }
                } else {
                popup.style.display = "none";
                }
            });

            // Tombol Close
            closeModal.addEventListener("click", () => {
                popup.style.display = "none";
            });

            // Tampilkan isi berdasarkan langkah
            function showStep(index) {
                contentDiv.innerHTML = steps[index];
            }
            </script>
        

            
            
@include('backend.layouts.footer')