{{-- 3CX Call Modal - Single Source of Truth Template --}}
{{-- This template is used by both Admin Integration and Task Detail pages --}}
<div class="modal-header">
	<button type="button" class="close" ng-click="cancel()">×</button>
	<h4 class="modal-title modern-title">3CX Call</h4>
</div>
<div class="modal-body">
	{{-- Modern Call States - Only show current state --}}
	
	{{-- Initiating Call State --}}
	<div id="call-state-init" ng-show="currentState === 'init'" class="call-state modern-state">
		<div class="modern-icon-container">
			<i class="fa fa-phone-square fa-4x modern-icon connecting pulse"></i>
		</div>
		<h2 class="modern-status">Initiating Call</h2>
		<p class="modern-number">{[{ toNumber }]}</p>
		<span class="modern-extension">Setting up connection...</span>
	</div>
	
	{{-- Dialing State --}}
	<div id="call-state-dialing" ng-show="currentState === 'dialing'" class="call-state modern-state">
		<div class="modern-icon-container">
			<i class="fa fa-phone-square fa-4x modern-icon dialing pulse"></i>
		</div>
		<h2 class="modern-status">Calling Extension</h2>
		<p class="modern-number">{[{ toNumber }]}</p>
		<div class="modern-progress">
			<div class="modern-progress-bar dialing"></div>
		</div>
		<span class="modern-subtitle">Dialing reception extension (324)...</span>
	</div>
	
	{{-- Ringing State --}}
	<div id="call-state-ringing" ng-show="currentState === 'ringing'" class="call-state modern-state">
		<div class="modern-icon-container">
			<i class="fa fa-phone-square fa-4x modern-icon ringing ring-animation"></i>
		</div>
		<h2 class="modern-status">Connecting Call</h2>
		<p class="modern-number">{[{ toNumber }]}</p>
		<div class="modern-progress">
			<div class="modern-progress-bar ringing"></div>
		</div>
		<span class="modern-subtitle">Extension answered. Calling customer...</span>
	</div>
	
	{{-- Connected State --}}
	<div id="call-state-connected" ng-show="currentState === 'connected'" class="call-state modern-state">
		<div class="modern-icon-container">
			<i class="fa fa-phone-square fa-4x modern-icon connected connected-glow"></i>
		</div>
		<h2 class="modern-status">Connected</h2>
		<p class="modern-number">{[{ toNumber }]}</p>
		<div class="modern-timer">
			<span id="timer-display">{[{ callDuration || '00:00' }]}</span>
		</div>
        <div class="alert alert-success" style="margin-top: 20px;">
            <strong>Connected.</strong> The phone system manages the call lifecycle.
        </div>
	</div>
	
	{{-- Ended State --}}
	<div id="call-state-ended" ng-show="currentState === 'ended'" class="call-state modern-state">
		<div class="modern-icon-container">
			<i class="fa fa-check-square fa-4x modern-icon ended"></i>
		</div>
		<h2 class="modern-status">Call Ended</h2>
		<p class="modern-number">{[{ toNumber }]}</p>
		<div class="modern-duration">
			<span id="final-duration">{[{ finalDuration || 'Call completed' }]}</span>
		</div>		
	</div>

	{{-- Error State --}}
	<div id="call-state-error" ng-show="currentState === 'error'" class="call-state modern-state">
		<div class="modern-icon-container">
			<i class="fa fa-exclamation-triangle fa-4x modern-icon error"></i>
		</div>
		<h2 class="modern-status">Call Failed</h2>
		<p class="modern-error">{[{ errorMessage }]}</p>		
	</div>
	
	{{-- Debug Console for Real-time Updates --}}
	<div class="debug-console" style="margin-top: 20px;">
		<a href="#" onclick="$('#debug-console-content').toggle(); return false;" style="font-size: 12px; color: #666;">🔧 Debug Console</a>
		<div id="debug-console-content" style="display:none; margin-top:10px; font-size:11px; background:#f9f9f9; padding:8px; border-radius:4px; max-height: 200px; overflow-y: auto;">
			<div ng-repeat="log in debugLogs track by $index" style="margin: 2px 0;">
				<span style="color: #666;">{[{ log.time }]}</span>
				<span ng-class="{'color: #28a745;': log.type === 'success', 'color: #dc3545;': log.type === 'error', 'color: #17a2b8;': log.type === 'info'}">{[{ log.message }]}</span>
			</div>
		</div>
	</div>
</div>

{{-- 3CX Module Modal CSS - Single Source of Truth --}}
<style>
/* Modern Call Modal CSS - FROM 3CX MODULE */
.modern-call-modal {
	border: none;
	border-radius: 0;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.modern-header {
	background: #fff;
	border-bottom: 1px solid #e9ecef;
	border-radius: 0;
	padding: 20px 24px;
}

.modern-title {
	font-size: 18px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0;
}

.modern-close {
	font-size: 24px;
	font-weight: 300;
	color: #6c757d;
	opacity: 1;
}

.modern-body {
	padding: 24px;
	background: #f8f9fa;
}

/* HIGH SPECIFICITY - Force override Bootstrap modal styles */
.modal-content .modal-body .modern-state {
	text-align: center !important;
	padding: 48px 32px !important;
	background: white !important;
	min-height: 420px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	border-radius: 8px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.modern-icon-container {
	margin-bottom: 24px !important;
	padding: 16px !important;
}

.modern-icon {
	color: #6c757d;
	transition: all 0.3s ease;
}

.modern-icon.connecting { color: #6c757d; }
.modern-icon.dialing { color: #ffc107; }
.modern-icon.ringing { color: #17a2b8; }
.modern-icon.connected { color: #28a745; }
.modern-icon.ended { color: #28a745; }
.modern-icon.error { color: #dc3545; }

.modal-content .modal-body .modern-status {
	font-size: 28px !important;
	font-weight: 600 !important;
	color: #2c3e50 !important;
	margin: 0 0 16px 0 !important;
	text-transform: capitalize !important;
}

.modal-content .modal-body .modern-number {
	font-size: 28px !important;
	font-weight: 500 !important;
	color: #2c3e50 !important;
	margin: 12px 0 20px 0 !important;
	font-family: 'Segoe UI', sans-serif !important;
	letter-spacing: 1px !important;
}

.modern-extension,
.modern-subtitle {
	font-size: 14px;
	color: #6c757d;
	display: block;
	margin-top: 12px;
}

.modern-progress {
	width: 100%;
	height: 4px;
	background: #e9ecef;
	border-radius: 2px;
	overflow: hidden;
	margin: 16px 0;
}

.modern-progress-bar {
	height: 100%;
	transition: width 0.3s ease;
	border-radius: 2px;
}

.modern-progress-bar.dialing {
	width: 60%;
	background: linear-gradient(90deg, #ffc107, #ffca2c);
	animation: progress-pulse 2s infinite;
}

.modern-progress-bar.ringing {
	width: 85%;
	background: linear-gradient(90deg, #17a2b8, #20c0db);
	animation: progress-pulse 1.5s infinite;
}

.modal-content .modal-body .modern-timer {
	font-size: 40px !important;
	font-weight: 400 !important;
	color: #28a745 !important;
	margin: 16px 0 20px 0 !important;
	font-family: 'Segoe UI', 'Roboto', monospace !important;
	background: rgba(40,167,69,0.1) !important;
	padding: 12px 24px !important;
	border-radius: 12px !important;
	display: inline-block !important;
	letter-spacing: 2px !important;
	box-shadow: 0 2px 8px rgba(40,167,69,0.1) !important;
}

.modern-duration {
	font-size: 18px;
	color: #6c757d;
	margin: 16px 0;
}

.modern-error {
	color: #dc3545;
	font-size: 16px;
	margin: 12px 0;
}

.phone-footer {
	border-top: 1px solid #eee;
	padding: 15px 30px;
	text-align: center;
}

/* Enhanced modern End Call button */
.modern-end-button {
	width: 100% !important;
	height: 64px !important;
	background: linear-gradient(135deg, #dc3545, #c82333) !important;
	color: white !important;
	border: none !important;
	border-radius: 16px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	margin-top: 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	box-shadow: 0 4px 16px rgba(220,53,69,0.4) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
}

.modern-end-button:hover {
	background: linear-gradient(135deg, #c82333, #a71d2a) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(220,53,69,0.5) !important;
}

@keyframes progress-pulse {
	0% { opacity: 1; }
	50% { opacity: 0.7; }
	100% { opacity: 1; }
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes ring-animation {
	0% { 
		transform: rotate(-15deg) scale(1); 
		box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
	}
	25% { 
		transform: rotate(15deg) scale(1.02); 
		box-shadow: 0 0 0 5px rgba(23, 162, 184, 0.3);
	}
	50% { 
		transform: rotate(-10deg) scale(1); 
		box-shadow: 0 0 0 10px rgba(23, 162, 184, 0.1);
	}
	75% { 
		transform: rotate(10deg) scale(1.02); 
		box-shadow: 0 0 0 5px rgba(23, 162, 184, 0.3);
	}
	100% { 
		transform: rotate(-15deg) scale(1); 
		box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
	}
}

@keyframes connected-glow {
	0% { 
		box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
	}
	50% { 
		box-shadow: 0 0 20px 5px rgba(40, 167, 69, 0.5);
	}
	100% { 
		box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
	}
}

/* Apply animations to icons only */
.modern-icon.pulse {
	animation: pulse 2s infinite;
}

.modern-icon.ring-animation {
	animation: ring-animation 0.8s infinite;
}

.modern-icon.connected-glow {
	animation: connected-glow 2s infinite;
}

.debug-console {
	border-top: 1px solid #eee;
	padding-top: 15px;
}
</style>