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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mechnet User Registeration</title>
    <link rel="icon" type="image/png" href="./Images/logo.png">
    <script src="/AdminHomehcss.js"></script>
</head>

<body>
    <div class="navbar">
        <nav>
            <div class="SoftName">
                <img src="./Images/logo.png" href="Home.html" alt="Mechnet Logo">
                <a href="#" onclick="redirectToHomePage()" class="nav-link">Mechnet</a>
            </div>
            <div class="hamburger" id="hamburger">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <ul>
                <li><a href="User_Login.html" class="nav-link">LogOut</a></li>
            </ul>
        </nav>
    </div>
    <main>
        <br>
        <h1>Registeration</h1>
        <div id="message">User Added Successful ✔</div>
        <form id="registrationForm">
            <div class="RCont">
                <div id="Fname" class="form-group">
                    <label for="Fname">First Name</label>
                    <input type="text" id="FirstName" name="Fname" required>
                </div>
                <div id="Lname" class="form-group">
                    <label for="Lname">Last Name</label>
                    <input type="text" id="LastName" name="Lname">
                </div>
                <div id="Email" class="form-group">
                    <label for="Email">Email</label>
                    <input type="text" id="email" name="Email" required>
                </div>
                <div id="password" class="form-group">
                    <label for="password">Password</label>
                    <input type="text" id="pwd" name="password" required>
                </div>
                <div id="Mottive" class="form-group">
                    <label for="Mottive">Motto (Optional)</label>
                    <input type="text" id="Motto" name="Mottive">
                </div>
                <div id="status" class="form-group">
                    <label for="status">Active</label>
                    <select id="stat" name="status">
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div id="Accs" class="form-group">
                    <label for="Accs">Accounts</label>
                    <input type="number" id="Accounts" name="Accs" required>
                </div>
                <div id="Devs" class="form-group">
                    <label for="Devs">Devices</label>
                    <input type="number" id="devices" name="Devs" required>
                </div>
                <div id="plans" class="form-group">
                    <label for="plans">Select Plan</label>
                    <select name="plans" id="plan" onchange="toggleBillingCycle(this.value)">
                        <option value="Trial">Trial</option>
                        <option value="Basic">Basic</option>
                        <option value="Pro">Pro</option>
                        <option value="Ultimate">Ultimate</option>
                        <option value="Custom">Custom</option>
                    </select>
                </div>
                <div id="bilcyc" class="form-group" style="display: none;">
                    <label for="bilcyc">Billing Cycle</label>
                    <select name="bilcyc" id="BilCyc">
                        <option value="" disabled selected>Select Billing Cycle</option>
                        <option value="Monthly">Monthly</option>
                        <option value="Yearly">Yearly</option>
                    </select>
                </div>
                <div id="modules" class="form-group1">
                    <label for="modules">Select Modules</label>
                    <div class="SConts">
                        <label>
                            <input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)">
                            All
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="LikeLimitSettings"> Like Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="FollowLimitSettings"> Follow Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="UnfollowLimitSettings"> Unfollow Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="CommentLimitSettings"> Comment Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="StoryLimitSettings"> Story Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="WelDMSettings"> Welcome DM Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="OutBoundSettings"> Outbound DM Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="RepostingSettings"> Reposting Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="PostSharingSettings"> Post Sharing Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="EngagingFollowersSettings"> Engaging Followers
                            Module
                        </label>
                        <label>
                            <input type="checkbox" name="modules" id="AccountEditingSettings"> Account Editing Module
                        </label>
                    </div>
                </div>
            </div>
            <div class="AddUser">
                <button type="submit" class="register">Register User</button>
            </div>
        </form>
    </main>
    
    <script src="/Ns/AddUser.js"></script>
</body>

</html>