<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bobby Bossmenu</title>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <div id="bossMenu">
        <div class="menu-container">

            <button class="close-btn" onclick="closeMenu()">
                <i class="fas fa-sign-out-alt"></i>
            </button>

            


            <div class="side-menu">

                <div class="side-menu-header">
                    Boss Menu
                </div>
                <button onclick="showOption('option1')">
                    <i class="fas fa-home"></i> <span>Oversigt</span>
                </button>
                <button onclick="showOption('option2')">
                    <i class="fas fa-user"></i> <span>Ansatte</span>
                </button>
                <button onclick="showOption('option3')">
                    <i class="fas fa-landmark"></i> <span>Firmakonto</span>
                </button>
                <button onclick="showOption('option4')">
                    <i class="fas fa-tasks"></i> <span>Rangering</span>
                </button>
                <button onclick="showOption('option5')">
                    <i class="fas fa-user-shield"></i> <span>Logbog</span>
                </button>
            </div>


            <div class="main-content">

<div class="content-section" id="option1">

    <h2 class="welcome-title">Velkommen, <span id="characterName">Anonym</span>!</h2>
    
    

    <div class="job-info-container">
        <div class="job-logo">

            <img src="placeholder.jpg" alt="Logo" id="jobLogo" class="circle-logo" />
        </div>
        
<!-- Job detaljer -->
<div class="job-details">
    <h3 id="jobTitle">Ugyldigt job - kontakt support</h3>
</div>



    </div>


    <div class="stats-container">
        <div class="stat-box">
            <p>Ansatte Online</p>
            <span id="onDutyCount">34</span>
        </div>
        <div class="stat-box">
            <p>Balance</p>
            <span id="balance">69</span>
        </div>
        <div class="stat-box">
            <p>Totale Ansatte</p>
            <span id="totalEmployees">1</span>
        </div>
    </div>


    <div class="logo-link-container">
        <label for="logoURL">Indsæt link til logo:</label>
        <input type="text" id="logoURL" placeholder="https://link-til-logo.com/logo.png" />
    </div>
</div>


<div id="option2" class="content-section hidden">

    <h2 class="section-title">Ansatte</h2>
    

    <div class="hire-section">
        <input type="text" id="employeeIdInput" placeholder="ID" class="input-field" />
        <button id="hireButton" class="hire-btn">Ansæt</button>
        <button id="refreshButton" class="refresh-btn">
            <i class="fas fa-sync-alt"></i>
        </button>
    </div>
    

    <div class="employee-list-header">
        <p style="margin-left: 3px;">Navn:</p>
        <p></p>
    </div>
    
    <!-- Liste over ansatte -->
    <div class="employee-list">

        <div class="grade-select-wrapper">
            <select class="grade-select" id="jobGradeSelect">
                <option value="" disabled selected>Ændre Rangering</option>

            </select>
        </div>      
        
    </div>
</div>
<div id="fireConfirmPopup" class="popup hidden">
    <div class="popup-content">
        <p id="fireConfirmText">Er du sikker på, at du vil fyre denne person fra din virksomhed?</p>
        <button id="confirmFireBtn" class="confirm-btn">Ja, fyr</button>
        <button id="cancelFireBtn" class="cancel-btn">Annuller</button>
    </div>
</div> 
<!-- Notification Container -->
<div id="fireNotification" class="fire-notification hidden">
    <p id="fireNotificationText">Du har fyret en spiller.</p>
</div>

<div id="option3" class="content-section hidden">
    <!-- Firmakontoens Overskrift -->
    <h2 class="section-title">Firmakonto</h2>


    <h3 class="balance-title">Virksomhedens Balance: <span id="companyBalance">0</span></h3>


    <div class="account-actions">
        <input type="number" id="amountInput" placeholder="Indtast beløb" min="1" />

        <div class="button-container">
            <button id="withdrawButton" class="action-btn withdraw-btn">Hæv</button>
            <button id="depositButton" class="action-btn deposit-btn">Indsæt</button>
        </div>
    </div>
</div>

<div id="option5" class="content-section hidden">
    <h2 class="section-title">Transaktionslog</h2>

    <div class="log-tabs">
        <button id="transactionTab" class="tab-btn active">Transaktioner</button>
       <!-- <button id="staffTab" class="tab-btn">Ansatte</button>-->
        <button id="rankingTab" class="tab-btn">Rangering</button>
    </div>

    <div id="transactionLogs" class="log-content">
        <div id="noTransactionLogs" class="log-row">
            <div class="log-detail">Ingen transaktioner fundet.</div>
        </div>
    </div>

    <div id="staffLogs" class="log-content hidden">
        <div id="noStaffLogs" class="log-row">
            <div class="log-detail">Ingen ansatte logs fundet.</div>
        </div>
    </div>

    <div id="rankingLogs" class="log-content hidden">

        <div id="logs-container" class="log-rows"></div>
    </div>
</div>








<div id="option4" class="content-section hidden">

    <h2 class="section-title">Rangerings Administration</h2>
    
    <!-- Tilføj rang sektion -->
    <div class="rank-section">
        <button id="addRankButton" class="action-btn add-rank-btn">Tilføj Rang</button>
    </div>
    

    <div class="rank-list-header">
        <p>Rang Navn:</p>
        <p>Indstillinger:</p>
    </div>
    
    <div class="rank-list">
        <div class="rank-row" 
             data-grade="1" 
             data-ranking="10" 
             data-salary="3000">
            <span class="rank-name">Admin</span>
            <div class="rank-actions">
                <button class="edit-btn">Rediger</button>
                <button class="delete-btn">Slet</button>
            </div>
        </div>
    </div>
    

    </div>
    <div id="overlay" class="overlay"></div>
    <div id="addRankPopup" class="add-rank-popup hidden">
        <div class="add-rank-popup-content">
            <h3>Tilføj Ny Rang</h3>
            <div class="form-group">
                <label for="rankGradeInput">Grade:</label>
                <input id="rankGradeInput" type="number" placeholder="Indtast grad" min="0" required />
            </div>
            <div class="form-group">
                <label for="rankRankingInput">Rangering:</label>
                <input id="rankRankingInput" type="text" placeholder="Ansat = 'employee' | Chef = 'boss'" />
            </div>
            <div class="form-group">
                <label for="rankLabelInput">Navn:</label>
                <input id="rankLabelInput" type="text" placeholder="Indtast navn" />
            </div>
            <div class="form-group">
                <label for="rankSalaryInput">Løn:</label>
                <input id="rankSalaryInput" type="number" placeholder="Indtast løn" min="0" required />
            </div>
            <div class="popup-buttons">
                <button id="cancelRankBtn">Fortryd</button>
                <button id="createRankBtn">Opret</button>
            </div>
        </div>
    </div>  
      
    

    <div id="deleteRankConfirmPopup" class="popup hidden">
        <div class="popup-content">
            <p id="deleteRankConfirmText"></p>
            <div class="popup-actions">
                <button id="confirmDeleteRankBtn" class="confirm-btn">Bekræft</button>
                <button id="cancelDeleteRankBtn" class="cancel-btn">Annuller</button>
            </div>
        </div>
    </div>    
</div>


    <script src="script.js"></script>
    <script>

        document.addEventListener('keydown', function(event) {
            if (event.key === 'b') {
                fetch(`https://${GetParentResourceName()}/openMenu`, {
                    method: 'POST'
                });
            }
        });
    </script>
    
</body>
</html>
