@section('header')
	@include('common.header')
@stop

@section('content')
	<div class="row">
		<div class="col-sm-8">
			<div class="widget widget-classic">
				<div class="widget-content">

					<!-- Page title -->
					<p class="lead">
						3CX API Keys Management
					</p>

					@if (Session::has('message'))
						<div class="alert alert-success">
							<i class="fa fa-check-circle"></i> {!! Session::get('message') !!}
						</div>
					@endif

					@if (Session::has('error'))
						<div class="alert alert-danger">
							<i class="fa fa-exclamation-circle"></i> {!! Session::get('error') !!}
						</div>
					@endif

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title"><i class="fa fa-phone"></i> 3CX Search API Key</h3>
						</div>
						<div class="panel-body">
							@if($threecx_api_key)
								<div class="form-group">
									<label>Current API Key:</label>
									<div class="input-group">
										<input type="text" class="form-control" value="{{ $threecx_api_key }}" readonly>
										<span class="input-group-btn">
											<button class="btn btn-default" type="button" onclick="copyToClipboard('{{ $threecx_api_key }}')">
												<i class="fa fa-copy"></i> Copy
											</button>
										</span>
									</div>
								</div>
								<div class="form-group">
									<form method="POST" action="{{ route('admin.settings.api-keys.regenerate') }}" style="display: inline;">
										@csrf
										<button type="submit" class="btn btn-warning" onclick="return confirm('Are you sure? This will invalidate the current API key!')" style="margin-right: 10px;">
											<i class="fa fa-refresh"></i> Regenerate API Key
										</button>
									</form>
									<a href="{{ route('admin.settings.api-keys.download-xml') }}" class="btn btn-success">
										<i class="fa fa-download"></i> Download 3CX XML Config
									</a>
								</div>
							@else
								<p class="text-muted">No API key generated yet.</p>
								<form method="POST" action="{{ route('admin.settings.api-keys.generate') }}">
									@csrf
									<button type="submit" class="btn btn-primary">
										<i class="fa fa-key"></i> Generate API Key
									</button>
								</form>
							@endif

							<hr>
							<div class="well well-sm">
								<h4><i class="fa fa-info-circle"></i> Usage Instructions</h4>
								<p><strong>Search Endpoint:</strong></p>
								<code>GET /search.php?number=PHONENUMBER&api_key=YOUR_API_KEY</code>
								
								<p class="mt-2"><strong>Example:</strong></p>
								<code>{{ url('/search.php?number=07776668338&api_key=' . ($threecx_api_key ?: 'YOUR_API_KEY')) }}</code>
								
								<p class="mt-2"><strong>Response Format:</strong></p>
								<pre>{
  "success": true,
  "id": 20854,
  "name": "John Doe",
  "company": "Example Corp",
  "phone": "07776668338",
  "email": "john@example.com",
  "match_type": "exact",
  "source": "customer"
}</pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="widget widget-classic">
				<div class="widget-content">
					<h4><i class="fa fa-shield"></i> Security Information</h4>
					<p>The API key is required for all search requests to the 3CX integration endpoint.</p>
					
					<h5><i class="fa fa-exclamation-triangle text-warning"></i> Important Notes:</h5>
					<ul class="list-unstyled">
						<li><i class="fa fa-check text-success"></i> Keep your API key secure</li>
						<li><i class="fa fa-check text-success"></i> Only share with trusted 3CX systems</li>
						<li><i class="fa fa-check text-success"></i> Regenerate if compromised</li>
						<li><i class="fa fa-check text-success"></i> API key is required for all requests</li>
					</ul>

					<h5><i class="fa fa-cogs"></i> Supported Features:</h5>
					<ul class="list-unstyled">
						<li><i class="fa fa-search text-primary"></i> Phone number lookup</li>
						<li><i class="fa fa-users text-primary"></i> Customer & client search</li>
						<li><i class="fa fa-phone text-primary"></i> Exact & partial matching</li>
						<li><i class="fa fa-database text-primary"></i> Multiple phone field support</li>
						<li><i class="fa fa-download text-success"></i> 3CX XML configuration download</li>
					</ul>
					
					<h5><i class="fa fa-info-circle"></i> 3CX Setup:</h5>
					<ol class="small">
						<li>Generate API key above</li>
						<li>Download 3CX XML configuration</li>
						<li>Import XML file in 3CX Management Console</li>
						<li>Configure CRM integration settings</li>
					</ol>
				</div>
			</div>
		</div>
	</div>

	<script>
	function copyToClipboard(text) {
		navigator.clipboard.writeText(text).then(function() {
			// Show success message
			var alert = $('<div class="alert alert-info alert-dismissible fade in" role="alert">' +
				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
				'<span aria-hidden="true">&times;</span></button>' +
				'<i class="fa fa-check"></i> API key copied to clipboard!' +
				'</div>');
			
			$('.widget-content').prepend(alert);
			
			setTimeout(function() {
				alert.fadeOut();
			}, 3000);
		}, function(err) {
			console.error('Could not copy text: ', err);
		});
	}
	</script>
@stop