    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>GSMPay - API Key Generator</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body { background: #f8f9fa; padding-top: 50px; }
            .key-generator { max-width: 600px; margin: 0 auto; }
            .key-box { background: #fff; border-radius: 10px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
            .key-display { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; margin: 10px 0; font-family: monospace; word-break: break-all; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="key-generator">
                <div class="text-center mb-4">
                    <h2>GSMPay API Key Generator</h2>
                    <p class="text-muted">Generate secure API keys for your merchant account</p>
                </div>
                
                <div class="key-box">
                    <div class="mb-4">
                        <h5>Generate New Keys</h5>
                        <p>Click the button below to generate a new set of API keys.</p>
                        <button id="generateBtn" class="btn btn-primary">Generate API Keys</button>
                    </div>
                    
                    <div id="resultArea" style="display: none;">
                        <div class="alert alert-success">
                            <h5>✅ Keys Generated Successfully!</h5>
                            
                            <div class="mb-3">
                                <label class="form-label">Public Key:</label>
                                <div class="key-display" id="publicKeyDisplay"></div>
                                <small class="text-muted">Use this key to identify your merchant account</small>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Secret Key:</label>
                                <div class="key-display" id="secretKeyDisplay"></div>
                                <small class="text-muted text-danger">
                                    <strong>⚠️ IMPORTANT:</strong> Copy and store this key securely. It will not be shown again!
                                </small>
                            </div>
                            
                            <div class="alert alert-warning">
                                <h6>Usage Instructions:</h6>
                                <ol class="mb-0">
                                    <li>Use Public Key for authentication</li>
                                    <li>Use Secret Key for signature generation</li>
                                    <li>Store keys in a secure location</li>
                                    <li>Never share your Secret Key</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h5>Validate Existing Keys</h5>
                        <form id="validateForm">
                            <div class="mb-3">
                                <label class="form-label">Public Key</label>
                                <input type="text" name="public_key" class="form-control" placeholder="Enter your Public Key">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Secret Key</label>
                                <input type="password" name="secret_key" class="form-control" placeholder="Enter your Secret Key">
                            </div>
                            <button type="submit" class="btn btn-outline-primary">Validate Keys</button>
                        </form>
                        <div id="validateResult" class="mt-3" style="display: none;"></div>
                    </div>
                </div>
                
                <div class="mt-4 text-center">
                    <a href="../order_form.php" class="btn btn-link">Go to Order Form</a>
                    <a href="../admin/login.php" class="btn btn-link">Admin Panel</a>
                </div>
            </div>
        </div>
        
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                // Generate Keys
                $('#generateBtn').click(function() {
                    $.ajax({
                        url: 'key_generator.php',
                        method: 'POST',
                        data: { action: 'generate' },
                        success: function(response) {
                            const data = JSON.parse(response);
                            if (data.status === 'success') {
                                $('#publicKeyDisplay').text(data.data.public_key);
                                $('#secretKeyDisplay').text(data.data.secret_key);
                                $('#resultArea').show();
                                
                                // Copy to clipboard functionality
                                $('#publicKeyDisplay, #secretKeyDisplay').click(function() {
                                    const text = $(this).text();
                                    navigator.clipboard.writeText(text).then(() => {
                                        alert('Copied to clipboard!');
                                    });
                                });
                            }
                        }
                    });
                });
                
                // Validate Keys
                $('#validateForm').submit(function(e) {
                    e.preventDefault();
                    const formData = $(this).serialize() + '&action=validate';
                    
                    $.ajax({
                        url: 'key_generator.php',
                        method: 'POST',
                        data: formData,
                        success: function(response) {
                            const data = JSON.parse(response);
                            if (data.status === 'success') {
                                $('#validateResult').html(
                                    '<div class="alert alert-success">✅ ' + data.message + '</div>'
                                ).show();
                            } else {
                                $('#validateResult').html(
                                    '<div class="alert alert-danger">❌ ' + data.message + '</div>'
                                ).show();
                            }
                        }
                    });
                });
            });
        </script>
    </body>
    </html>
    