<?php
/*
	FusionPBX
	Version: MPL 1.1

	The contents of this file are subject to the Mozilla Public License Version
	1.1 (the "License"); you may not use this file except in compliance with
	the License. You may obtain a copy of the License at
	http://www.mozilla.org/MPL/

	Software distributed under the License is distributed on an "AS IS" basis,
	WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
	for the specific language governing rights and limitations under the
	License.

	The Original Code is FusionPBX

	The Initial Developer of the Original Code is
	Mark J Crane <markjcrane@fusionpbx.com>
	Portions created by the Initial Developer are Copyright (C) 2008-2025
	the Initial Developer. All Rights Reserved.

	Contributor(s):
	Mark J Crane <markjcrane@fusionpbx.com>
	Tim Fry <tim@fusionpbx.com>
*/

// Includes
	require_once dirname(__DIR__, 2) . "/resources/require.php";
	require_once "resources/check_auth.php";

// Check permissions
	if (!permission_exists('operator_panel_view')) {
		echo "access denied";
		exit;
	}

// Multi-lingual support
	$language = new text;
	$text = $language->get();

// Create token and register with the active operator panel service
	$token = (new token())->create($_SERVER['PHP_SELF']);
	subscriber::save_token($token, ['active.operator.panel']);

// Gather user permissions for the JS side
	$perm = [
		'operator_panel_view'      => permission_exists('operator_panel_view'),
		'operator_panel_manage'    => permission_exists('operator_panel_manage'),
		'operator_panel_hangup'    => permission_exists('operator_panel_hangup'),
		'operator_panel_eavesdrop' => permission_exists('operator_panel_eavesdrop'),
		'operator_panel_coach'     => permission_exists('operator_panel_coach'),
		'operator_panel_record'    => permission_exists('operator_panel_record'),
		'operator_panel_originate' => permission_exists('operator_panel_originate'),
	];

// WebSocket settings from default_settings
	$ws_settings = [
		'reconnect_delay'          => (int)$settings->get('operator_panel', 'reconnect_delay',          500),
		'ping_interval'            => (int)$settings->get('operator_panel', 'ping_interval',            5000),
		'auth_timeout'             => (int)$settings->get('operator_panel', 'auth_timeout',             5000),
		'pong_timeout'             => (int)$settings->get('operator_panel', 'pong_timeout',             1500),
		'max_reconnect_delay'      => (int)$settings->get('operator_panel', 'max_reconnect_delay',      5000),
		'pong_timeout_max_retries' => (int)$settings->get('operator_panel', 'pong_timeout_max_retries', 2),
		'refresh_interval'         => (int)$settings->get('operator_panel', 'refresh_interval',         0),
	];

// Theme colors for connection status indicator
	$status_colors = [
		'connected'    => $settings->get('theme', 'operator_panel_status_connected',    '#28a745'),
		'warning'      => $settings->get('theme', 'operator_panel_status_warning',      '#ffc107'),
		'disconnected' => $settings->get('theme', 'operator_panel_status_disconnected', '#dc3545'),
		'connecting'   => $settings->get('theme', 'operator_panel_status_connecting',   '#6c757d'),
	];
	$status_icons = [
		'connected'    => $settings->get('theme', 'operator_panel_status_icon_connected',    'fa-solid fa-plug-circle-check'),
		'warning'      => $settings->get('theme', 'operator_panel_status_icon_warning',      'fa-solid fa-plug-circle-exclamation'),
		'disconnected' => $settings->get('theme', 'operator_panel_status_icon_disconnected', 'fa-solid fa-plug-circle-xmark'),
		'connecting'   => $settings->get('theme', 'operator_panel_status_icon_connecting',   'fa-solid fa-plug fa-fade'),
	];
	$status_show_icon = $settings->get('theme', 'operator_panel_status_show_icon', 'true') === 'true';

// Optional user status list for the presence dropdown
	$user_statuses = ['Available', 'Available (On Demand)', 'On Break', 'Do Not Disturb', 'Logged Out'];

// Card label position for extension group cards: top, left, right, bottom, hidden
	$card_label_position = strtolower((string)$settings->get('operator_panel', 'card_label_position', 'left'));
	if (!in_array($card_label_position, ['top', 'left', 'right', 'bottom', 'hidden'], true)) {
		$card_label_position = 'left';
	}

// Optional polling reconciliation of registration state (can be disabled).
	$registrations_reconcile_enabled = $settings->get('operator_panel', 'registrations_reconcile_enabled', 'false') === 'true';

// Get the logged-in user's own extension numbers (shown at top of Extensions panel)
// and primary eavesdrop destination extension
	$user_own_extensions = [];
	if (!empty($_SESSION['user']['extensions'])) {
		// $_SESSION['user']['extensions'] is an array of extension number strings
		$user_own_extensions = array_values(array_filter($_SESSION['user']['extensions']));
	} elseif (!empty($_SESSION['user']['extension'])) {
		foreach ($_SESSION['user']['extension'] as $ext_record) {
			if (!empty($ext_record['destination'])) {
				$user_own_extensions[] = $ext_record['destination'];
			}
		}
	}

// Include the page header
	$document['title'] = $text['title-operator_panel'] ?? 'Operator Panel';
	require_once "resources/header.php";

// Cache-busting hashes for JS assets
	$ws_client_hash = md5_file(__DIR__ . '/resources/javascript/websocket_client.js');
	$lop_js_hash    = md5_file(__DIR__ . '/resources/javascript/operator_panel.js');

?>

<script type="text/javascript">

	// WebSocket configuration (server settings)
	const ws_config = <?= json_encode($ws_settings, JSON_UNESCAPED_SLASHES) ?>;

	// Theme colors and icons for connection status indicator
	const status_colors = <?= json_encode($status_colors, JSON_UNESCAPED_SLASHES) ?>;
	const status_icons  = <?= json_encode($status_icons,  JSON_UNESCAPED_SLASHES) ?>;
	const status_tooltips = {
		connected:    <?= json_encode($text['status-connected']    ?? 'Connected') ?>,
		warning:      <?= json_encode($text['status-warning']      ?? 'Warning') ?>,
		disconnected: <?= json_encode($text['status-disconnected'] ?? 'Disconnected') ?>,
		connecting:   <?= json_encode($text['status-connecting']   ?? 'Connecting') ?>
	};
	const status_show_icon = <?= json_encode($status_show_icon) ?>;

	// Permissions passed from PHP
	const permissions = <?= json_encode($perm, JSON_UNESCAPED_SLASHES) ?>;

	// Translation strings
	const text = <?= json_encode($text, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;

	// Domain context for this session
	const domain_name = <?= json_encode($_SESSION['domain_name'] ?? '') ?>;

	// User identity (for user_status action)
	const user_uuid = <?= json_encode($_SESSION['user_uuid'] ?? '') ?>;

	// User status options
	const user_statuses = <?= json_encode($user_statuses) ?>;

	// The logged-in user's own extension numbers — shown first / highlighted in the Extensions panel
	const user_own_extensions = <?= json_encode($user_own_extensions, JSON_UNESCAPED_SLASHES) ?>;

	// Theme extras
	const button_icon_view = '<?= $settings->get('theme', 'button_icon_view') ?>';

	// Group card label position (top, left, right, bottom, hidden)
	const card_label_position = <?= json_encode($card_label_position) ?>;

	// Optional registrations-state reconciliation polling
	const registrations_reconcile_enabled = <?= json_encode($registrations_reconcile_enabled) ?>;

</script>

<script src="resources/javascript/websocket_client.js?v=<?= $ws_client_hash ?>"></script>
<script src="resources/javascript/operator_panel.js?v=<?= $lop_js_hash ?>"></script>
<script src="../../resources/sortablejs/sortable.min.js"></script>

<script type="text/javascript">
	// Authentication token for WebSocket handshake
	const token = {
		name: <?= json_encode($token['name']) ?>,
		hash: <?= json_encode($token['hash']) ?>
	};

	// Boot the panel after DOM is ready
	document.addEventListener('DOMContentLoaded', function () {
		connect_websocket();
	});
</script>

<?php

// Page header bar
	echo "<div class='action_bar' id='action_bar'>\n";
	echo "	<div class='heading'><b>" . $text['title-operator_panel'] . "</b>\n";

	// Connection status indicator (icon + text)
	echo "\t\t<span id='connection_status' class='badge ms-2' style='background-color:" . htmlspecialchars($status_colors['connecting']) . "; color:#fff;'"
			. " title='" . htmlspecialchars($text['status-connecting'] ?? 'Connecting') . "'>";
	if ($status_show_icon) {
		echo "<i id='connection_status_icon' class='" . htmlspecialchars($status_icons['connecting']) . "' style='margin-right:5px;'></i>";
	}
	echo "<span id='connection_status_text'>" . htmlspecialchars($text['status-connecting'] ?? 'Connecting') . "</span>";
	echo "</span>\n";

	echo "	</div>\n";

	// My status buttons (matching the original design)
	if ($perm['operator_panel_view']) {
		$status_btn_colors = [
			'Available'            => '#28a745',
			'Available (On Demand)'=> '#28a745',
			'On Break'             => '#b8860b',
			'Do Not Disturb'       => '#dc3545',
			'Logged Out'           => '#6c757d',
		];
		echo "	<div class='actions' style='display:flex; align-items:center; gap:0;'>\n";
		echo "		<div id='user_status_buttons' style='display:inline-flex; gap:4px; margin-right:12px;'>\n";
		foreach ($user_statuses as $s) {
			$color = $status_btn_colors[$s] ?? '#6c757d';
			$label = strtoupper(htmlspecialchars($s));
			echo "			<button type='button' class='op-status-btn' data-status='" . htmlspecialchars($s) . "'"
				. " style='background-color:" . htmlspecialchars($color) . ";'"
				. " onclick='select_user_status(this)'>" . $label . "</button>\n";
		}
		echo "		</div>\n";
		echo "	</div>\n";
	}

	echo "	<div style='clear:both;'></div>\n";
	echo "</div>\n";

?>

<style>
/* Active Operator Panel — extension blocks */
.op-ext-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	padding: 4px 0 12px;
}
/* Status buttons */
.op-status-btn {
	border: 2px solid transparent;
	border-radius: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .5px;
	line-height: 1.4;
	transition: opacity .15s, border-color .15s;
	opacity: 0.55;
}
.op-status-btn:hover { opacity: 0.8; }
.op-status-btn.active { opacity: 1; border-color: rgba(0,0,0,.35); }
/* Filter bar */
.op-filter-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0 10px;
	flex-wrap: wrap;
}
.op-group-filters {
	display: inline-flex;
	gap: 4px;
	flex-wrap: wrap;
}
.op-group-filter-btn {
	border: none;
	border-radius: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1.4;
	background-color: #4a8cdb;
	transition: opacity .15s;
	opacity: 0.55;
}
.op-group-filter-btn:hover { opacity: 0.8; }
.op-group-filter-btn.active { opacity: 1; background-color: #2a7fff; }
.op-text-filter {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 8px;
	font-size: 12px;
	line-height: 1.4;
	width: 130px;
	outline: none;
}
.op-text-filter:focus { border-color: #80bdff; box-shadow: 0 0 0 2px rgba(0,123,255,.15); }
/* Edit mode button */
.op-edit-btn {
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	padding: 3px 8px;
	font-size: 14px;
	cursor: pointer;
	color: #6c757d;
	line-height: 1;
	transition: background .15s, color .15s;
}
.op-edit-btn:hover { background: #e9ecef; }
.op-edit-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.op-ext-block {
	display: flex;
	width: 235px;
	margin: 0 8px 8px 0;
	border-style: solid;
	border-width: 1px 3px;
	border-radius: 5px;
	border-color: #b9c5d8;
	background-color: #e5eaf5;
	box-shadow: 0 0 3px #c8cdd9;
	position: relative;
	overflow: hidden;
	user-select: none;
	cursor: default;
}
.op-ext-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 47px;
	width: 47px;
	background-color: #e5eaf5;
	border-radius: 4px 0 0 4px;
	color: #7a8499;
	font-size: 26px;
	padding: 4px 0;
}
.op-ext-status-icon {
	font-size: 28px;
	line-height: 1;
	color: inherit;
}
.op-ext-info {
	flex: 1;
	padding: 5px 8px 5px 8px;
	background: #fff;
	border-radius: 0 3px 3px 0;
	font-family: arial, sans-serif;
	font-size: 10px;
	min-width: 0;
	position: relative;
	min-height: 50px;
}
.op-ext-number     { font-size: 12px; font-weight: bold; color: #3164AD; line-height: 1.4; }
.op-ext-name       { font-size: 10px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ext-state-info { font-size: 10px; color: #555; margin-top: 3px; }
.op-ext-info.op-has-live-call { padding-right: 78px; padding-bottom: 15px; box-sizing: border-box; }
.op-ext-info.op-has-live-call .op-ext-state-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ext-mine-label { position: absolute; top: 2px; right: 4px; font-size: 9px; color: #0d6efd; font-weight: 600; }
.op-ext-dial-wrap  { position: absolute; top: 22px; right: 3px; }
.op-ext-dial-toggle {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	line-height: 0;
	cursor: pointer;
}
.op-ext-dial-toggle img { display: block; }
.op-ext-dial-input {
	position: absolute;
	top: -1px;
	right: 18px;
	width: 100px;
	min-width: 100px;
	max-width: 100px;
	height: 20px;
	padding: 1px 6px;
	font-size: 12px;
	border: 1px solid #b9c5d8;
	border-radius: 2px;
	background-color: #fff;
	text-align: center;
}
.op-ext-call-meta {
	position: absolute;
	top: 2px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.op-ext-call-direction {
	width: 12px;
	height: 12px;
	border: none;
}
.op-ext-call-duration {
	font-size: 12px;
	color: #4a4a4a;
	line-height: 1;
}
.op-ext-call-actions {
	position: absolute;
	bottom: 2px;
	right: 18px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.op-ext-action-icon {
	width: 12px;
	height: 12px;
	border: none;
	cursor: pointer;
}
body.op-dragging, body.op-dragging * {
	cursor: none !important;
}
/* user status: available — green */
.op-ext-available               { border-color: #28a745; background-color: #d4edda; }
.op-ext-available .op-ext-icon  { background-color: #c3e6cb; }
.op-ext-available .op-ext-icon .op-ext-status-icon  { color: #1e7e34; }
.op-ext-available .op-ext-info  { background-color: #eaf6ec; }
/* user status: on break — gold */
.op-ext-on-break               { border-color: #b8860b; background-color: #fdf3d7; }
.op-ext-on-break .op-ext-icon  { background-color: #f5e6b8; }
.op-ext-on-break .op-ext-icon .op-ext-status-icon  { color: #8a6508; }
.op-ext-on-break .op-ext-info  { background-color: #fef9eb; }
/* user status: do not disturb — red */
.op-ext-dnd               { border-color: #dc3545; background-color: #f8d7da; }
.op-ext-dnd .op-ext-icon  { background-color: #f1b0b7; }
.op-ext-dnd .op-ext-icon .op-ext-status-icon  { color: #a71d2a; }
.op-ext-dnd .op-ext-info  { background-color: #fce4e7; }
/* registered (no explicit status) — green */
.op-ext-registered               { border-color: #28a745; background-color: #d4edda; }
.op-ext-registered .op-ext-icon  { background-color: #c3e6cb; }
.op-ext-registered .op-ext-icon .op-ext-status-icon  { color: #1e7e34; }
.op-ext-registered .op-ext-info  { background-color: #eaf6ec; }
/* user status: logged out — grey */
.op-ext-logged-out               { border-color: #9da5ae; background-color: #e2e3e5; }
.op-ext-logged-out .op-ext-icon  { background-color: #d6d8db; }
.op-ext-logged-out .op-ext-icon .op-ext-status-icon  { color: #6c757d; }
.op-ext-logged-out .op-ext-info  { background-color: #f0f1f2; }
.op-ext-logged-out .op-ext-number { color: #888; }
.op-ext-logged-out .op-ext-name  { color: #999; }
/* unregistered — grey with muted content */
.op-ext-unregistered               { border-color: #9da5ae; background-color: #e2e3e5; cursor: not-allowed; }
.op-ext-unregistered .op-ext-icon  { background-color: #d6d8db; }
.op-ext-unregistered .op-ext-icon .op-ext-status-icon  { color: #6c757d; opacity: .4; filter: grayscale(100%); }
.op-ext-unregistered .op-ext-info  { background-color: #f0f1f2; color: #999; }
.op-ext-unregistered .op-ext-number { color: #999; }
.op-ext-unregistered .op-ext-name  { color: #aaa; }
/* call state: ringing — blue */
.op-ext-ringing               { border-color: #41b9eb; background-color: #a8dbf0; }
.op-ext-ringing .op-ext-icon  { background-color: #a8dbf0; }
.op-ext-ringing .op-ext-icon .op-ext-status-icon  { color: #0e6882; }
.op-ext-ringing .op-ext-info  { background-color: #d1f1ff; }
/* call state: active (on call) — bright green */
.op-ext-active                { border-color: #77d779; background-color: #baf4bb; }
.op-ext-active .op-ext-icon   { background-color: #baf4bb; }
.op-ext-active .op-ext-icon .op-ext-status-icon   { color: #2a7a2b; }
.op-ext-active .op-ext-info   { background-color: #e1ffe2; }
/* call state: held — teal */
.op-ext-held                  { border-color: #5bbfd1; background-color: #b3e5ee; }
.op-ext-held .op-ext-icon     { background-color: #b3e5ee; }
.op-ext-held .op-ext-icon .op-ext-status-icon     { color: #1a6c7a; }
.op-ext-held .op-ext-info     { background-color: #ddf4f8; }
/* mine highlight */
.op-ext-mine       { border-width: 2px 3px !important; border-color: #0d6efd !important; }
/* drop target */
.op-ext-drop-over  { box-shadow: 0 0 0 3px #0d6efd; }
.op-ext-drop-over .op-ext-info { background-color: #cfe2ff !important; }
/* section labels */
.op-ext-section-label { font-weight: 600; font-size: .85em; color: #6c757d; margin: 8px 0 4px; width: 100%; }
/* My Extensions container — own line above other groups */
#my_extensions_container:not(:empty) {
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #d0d8e5;
}
/* call group cards */
.op-group-card {
	border: 1px solid #d0d8e5;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 1px 3px #d0d8e5;
	margin-bottom: 14px;
	overflow: hidden;
	display: inline-flex;
	vertical-align: top;
	margin-right: 14px;
}
.op-group-card.op-hidden { display: none; }

/* Card frame orientation by label position */
.op-group-card[data-position="left"]   { flex-direction: row; }
.op-group-card[data-position="right"]  { flex-direction: row-reverse; }
.op-group-card[data-position="top"]    { flex-direction: column; }
.op-group-card[data-position="bottom"] { flex-direction: column-reverse; }
.op-group-card[data-position="hidden"] { flex-direction: row; }
/* Edit mode: cards grid container */
#extensions_container {
	transition: background .2s;
}
#extensions_container.op-edit-mode .op-group-card {
	cursor: grab;
	border: 2px dashed #80bdff;
}
#extensions_container.op-edit-mode .op-group-card.sortable-ghost {
	opacity: .4;
}
/* Card header - default/left side orientation with vertical text */
.op-group-card-header {
	background-color: #e5e9f0;
	padding: 8px 4px;
	font-size: 12px;
	font-weight: 600;
	color: #444;
	border-right: 1px solid #d0d8e5;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	letter-spacing: .6px;
	text-transform: uppercase;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
}

/* Top position - horizontal text, border at bottom */
.op-group-card[data-position="top"] .op-group-card-header {
	writing-mode: horizontal-tb;
	transform: none;
	border-right: none;
	border-bottom: 1px solid #d0d8e5;
	min-width: auto;
	padding: 6px 12px;
}

/* Right position - vertical text, border at left */
.op-group-card[data-position="right"] .op-group-card-header {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(0deg);
	border-right: none;
	border-left: 1px solid #d0d8e5;
	min-width: 34px;
}

/* Bottom position - horizontal text, border at top */
.op-group-card[data-position="bottom"] .op-group-card-header {
	writing-mode: horizontal-tb;
	transform: none;
	border-right: none;
	border-top: 1px solid #d0d8e5;
	min-width: auto;
	padding: 6px 12px;
}

/* Hidden position - no header visible */
.op-group-card[data-position="hidden"] .op-group-card-header {
	display: none;
}
/* Tooltip on hover - show group name in title attribute */
.op-group-card:hover {
	cursor: help;
}
/* Hide text for "My Extensions" but keep grey shading */
.op-group-card-header.op-hidden-text {
	color: transparent;
	text-shadow: none;
}
.op-group-card-body {
	padding: 10px 8px 4px;
	flex: 1;
}
</style>

<!-- Bootstrap tabs: Extensions | Calls | Conferences | Agents -->
<ul class="nav nav-tabs" id="lop_tabs" role="tablist" style="margin-bottom:16px;">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="tab-extensions" data-bs-toggle="tab" data-bs-target="#panel-extensions"
			type="button" role="tab" aria-controls="panel-extensions" aria-selected="true">
			<?= htmlspecialchars($text['tab-extensions'] ?? 'Extensions') ?>
			<span id="extensions_count" class="badge ms-1" style="background:#6c757d;color:#fff;">0</span>
		</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="tab-calls" data-bs-toggle="tab" data-bs-target="#panel-calls"
			type="button" role="tab" aria-controls="panel-calls" aria-selected="false">
			<?= htmlspecialchars($text['tab-calls'] ?? 'Calls') ?>
			<span id="calls_count" class="badge ms-1" style="background:#6c757d;color:#fff;">0</span>
		</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="tab-conferences" data-bs-toggle="tab" data-bs-target="#panel-conferences"
			type="button" role="tab" aria-controls="panel-conferences" aria-selected="false">
			<?= htmlspecialchars($text['tab-conferences'] ?? 'Conferences') ?>
			<span id="conferences_count" class="badge ms-1" style="background:#6c757d;color:#fff;">0</span>
		</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="tab-agents" data-bs-toggle="tab" data-bs-target="#panel-agents"
			type="button" role="tab" aria-controls="panel-agents" aria-selected="false">
			<?= htmlspecialchars($text['tab-agents'] ?? 'Agents') ?>
			<span id="agents_count" class="badge ms-1" style="background:#6c757d;color:#fff;">0</span>
		</button>
	</li>
</ul>

<div class="tab-content" id="lop_tab_content">

	<!-- EXTENSIONS TAB -->
	<div class="tab-pane fade show active" id="panel-extensions" role="tabpanel" aria-labelledby="tab-extensions">
		<!-- Group filter bar -->
		<div id="extensions_filter_bar" class="op-filter-bar" style="display:none;">
			<button type="button" class="op-edit-btn" id="edit_mode_btn" onclick="toggle_edit_mode()" title="<?= htmlspecialchars($text['label-edit_mode'] ?? 'Edit Mode') ?>">
				<i class="fa-solid fa-pen-to-square"></i>
			</button>
			<div id="group_filter_buttons" class="op-group-filters"></div>
			<input type="text" id="extensions_text_filter" class="op-text-filter" placeholder="<?= htmlspecialchars($text['label-filter'] ?? 'Filter...') ?>" oninput="apply_extension_filters()">
		</div>
		<div id="my_extensions_container"></div>
		<div id="extensions_container">
			<p class="text-muted"><?= htmlspecialchars($text['label-connecting'] ?? 'Connecting...') ?></p>
		</div>
	</div>

	<!-- CALLS TAB -->
	<div class="tab-pane fade" id="panel-calls" role="tabpanel" aria-labelledby="tab-calls">
		<div id="calls_filter_bar" class="op-filter-bar" style="display:none;">
			<div id="group_filter_buttons_calls" class="op-group-filters"></div>
			<input type="text" id="calls_text_filter" class="op-text-filter" placeholder="<?= htmlspecialchars($text['label-filter'] ?? 'Filter...') ?>" oninput="apply_calls_filters()">
		</div>
		<div id="calls_container">
			<p class="text-muted"><?= htmlspecialchars($text['label-connecting'] ?? 'Connecting...') ?></p>
		</div>
	</div>

	<!-- CONFERENCES TAB -->
	<div class="tab-pane fade" id="panel-conferences" role="tabpanel" aria-labelledby="tab-conferences">
		<div id="conferences_filter_bar" class="op-filter-bar" style="display:none;">
			<div id="group_filter_buttons_conferences" class="op-group-filters"></div>
			<input type="text" id="conferences_text_filter" class="op-text-filter" placeholder="<?= htmlspecialchars($text['label-filter'] ?? 'Filter...') ?>" oninput="apply_conferences_filters()">
		</div>
		<div id="conferences_container">
			<p class="text-muted"><?= htmlspecialchars($text['label-connecting'] ?? 'Connecting...') ?></p>
		</div>
	</div>

	<!-- AGENTS TAB -->
	<div class="tab-pane fade" id="panel-agents" role="tabpanel" aria-labelledby="tab-agents">
		<div id="agents_filter_bar" class="op-filter-bar" style="display:none;">
			<div id="group_filter_buttons_agents" class="op-group-filters"></div>
			<input type="text" id="agents_text_filter" class="op-text-filter" placeholder="<?= htmlspecialchars($text['label-filter'] ?? 'Filter...') ?>" oninput="apply_agents_filters()">
		</div>
		<div id="agents_container">
			<p class="text-muted"><?= htmlspecialchars($text['label-connecting'] ?? 'Connecting...') ?></p>
		</div>
	</div>

</div>

<!-- Transfer modal -->
<div class="modal fade" id="transfer_modal" tabindex="-1" aria-labelledby="transfer_modal_label" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content" style="background:var(--bs-body-bg);">
			<div class="modal-header">
				<h5 class="modal-title" id="transfer_modal_label"><?= htmlspecialchars($text['label-transfer'] ?? 'Transfer Call') ?></h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<label for="transfer_destination" class="form-label" style="font-weight:600;">
					<?= htmlspecialchars($text['label-destination'] ?? 'Destination') ?>
				</label>
				<input type="text" id="transfer_destination" class="form-control" placeholder="1001"
					autocomplete="off" autofocus>
				<input type="hidden" id="transfer_uuid">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					<?= htmlspecialchars($text['button-cancel'] ?? 'Cancel') ?>
				</button>
				<button type="button" class="btn btn-primary" onclick="confirm_transfer()">
					<?= htmlspecialchars($text['button-transfer'] ?? 'Transfer') ?>
				</button>
			</div>
		</div>
	</div>
</div>

<br><br>

<?php
	require_once "resources/footer.php";