<?php
include "classes/app.class.php";
?>
<div class="app-content-wrapper">
    <div class="page-header">
        <h2 class="main-title">Settings</h2>
    </div>

    <div class="settings-tabs">
        <button class="tab-btn active" onclick="switchTab(event, 'tanks-settings')">Tank Management</button>
        <button class="tab-btn" onclick="switchTab(event, 'user-settings')">User Management</button>
        <button class="tab-btn" onclick="switchTab(event, 'notifications-settings')">Notifications</button>
        <button class="tab-btn" onclick="switchTab(event, 'automated-settings')">Automated Emails</button>
    </div>
    <div class="table-container">
        <div id="tanks-settings" class="tab-content active">
            <div class="table-actions">
                <h3>Configure Tanks</h3>
            </div>
            <table class="apple-table">
                <thead>
                    <tr>
                        <th>Tank Name</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $tanks_res = $db->query("tanks", "SELECT t.*, c.name as client_name FROM tanks t LEFT JOIN clients c ON t.client_id = c.record_id ORDER BY t.name ASC");
                    while ($tank = $tanks_res->fetch_assoc()) { ?>
                        <tr>
                            <td data-label="Tank"><strong><?php echo $tank['name']; ?></strong></td>
                            <td data-label="Actions" style="text-align: right;">
                                <button class="btn-edit"
                                    onclick="openEditTankModal(<?php echo htmlspecialchars(json_encode($tank)); ?>)">Edit</button>
                            </td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
        <div id="editTankModal" class="modal-overlay">
            <div class="modal-card">
                <div class="modal-header">
                    <h3>Edit Tank</h3>
                    <button class="close-btn" onclick="closeEditTankModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="edit_tank_id">

                    <div class="input-group">
                        <label>Tank Name</label>
                        <input type="text" id="edit_tank_name" placeholder="Tank ID or Name">
                    </div>

                    <div class="input-group">
                        <label>Linked To</label>
                        <div class="segmented-control">
                            <button type="button" id="toggle-client" class="seg-btn active"
                                onclick="toggleTankLink('CLIENT')">Client</button>
                            <button type="button" id="toggle-site" class="seg-btn"
                                onclick="toggleTankLink('SITE')">Site</button>
                        </div>
                    </div>

                    <div class="input-group" id="client-select-group">
                        <label>Select Client</label>
                        <select id="edit_tank_client_id">
                            <option value="0">-- Select Client --</option>
                            <?php
                            $c_res = $db->query("clients", "SELECT record_id, name FROM clients ORDER BY name ASC");
                            while ($c = $c_res->fetch_assoc())
                                echo "<option value='{$c['record_id']}'>{$c['name']}</option>";
                            ?>
                        </select>
                    </div>

                    <div class="input-group" id="site-select-group" style="display:none;">
                        <label>Select Site</label>
                        <select id="edit_tank_site_id">
                            <option value="0">-- Select Site --</option>
                            <?php
                            $s_res = $db->query("sites", "SELECT record_id, name FROM sites ORDER BY name ASC");
                            while ($s = $s_res->fetch_assoc())
                                echo "<option value='{$s['record_id']}'>{$s['name']}</option>";
                            ?>
                        </select>
                    </div>

                    <div id="tank-modal-error" class="error-message"
                        style="display:none; color:red; margin-top:10px; font-size: 13px;">
                        Operation failed. Please try again.
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-secondary" onclick="closeEditTankModal()">Cancel</button>
                    <button id="saveTankBtn" class="btn-primary" onclick="submitEditTank()">Save Changes</button>
                </div>
            </div>
        </div>
        <div id="user-settings" class="tab-content">
            <div class="table-actions">
                <h3>System Users</h3>
                <button class="btn-primary" onclick="openAddUserModal()">+ Add</button>
            </div>
            <table class="apple-table">
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $users_res = $db->query("users", "SELECT * FROM users ORDER BY username ASC");
                    while ($user = $users_res->fetch_assoc()) {
                        // Logic to determine display type
                        $is_client = ($user['client_id'] > 0);
                        $type_label = $is_client ? "Client User" : "System User";
                        $type_class = $is_client ? "badge-secondary" : "badge-primary";
                        if ($user['status'] == 'ACTIVE') {
                            $status = '<span class="badge-item" style="font-size:10px; background:#b2deff; color:#000000; padding:2px 6px; border-radius:4px; margin-left:5px;">ACTIVE</span>';
                        } else {
                            $status = '<span class="badge-item" style="font-size:10px; background:#ffb2b2; color:#000000; padding:2px 6px; border-radius:4px; margin-left:5px;">INACTIVE</span>';
                        }
                        ?>
                        <tr>
                            <td data-label="Username">
                                <strong><?php echo htmlspecialchars($user['username']); ?></strong>
                                <?php if ($user['admin'] == 1): ?>
                                    <span
                                        style="font-size:10px; background:#FFE0B2; color:#E65100; padding:2px 6px; border-radius:4px; margin-left:5px;">ADMIN</span>
                                <?php endif; ?>
                            </td>
                            <td data-label="Email"><?php echo htmlspecialchars($user['email']); ?></td>
                            <td data-label="Type">
                                <span class="type-tag <?php echo $is_client ? 'client' : 'system'; ?>">
                                    <?php echo $type_label; ?>
                                </span>
                            </td>
                            <td data-label="Status"><?php echo $status; ?></td>


                            <td data-label="Actions" style="text-align: right;">
                                <button class="btn-edit"
                                    onclick="openEditUserModal(<?php echo htmlspecialchars(json_encode($user)); ?>)">
                                    Edit
                                </button>
                            </td>
                        </tr>


                    <?php } ?>
                </tbody>
            </table>
        </div>
        <div id="addUserModal" class="modal-overlay">
            <div class="modal-card">
                <div class="modal-header">
                    <h3>New User</h3>
                    <button class="close-btn" onclick="closeAddUserModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <label>Username</label>
                        <input type="text" id="add_username">
                    </div>
                    <div class="input-group">
                        <label>Email</label>
                        <input type="email" id="add_email">
                    </div>
                    <div class="input-group">
                        <label>Password</label>
                        <input type="password" id="add_password">
                    </div>

                    <div class="input-group">
                        <label>User Type</label>
                        <div class="segmented-control">
                            <button type="button" id="add-type-user" class="seg-btn active"
                                onclick="toggleUserType('USER', 'add')">System User</button>
                            <button type="button" id="add-type-client" class="seg-btn"
                                onclick="toggleUserType('CLIENT', 'add')">Client User</button>
                        </div>
                    </div>

                    <div id="add-client-select-wrap" style="display:none;">
                        <div class="input-group">
                            <label>Assign to Client</label>
                            <select id="add_user_client_id">
                                <option value="0">-- Select Client --</option>
                                <?php
                                $c_res = $db->query("clients", "SELECT record_id, name FROM clients ORDER BY name ASC");
                                while ($c = $c_res->fetch_assoc())
                                    echo "<option value='{$c['record_id']}'>{$c['name']}</option>";
                                ?>
                            </select>
                        </div>
                    </div>

                    <div id="add-tank-select-wrap">
                        <div class="input-group">
                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                <label>Visible Tanks</label>
                                <button type="button" class="btn-link" onclick="toggleAllTanks('add')">Select
                                    All</button>
                            </div>
                            <div class="tank-checkbox-list" id="add-tank-list">
                                <div class="tank-group-header">General / Internal Tanks</div>
                                <?php
                                $gen_tanks = $db->query("tanks", "SELECT record_id, name FROM tanks WHERE (client_id = 0 OR client_id IS NULL) ORDER BY name ASC");
                                while ($t = $gen_tanks->fetch_assoc()) {
                                    echo "<label class='check-item'><input type='checkbox' class='tank-cb' data-type='INTERNAL' value='{$t['record_id']}'> {$t['name']}</label>";
                                }
                                ?>

                                <div class="tank-group-header">Client Access (All Client Tanks)</div>
                                <?php
                                // We fetch Clients here because you want to save the Client ID for access
                                $clients = $db->query("clients", "SELECT record_id, name FROM clients ORDER BY name ASC");
                                while ($c = $clients->fetch_assoc()) {
                                    echo "<label class='check-item'><input type='checkbox' class='tank-cb' data-type='CLIENT_TANK' value='{$c['record_id']}'> All Tanks: {$c['name']}</label>";
                                }
                                ?>
                            </div>
                        </div>
                        <div class="input-group">
                            <label>Is Admin?</label>
                            <div class="segmented-control">
                                <button type="button" id="add-admin-no" class="seg-btn active"
                                    onclick="toggleAdmin(0, 'add')">No</button>
                                <button type="button" id="add-admin-yes" class="seg-btn"
                                    onclick="toggleAdmin(1, 'add')">Yes</button>
                            </div>
                        </div>
                    </div>

                    <div class="input-group">
                        <label>Status</label>
                        <select id="add_status">
                            <option value="ACTIVE">ACTIVE</option>
                            <option value="INACTIVE">INACTIVE</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-secondary" onclick="closeAddUserModal()">Cancel</button>
                    <button id="saveNewUserBtn" class="btn-primary" onclick="submitUser('add')">Create User</button>
                </div>
            </div>
        </div>
        <div id="editUserModal" class="modal-overlay">
            <div class="modal-card">
                <div class="modal-header">
                    <h3>Edit User</h3>
                    <button class="close-btn" onclick="closeEditUserModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="edit_user_id">

                    <div class="input-group">
                        <label>Username</label>
                        <input type="text" id="edit_username">
                    </div>
                    <div class="input-group">
                        <label>Email</label>
                        <input type="email" id="edit_email">
                    </div>
                    <div class="input-group">
                        <label>Password (Leave blank to keep same)</label>
                        <input type="password" id="edit_password">
                    </div>

                    <div class="input-group">
                        <label>User Type</label>
                        <div class="segmented-control">
                            <button type="button" id="edit-type-user" class="seg-btn"
                                onclick="toggleUserType('USER', 'edit')">System User</button>
                            <button type="button" id="edit-type-client" class="seg-btn"
                                onclick="toggleUserType('CLIENT', 'edit')">Client User</button>
                        </div>
                    </div>

                    <div id="edit-client-select-wrap" style="display:none;">
                        <div class="input-group">
                            <label>Assign to Client</label>
                            <select id="edit_user_client_id">
                                <option value="0">-- Select Client --</option>
                                <?php
                                $c_res = $db->query("clients", "SELECT record_id, name FROM clients ORDER BY name ASC");
                                while ($c = $c_res->fetch_assoc())
                                    echo "<option value='{$c['record_id']}'>{$c['name']}</option>";
                                ?>
                            </select>
                        </div>
                    </div>

                    <div id="edit-tank-select-wrap" style="display:none;">
                        <div class="input-group">
                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                <label>Visible Tanks</label>
                                <button type="button" class="btn-link" onclick="toggleAllTanks('edit')">Select
                                    All</button>
                            </div>
                            <div class="tank-checkbox-list" id="edit-tank-list">
                                <div class="tank-group-header">General / Internal Tanks</div>
                                <?php
                                $gen_tanks = $db->query("tanks", "SELECT record_id, name FROM tanks WHERE client_id = 0 ORDER BY name ASC");
                                while ($t = $gen_tanks->fetch_assoc()) {
                                    // data-type helps JS distinguish which array to put the ID into when saving
                                    echo "<label class='check-item'><input type='checkbox' data-type='INTERNAL' class='tank-cb' value='{$t['record_id']}'> {$t['name']}</label>";
                                }
                                ?>

                                <div class="tank-group-header">Client Access (All Client Tanks)</div>
                                <?php
                                // We only want to list each client ONCE
                                $clients = $db->query("clients", "SELECT record_id, name FROM clients ORDER BY name ASC");
                                while ($c = $clients->fetch_assoc()) {
                                    // The value here is the CLIENT record_id
                                    echo "<label class='check-item'><input type='checkbox' data-type='CLIENT_TANK' class='tank-cb' value='{$c['record_id']}'> All Tanks: {$c['name']}</label>";
                                }
                                ?>
                            </div>
                        </div>
                    </div>

                    <div class="input-group">
                        <label>Is Admin?</label>
                        <div class="segmented-control">
                            <button type="button" id="edit-admin-no" class="seg-btn"
                                onclick="toggleAdmin(0, 'edit')">No</button>
                            <button type="button" id="edit-admin-yes" class="seg-btn"
                                onclick="toggleAdmin(1, 'edit')">Yes</button>
                        </div>
                    </div>

                    <div class="input-group">
                        <label>Status</label>
                        <select id="edit_status">
                            <option value="ACTIVE">ACTIVE</option>
                            <option value="INACTIVE">INACTIVE</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-secondary" onclick="closeEditUserModal()">Cancel</button>
                    <button id="updateUserBtn" class="btn-primary" onclick="submitUser('edit')">Save Changes</button>
                </div>
            </div>
        </div>
        <div id="notifications-settings" class="tab-content">
            <div class="table-actions">
                <h3>Notification Setups</h3>
                <button class="btn-primary" onclick="openAddNotificationModal()">+ Add</button>
            </div>
            <table class="apple-table">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Tanks</th>
                        <th>Users Notified</th>
                        <th>Condition</th>
                        <th>Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $notif_res = $db->query("notification_setup", "SELECT * FROM notification_setup ORDER BY record_id DESC");
                    while ($row = $notif_res->fetch_assoc()) {
                        $type_label = ($row['notification_type'] == '1') ? 'Low Level' : 'Offline';
                        $condition = ($row['notification_type'] == '1') ? $row['min_threshold'] . "%" : $row['offline_for'] . " mins";
                        if ($row['status'] == 'ACTIVE') {
                            $status = '<span class="badge-item" style="font-size:10px; background:#b2deff; color:#000000; padding:2px 6px; border-radius:4px; margin-left:5px;">ACTIVE</span>';
                        } else {
                            $status = '<span class="badge-item" style="font-size:10px; background:#ffb2b2; color:#000000; padding:2px 6px; border-radius:4px; margin-left:5px;">INACTIVE</span>';
                        }
                        ?>
                        <tr>
                            <td data-label="Type"><strong><?php echo $type_label; ?></strong></td>
                            <td data-label="Tanks">
                                <small><?php echo $functions->getNamesFromIds('tanks', "{$row['tank_ids']}"); ?></small>
                            </td>
                            <td data-label="Users">
                                <small><?php echo $functions->getNamesFromIds('users', "{$row['user_ids']}"); ?></small>
                            </td>
                            <td data-label="Condition"><?php echo $condition; ?></td>
                            <td data-label="Status"><?php echo $status; ?></td>
                            <td data-label="Actions" style="text-align: right;">
                                <button class="btn-edit"
                                    onclick="openEditNotificationModal(<?php echo htmlspecialchars(json_encode($row)); ?>)">Edit</button>
                            </td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
        <div id="notificationModal" class="modal-overlay">
            <div class="modal-card">
                <div class="modal-header">
                    <h3 id="notifModalTitle">Notification Setup</h3>
                    <button class="close-btn" onclick="closeNotificationModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="notif_record_id">

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                        <div class="input-group">
                            <label>Notification Type</label>
                            <select id="notif_type" onchange="toggleNotifFields()">
                                <option value="1">LOW LEVEL (%)</option>
                                <option value="0">OFFLINE (Mins)</option>
                            </select>
                        </div>
                        <div class="input-group" style="display: none;">
                            <label>Check Every</label>
                            <select id="notif_check_every">
                                <option value="15">15 Minutes</option>
                                <option value="30">30 Minutes</option>
                                <option value="60">1 Hour</option>
                                <option value="180">3 Hours</option>
                                <option value="360">6 Hours</option>
                                <option value="720">12 Hours</option>
                                <option value="1440">1 Day</option>
                                <option value="10080">1 Week</option>
                                <option value="43200">1 Month</option>
                            </select>
                        </div>
                    </div>

                    <div class="input-group" id="wrap_threshold">
                        <label>Min Threshold (%)</label>
                        <input type="number" id="notif_threshold" min="1" max="100">
                    </div>

                    <div class="input-group" id="wrap_offline" style="display:none;">
                        <label>Offline Duration (Minutes)</label>
                        <input type="number" id="notif_offline">
                    </div>

                    <div class="input-group">
                        <label>Visible Tanks</label>
                        <input type="text" class="search-box" placeholder="Search tanks..."
                            onkeyup="filterChecklist(this, 'notif-tank-list')">
                        <div class="tank-checkbox-list" id="notif-tank-list">
                            <?php
                            $tanks = $db->query("tanks", "SELECT record_id, name FROM tanks ORDER BY name ASC");
                            while ($t = $tanks->fetch_assoc()) {
                                echo "<label class='check-item'><input type='checkbox' class='tank-cb' value='{$t['record_id']}'> {$t['name']}</label>";
                            }
                            ?>
                        </div>
                    </div>

                    <div class="input-group">
                        <label>Notify Users</label>
                        <input type="text" class="search-box" placeholder="Search users by name or email..."
                            onkeyup="filterChecklist(this, 'notif-user-list')">
                        <div class="tank-checkbox-list" id="notif-user-list">
                            <?php
                            $users = $db->query("users", "SELECT record_id, username, email FROM users WHERE status='ACTIVE' ORDER BY username ASC");
                            while ($u = $users->fetch_assoc()) {
                                echo "<label class='check-item'><input type='checkbox' class='user-cb' value='{$u['record_id']}'> <strong>{$u['username']} </strong> <br><small>->{$u['email']}</small></label>";

                            }
                            ?>
                        </div>
                    </div>
                    <div class="input-group">
                        <label>Status</label>
                        <select id="edit_status_notifications">
                            <option value="ACTIVE">ACTIVE</option>
                            <option value="INACTIVE">INACTIVE</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-secondary" onclick="closeNotificationModal()">Cancel</button>
                    <button id="notifSubmitBtn" class="btn-primary" onclick="submitNotification()">Save Changes</button>
                </div>
            </div>
        </div>
        <div id="automated-settings" class="tab-content">
            <div class="table-actions">
                <h3>Automated Emails</h3>
                <button class="btn-primary" onclick="openAddAutomatedModal()">+ Add</button>
            </div>

            <table class="apple-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Users Notified</th>
                        <th>Tanks Involved</th>
                        <th>Send Every</th>
                        <th>On</th>
                        <th>Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $automated_res = $db->query("automated_emails", "SELECT * FROM automated_emails ORDER BY record_id DESC");
                    while ($automated = $automated_res->fetch_assoc()) {
                        if ($automated['status'] == 'ACTIVE') {
                            $status = '<span class="badge-item" style="font-size:10px; background:#b2deff; color:#000000; padding:2px 6px; border-radius:4px; margin-left:5px;">ACTIVE</span>';
                        } else {
                            $status = '<span class="badge-item" style="font-size:10px; background:#ffb2b2; color:#000000; padding:2px 6px; border-radius:4px; margin-left:5px;">INACTIVE</span>';
                        }
                        ?>
                        <tr>
                            <td data-label="Name"><strong><?php echo $automated['task_name']; ?></strong></td>
                            <td data-label="Users">
                                <small><?php echo $functions->getNamesFromIds('users', $automated['user_ids']); ?></small>
                            </td>
                            <td data-label="Tanks">
                                <small><?php echo $functions->getNamesFromIds('tanks', $automated['tank_ids']); ?></small>
                            </td>
                          
                            <td data-label="Send Every"><?php echo $automated['send_every']; ?></td>
                            <td data-label="On"><?php echo $automated['sent_at']; ?></td>
                            <td data-label="Status">
                                <?php echo $status; ?>

                            </td>
                            <td data-label="Actions" style="text-align: right;">
                                <button class="btn-edit"
                                    onclick="openEditAutomationModal(<?php echo htmlspecialchars(json_encode($automated)); ?>)">Edit</button>
                            </td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
        <div id="automatedModal" class="modal-overlay">
            <div class="modal-card">
                <div class="modal-header">
                    <h3 id="autoModalTitle">Automated Email Setup</h3>
                    <button class="close-btn" onclick="closeAutomatedModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="notif_record_id">

                    <div style="display: grid; grid-template-columns: 1fr; gap: 15px;">
                        <div class="input-group">
                            <label>Task Name</label>
                            <input type="text" id="auto_task_name" placeholder="e.g. Daily Morning Report">

                            <label>Notify Users</label>
                            <input type="text" class="search-box" placeholder="Search users..."
                                onkeyup="filterChecklist(this, 'auto-user-list')">
                            <div class="tank-checkbox-list" id="auto-user-list">
                                <?php
                                $users = $db->query("users", "SELECT record_id, username, email FROM users WHERE status='ACTIVE' ORDER BY username ASC");
                                while ($u = $users->fetch_assoc()) {
                                    echo "<label class='check-item'><input type='checkbox' class='user-cb' value='{$u['record_id']}'> <strong>{$u['username']} </strong> <br><small>&nbsp {$u['email']} </small></label>";
                                }
                                ?>
                            </div>

                            <label>Visible Tanks</label>
                            <input type="text" class="search-box" placeholder="Search tanks..."
                                onkeyup="filterChecklist(this, 'auto-tank-list')">
                            <div class="tank-checkbox-list" id="auto-tank-list">
                                <?php
                                $tanks = $db->query("tanks", "SELECT record_id, name FROM tanks ORDER BY name ASC");
                                while ($t = $tanks->fetch_assoc()) {
                                    echo "<label class='check-item'><input type='checkbox' class='tank-cb' value='{$t['record_id']}'> {$t['name']}</label>";
                                }
                                ?>
                            </div>

                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                <div>
                                    <label>Send Frequency</label>
                                    <select id="auto_send_every">
                                        <option value="Day">Every Day</option>
                                        <option value="Week">Every Week</option>
                                        <option value="Month">Every Month</option>
                                    </select>
                                </div>
                            </div>

                            <label>Time to Send Email</label>
                            <select id="auto_send_on">
                                <option value="01:00">01:00</option>

                                <option value="01:15">01:15</option>

                                <option value="01:30">01:30</option>

                                <option value="01:45">01:45</option>

                                <option value="02:00">02:00</option>

                                <option value="02:15">02:15</option>

                                <option value="02:30">02:30</option>

                                <option value="02:45">02:45</option>

                                <option value="03:00">03:00</option>

                                <option value="03:15">03:15</option>

                                <option value="03:30">03:30</option>

                                <option value="03:45">03:45</option>

                                <option value="04:00">04:00</option>

                                <option value="04:15">04:15</option>

                                <option value="04:30">04:30</option>

                                <option value="04:45">04:45</option>

                                <option value="05:00">05:00</option>

                                <option value="05:15">05:15</option>

                                <option value="05:30">05:30</option>

                                <option value="05:45">05:45</option>

                                <option value="06:00">06:00</option>

                                <option value="06:15">06:15</option>

                                <option value="06:30">06:30</option>

                                <option value="06:45">06:45</option>

                                <option value="07:00">07:00</option>

                                <option value="07:15">07:15</option>

                                <option value="07:30">07:30</option>

                                <option value="07:45">07:45</option>

                                <option value="08:00">08:00</option>

                                <option value="08:15">08:15</option>

                                <option value="08:30">08:30</option>

                                <option value="08:45">08:45</option>

                                <option value="09:00">09:00</option>

                                <option value="09:15">09:15</option>

                                <option value="09:30">09:30</option>

                                <option value="09:45">09:45</option>

                                <option value="10:00">10:00</option>

                                <option value="10:15">10:15</option>

                                <option value="10:30">10:30</option>

                                <option value="10:45">10:45</option>

                                <option value="11:00">11:00</option>

                                <option value="11:15">11:15</option>

                                <option value="11:30">11:30</option>

                                <option value="11:45">11:45</option>

                                <option value="12:00">12:00</option>

                                <option value="12:15">12:15</option>

                                <option value="12:30">12:30</option>

                                <option value="12:45">12:45</option>

                                <option value="13:00">13:00</option>

                                <option value="13:15">13:15</option>

                                <option value="13:30">13:30</option>

                                <option value="13:45">13:45</option>

                                <option value="14:00">14:00</option>

                                <option value="14:15">14:15</option>

                                <option value="14:30">14:30</option>

                                <option value="14:45">14:45</option>

                                <option value="15:00">15:00</option>

                                <option value="15:15">15:15</option>

                                <option value="15:30">15:30</option>

                                <option value="15:45">15:45</option>

                                <option value="16:00">16:00</option>

                                <option value="16:15">16:15</option>

                                <option value="16:30">16:30</option>

                                <option value="16:45">16:45</option>

                                <option value="17:00">17:00</option>

                                <option value="17:15">17:15</option>

                                <option value="17:30">17:30</option>

                                <option value="17:45">17:45</option>

                                <option value="18:00">18:00</option>

                                <option value="18:15">18:15</option>

                                <option value="18:30">18:30</option>

                                <option value="18:45">18:45</option>

                                <option value="19:00">19:00</option>

                                <option value="19:15">19:15</option>

                                <option value="19:30">19:30</option>

                                <option value="19:45">19:45</option>

                                <option value="20:00">20:00</option>

                                <option value="20:15">20:15</option>

                                <option value="20:30">20:30</option>

                                <option value="20:45">20:45</option>

                                <option value="21:00">21:00</option>

                                <option value="21:15">21:15</option>

                                <option value="21:30">21:30</option>

                                <option value="21:45">21:45</option>

                                <option value="22:00">22:00</option>

                                <option value="22:15">22:15</option>

                                <option value="22:30">22:30</option>

                                <option value="22:45">22:45</option>

                                <option value="23:00">23:00</option>

                                <option value="23:15">23:15</option>

                                <option value="23:30">23:30</option>

                                <option value="23:45">23:45</option>

                                <option value="00:00">00:00</option>
                            </select>

                            <label>Status</label>
                            <select id="edit_status_automated">
                                <option value="ACTIVE">ACTIVE</option>
                                <option value="INACTIVE">INACTIVE</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-secondary" onclick="closeAutomatedModal()">Cancel</button>
                    <button id="autoSubmitBtn" class="btn-primary" onclick="submitAutomated()">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // TAB LOGIC
    function switchTab(evt, tabName) {
        document.querySelectorAll('.tab-content').forEach(content =>
            content.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));

        document.getElementById(tabName).classList.add('active');

        // Check if evt exists (it won't on the initial page load trigger)
        if (evt) {
            evt.currentTarget.classList.add('active');
        }

        // --- REMEMBER TAB ---
        localStorage.setItem('lastTab', tabName);
    }

    document.addEventListener('DOMContentLoaded', function () {
        // 1. Get the saved tab name from storage
        const lastTab = localStorage.getItem('lastTab');

        // 2. Find the button that is supposed to open this tab
        // We look for the button that has the onclick matching the saved tabName
        const tabButton = document.querySelector(`.tab-btn[onclick*="${lastTab}"]`);

        if (lastTab && tabButton) {
            // 3. Trigger the tab switch
            switchTab({ currentTarget: tabButton }, lastTab);
        } else {
            // 4. Fallback: If no memory, open the first tab (e.g., 'users-settings')
            const defaultBtn = document.querySelector('.tab-btn');
            if (defaultBtn) defaultBtn.click();
        }
    });

    // TANK MODAL LOGIC
    let currentLinkType = 'CLIENT';

    function openEditTankModal(tank) {
        document.getElementById('edit_tank_id').value = tank.record_id;
        document.getElementById('edit_tank_name').value = tank.name;

        // Check if previously linked to Site or Client
        if (tank.site_id && tank.site_id != "0") {
            toggleTankLink('SITE');
            document.getElementById('edit_tank_site_id').value = tank.site_id;
        } else {
            toggleTankLink('CLIENT');
            document.getElementById('edit_tank_client_id').value = tank.client_id;
        }

        document.getElementById('editTankModal').style.display = 'flex';
    }

    function toggleTankLink(type) {
        currentLinkType = type;
        const clientBtn = document.getElementById('toggle-client');
        const siteBtn = document.getElementById('toggle-site');
        const clientGroup = document.getElementById('client-select-group');
        const siteGroup = document.getElementById('site-select-group');

        if (type === 'CLIENT') {
            clientBtn.classList.add('active');
            siteBtn.classList.remove('active');
            clientGroup.style.display = 'block';
            siteGroup.style.display = 'none';
        } else {
            siteBtn.classList.add('active');
            clientBtn.classList.remove('active');
            siteGroup.style.display = 'block';
            clientGroup.style.display = 'none';
        }
    }

    function closeEditTankModal() {
        document.getElementById('editTankModal').style.display = 'none';
        document.getElementById('tank-modal-error').style.display = 'none';
    }

    function submitEditTank() {
        const btn = document.getElementById('saveTankBtn');
        const formData = new FormData();

        formData.append('record_id', document.getElementById('edit_tank_id').value);
        formData.append('name', document.getElementById('edit_tank_name').value);
        formData.append('link_type', currentLinkType);

        const linkId = (currentLinkType === 'CLIENT')
            ? document.getElementById('edit_tank_client_id').value
            : document.getElementById('edit_tank_site_id').value;

        formData.append('link_id', linkId);

        btn.disabled = true;
        btn.innerHTML = "<span>Saving...</span>";

        fetch('ajax/edit_tank.php', {
            method: 'POST',
            body: formData
        })
            .then(r => r.text())
            .then(data => {
                if (data.trim() === "1") {
                    window.location.reload();
                } else {
                    console.log(data);
                    document.getElementById('tank-modal-error').style.display = 'block';
                    btn.disabled = false;
                    btn.innerHTML = "<span>Save Changes</span>";
                }
            });
    }

    // Modal click-outside to close logic
    window.onclick = function (event) {
        const tankModal = document.getElementById('editTankModal');
        if (event.target == tankModal) closeEditTankModal();
    }

    let userState = {
        add: { type: 'USER', admin: 0 },
        edit: { type: 'USER', admin: 0 }
    };

    function toggleUserType(type, mode) {
        userState[mode].type = type;
        const isClient = (type === 'CLIENT');
        document.getElementById(`${mode}-type-client`).classList.toggle('active', isClient);
        document.getElementById(`${mode}-type-user`).classList.toggle('active', !isClient);
        document.getElementById(`${mode}-client-select-wrap`).style.display = isClient ? 'block' :
            'none';
        document.getElementById(`${mode}-tank-select-wrap`).style.display = isClient ? 'none' : 'block';
    }
    function toggleAdmin(val, mode) {
        userState[mode].admin = val;
        document.getElementById(`${mode}-admin-yes`).classList.toggle('active', val === 1);
        document.getElementById(`${mode}-admin-no`).classList.toggle('active', val === 0);
    }

    function toggleAllTanks(mode) {
        const checkboxes = document.querySelectorAll(`#${mode}-tank-list .tank-cb`);
        const allChecked = Array.from(checkboxes).every(c => c.checked);
        checkboxes.forEach(c => c.checked = !allChecked);
    }
    // OPEN/CLOSE MODALS
    function openAddUserModal() { document.getElementById('addUserModal').style.display = 'flex'; }
    function closeAddUserModal() { document.getElementById('addUserModal').style.display = 'none'; }
    function closeEditUserModal() {
        document.getElementById('editUserModal').style.display = 'none';
        document.body.style.overflow = 'auto'; // Restores background scroll
    }
    function openEditUserModal(user) {
        // 1. Basic Fields
        document.getElementById('edit_user_id').value = user.record_id;
        document.getElementById('edit_username').value = user.username;
        document.getElementById('edit_email').value = user.email;
        document.getElementById('edit_status').value = user.status;
        document.getElementById('edit_password').value = "";

        // 2. Set Admin Toggle
        toggleAdmin(parseInt(user.admin), 'edit');

        // 3. Reset all checkboxes
        const checkboxes = document.querySelectorAll('#edit-tank-list .tank-cb');
        checkboxes.forEach(cb => cb.checked = false);

        // 4. Handle UI
        if (user.client_id && parseInt(user.client_id) > 0) {
            toggleUserType('CLIENT', 'edit');
            document.getElementById('edit_user_client_id').value = user.client_id;
        } else {
            toggleUserType('USER', 'edit');

            // Parse the two separate columns from your database
            const internalIds = user.tanks ? user.tanks.toString().split(',') : [];
            const clientAccessIds = user.client_ids ? user.client_ids.toString().split(',') : [];

            checkboxes.forEach(cb => {
                const type = cb.getAttribute('data-type');
                const val = cb.value.toString();

                if (type === 'INTERNAL') {
                    // Look in the 'tanks' column data
                    if (internalIds.includes(val)) cb.checked = true;
                } else if (type === 'CLIENT_TANK') {
                    // Look in the 'client_ids' column data
                    if (clientAccessIds.includes(val)) cb.checked = true;
                }
            });
        }

        // 5. Open and Lock Scroll
        document.getElementById('editUserModal').style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
    function submitUser(mode) {
        const btn = document.getElementById(mode === 'add' ? 'saveNewUserBtn' : 'updateUserBtn');

        // 1. Collect Basic Values
        const username = document.getElementById(`${mode}_username`).value.trim();
        const email = document.getElementById(`${mode}_email`).value.trim();
        const password = document.getElementById(`${mode}_password`).value;
        const status = document.getElementById(`${mode}_status`).value;
        const isAdmin = userState[mode].admin;

        // 2. Validation
        if (!username || !email) {
            alert("Please fill in both the Username and Email.");
            return;
        }

        if (mode === 'add' && !password) {
            alert("Please set a password for the new user.");
            return;
        }

        const formData = new FormData();
        formData.append('username', username);
        formData.append('email', email);
        formData.append('password', password);
        formData.append('status', status);
        formData.append('is_admin', isAdmin);

        // 3. Conditional Logic
        if (userState[mode].type === 'CLIENT') {
            const clientId = document.getElementById(`${mode}_user_client_id`).value;
            if (clientId === "0") {
                alert("Please select a Client to assign this user to.");
                return;
            }
            formData.append('client_id', clientId);
            formData.append('tanks', ''); // Clear if switching types
            formData.append('client_ids', ''); // Clear if switching types
        } else {
            formData.append('client_id', '0');

            let internalTanks = [];
            let clientAccessIds = [];

            // DYNAMIC TARGET: Uses #add-tank-list or #edit-tank-list
            const listId = mode === 'add' ? 'add-tank-list' : 'edit-tank-list';
            document.querySelectorAll(`#${listId} .tank-cb:checked`).forEach(cb => {
                if (cb.getAttribute('data-type') === 'INTERNAL') {
                    internalTanks.push(cb.value);
                } else {
                    clientAccessIds.push(cb.value);
                }
            });

            formData.append('tanks', internalTanks.join(','));
            formData.append('client_ids', clientAccessIds.join(','));
        }

        if (mode === 'edit') {
            formData.append('record_id', document.getElementById('edit_user_id').value);
        }

        // 4. Submit
        btn.disabled = true;
        btn.innerText = "Saving...";

        fetch(mode === 'add' ? 'ajax/add_user.php' : 'ajax/edit_user.php', {
            method: 'POST',
            body: formData
        })
            .then(r => r.text())
            .then(data => {
                if (data.trim() === "1") {
                    window.location.reload();
                } else {
                    alert("Error saving user: " + data);
                    btn.disabled = false;
                    btn.innerText = mode === 'add' ? "Create User" : "Save Changes";
                }
            })
            .catch(err => {
                console.error(err);
                alert("A network error occurred.");
                btn.disabled = false;
            });
    }

    let currentNotifMode = 'add';

    function openAddNotificationModal() {
        currentNotifMode = 'add';
        document.getElementById('notifModalTitle').innerText = "Add Notification Setup";
        document.getElementById('notif_record_id').value = "";
        resetNotifModal();
        document.getElementById('notificationModal').style.display = 'flex';
    }

    function openEditNotificationModal(data) {
        currentNotifMode = 'edit';
        document.getElementById('notifModalTitle').innerText = "Edit Notification Setup";
        document.getElementById('notif_record_id').value = data.record_id;

        // Set basic selects/inputs
        document.getElementById('notif_type').value = data.notification_type;
        document.getElementById('notif_check_every').value = data.check_every;
        document.getElementById('notif_threshold').value = data.min_threshold;
        document.getElementById('notif_offline').value = data.offline_for;
        document.getElementById('edit_status_notifications').value = data.status;

        // Check correct checkboxes
        const tIds = data.tank_ids ? data.tank_ids.split(',') : [];
        const uIds = data.user_ids ? data.user_ids.split(',') : [];

        document.querySelectorAll('#notif-tank-list .tank-cb').forEach(cb => cb.checked =
            tIds.includes(cb.value));
        document.querySelectorAll('#notif-user-list .user-cb').forEach(cb => cb.checked =
            uIds.includes(cb.value));

        toggleNotifFields();
        document.getElementById('notificationModal').style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    // Search Functionality
    function filterChecklist(input, listId) {
        const filter = input.value.toLowerCase();
        const items = document.querySelectorAll(`#${listId} .check-item`);
        items.forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(filter) ? "flex" : "none";
        });
    }

    function toggleNotifFields() {
        const type = document.getElementById('notif_type').value;
        document.getElementById('wrap_threshold').style.display = (type == '1') ? 'block' : 'none';
        document.getElementById('wrap_offline').style.display = (type == '0') ? 'block' : 'none';
    }
    function submitNotification() {
        const formData = new FormData();
        formData.append('notification_type', document.getElementById('notif_type').value);
        formData.append('check_every', document.getElementById('notif_check_every').value);
        formData.append('min_threshold', document.getElementById('notif_threshold').value);
        formData.append('offline_for', document.getElementById('notif_offline').value);
        formData.append('status', document.getElementById('edit_status_notifications').value);

        let tanks = [];
        document.querySelectorAll('#notif-tank-list .tank-cb:checked').forEach(cb =>
            tanks.push(cb.value));
        let users = [];
        document.querySelectorAll('#notif-user-list .user-cb:checked').forEach(cb =>
            users.push(cb.value));

        formData.append('tank_ids', tanks.join(','));
        formData.append('user_ids', users.join(','));

        if (currentNotifMode === 'edit') formData.append('record_id',
            document.getElementById('notif_record_id').value);

        const btn = document.getElementById('notifSubmitBtn');
        btn.disabled = true;

        fetch(currentNotifMode === 'add' ? 'ajax/add_notification.php' : 'ajax/edit_notification.php', {
            method: 'POST',
            body: formData
        })
            .then(r => r.text())
            .then(res => {
                if (res.trim() === "1") window.location.reload();
                else { alert(res); btn.disabled = false; }
            });
    }

    function closeNotificationModal() {
        document.getElementById('notificationModal').style.display = 'none';
        document.body.style.overflow = 'auto';
    }
    function resetNotifModal() {
        document.querySelectorAll('#notificationModal input[type="checkbox"]').forEach(cb => cb.checked
            = false);
        document.querySelectorAll('#notificationModal input[type="number"]').forEach(i => i.value =
            "0");
    }
    let currentAutoMode = 'add';

    function openEditAutomationModal(data) {
        currentAutoMode = 'edit';
        document.getElementById('autoModalTitle').innerText = "Edit Automated Email Setup";
        document.getElementById('notif_record_id').value = data.record_id;

        // Set basic inputs
        document.getElementById('auto_task_name').value = data.task_name;
        document.getElementById('auto_send_every').value = data.send_every;
        document.getElementById('auto_send_on').value = data.sent_at;
        document.getElementById('edit_status_automated').value = data.status;

        // Check correct checkboxes
        const tIds = data.tank_ids ? data.tank_ids.split(',') : [];
        const uIds = data.user_ids ? data.user_ids.split(',') : [];

        document.querySelectorAll('#auto-tank-list .tank-cb').forEach(cb => cb.checked = tIds.includes(cb.value));
        document.querySelectorAll('#auto-user-list .user-cb').forEach(cb => cb.checked = uIds.includes(cb.value));

        document.getElementById('automatedModal').style.display = 'flex';
    }

    function submitAutomated() {
        const record_id = document.getElementById('notif_record_id').value;

        // Gather Checkboxes
        const tank_ids = Array.from(document.querySelectorAll('#auto-tank-list .tank-cb:checked')).map(cb => cb.value).join(',');
        const user_ids = Array.from(document.querySelectorAll('#auto-user-list .user-cb:checked')).map(cb => cb.value).join(',');

        const formData = new FormData();
        if (currentAutoMode === 'edit') formData.append('record_id', record_id);
        formData.append('task_name', document.getElementById('auto_task_name').value);
        formData.append('tank_ids', tank_ids);
        formData.append('user_ids', user_ids);
        formData.append('send_every', document.getElementById('auto_send_every').value);
        formData.append('sent_at', document.getElementById('auto_send_on').value);
        formData.append('status', document.getElementById('edit_status_automated').value);

        const url = currentAutoMode === 'add' ? 'ajax/add_automated.php' : 'ajax/edit_automated.php';

        fetch(url, { method: 'POST', body: formData })
            .then(res => res.text())
            .then(data => {
                if (data.trim() === "1") {
                    location.reload();
                } else {
                    alert("Error: " + data);
                }
            });
    }
    function closeAutomatedModal() {
        document.getElementById('automatedModal').style.display = 'none';
        document.body.style.overflow = 'auto';
    }
    function openAddAutomatedModal() {
        currentAutoMode = 'add'; // Set the mode to add
        document.getElementById('autoModalTitle').innerText = "New Automated Email Setup";
        document.getElementById('notif_record_id').value = ""; // Clear the ID

        // Reset all text and select inputs
        document.getElementById('auto_task_name').value = "";
        document.getElementById('auto_send_every').value = "Day";
        document.getElementById('auto_send_on').value = "09:00";
        document.getElementById('edit_status_automated').value = "ACTIVE";

        // Uncheck all checkboxes
        document.querySelectorAll('#auto-tank-list .tank-cb').forEach(cb => cb.checked = false);
        document.querySelectorAll('#auto-user-list .user-cb').forEach(cb => cb.checked = false);

        // Show the modal
        document.getElementById('automatedModal').style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

</script>