@extends('layouts.app')

@section('title', 'Telegram API Test')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-paper-plane me-2"></i>
                        Telegram API Test Panel
                    </h3>
                </div>
                <div class="card-body">
                    <!-- Configuration Status -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <h5><i class="fas fa-info-circle me-2"></i>Configuration Status</h5>
                                <div id="config-status">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    Loading configuration...
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Test Connection -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-wifi me-2"></i>Test Connection</h5>
                                </div>
                                <div class="card-body">
                                    <button class="btn btn-primary" onclick="testConnection()">
                                        <i class="fas fa-play me-2"></i>Test Telegram Connection
                                    </button>
                                    <div id="connection-result" class="mt-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Send Simple Message -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-comment me-2"></i>Send Simple Message</h5>
                                </div>
                                <div class="card-body">
                                    <form id="simple-message-form">
                                        <div class="mb-3">
                                            <label for="simple-message" class="form-label">Message</label>
                                            <textarea class="form-control" id="simple-message" rows="3" 
                                                placeholder="Enter your message here...">Hello! This is a test message from Laravel application.</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="simple-chat-id" class="form-label">Chat ID (Optional)</label>
                                            <input type="text" class="form-control" id="simple-chat-id" 
                                                placeholder="Leave empty to use default chat ID">
                                        </div>
                                        <div class="mb-3">
                                            <label for="simple-parse-mode" class="form-label">Parse Mode</label>
                                            <select class="form-control" id="simple-parse-mode">
                                                <option value="HTML">HTML</option>
                                                <option value="Markdown">Markdown</option>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-success">
                                            <i class="fas fa-paper-plane me-2"></i>Send Message
                                        </button>
                                    </form>
                                    <div id="simple-message-result" class="mt-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Send Formatted Notification -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-bell me-2"></i>Send Formatted Notification</h5>
                                </div>
                                <div class="card-body">
                                    <form id="notification-form">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="notification-title" class="form-label">Title</label>
                                                    <input type="text" class="form-control" id="notification-title" 
                                                        placeholder="Notification title" value="Test Notification">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="notification-type" class="form-label">Type</label>
                                                    <select class="form-control" id="notification-type">
                                                        <option value="info">Info</option>
                                                        <option value="success">Success</option>
                                                        <option value="warning">Warning</option>
                                                        <option value="error">Error</option>
                                                        <option value="alert">Alert</option>
                                                        <option value="payment">Payment</option>
                                                        <option value="bill">Bill</option>
                                                        <option value="request">Request</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="notification-message" class="form-label">Message</label>
                                            <textarea class="form-control" id="notification-message" rows="3" 
                                                placeholder="Enter notification message...">This is a test notification with formatting.</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="notification-chat-id" class="form-label">Chat ID (Optional)</label>
                                            <input type="text" class="form-control" id="notification-chat-id" 
                                                placeholder="Leave empty to use default chat ID">
                                        </div>
                                        <button type="submit" class="btn btn-warning">
                                            <i class="fas fa-bell me-2"></i>Send Notification
                                        </button>
                                    </form>
                                    <div id="notification-result" class="mt-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Send Client Request Notification -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-user-plus me-2"></i>Send Client Request Notification</h5>
                                </div>
                                <div class="card-body">
                                    <form id="client-request-form">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="client-name" class="form-label">Client Name</label>
                                                    <input type="text" class="form-control" id="client-name" 
                                                        placeholder="Client name" value="John Doe">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="request-type" class="form-label">Request Type</label>
                                                    <input type="text" class="form-control" id="request-type" 
                                                        placeholder="Request type" value="New Connection">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="request-description" class="form-label">Description</label>
                                            <textarea class="form-control" id="request-description" rows="2" 
                                                placeholder="Request description...">Client requests new internet connection with 50 Mbps package</textarea>
                                        </div>
                                        <button type="submit" class="btn btn-info">
                                            <i class="fas fa-user-plus me-2"></i>Send Client Request
                                        </button>
                                    </form>
                                    <div id="client-request-result" class="mt-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Send Payment Notification -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-money-bill-wave me-2"></i>Send Payment Notification</h5>
                                </div>
                                <div class="card-body">
                                    <form id="payment-form">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="payment-client-name" class="form-label">Client Name</label>
                                                    <input type="text" class="form-control" id="payment-client-name" 
                                                        placeholder="Client name" value="Jane Smith">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="payment-amount" class="form-label">Amount</label>
                                                    <input type="number" class="form-control" id="payment-amount" 
                                                        placeholder="Amount" value="2500" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="payment-method" class="form-label">Payment Method</label>
                                                    <input type="text" class="form-control" id="payment-method" 
                                                        placeholder="Payment method" value="Bank Transfer">
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-success">
                                            <i class="fas fa-money-bill-wave me-2"></i>Send Payment Notification
                                        </button>
                                    </form>
                                    <div id="payment-result" class="mt-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Send System Alert -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-exclamation-triangle me-2"></i>Send System Alert</h5>
                                </div>
                                <div class="card-body">
                                    <form id="system-alert-form">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="alert-type" class="form-label">Alert Type</label>
                                                    <input type="text" class="form-control" id="alert-type" 
                                                        placeholder="Alert type" value="Database Backup">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="alert-message" class="form-label">Message</label>
                                                    <input type="text" class="form-control" id="alert-message" 
                                                        placeholder="Alert message" value="Daily backup completed successfully">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="additional-data" class="form-label">Additional Data (JSON)</label>
                                            <textarea class="form-control" id="additional-data" rows="2" 
                                                placeholder='{"Backup Size": "2.5 GB", "Duration": "15 minutes", "Status": "Success"}'>{"Backup Size": "2.5 GB", "Duration": "15 minutes", "Status": "Success"}</textarea>
                                        </div>
                                        <button type="submit" class="btn btn-danger">
                                            <i class="fas fa-exclamation-triangle me-2"></i>Send System Alert
                                        </button>
                                    </form>
                                    <div id="system-alert-result" class="mt-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Load configuration status on page load
document.addEventListener('DOMContentLoaded', function() {
    loadConfigStatus();
});

// Load configuration status
function loadConfigStatus() {
    fetch('/telegram/config-status')
        .then(response => response.json())
        .then(data => {
            const statusDiv = document.getElementById('config-status');
            if (data.success) {
                const config = data.data;
                statusDiv.innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Bot Token:</strong> ${config.bot_token_configured ? 
                                '<span class="text-success">✓ Configured</span>' : 
                                '<span class="text-danger">✗ Not Configured</span>'}
                        </div>
                        <div class="col-md-6">
                            <strong>Chat ID:</strong> ${config.chat_id_configured ? 
                                '<span class="text-success">✓ Configured</span>' : 
                                '<span class="text-danger">✗ Not Configured</span>'}
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <strong>API URL:</strong> ${config.api_url}
                        </div>
                        <div class="col-md-6">
                            <strong>Chat ID:</strong> ${config.chat_id || 'Not set'}
                        </div>
                    </div>
                `;
            } else {
                statusDiv.innerHTML = `<div class="text-danger">Error loading configuration: ${data.message}</div>`;
            }
        })
        .catch(error => {
            document.getElementById('config-status').innerHTML = 
                `<div class="text-danger">Error: ${error.message}</div>`;
        });
}

// Test connection
function testConnection() {
    const resultDiv = document.getElementById('connection-result');
    resultDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Testing connection...';
    
    fetch('/telegram/test-connection')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        ${data.message}
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-times-circle me-2"></i>
                        ${data.message}
                    </div>
                `;
            }
        })
        .catch(error => {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-times-circle me-2"></i>
                    Error: ${error.message}
                </div>
            `;
        });
}

// Send simple message
document.getElementById('simple-message-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const resultDiv = document.getElementById('simple-message-result');
    resultDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Sending message...';
    
    const data = {
        message: document.getElementById('simple-message').value,
        chat_id: document.getElementById('simple-chat-id').value || null,
        parse_mode: document.getElementById('simple-parse-mode').value
    };
    
    fetch('/telegram/send-message', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-times-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                Error: ${error.message}
            </div>
        `;
    });
});

// Send notification
document.getElementById('notification-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const resultDiv = document.getElementById('notification-result');
    resultDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Sending notification...';
    
    const data = {
        title: document.getElementById('notification-title').value,
        message: document.getElementById('notification-message').value,
        type: document.getElementById('notification-type').value,
        chat_id: document.getElementById('notification-chat-id').value || null
    };
    
    fetch('/telegram/send-notification', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-times-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                Error: ${error.message}
            </div>
        `;
    });
});

// Send client request notification
document.getElementById('client-request-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const resultDiv = document.getElementById('client-request-result');
    resultDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Sending client request notification...';
    
    const data = {
        client_name: document.getElementById('client-name').value,
        request_type: document.getElementById('request-type').value,
        description: document.getElementById('request-description').value
    };
    
    fetch('/telegram/send-client-request', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-times-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                Error: ${error.message}
            </div>
        `;
    });
});

// Send payment notification
document.getElementById('payment-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const resultDiv = document.getElementById('payment-result');
    resultDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Sending payment notification...';
    
    const data = {
        client_name: document.getElementById('payment-client-name').value,
        amount: parseFloat(document.getElementById('payment-amount').value),
        payment_method: document.getElementById('payment-method').value
    };
    
    fetch('/telegram/send-payment', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-times-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                Error: ${error.message}
            </div>
        `;
    });
});

// Send system alert
document.getElementById('system-alert-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const resultDiv = document.getElementById('system-alert-result');
    resultDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Sending system alert...';
    
    let additionalData = {};
    try {
        const additionalDataText = document.getElementById('additional-data').value;
        if (additionalDataText.trim()) {
            additionalData = JSON.parse(additionalDataText);
        }
    } catch (e) {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                Invalid JSON in Additional Data field
            </div>
        `;
        return;
    }
    
    const data = {
        alert_type: document.getElementById('alert-type').value,
        message: document.getElementById('alert-message').value,
        additional_data: additionalData
    };
    
    fetch('/telegram/send-system-alert', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-times-circle me-2"></i>
                    ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                Error: ${error.message}
            </div>
        `;
    });
});
</script>
@endsection