    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php
include &#039;dbconnect.php&#039;;

?&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Admin Dashboard&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
    &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css&quot;&gt; --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/fontawesome-free-6.6.0-web/css/all.min.css&quot;&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;

    &lt;!-- Font Awesome Icons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/fontawesome-free-6.6.0-web/css/all.min.css&quot;&gt;
    &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt; --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css&quot;&gt;
    &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.datatables.net/2.1.8/css/dataTables.semanticui.css&quot;&gt; --&gt;

    &lt;style&gt;

    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;sidebar&quot;&gt;
        &lt;!-- &lt;h2&gt;Admin Panel&lt;/h2&gt; --&gt;
        &lt;a href=&quot;dashboard.php&quot;&gt;&lt;i class=&quot;fas fa-tachometer-alt&quot;&gt;&lt;/i&gt; Dashboard&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt; User Management&lt;/a&gt;
        &lt;!-- &lt;a href=&quot;#&quot; id=&quot;settings-toggle&quot;&gt;&lt;i class=&quot;fas fa-cog&quot;&gt;&lt;/i&gt; Settings &lt;i class=&quot;fas fa-chevron-down float-right&quot;&gt;&lt;/i&gt;&lt;/a&gt; --&gt;
        &lt;!-- &lt;div class=&quot;submenu&quot; id=&quot;settings-submenu&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-user-cog&quot;&gt;&lt;/i&gt; Profile Settings&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-lock&quot;&gt;&lt;/i&gt; Account Settings&lt;/a&gt;
        &lt;/div&gt; --&gt;
        &lt;!-- &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-chart-line&quot;&gt;&lt;/i&gt; Reports&lt;/a&gt; --&gt;
        &lt;a href=&quot;login.php&quot;&gt;&lt;i class=&quot;fas fa-sign-out-alt&quot;&gt;&lt;/i&gt; Logout&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;topbar&quot;&gt;
        &lt;h1 class=&quot;text-center d-inline-block&quot;&gt;Account Opening Dashboard&lt;/h1&gt;
        &lt;div class=&quot;dropdown d-inline-block float-right&quot;&gt;
            &lt;i class=&quot;fas fa-user-circle profile-icon&quot; id=&quot;profileDropdown&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;profileDropdown&quot;&gt;
                &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Change Password&lt;/a&gt;
                &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Logout&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;footer&gt;
        &lt;p class=&quot;text-success&quot;&gt;Developed By &lt;span&gt;FSIB PLC. ICT Division&lt;span&gt;&lt;/p&gt;
    &lt;/footer&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;

    &lt;!-- &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.datatables.net/2.1.8/js/dataTables.js&quot;&gt;&lt;/script&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.datatables.net/2.1.8/js/dataTables.semanticui.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js&quot;&gt;&lt;/script&gt; --&gt;
    &lt;script&gt;

    &lt;/script&gt;

    &lt;script&gt;
        // event.preventDefault();
        // Toggle submenu visibility
        // document.getElementById(&#039;settings-toggle&#039;).addEventListener(&#039;click&#039;, function() {
        //     var submenu = document.getElementById(&#039;settings-submenu&#039;);
        //     submenu.style.display = submenu.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;
        // });

        // Show/hide user tables when cards are clicked
        document.getElementById(&#039;requestCard&#039;).addEventListener(&#039;click&#039;, function() {
            // var requestTable = document.getElementById(&#039;requestTable&#039;);
            // requestTable.style.display = requestTable.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;


            document.getElementById(&#039;requestTable&#039;).style.display = &#039;block&#039;; // Hide other tables
            document.getElementById(&#039;openedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            document.getElementById(&#039;completedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            // document.getElementById(&#039;account_details&#039;).style.display = &#039;none&#039;; // Hide other tables
        });

        document.getElementById(&#039;openedCard&#039;).addEventListener(&#039;click&#039;, function() {

            // var openedTable = document.getElementById(&#039;openedTable&#039;);
            // openedTable.style.display = openedTable.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;
            document.getElementById(&#039;openedTable&#039;).style.display = &#039;block&#039;; // Hide other tables
            document.getElementById(&#039;requestTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            document.getElementById(&#039;completedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            // document.getElementById(&#039;account_details&#039;).style.display = &#039;none&#039;; // Hide other tables

        });

        document.getElementById(&#039;completedCard&#039;).addEventListener(&#039;click&#039;, function() {
            // var completedTable = document.getElementById(&#039;completedTable&#039;);
            // completedTable.style.display = completedTable.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;
            document.getElementById(&#039;completedTable&#039;).style.display = &#039;block&#039;; // Hide other tables
            document.getElementById(&#039;requestTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            document.getElementById(&#039;openedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            // document.getElementById(&#039;account_details&#039;).style.display = &#039;none&#039;; // Hide other tables

        });
        document.getElementById(&#039;acc_details&#039;).addEventListener(&#039;click&#039;, function() {
            // var completedTable = document.getElementById(&#039;completedTable&#039;);
            // completedTable.style.display = completedTable.style.display === &#039;block&#039; ? &#039;none&#039; : &#039;block&#039;;
            document.getElementById(&#039;openAction&#039;).style.display = &#039;block&#039;; // Hide other tables
            document.getElementById(&#039;completedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            document.getElementById(&#039;requestTable&#039;).style.display = &#039;block&#039;; // Hide other tables
            document.getElementById(&#039;openedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
            // document.getElementById(&#039;account_details&#039;).style.display = &#039;none&#039;; // Hide other tables

        });

        // Function to go back to the table
        function requestTableGoBack() {
            document.getElementById(&#039;update-content&#039;).classList.add(&#039;user-table&#039;);
            document.getElementById(&#039;requestTable&#039;).classList.remove(&#039;user-table&#039;);
        }

        function CompletedTableGoBackGoBack() {
            document.getElementById(&#039;view-content&#039;).classList.add(&#039;user-table&#039;);
            document.getElementById(&#039;completedTable&#039;).classList.remove(&#039;user-table&#039;);
        }
        // document.getElementById(&#039;acc_details&#039;).addEventListener(&#039;click&#039;, function() {
        //     document.getElementById(&#039;openAction&#039;).style.display = &#039;block&#039;; // Hide other tables
        //     document.getElementById(&#039;requestTable&#039;).style.display = &#039;none&#039;; // Hide other tables
        //     document.getElementById(&#039;openedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
        //     document.getElementById(&#039;completedTable&#039;).style.display = &#039;none&#039;; // Hide other tables
        // });


        // document.getElementById(&#039;acc_details&#039;).addEventListener(&#039;click&#039;, function() {
        //     document.getElementById(&#039;test&#039;).style.display = &#039;block&#039;;
        //     alert(&quot;Kazi&quot;);

        // });
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>        </div>
    </div>