<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لیست کاربران و کدهای داخلی</title>
    <style>
        /* Global Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            color: #333;
            line-height: 1.6;
            direction: rtl;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 40px auto;
            padding: 30px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
            border-top: 4px solid #1976d2; /* Blue color */
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #1976d2; /* Blue color */
            font-size: 32px;
            font-weight: 600;
        }

        .login-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .login-btn {
            padding: 12px 30px;
            background-color: #1976d2; /* Blue color */
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin-bottom: 10px;
        }

        .login-btn:hover {
            background-color: #1565c0; /* Darker Blue */
            transform: translateY(-2px);
        }

        .login-btn:active {
            transform: translateY(2px);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 15px;
            text-align: center;
            font-size: 16px;
        }

        th {
            background-color: #1976d2; /* Blue color */
            color: white;
            font-weight: bold;
            text-transform: uppercase;
        }

        td {
            background-color: #e3f2fd; /* Light Blue */
            border-bottom: 1px solid #ddd;
            transition: background-color 0.3s ease;
        }

        td:hover {
            background-color: #bbdefb; /* Lighter Blue */
        }

        .add-user-btn, .remove-user-btn, .back-btn {
            display: inline-block;
            padding: 12px 25px;
            background-color: #1976d2; /* Blue color */
            color: white;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 5px;
        }

        .add-user-btn:hover, .remove-user-btn:hover, .back-btn:hover {
            background-color: #1565c0; /* Darker Blue */
            transform: translateY(-2px);
        }

        .add-user-btn:active, .remove-user-btn:active, .back-btn:active {
            transform: translateY(2px);
        }

        /* Dark Mode */
        body.dark-mode {
            background-color: #333;
            color: #fff;
        }

        .container.dark-mode {
            background-color: #444;
            box-shadow: 0 6px 30px rgba(255, 255, 255, 0.2);
        }

        th.dark-mode {
            background-color: #333;
            color: #fff;
        }

        td.dark-mode {
            background-color: #555;
            color: #fff;
        }

        td.dark-mode:hover {
            background-color: #666;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            h1 {
                font-size: 24px;
            }

            table {
                font-size: 14px;
            }

            .add-user-btn, .remove-user-btn, .back-btn {
                width: 180px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>لیست کاربران و کدهای داخلی</h1>

        <!-- Login Section -->
        <div style="text-align: right;">
            <button class="login-btn" onclick="login()">ورود به حالت ویرایش</button>
        </div>

        <!-- Table to display the data -->
        <table id="userTable">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>کد داخلی</th>
                    <!-- Only display 'عملیات' column in Edit Mode -->
                    <th id="operationColumn" style="display: none;">عملیات</th>
                </tr>
            </thead>
            <tbody>
                <!-- Dynamic Content -->
            </tbody>
        </table>

        <!-- Buttons to add/remove users -->
        <div id="actionButtons" style="display:none;">
            <button class="add-user-btn" onclick="addUser()">افزودن کاربر جدید</button>
            <!--<button class="remove-user-btn" onclick="removeUser()">حذف کاربر</button><!-->
            <button class="back-btn" onclick="goBackToView()">برگشت به صفحه اصلی</button>
        </div>
    </div>

    <script>
        // Sample user data (to simulate a real database)
        let users = getUsers() || [];
        let isEditMode = false; // Variable to track the mode

        // Function to get users from localStorage (if any)
        function getUsers() {
            const users = localStorage.getItem('users');
            return users ? JSON.parse(users) : []; // Return parsed users array or empty array
        }

        // Function to save users to localStorage
        function saveUsers(users) {
            localStorage.setItem('users', JSON.stringify(users)); // Save users array as a JSON string
        }

        // Function to render the table from users array
        function renderTable() {
            const tableBody = document.querySelector('#userTable tbody');
            const operationColumn = document.getElementById('operationColumn');
            tableBody.innerHTML = ''; // Clear current table data

            users.forEach((user, index) => {
                const row = document.createElement('tr');
                const nameCell = document.createElement('td');
                const codeCell = document.createElement('td');
                const actionCell = document.createElement('td');

                nameCell.textContent = user.name;
                codeCell.textContent = user.code;

                // In Edit Mode, we display the 'حذف' button
                if (isEditMode) {
                    const removeButton = document.createElement('button');
                    removeButton.textContent = 'حذف';
                    removeButton.classList.add('remove-user-btn');
                    removeButton.onclick = () => removeUser(index);
                    actionCell.appendChild(removeButton);
                }

                row.appendChild(nameCell);
                row.appendChild(codeCell);
                if (isEditMode) {
                    row.appendChild(actionCell); // Show 'عملیات' column in Edit Mode
                }

                tableBody.appendChild(row);
            });

            // Toggle the display of 'عملیات' column
            operationColumn.style.display = isEditMode ? 'table-cell' : 'none';
        }

        // Function to add a new user
        function addUser() {
            const name = prompt("Enter user's name:");
            const code = prompt("Enter user's internal code:");

            if (name && code) {
                users.push({ name, code });
                saveUsers(users); // Save updated users list
                renderTable(); // Re-render table with new user
            } else {
                alert("Please enter both name and code.");
            }
        }

        // Function to remove a user
        function removeUser(index) {
            users.splice(index, 1);
            saveUsers(users); // Save updated users list
            renderTable(); // Re-render table with remaining users
        }

        // Login function to handle Edit mode
        function login() {
            const password = prompt("Enter the password:");

            if (password === 'admin@123') {
                isEditMode = true;
                document.querySelector('#actionButtons').style.display = 'block';
                renderTable(); // Re-render table with current users
            } else {
                alert("Incorrect password for Edit mode.");
            }
        }

        // Go back to View Mode
        function goBackToView() {
            isEditMode = false;
            document.querySelector('#actionButtons').style.display = 'none';
            renderTable(); // Re-render table for View mode
        }

        // Initial render for View Mode
        renderTable(); // Render the table in View Mode when page loads
    </script>

</body>
</html>
