
<!-------   <script src="../js/authentication.js"></script> ------>
   <!-- <script src="../js/main_plus.js"></script> -->
   <?php
session_start();
$activePage = 'configuration';
$activeSubPage = 'Authentication';
include("../elements/master.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Authentication</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/create_auth.css">
</head>
<body>
    <div class="usertable">
        <h3>CREATE AUTHENTICATION</h3>
        <div class="userdetails">
            <form action="auth_create_function.php" class="form" method="POST"> 
                <div class="top_sec">
                    <div class="input-group">
                        <label for="id">Name</label>
                        <input type="text" id="id" name="id" placeholder="Enter Your Pid" class="input" required />
                    </div>
                    <div class="input-group">
                        <label for="description">Description</label>
                        <input type="text" id="description" name="description" placeholder="description" class="input" required />
                    </div>
                </div>

                <div class="main">
                    <div class="add_button">
                        <label><a href="#" id="toggle-button" class="add-link">ADD</a></label>
                    </div>

                    <div id="additional-fields-container">
                        <div class="additional-fields">
                            <div class="input-fields-group">
                                <div class="input-group">
                                    <label for="cust_field3">NAME</label>
                                    <input type="text" id="cust_field3" name="cust_field3" />
                                </div>
                                <div class="input-group">
                                    <label for="another_field">DESCRIPTION</label>
                                    <input type="text" id="another_field" name="another_field" />
                                </div>
                                <div class="input-group">
                                    <label for="more_details">MATCHES</label>
                                    <input type="text" id="more_details" name="more_details" />
                                </div>
                            </div>

                            <div class="dropdown1-container">
                                <div class="dropdown-group section">
                                    <label for="dropdown1">Condition</label>
                                    <select class="condition-dropdown" name="dropdown1" onchange="handleConditionChange(this)">
                                        <option value="#">-------------</option>
                                        <option value="1">SSID</option>
                                        <option value="2">MAC address</option>
                                    </select>
                                </div>
                                <div class="dropdown-group" style="display: none;">
                                    <label for="dropdown3">Options</label>
                                    <select class="options-dropdown" name="dropdown3" onchange="showInputField(this)">
                                        <option value="#">Select an option</option>
                                        <option value="A">Option 1</option>
                                        <option value="B">Option 2</option>
                                        <option value="C">Option 3</option>
                                        <option value="D">Option 4</option>
                                    </select>
                                </div>
                                <div class="dropdown-group" style="display: none;">
                                    <label for="value-input">Values</label>
                                    <input class="drop_one_input" type="text" name="value_input" placeholder="Enter value" />
                                </div>
                                <div class="action-img">
                                    <img src="../images/add_hover.png" class="add" alt="Add Field">
                                    <img src="../images/minus_hover.png" class="remove" alt="Remove Field">
                                </div>
                            </div>

                            <div class="dropdown2-container">
                                <div class="dropdown-group section">
                                    <label for="dropdown2">Action</label>
                                    <select class="action-dropdown" name="dropdown2" onchange="handleActionChange(this)">
                                        <option value="#">------------------</option>
                                        <option value="A">Role</option>
                                        <option value="B">Access duration</option>
                                        <option value="C">Unregistration date</option>
                                    </select>
                                </div>
                                <div class="dropdown-group" style="display: none;">
                                    <label for="role-values">Role</label>
                                    <select name="role_values">
                                        <option value="#">Select a role</option>
                                        <option value="null">null</option>
                                        <option value="guest">guest</option>
                                        <option value="user">user</option>
                                    </select>
                                </div>
                                <div class="dropdown-group" style="display: none;">
                                    <label for="access-duration">Access Duration</label>
                                    <select name="access_duration">
                                        <option value="#">Select duration</option>
                                        <option value="2">2d</option>
                                        <option value="3">3d</option>
                                        <option value="4">4d</option>
                                        <option value="5">5d</option>
                                        <option value="6">6hr</option>
                                        <option value="7">7hr</option>
                                    </select>
                                </div>
                                <div class="dropdown-group" style="display: none;">
                                    <label for="unregistration-date-input">Unregistration Date</label>
                                    <input type="date" name="unregistration_date"/>
                                </div>
                                <div class="action-img">
                                    <img src="../images/add_hover.png" class="clone" alt="Add Field">
                                    <img src="../images/minus_hover.png" class="declone" alt="Remove Field">
                                </div>
                            </div>

                            <div class="image">
                                <img src="../images/add_hover.png" id="add-field" class="plus" alt="Add Field">
                                <img src="../images/minus_hover.png" id="remove-field" class="minus" alt="Remove Field">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="s_button">
                    <input type="submit" name="submit" value="Submit" class="sb_btn"/>
                </div>
            </form>
        </div>
    </div>
    <script src="../js/newjs.js"></script>
</body>
</html>
