@extends('layouts.master')

@section('title', 'API Credentials - ' . $client->client_name)

@section('main_content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>API Credentials for {{ $client->client_name }}</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>API Key</h5>
                            <div class="input-group">
                                <input type="text" class="form-control" id="apiKey" value="{{ $client->api_key }}" readonly>
                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('apiKey')">
                                    <i class="fas fa-copy"></i> Copy
                                </button>
                            </div>
                            <small class="text-muted">Keep this key secure and do not share it publicly.</small>
                        </div>
                        
                        <div class="col-md-6">
                            <h5>Actions</h5>
                            <button class="btn btn-warning" onclick="regenerateApiKey()">
                                <i class="fas fa-key"></i> Regenerate API Key
                            </button>
                            <button class="btn btn-info" onclick="showApiUsage()">
                                <i class="fas fa-chart-bar"></i> View Usage Stats
                            </button>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-12">
                            <h5>API Endpoints</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Endpoint</th>
                                            <th>Method</th>
                                            <th>Description</th>
                                            <th>Rate Limit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>/api/v1/comprehensive</code></td>
                                            <td>GET</td>
                                            <td>Get all available insurance data</td>
                                            <td>{{ $client->visitor_api_limit ?: 1000 }}/hour</td>
                                        </tr>
                                        <tr>
                                            <td><code>/api/v1/visitor</code></td>
                                            <td>GET</td>
                                            <td>Get visitor insurance data only</td>
                                            <td>{{ $client->visitor_api_limit ?: 1000 }}/hour</td>
                                        </tr>
                                        <tr>
                                            <td><code>/api/v1/travel</code></td>
                                            <td>GET</td>
                                            <td>Get travel insurance data only</td>
                                            <td>{{ $client->travel_api_limit ?: 1000 }}/hour</td>
                                        </tr>
                                        <tr>
                                            <td><code>/api/v1/provider/{name}</code></td>
                                            <td>GET</td>
                                            <td>Get specific provider data</td>
                                            <td>{{ $client->visitor_api_limit ?: 1000 }}/hour</td>
                                        </tr>
                                        <tr>
                                            <td><code>/api/v1/usage</code></td>
                                            <td>GET</td>
                                            <td>Get API usage statistics</td>
                                            <td>100/hour</td>
                                        </tr>
                                        <tr>
                                            <td><code>/api/v1/batch</code></td>
                                            <td>POST</td>
                                            <td>Batch multiple API requests</td>
                                            <td>{{ $client->visitor_api_limit ?: 1000 }}/hour</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <h5>Authentication</h5>
                            <p>Include your API key in the request headers:</p>
                            <pre><code>X-API-Key: {{ $client->api_key }}</code></pre>
                            <p>Or using Authorization header:</p>
                            <pre><code>Authorization: Bearer {{ $client->api_key }}</code></pre>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <h5>Client Access</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Visitor Providers</h6>
                                    <ul>
                                        @foreach($client->visitor_providers ?? [] as $provider)
                                            <li>{{ $provider }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6>Travel Providers</h6>
                                    <ul>
                                        @foreach($client->travel_providers ?? [] as $provider)
                                            <li>{{ $provider }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    document.execCommand('copy');
    
    // Show success message
    const button = element.nextElementSibling;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check"></i> Copied!';
    setTimeout(() => {
        button.innerHTML = originalText;
    }, 2000);
}

function regenerateApiKey() {
    if (confirm('Are you sure you want to regenerate the API key? This will invalidate the current key.')) {
        fetch(`{{ route('admin.client.regenerate-api-key', $client->id) }}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('apiKey').value = data.new_api_key;
                alert('API key regenerated successfully!');
            } else {
                alert('Error regenerating API key');
            }
        });
    }
}

function showApiUsage() {
    fetch(`{{ route('admin.client.api-usage', $client->id) }}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const usage = data.data;
                alert(`API Usage Statistics:\n\nVisitor Requests: ${usage.visitor_requests}/${usage.visitor_limit}\nTravel Requests: ${usage.travel_requests}/${usage.travel_limit}`);
            }
        });
}
</script>
@endsection