<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet" href="/css/admin-styling.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />


</head>

<body>
    <!-- COMPONENT HEADER UTAMA -->
    <%switch(status){ case 'admin' :%>
        <%- include('components/navigation/header-admin') %>
            <% break; case 'user' :%>
                <%- include('components/navigation/header-user') %>
                    <% break; case 'anon' :%>
                        <%- include('components/navigation/header') %>
                            <% break; }%>
                                <!-- END OF HEADER -->
                                <div class="main-grid-section">
                                    <div class="left-column">
                                        <div class="main-menu">
                                            <div class="admin-menu-button">
                                                <button class="site-links" id="adjustReview">Adjust Review
                                                    Requirement</button>
                                                <button class="site-links" id="addItem">Add Item</button>
                                                <button class="site-links" id="addCategory">Add
                                                    Category/Sub-category</button>
                                                <button class="site-links" id="importTable">Import/Export table</button>
                                            </div>
                                            <%- include('components/adminMenus/adjustReviewReq') %>
                                                <%- include('components/adminMenus/importTable') %>
                                                    <%- include('components/adminMenus/addCategorySubcategory') %>
                                                        <%- include('components/adminMenus/addBagItem') %>
                                                            <%- include('components/adminMenus/stat-all') %>
                                        </div>
                                    </div>
                                    <div class="right-column">
                                        <%- include('components/adminMenus/recentBags') %>
                                    </div>
                                </div>
                                <script>

                                    const bagitem = document.getElementById('addBagItem');
                                    const catsub = document.getElementById('addCategoryForm');
                                    const adjust = document.getElementById('revreq');
                                    const importTable = document.getElementById('importForm');


                                    function showAddBagItem() {
                                        document.getElementById('addBagItem').classList.remove('hidden');
                                        document.getElementById('addCategoryForm').classList.add('hidden');
                                        document.getElementById('revreq').classList.add('hidden');
                                        document.getElementById('importForm').classList.add('hidden');
                                    }

                                    function showCatSubHidden() {
                                        document.getElementById('addBagItem').classList.add('hidden');
                                        document.getElementById('addCategoryForm').classList.remove('hidden');
                                        document.getElementById('revreq').classList.add('hidden');
                                        document.getElementById('importForm').classList.add('hidden');
                                    }

                                    function showRevereq() {
                                        document.getElementById('addBagItem').classList.add('hidden');
                                        document.getElementById('addCategoryForm').classList.add('hidden');
                                        document.getElementById('revreq').classList.remove('hidden');
                                        document.getElementById('importForm').classList.add('hidden');
                                    }

                                    function showImportExport() {
                                        document.getElementById('addBagItem').classList.add('hidden');
                                        document.getElementById('addCategoryForm').classList.add('hidden');
                                        document.getElementById('revreq').classList.add('hidden');
                                        document.getElementById('importForm').classList.remove('hidden');
                                    }

                                    function showStats() {
                                        document.getElementById('addBagItem').classList.add('hidden');
                                        document.getElementById('addCategoryForm').classList.add('hidden');
                                        document.getElementById('revreq').classList.add('hidden');
                                        document.getElementById('importForm').classList.add('hidden');
                                    }

                                    document.getElementById('addItem').addEventListener('click', function () {
                                        showAddBagItem();
                                    });

                                    document.getElementById('addCategory').addEventListener('click', function () {
                                        showCatSubHidden();
                                    });

                                    document.getElementById('adjustReview').addEventListener('click', function () {
                                        showRevereq();
                                    });

                                    document.getElementById('importTable').addEventListener('click', function () {
                                        showImportExport();
                                    });

                                    document.getElementById('showStats').addEventListener('click', function () {
                                        showStats();
                                    });

                                    document.getElementById('addItem').addEventListener('click', function () {
                                        showAddBagItem();
                                    });

                                    document.getElementById('addCategory').addEventListener('click', function () {
                                        showCatSubHidden();
                                    });

                                    document.getElementById('adjustReview').addEventListener('click', function () {
                                        showRevereq();
                                    });

                                    document.getElementById('importTable').addEventListener('click', function () {
                                        showImportExport();
                                    });
                                </script>
</body>

</html>