From 117861034af242bda05cbb41143078e8ef24499e Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Fri, 14 Feb 2025 13:42:15 -0500
Subject: [PATCH] Enhanced the add/edit interface Modal UI into tabs

---
 modals/client_asset_interface_add_modal.php  | 336 +++++++-------
 modals/client_asset_interface_edit_modal.php | 458 ++++++++++---------
 2 files changed, 427 insertions(+), 367 deletions(-)

diff --git a/modals/client_asset_interface_add_modal.php b/modals/client_asset_interface_add_modal.php
index 745b609c..a5826367 100644
--- a/modals/client_asset_interface_add_modal.php
+++ b/modals/client_asset_interface_add_modal.php
@@ -14,181 +14,209 @@
 
                 <div class="modal-body bg-white">
 
-                    <!-- Interface Name -->
-                    <div class="form-group">
-                        <label>Interface Name or Port / <span class="text-secondary">Primary</span></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
-                            </div>
-                            <input type="text" class="form-control" name="name" placeholder="Interface name or port number" maxlength="200" required>
-                            <div class="input-group-append">
-                                <div class="input-group-text">
-                                    <input type="checkbox" name="primary_interface" value="1" title="Mark Interface as primary">
+                    <ul class="nav nav-pills nav-justified mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" data-toggle="pill" href="#pills-interface-details">Details</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="pill" href="#pills-interface-network">Network</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="pill" href="#pills-interface-notes">Notes</a>
+                        </li>
+                    </ul>
+
+                    <hr>
+
+                    <div class="tab-content">
+
+                        <div class="tab-pane fade show active" id="pills-interface-details">
+
+                            <!-- Interface Name -->
+                            <div class="form-group">
+                                <label>Interface Name or Port / <span class="text-secondary">Primary</span></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" name="name" placeholder="Interface name or port number" maxlength="200" required>
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">
+                                            <input type="checkbox" name="primary_interface" value="1" title="Mark Interface as primary">
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <!-- Type -->
-                    <div class="form-group">
-                        <label for="network">Type</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-plug"></i></span>
-                            </div>
-                            <select class="form-control select2" name="type">
-                                <option value="">- Select Type -</option>
-                                <?php foreach($interface_types_array as $interface_type) { ?>
-                                    <option><?php echo $interface_type; ?></option>
-                                <?php } ?>
-                            </select>
-                        </div>
-                    </div>
-
-                    <!-- Interface Description -->
-                    <div class="form-group">
-                        <label>Description</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-tag"></i></span>
-                            </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="description"
-                                placeholder="Short Description" 
-                                maxlength="200"
-                            >
-                        </div>
-                    </div>
-
-                    <!-- MAC Address -->
-                    <div class="form-group">
-                        <label>MAC Address</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
-                            </div>
-                            <input type="text" class="form-control" name="mac" placeholder="MAC Address" data-inputmask="'alias': 'mac'" maxlength="200" data-mask>
-                        </div>
-                    </div>
-
-                    <!-- IP (with optional DHCP checkbox) -->
-                    <div class="form-group">
-                        <label>IP or DHCP</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
-                            </div>
-                            <input type="text" class="form-control" name="ip" placeholder="IP Address" data-inputmask="'alias': 'ip'" maxlength="200" data-mask>
-                            <div class="input-group-append">
-                                <div class="input-group-text">
-                                    <input type="checkbox" name="dhcp" value="1" title="Check to mark address as DHCP controlled">
+                            <!-- Type -->
+                            <div class="form-group">
+                                <label for="network">Type</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-plug"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="type">
+                                        <option value="">- Select Type -</option>
+                                        <?php foreach($interface_types_array as $interface_type) { ?>
+                                            <option><?php echo $interface_type; ?></option>
+                                        <?php } ?>
+                                    </select>
                                 </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <!-- NAT IP -->
-                    <div class="form-group">
-                        <label>NAT IP</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                            <!-- Interface Description -->
+                            <div class="form-group">
+                                <label>Description</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-tag"></i></span>
+                                    </div>
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        name="description"
+                                        placeholder="Short Description" 
+                                        maxlength="200"
+                                    >
+                                </div>
                             </div>
-                            <input
-                                type="text"
-                                class="form-control"
-                                name="nat_ip"
-                                placeholder="Nat IP"
-                                maxlength="200"
-                                data-inputmask="'alias': 'ip'"
-                                data-mask
-                            >
-                        </div>
-                    </div>
 
-                    <!-- IPv6 -->
-                    <div class="form-group">
-                        <label>IPv6</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                        </div>
+
+                        <div class="tab-pane fade" id="pills-interface-network">
+
+                            <!-- MAC Address -->
+                            <div class="form-group">
+                                <label>MAC Address</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" name="mac" placeholder="MAC Address" data-inputmask="'alias': 'mac'" maxlength="200" data-mask>
+                                </div>
                             </div>
-                            <input type="text" class="form-control" name="ipv6" placeholder="IPv6 Address" maxlength="200">
-                        </div>
-                    </div>
 
-                    <!-- Network -->
-                    <div class="form-group">
-                        <label>Network</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-network-wired"></i></span>
+                            <!-- IP (with optional DHCP checkbox) -->
+                            <div class="form-group">
+                                <label>IP or DHCP</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" name="ip" placeholder="IP Address" data-inputmask="'alias': 'ip'" maxlength="200" data-mask>
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">
+                                            <input type="checkbox" name="dhcp" value="1" title="Check to mark address as DHCP controlled">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <select class="form-control select2" name="network">
-                                <option value="">- Select Network -</option>
-                                <?php
-                                $sql_network_select = mysqli_query($mysqli, "SELECT * FROM networks WHERE network_archived_at IS NULL AND network_client_id = $client_id ORDER BY network_name ASC");
-                                while ($row = mysqli_fetch_array($sql_network_select)) {
-                                    $network_id = $row['network_id'];
-                                    $network_name = nullable_htmlentities($row['network_name']);
-                                    $network = nullable_htmlentities($row['network']);
-                                    ?>
-                                    <option value="<?php echo $network_id; ?>">
-                                        <?php echo "$network_name - $network"; ?>
-                                    </option>
-                                <?php } ?>
-                            </select>
-                        </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label>Connected to</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-desktop"></i></span>
+                            <!-- NAT IP -->
+                            <div class="form-group">
+                                <label>NAT IP</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input
+                                        type="text"
+                                        class="form-control"
+                                        name="nat_ip"
+                                        placeholder="Nat IP"
+                                        maxlength="200"
+                                        data-inputmask="'alias': 'ip'"
+                                        data-mask
+                                    >
+                                </div>
+                            </div>
+
+                            <!-- IPv6 -->
+                            <div class="form-group">
+                                <label>IPv6</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" name="ipv6" placeholder="IPv6 Address" maxlength="200">
+                                </div>
+                            </div>
+
+                            <!-- Network -->
+                            <div class="form-group">
+                                <label>Network</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-network-wired"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="network">
+                                        <option value="">- Select Network -</option>
+                                        <?php
+                                        $sql_network_select = mysqli_query($mysqli, "SELECT * FROM networks WHERE network_archived_at IS NULL AND network_client_id = $client_id ORDER BY network_name ASC");
+                                        while ($row = mysqli_fetch_array($sql_network_select)) {
+                                            $network_id = $row['network_id'];
+                                            $network_name = nullable_htmlentities($row['network_name']);
+                                            $network = nullable_htmlentities($row['network']);
+                                            ?>
+                                            <option value="<?php echo $network_id; ?>">
+                                                <?php echo "$network_name - $network"; ?>
+                                            </option>
+                                        <?php } ?>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label>Connected to</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-desktop"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="connected_to">
+                                        <option value="">- NSelect Asset and Interface -</option>
+                                        <?php
+                                        $sql_interfaces_select = mysqli_query($mysqli, "
+                                            SELECT i.interface_id, i.interface_name, a.asset_name
+                                            FROM asset_interfaces i
+                                            LEFT JOIN assets a ON a.asset_id = i.interface_asset_id
+                                            WHERE a.asset_archived_at IS NULL
+                                              AND a.asset_client_id = $client_id
+                                              AND a.asset_id != $asset_id
+                                              AND i.interface_id NOT IN (SELECT interface_a_id FROM asset_interface_links)
+                                              AND i.interface_id NOT IN (SELECT interface_b_id FROM asset_interface_links)
+                                            ORDER BY a.asset_name ASC, i.interface_name ASC
+                                        ");
+
+                                        while ($row = mysqli_fetch_array($sql_interfaces_select)) {
+                                            $interface_id_select = intval($row['interface_id']);
+                                            $interface_name_select = nullable_htmlentities($row['interface_name']);
+                                            $asset_name_select = nullable_htmlentities($row['asset_name']);
+                                            ?>
+                                            <option value="<?php echo $interface_id_select; ?>">
+                                                <?php echo "$asset_name_select - $interface_name_select"; ?>
+                                            </option>
+                                        <?php } ?>
+                                    </select>
+                                </div>
                             </div>
-                            <select class="form-control select2" name="connected_to">
-                                <option value="">- NSelect Asset and Interface -</option>
-                                <?php
-                                $sql_interfaces_select = mysqli_query($mysqli, "
-                                    SELECT i.interface_id, i.interface_name, a.asset_name
-                                    FROM asset_interfaces i
-                                    LEFT JOIN assets a ON a.asset_id = i.interface_asset_id
-                                    WHERE a.asset_archived_at IS NULL
-                                      AND a.asset_client_id = $client_id
-                                      AND a.asset_id != $asset_id
-                                      AND i.interface_id NOT IN (SELECT interface_a_id FROM asset_interface_links)
-                                      AND i.interface_id NOT IN (SELECT interface_b_id FROM asset_interface_links)
-                                    ORDER BY a.asset_name ASC, i.interface_name ASC
-                                ");
 
-                                while ($row = mysqli_fetch_array($sql_interfaces_select)) {
-                                    $interface_id_select = intval($row['interface_id']);
-                                    $interface_name_select = nullable_htmlentities($row['interface_name']);
-                                    $asset_name_select = nullable_htmlentities($row['asset_name']);
-                                    ?>
-                                    <option value="<?php echo $interface_id_select; ?>">
-                                        <?php echo "$asset_name_select - $interface_name_select"; ?>
-                                    </option>
-                                <?php } ?>
-                            </select>
                         </div>
-                    </div>
 
-                    <!-- Notes -->
-                    <div class="form-group">
-                        <textarea class="form-control" rows="5" placeholder="Enter some notes" name="notes"></textarea>
+                        <div class="tab-pane fade" id="pills-interface-notes">
+                            <!-- Notes -->
+                            <div class="form-group">
+                                <textarea class="form-control" rows="8" placeholder="Enter some notes" name="notes"></textarea>
+                            </div>
+                        </div>
+
                     </div>
 
                 </div>
                 <div class="modal-footer bg-white">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                    <button type="submit" name="add_asset_interface" class="btn btn-primary">
-                        <i class="fa fa-check"></i> Create
+                    <button type="submit" name="add_asset_interface" class="btn btn-primary text-bold">
+                        <i class="fas fa-check mr-2"></i>Create
                     </button>
+                    <button type="button" class="btn btn-light" data-dismiss="modal"><i class="fas fa-times mr-2"></i>Close</button>
                 </div>
             </form>
         </div>
diff --git a/modals/client_asset_interface_edit_modal.php b/modals/client_asset_interface_edit_modal.php
index e9f5856c..cf967a50 100644
--- a/modals/client_asset_interface_edit_modal.php
+++ b/modals/client_asset_interface_edit_modal.php
@@ -25,7 +25,7 @@ if ($link_row = mysqli_fetch_assoc($sql_link)) {
             <div class="modal-header">
                 <h5 class="modal-title">
                     <i class="fa fa-fw fa-ethernet mr-2"></i>
-                    Editing: <?php echo $interface_name; ?>
+                    Editing Interface: <strong><?php echo $interface_name; ?></strong>
                 </h5>
                 <button type="button" class="close text-white" data-dismiss="modal">
                     <span>&times;</span>
@@ -36,241 +36,273 @@ if ($link_row = mysqli_fetch_assoc($sql_link)) {
                 <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                 <input type="hidden" name="interface_id" value="<?php echo $interface_id; ?>">
 
-                <div class="modal-body bg-white" <?php if (lookupUserPermission('module_support') <= 1) { echo 'inert'; } ?>>    
+                <div class="modal-body bg-white" <?php if (lookupUserPermission('module_support') <= 1) { echo 'inert'; } ?>>  
 
-                    <!-- Interface Name -->
-                    <div class="form-group">
-                        <label>Interface Name or Port / <span class="text-secondary">Primary</span></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
-                            </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="name"
-                                placeholder="Interface name or port number" 
-                                maxlength="200"
-                                value="<?php echo $interface_name; ?>"
-                                required
-                            >
-                            <div class="input-group-append">
-                                <div class="input-group-text">
-                                    <input type="checkbox" name="primary_interface" value="1" <?php if($interface_primary) { echo "checked"; } ?> title="Mark Interface as primary">
+                    <ul class="nav nav-pills nav-justified mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" data-toggle="pill" href="#pills-interface-details<?php echo $interface_id; ?>">Details</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="pill" href="#pills-interface-network<?php echo $interface_id; ?>">Network</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="pill" href="#pills-interface-notes<?php echo $interface_id; ?>">Notes</a>
+                        </li>
+                    </ul>
+
+                    <hr>
+
+                    <div class="tab-content">
+
+                        <div class="tab-pane fade show active" id="pills-interface-details<?php echo $interface_id; ?>">  
+
+                            <!-- Interface Name -->
+                            <div class="form-group">
+                                <label>Interface Name or Port / <span class="text-secondary">Primary</span></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        name="name"
+                                        placeholder="Interface name or port number" 
+                                        maxlength="200"
+                                        value="<?php echo $interface_name; ?>"
+                                        required
+                                    >
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">
+                                            <input type="checkbox" name="primary_interface" value="1" <?php if($interface_primary) { echo "checked"; } ?> title="Mark Interface as primary">
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <!-- Interface Description -->
-                    <div class="form-group">
-                        <label>Description</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-tag"></i></span>
-                            </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="description"
-                                placeholder="Short Description" 
-                                maxlength="200"
-                                value="<?php echo $interface_description; ?>"
-                            >
-                        </div>
-                    </div>
-
-                    <!-- Type -->
-                    <div class="form-group">
-                        <label for="network">Type</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-plug"></i></span>
-                            </div>
-                            <select class="form-control select2" name="type">
-                                <option value="">- Select Type -</option>
-                                <?php foreach($interface_types_array as $interface_type_select) { ?>
-                                    <option <?php if($interface_type == $interface_type_select) { echo "selected"; } ?>>
-                                        <?php echo $interface_type_select; ?>   
-                                    </option>
-                                <?php } ?>
-                            </select>
-                        </div>
-                    </div>
-
-                    <!-- MAC Address -->
-                    <div class="form-group">
-                        <label>MAC Address</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
-                            </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="mac"
-                                placeholder="MAC Address" 
-                                maxlength="200"
-                                value="<?php echo $interface_mac; ?>"
-                                data-inputmask="'alias': 'mac'"
-                                data-mask
-                            >
-                        </div>
-                    </div>
-
-                    <!-- IPv4 or DHCP -->
-                    <div class="form-group">
-                        <label>IPv4 or DHCP</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
-                            </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="ip"
-                                placeholder="IP Address" 
-                                maxlength="200"
-                                value="<?php echo $interface_ip; ?>"
-                                data-inputmask="'alias': 'ip'"
-                                data-mask
-                            >
-                            <div class="input-group-append">
-                                <div class="input-group-text">
+                            <!-- Interface Description -->
+                            <div class="form-group">
+                                <label>Description</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-tag"></i></span>
+                                    </div>
                                     <input 
-                                        type="checkbox" 
-                                        name="dhcp" 
-                                        value="1"
-                                        title="Check to mark address as DHCP controlled"
-                                        <?php if ($interface_ip === 'DHCP') echo "checked"; ?>
+                                        type="text" 
+                                        class="form-control" 
+                                        name="description"
+                                        placeholder="Short Description" 
+                                        maxlength="200"
+                                        value="<?php echo $interface_description; ?>"
                                     >
                                 </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <!-- NAT IP -->
-                    <div class="form-group">
-                        <label>NAT IP</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                            <!-- Type -->
+                            <div class="form-group">
+                                <label for="network">Type</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-plug"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="type">
+                                        <option value="">- Select Type -</option>
+                                        <?php foreach($interface_types_array as $interface_type_select) { ?>
+                                            <option <?php if($interface_type == $interface_type_select) { echo "selected"; } ?>>
+                                                <?php echo $interface_type_select; ?>   
+                                            </option>
+                                        <?php } ?>
+                                    </select>
+                                </div>
                             </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="nat_ip"
-                                placeholder="Nat IP" 
-                                maxlength="200"
-                                value="<?php echo $interface_nat_ip; ?>"
-                                data-inputmask="'alias': 'ip'"
-                                data-mask
-                            >
-                        </div>
-                    </div>
 
-                    <!-- IPv6 -->
-                    <div class="form-group">
-                        <label>IPv6</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                        </div> <!-- End Details -->
+
+                        <!-- Network Section -->
+                        <div class="tab-pane fade" id="pills-interface-network<?php echo $interface_id; ?>">
+
+                            <!-- MAC Address -->
+                            <div class="form-group">
+                                <label>MAC Address</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        name="mac"
+                                        placeholder="MAC Address" 
+                                        maxlength="200"
+                                        value="<?php echo $interface_mac; ?>"
+                                        data-inputmask="'alias': 'mac'"
+                                        data-mask
+                                    >
+                                </div>
                             </div>
-                            <input 
-                                type="text" 
-                                class="form-control" 
-                                name="ipv6"
-                                placeholder="IPv6 Address" 
-                                maxlength="200"
-                                value="<?php echo $interface_ipv6; ?>"
-                            >
-                        </div>
-                    </div>
 
-                    <!-- Network -->
-                    <div class="form-group">
-                        <label>Network</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-network-wired"></i></span>
+                            <!-- IPv4 or DHCP -->
+                            <div class="form-group">
+                                <label>IPv4 or DHCP</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        name="ip"
+                                        placeholder="IP Address" 
+                                        maxlength="200"
+                                        value="<?php echo $interface_ip; ?>"
+                                        data-inputmask="'alias': 'ip'"
+                                        data-mask
+                                    >
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">
+                                            <input 
+                                                type="checkbox" 
+                                                name="dhcp" 
+                                                value="1"
+                                                title="Check to mark address as DHCP controlled"
+                                                <?php if ($interface_ip === 'DHCP') echo "checked"; ?>
+                                            >
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <select class="form-control select2" name="network">
-                                <option value="">- Select Network -</option>
-                                <?php
-                                $sql_network_select = mysqli_query($mysqli, "
-                                    SELECT network_id, network_name, network
-                                    FROM networks
-                                    WHERE network_archived_at IS NULL
-                                      AND network_client_id = $client_id
-                                    ORDER BY network_name ASC
-                                ");
-                                while ($net_row = mysqli_fetch_array($sql_network_select)) {
-                                    $network_id_select   = intval($net_row['network_id']);
-                                    $network_name_select = nullable_htmlentities($net_row['network_name']);
-                                    $network_select      = nullable_htmlentities($net_row['network']);
 
-                                    $selected = ($network_id == $network_id_select) ? 'selected' : '';
-                                    echo "<option value='$network_id_select' $selected>$network_name_select - $network_select</option>";
-                                }
-                                ?>
-                            </select>
-                        </div>
-                    </div>
-
-
-
-                    <!-- Connected to (One-to-One) -->
-                    <div class="form-group">
-                        <label>Connected to</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-desktop"></i></span>
+                            <!-- NAT IP -->
+                            <div class="form-group">
+                                <label>NAT IP</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        name="nat_ip"
+                                        placeholder="Nat IP" 
+                                        maxlength="200"
+                                        value="<?php echo $interface_nat_ip; ?>"
+                                        data-inputmask="'alias': 'ip'"
+                                        data-mask
+                                    >
+                                </div>
                             </div>
-                            <select class="form-control select2" name="connected_to">
-                                <option value="">- Select Asset and Interface -</option>
-                                <?php
-                                $sql_interfaces_select = mysqli_query($mysqli, "
-                                    SELECT i.interface_id, i.interface_name, a.asset_name
-                                    FROM asset_interfaces i
-                                    LEFT JOIN assets a ON a.asset_id = i.interface_asset_id
-                                    WHERE a.asset_archived_at IS NULL
-                                      AND a.asset_client_id = $client_id
-                                      AND i.interface_id != $interface_id
-                                      AND a.asset_id != $asset_id
-                                      AND (
-                                           (
-                                             i.interface_id NOT IN (SELECT interface_a_id FROM asset_interface_links)
-                                             AND i.interface_id NOT IN (SELECT interface_b_id FROM asset_interface_links)
-                                           )
-                                           OR i.interface_id = " . (int)$linked_interface_id . "
-                                      )
-                                    ORDER BY a.asset_name ASC, i.interface_name ASC
-                                ");
-                                while ($row_if = mysqli_fetch_array($sql_interfaces_select)) {
-                                    $iface_id_select         = intval($row_if['interface_id']);
-                                    $iface_name_select       = nullable_htmlentities($row_if['interface_name']);
-                                    $iface_asset_name_select = nullable_htmlentities($row_if['asset_name']);
 
-                                    $selected = ($linked_interface_id === $iface_id_select) ? 'selected' : '';
-                                    echo "<option value='$iface_id_select' $selected>";
-                                    echo "$iface_asset_name_select - $iface_name_select";
-                                    echo "</option>";
-                                }
-                                ?>
-                            </select>
+                            <!-- IPv6 -->
+                            <div class="form-group">
+                                <label>IPv6</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-ethernet"></i></span>
+                                    </div>
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        name="ipv6"
+                                        placeholder="IPv6 Address" 
+                                        maxlength="200"
+                                        value="<?php echo $interface_ipv6; ?>"
+                                    >
+                                </div>
+                            </div>
+
+                            <!-- Network -->
+                            <div class="form-group">
+                                <label>Network</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-network-wired"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="network">
+                                        <option value="">- Select Network -</option>
+                                        <?php
+                                        $sql_network_select = mysqli_query($mysqli, "
+                                            SELECT network_id, network_name, network
+                                            FROM networks
+                                            WHERE network_archived_at IS NULL
+                                              AND network_client_id = $client_id
+                                            ORDER BY network_name ASC
+                                        ");
+                                        while ($net_row = mysqli_fetch_array($sql_network_select)) {
+                                            $network_id_select   = intval($net_row['network_id']);
+                                            $network_name_select = nullable_htmlentities($net_row['network_name']);
+                                            $network_select      = nullable_htmlentities($net_row['network']);
+
+                                            $selected = ($network_id == $network_id_select) ? 'selected' : '';
+                                            echo "<option value='$network_id_select' $selected>$network_name_select - $network_select</option>";
+                                        }
+                                        ?>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Connected to (One-to-One) -->
+                            <div class="form-group">
+                                <label>Connected to</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-desktop"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="connected_to">
+                                        <option value="">- Select Asset and Interface -</option>
+                                        <?php
+                                        $sql_interfaces_select = mysqli_query($mysqli, "
+                                            SELECT i.interface_id, i.interface_name, a.asset_name
+                                            FROM asset_interfaces i
+                                            LEFT JOIN assets a ON a.asset_id = i.interface_asset_id
+                                            WHERE a.asset_archived_at IS NULL
+                                              AND a.asset_client_id = $client_id
+                                              AND i.interface_id != $interface_id
+                                              AND a.asset_id != $asset_id
+                                              AND (
+                                                   (
+                                                     i.interface_id NOT IN (SELECT interface_a_id FROM asset_interface_links)
+                                                     AND i.interface_id NOT IN (SELECT interface_b_id FROM asset_interface_links)
+                                                   )
+                                                   OR i.interface_id = " . (int)$linked_interface_id . "
+                                              )
+                                            ORDER BY a.asset_name ASC, i.interface_name ASC
+                                        ");
+                                        while ($row_if = mysqli_fetch_array($sql_interfaces_select)) {
+                                            $iface_id_select         = intval($row_if['interface_id']);
+                                            $iface_name_select       = nullable_htmlentities($row_if['interface_name']);
+                                            $iface_asset_name_select = nullable_htmlentities($row_if['asset_name']);
+
+                                            $selected = ($linked_interface_id === $iface_id_select) ? 'selected' : '';
+                                            echo "<option value='$iface_id_select' $selected>";
+                                            echo "$iface_asset_name_select - $iface_name_select";
+                                            echo "</option>";
+                                        }
+                                        ?>
+                                    </select>
+                                </div>
+                            </div>
+
+                        </div> <!-- End Network Section -->
+
+                        <!-- Notes Section -->
+                        <div class="tab-pane fade" id="pills-interface-notes<?php echo $interface_id; ?>">
+                            <!-- Notes -->
+                            <div class="form-group">
+                                <textarea class="form-control" rows="8" placeholder="Enter some notes" name="notes"><?php echo $interface_notes; ?></textarea>
+                            </div>
                         </div>
-                    </div>
+                        <!-- End Notes Section -->
 
-                    <!-- Notes -->
-                    <div class="form-group">
-                        <textarea class="form-control" rows="5" placeholder="Enter some notes" name="notes"><?php echo $interface_notes; ?></textarea>
                     </div>
 
                 </div>
+                <!-- End Footer Section -->
                 <div class="modal-footer bg-white">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                    <button type="submit" name="edit_asset_interface" class="btn btn-primary">
-                        <i class="fa fa-check mr-2"></i>Save
+                    <button type="submit" name="edit_asset_interface" class="btn btn-primary text-bold">
+                        <i class="fas fa-check mr-2"></i>Save
+                    </button>
+                    <button type="button" class="btn btn-light" data-dismiss="modal">
+                        <i class="fas fa-times mr-2"></i>Close
                     </button>
                 </div>
             </form>