<?php require_once __DIR__.'/layout/header.php'; ?>
<?php require_once __DIR__.'/layout/sidebar.php'; ?>

<style>
body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8}
.main{margin-left:200px;padding:24px}
h1{margin-top:0}

.toolbar{margin-bottom:12px}

button{
padding:8px 14px;
border:none;
background:#2563eb;
color:#fff;
cursor:pointer;
font-size:14px;
}

button.secondary{background:#6b7280}

table{
width:100%;
border-collapse:collapse;
background:#fff;
}

th,td{
padding:10px;
border-bottom:1px solid #e5e7eb;
text-align:left;
font-size:14px;
}

th{background:#f9fafb}

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.4);
display:none;
align-items:center;
justify-content:center;
}

.modal-box{
background:#fff;
padding:20px;
width:460px;
}

.modal-box input,
.modal-box select{
width:100%;
padding:8px;
margin-bottom:10px;
}
</style>

<main class="main">

<h1>Users</h1>

<div class="toolbar">

<input id="searchInput" placeholder="search email">

<select id="filterRsp">
<option value="">All RSPs</option>
</select>

<select id="filterCompany">
<option value="">All companies</option>
</select>

<select id="filterRole">
<option value="">All roles</option>
<option value="support">Support</option>
<option value="rsp_owner">RSP Owner</option>
<option value="rsp_admin">RSP Admin</option>
<option value="company_admin">Company Admin</option>
<option value="manager">Manager</option>
<option value="supervisor">Supervisor</option>
<option value="user">User</option>
<option value="viewer">Viewer</option>
</select>

<button id="applyBtn">Apply</button>

<button onclick="openCreateUser()">Add User</button>

<button onclick="openBulkUpload()">Bulk Upload</button>

</div>

<table>
<thead>
<tr>
<th>Email</th>
<th>Company</th>
<th>RSP</th>
<th>Role</th>
<th>Status</th>
<th>Verified</th>
</tr>
</thead>

<tbody id="rows"></tbody>
</table>

<div style="margin-top:12px">
<button id="prevBtn">Prev</button>
<span id="pageInfo"></span>
<button id="nextBtn">Next</button>
</div>

</main>

<!-- PROFILE MODAL -->

<div id="profileModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); align-items:center; justify-content:center;">
<div style="background:#fff; padding:20px; width:400px;">

<h3>User Profile</h3>

<div id="pEmail"></div>

<input id="pFirst" placeholder="First Name">
<input id="pLast" placeholder="Last Name">

<select id="pCompany"></select>

<select id="pStatus">
<option value="active">Active</option>
<option value="locked">Locked</option>
<option value="disabled">Disabled</option>
</select>

<label>
<input type="checkbox" id="pVerified"> Email Verified
</label>

<select id="pDepartment"></select>
<select id="pSection"></select>

<select id="pRole">
<option value="support">Support</option>
<option value="rsp_owner">RSP Owner</option>
<option value="rsp_admin">RSP Admin</option>
<option value="company_admin">Company Admin</option>
<option value="manager">Manager</option>
<option value="supervisor">Supervisor</option>
<option value="user">User</option>
<option value="viewer">Viewer</option>
</select>

<select id="pSupervisor"></select>

<button onclick="saveAdmin()">Save</button>
<button onclick="closeProfile()">Close</button>

</div>
</div>

<script src="/admin/assets/js/users.js"></script>

<?php require_once __DIR__.'/layout/footer.php'; ?>