@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#">Settings</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Telegram API</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-0">
                        <i class="fas fa-paper-plane me-2"></i>
                        Telegram API Configuration
                    </h2>
                    <p class="text-muted mb-0">Configure your Telegram bot for notifications</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="#" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Settings
                    </a>
                    <button class="btn btn-warning" onclick="testBot()">
                        <i class="fas fa-paper-plane me-2"></i>Test Bot
                    </button>
                    <button class="btn btn-primary" onclick="saveSettings()">
                        <i class="fas fa-check me-2"></i>Save Settings
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>
                        Telegram Bot Configuration
                    </h5>
                </div>
                <div class="card-body">
                    <form id="telegram-settings-form">
                        <!-- Bot Token -->
                        <div class="mb-4">
                            <label for="telegram_bot_token" class="form-label">
                                <i class="fas fa-key me-2"></i>Bot Token
                            </label>
                            <input type="password" class="form-control" id="telegram_bot_token" 
                                name="telegram_bot_token" placeholder="telegram_bot_token"
                                value="{{ $settings['telegram_bot_token'] }}">
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                Get your bot token from @BotFather on Telegram
                            </div>
                        </div>

                        <!-- Telegram Groups -->
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fas fa-users me-2"></i>Telegram Groups
                            </label>
                            <div class="row">
                                @foreach($telegramGroups as $group)
                                <div class="col-md-6 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="me-2" style="font-size: 1.2em;">{{ $group->icon }}</span>
                                                <h6 class="mb-0" style="color: {{ $group->color }};">{{ $group->name }}</h6>
                                                @if($group->is_default)
                                                    <span class="badge bg-primary ms-2">Default</span>
                                                @endif
                                            </div>
                                            <p class="text-muted small mb-2">{{ $group->description }}</p>
                                            
                                            <div class="mb-2">
                                                <label for="chat_id_{{ $group->id }}" class="form-label small">Chat ID</label>
                                                <input type="text" class="form-control form-control-sm" 
                                                    id="chat_id_{{ $group->id }}" 
                                                    name="telegram_groups[{{ $group->id }}][chat_id]" 
                                                    placeholder="Enter Chat ID"
                                                    value="{{ $group->chat_id }}">
                                            </div>
                                            
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" 
                                                    id="active_{{ $group->id }}" 
                                                    name="telegram_groups[{{ $group->id }}][is_active]"
                                                    {{ $group->is_active ? 'checked' : '' }}>
                                                <label class="form-check-label small" for="active_{{ $group->id }}">
                                                    Active
                                                </label>
                                            </div>
                                            
                                            <div class="mt-2">
                                                <label class="form-label small">Notification Types</label>
                                                <div class="row">
                                                    @php
                                                        $notificationTypes = [
                                                            'client_request' => 'Client Requests',
                                                            'payment_received' => 'Payments',
                                                            'system_alert' => 'System Alerts',
                                                            'support_ticket' => 'Support Tickets',
                                                            'bill_generated' => 'Bill Generation',
                                                            'revenue_report' => 'Revenue Reports',
                                                            'admin_action' => 'Admin Actions',
                                                            'marketing_campaign' => 'Marketing',
                                                        ];
                                                    @endphp
                                                    @foreach($notificationTypes as $type => $label)
                                                    <div class="col-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" 
                                                                id="type_{{ $group->id }}_{{ $type }}" 
                                                                name="telegram_groups[{{ $group->id }}][notification_types][]"
                                                                value="{{ $type }}"
                                                                {{ in_array($type, $group->notification_types ?? []) ? 'checked' : '' }}>
                                                            <label class="form-check-label small" for="type_{{ $group->id }}_{{ $type }}">
                                                                {{ $label }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                Configure different Telegram groups for different types of notifications
                            </div>
                        </div>

                        <!-- Enable Notifications -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="telegram_enabled" 
                                    name="telegram_enabled" {{ $settings['telegram_enabled'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="telegram_enabled">
                                    <i class="fas fa-bell me-2"></i>Enable Telegram notifications
                                </label>
                            </div>
                        </div>

                        <!-- Webhook URL -->
                        <div class="mb-4">
                            <label for="telegram_webhook_url" class="form-label">
                                <i class="fas fa-link me-2"></i>Webhook URL
                            </label>
                            <div class="input-group">
                                <input type="url" class="form-control" id="telegram_webhook_url" 
                                    name="telegram_webhook_url" placeholder="https://netx.net.bd/telegram/webhook"
                                    value="{{ $settings['telegram_webhook_url'] ?: 'https://netx.net.bd/telegram/webhook' }}">
                                <button class="btn btn-outline-secondary" type="button" onclick="copyWebhookUrl()">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                Use this URL to set up webhook in your Telegram bot (optional)
                            </div>
                        </div>

                        <!-- Advanced Settings -->
                        <div class="mb-4">
                            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" 
                                data-bs-target="#advanced-settings" aria-expanded="false">
                                <i class="fas fa-cog me-2"></i>Show Advanced Options
                            </button>
                            
                            <div class="collapse mt-3" id="advanced-settings">
                                <div class="card card-body">
                                    <h6><i class="fas fa-sliders-h me-2"></i>Advanced Settings</h6>
                                    
                                    <!-- Parse Mode -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="parse_mode" class="form-label">Parse Mode</label>
                                            <select class="form-control" id="parse_mode" name="parse_mode">
                                                <option value="HTML">HTML</option>
                                                <option value="Markdown">Markdown</option>
                                                <option value="None">None</option>
                                            </select>
                                            <div class="form-text">Message formatting style</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="api_timeout" class="form-label">API Timeout (seconds)</label>
                                            <input type="number" class="form-control" id="api_timeout" name="api_timeout" 
                                                min="5" max="120" value="30" placeholder="30">
                                            <div class="form-text">API request timeout in seconds (5-120)</div>
                                        </div>
                                    </div>

                                    <!-- Message Settings -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="disable_web_page_preview" class="form-label">Disable Web Page Preview</label>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="disable_web_page_preview" 
                                                    name="disable_web_page_preview" checked>
                                                <label class="form-check-label" for="disable_web_page_preview">
                                                    Disable preview
                                                </label>
                                            </div>
                                            <div class="form-text">Disable automatic link previews</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="disable_notification" class="form-label">Disable Notification Sound</label>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="disable_notification" 
                                                    name="disable_notification">
                                                <label class="form-check-label" for="disable_notification">
                                                    Silent notifications
                                                </label>
                                            </div>
                                            <div class="form-text">Send messages silently</div>
                                        </div>
                                    </div>

                                    <!-- Retry Settings -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="max_retries" class="form-label">Max Retries</label>
                                            <input type="number" class="form-control" id="max_retries" name="max_retries" 
                                                min="1" max="5" value="3" placeholder="3">
                                            <div class="form-text">Maximum retry attempts for failed messages</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="retry_delay" class="form-label">Retry Delay (seconds)</label>
                                            <input type="number" class="form-control" id="retry_delay" name="retry_delay" 
                                                min="1" max="60" value="5" placeholder="5">
                                            <div class="form-text">Delay between retry attempts</div>
                                        </div>
                                    </div>

                                    <!-- Message Limits -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="max_message_length" class="form-label">Max Message Length</label>
                                            <input type="number" class="form-control" id="max_message_length" name="max_message_length" 
                                                min="100" max="4096" value="4000" placeholder="4000">
                                            <div class="form-text">Maximum characters per message</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="rate_limit" class="form-label">Rate Limit (messages/minute)</label>
                                            <input type="number" class="form-control" id="rate_limit" name="rate_limit" 
                                                min="1" max="30" value="20" placeholder="20">
                                            <div class="form-text">Maximum messages per minute</div>
                                        </div>
                                    </div>

                                    <!-- Logging Settings -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="enable_logging" class="form-label">Enable Logging</label>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="enable_logging" 
                                                    name="enable_logging" checked>
                                                <label class="form-check-label" for="enable_logging">
                                                    Log all messages
                                                </label>
                                            </div>
                                            <div class="form-text">Log sent messages for debugging</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="log_level" class="form-label">Log Level</label>
                                            <select class="form-control" id="log_level" name="log_level">
                                                <option value="info">Info</option>
                                                <option value="warning">Warning</option>
                                                <option value="error">Error</option>
                                                <option value="debug">Debug</option>
                                            </select>
                                            <div class="form-text">Minimum log level to record</div>
                                        </div>
                                    </div>

                                    <!-- Security Settings -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="allowed_chat_ids" class="form-label">Allowed Chat IDs</label>
                                            <textarea class="form-control" id="allowed_chat_ids" name="allowed_chat_ids" 
                                                rows="2" placeholder="699707581,123456789"></textarea>
                                            <div class="form-text">Comma-separated list of allowed chat IDs</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="blocked_keywords" class="form-label">Blocked Keywords</label>
                                            <textarea class="form-control" id="blocked_keywords" name="blocked_keywords" 
                                                rows="2" placeholder="spam,advertisement"></textarea>
                                            <div class="form-text">Keywords to block in messages</div>
                                        </div>
                                    </div>

                                    <!-- Custom Headers -->
                                    <div class="row mb-3">
                                        <div class="col-12">
                                            <label for="custom_headers" class="form-label">Custom Headers (JSON)</label>
                                            <textarea class="form-control" id="custom_headers" name="custom_headers" 
                                                rows="3" placeholder='{"User-Agent": "MyBot/1.0", "X-Custom": "value"}'></textarea>
                                            <div class="form-text">Custom HTTP headers for API requests</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Configuration Status -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Configuration Status
                    </h6>
                </div>
                <div class="card-body">
                    <div id="config-status">
                        <div class="d-flex align-items-center mb-2">
                            <span class="me-2">Bot Token:</span>
                            <span id="bot-token-status" class="badge bg-secondary">Not Set</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <span class="me-2">Chat ID:</span>
                            <span id="chat-id-status" class="badge bg-secondary">Not Set</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <span class="me-2">Status:</span>
                            <span id="connection-status" class="badge bg-secondary">Unknown</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary btn-sm" onclick="testConnection()">
                            <i class="fas fa-wifi me-2"></i>Test Connection
                        </button>
                        <button class="btn btn-outline-success btn-sm" onclick="sendTestMessage()">
                            <i class="fas fa-paper-plane me-2"></i>Send Test Message
                        </button>
                        <button class="btn btn-outline-warning btn-sm" onclick="validateChatId()">
                            <i class="fas fa-check-circle me-2"></i>Validate Chat ID
                        </button>
                        <button class="btn btn-outline-info btn-sm" onclick="getWebhookUrl()">
                            <i class="fas fa-link me-2"></i>Get Webhook URL
                        </button>
                    </div>
                </div>
            </div>

            <!-- Help -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-question-circle me-2"></i>Help & Instructions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="accordion" id="helpAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#help1">
                                    How to get Bot Token?
                                </button>
                            </h2>
                            <div id="help1" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <ol>
                                        <li>Open Telegram and search for @BotFather</li>
                                        <li>Start a conversation and send /newbot</li>
                                        <li>Follow the instructions to create your bot</li>
                                        <li>Copy the bot token provided</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#help2">
                                    How to get Chat ID?
                                </button>
                            </h2>
                            <div id="help2" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <ol>
                                        <li>Search for @userinfobot on Telegram</li>
                                        <li>Start a conversation and send any message</li>
                                        <li>The bot will reply with your Chat ID</li>
                                        <li>Copy the Chat ID number</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-labelledby="resultModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resultModalLabel">Result</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="resultModalBody">
                <!-- Result content will be inserted here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
// Load configuration status on page load
document.addEventListener('DOMContentLoaded', function() {
    loadConfigStatus();
    
    // Add event listeners for real-time status updates
    document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
        input.addEventListener('change', updateChatIdStatus);
        input.addEventListener('input', updateChatIdStatus);
    });
});

// Load configuration status
function loadConfigStatus() {
    fetch('/settings/telegram/get')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const settings = data.data;
                
                // Update status badges
                document.getElementById('bot-token-status').textContent = 
                    settings.telegram_bot_token_masked ? 'Configured' : 'Not Set';
                document.getElementById('bot-token-status').className = 
                    settings.telegram_bot_token_masked ? 'badge bg-success' : 'badge bg-danger';
                
                // Check if any group has Chat ID configured
                let hasActiveChatId = false;
                document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
                    if (input.name.includes('[chat_id]') && input.value.trim() !== '') {
                        const groupId = input.name.match(/telegram_groups\[(\d+)\]/)[1];
                        const activeCheckbox = document.querySelector(`[name="telegram_groups[${groupId}][is_active]"]`);
                        if (activeCheckbox && activeCheckbox.checked) {
                            hasActiveChatId = true;
                        }
                    }
                });
                
                document.getElementById('chat-id-status').textContent = 
                    hasActiveChatId ? 'Configured' : 'Not Set';
                document.getElementById('chat-id-status').className = 
                    hasActiveChatId ? 'badge bg-success' : 'badge bg-danger';
                
                // Update form values
                if (settings.telegram_webhook_url) {
                    document.getElementById('telegram_webhook_url').value = settings.telegram_webhook_url;
                }
                document.getElementById('telegram_enabled').checked = settings.telegram_enabled;
            }
        })
        .catch(error => {
            console.error('Error loading config status:', error);
        });
}

// Update Chat ID status in real-time
function updateChatIdStatus() {
    let hasActiveChatId = false;
    
    document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
        if (input.name.includes('[chat_id]') && input.value.trim() !== '') {
            const groupId = input.name.match(/telegram_groups\[(\d+)\]/)[1];
            const activeCheckbox = document.querySelector(`[name="telegram_groups[${groupId}][is_active]"]`);
            if (activeCheckbox && activeCheckbox.checked) {
                hasActiveChatId = true;
            }
        }
    });
    
    document.getElementById('chat-id-status').textContent = 
        hasActiveChatId ? 'Configured' : 'Not Set';
    document.getElementById('chat-id-status').className = 
        hasActiveChatId ? 'badge bg-success' : 'badge bg-danger';
}

// Save settings
function saveSettings() {
    const form = document.getElementById('telegram-settings-form');
    const formData = new FormData(form);
    
    // Collect telegram groups data
    const telegramGroups = {};
    document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
        const match = input.name.match(/telegram_groups\[(\d+)\]\[(\w+)\]/);
        if (match) {
            const groupId = match[1];
            const field = match[2];
            
            if (!telegramGroups[groupId]) {
                telegramGroups[groupId] = {};
            }
            
            if (field === 'notification_types') {
                if (!telegramGroups[groupId][field]) {
                    telegramGroups[groupId][field] = [];
                }
                if (input.checked) {
                    telegramGroups[groupId][field].push(input.value);
                }
            } else if (field === 'is_active') {
                telegramGroups[groupId][field] = input.checked;
            } else {
                telegramGroups[groupId][field] = input.value;
            }
        }
    });
    
    const data = {
        telegram_bot_token: formData.get('telegram_bot_token'),
        telegram_enabled: formData.get('telegram_enabled') === 'on',
        telegram_webhook_url: formData.get('telegram_webhook_url'),
        telegram_groups: telegramGroups,
        // Advanced settings
        parse_mode: formData.get('parse_mode'),
        api_timeout: formData.get('api_timeout'),
        disable_web_page_preview: formData.get('disable_web_page_preview') === 'on',
        disable_notification: formData.get('disable_notification') === 'on',
        max_retries: formData.get('max_retries'),
        retry_delay: formData.get('retry_delay'),
        max_message_length: formData.get('max_message_length'),
        rate_limit: formData.get('rate_limit'),
        enable_logging: formData.get('enable_logging') === 'on',
        log_level: formData.get('log_level'),
        allowed_chat_ids: formData.get('allowed_chat_ids'),
        blocked_keywords: formData.get('blocked_keywords'),
        custom_headers: formData.get('custom_headers')
    };
    
    fetch('/settings/telegram/update', {
        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 => {
        showResult(data);
        if (data.success) {
            loadConfigStatus();
        }
    })
    .catch(error => {
        showResult({
            success: false,
            message: 'Error: ' + error.message
        });
    });
}

// Test bot connection
function testBot() {
    const form = document.getElementById('telegram-settings-form');
    const formData = new FormData(form);
    
    const botToken = formData.get('telegram_bot_token');
    
    // Find first active group with Chat ID
    let testChatId = null;
    document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
        if (input.name.includes('[chat_id]') && input.value.trim() !== '') {
            const groupId = input.name.match(/telegram_groups\[(\d+)\]/)[1];
            const activeCheckbox = document.querySelector(`[name="telegram_groups[${groupId}][is_active]"]`);
            if (activeCheckbox && activeCheckbox.checked) {
                testChatId = input.value;
            }
        }
    });
    
    if (!botToken || !testChatId) {
        showResult({
            success: false,
            message: 'Please enter Bot Token and at least one active Chat ID before testing'
        });
        return;
    }
    
    const data = {
        telegram_bot_token: botToken,
        telegram_chat_id: testChatId
    };
    
    fetch('/settings/telegram/test', {
        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 => {
        showResult(data);
        if (data.success) {
            document.getElementById('connection-status').textContent = 'Connected';
            document.getElementById('connection-status').className = 'badge bg-success';
        } else {
            document.getElementById('connection-status').textContent = 'Failed';
            document.getElementById('connection-status').className = 'badge bg-danger';
        }
    })
    .catch(error => {
        showResult({
            success: false,
            message: 'Error: ' + error.message
        });
    });
}

// Test connection only
function testConnection() {
    const form = document.getElementById('telegram-settings-form');
    const formData = new FormData(form);
    
    const botToken = formData.get('telegram_bot_token');
    
    if (!botToken) {
        showResult({
            success: false,
            message: 'Please enter Bot Token before testing connection'
        });
        return;
    }
    
    const data = {
        telegram_bot_token: botToken
    };
    
    fetch('/settings/telegram/test', {
        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 => {
        showResult(data);
        if (data.success) {
            document.getElementById('connection-status').textContent = 'Connected';
            document.getElementById('connection-status').className = 'badge bg-success';
        } else {
            document.getElementById('connection-status').textContent = 'Failed';
            document.getElementById('connection-status').className = 'badge bg-danger';
        }
    })
    .catch(error => {
        showResult({
            success: false,
            message: 'Error: ' + error.message
        });
    });
}

// Send test message
function sendTestMessage() {
    const form = document.getElementById('telegram-settings-form');
    const formData = new FormData(form);
    
    const botToken = formData.get('telegram_bot_token');
    
    // Find first active group with Chat ID
    let testChatId = null;
    document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
        if (input.name.includes('[chat_id]') && input.value.trim() !== '') {
            const groupId = input.name.match(/telegram_groups\[(\d+)\]/)[1];
            const activeCheckbox = document.querySelector(`[name="telegram_groups[${groupId}][is_active]"]`);
            if (activeCheckbox && activeCheckbox.checked) {
                testChatId = input.value;
            }
        }
    });
    
    if (!botToken || !testChatId) {
        showResult({
            success: false,
            message: 'Please enter Bot Token and at least one active Chat ID before testing'
        });
        return;
    }
    
    const testMessage = "🤖 <b>Test Message</b>\n\n" +
        "✅ This is a test message from your Laravel application\n" +
        "⏰ Time: " + new Date().toLocaleString() + "\n" +
        "🔧 Telegram integration is working correctly!";
    
    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({
            message: testMessage,
            chat_id: testChatId
        })
    })
    .then(response => response.json())
    .then(data => {
        showResult(data);
    })
    .catch(error => {
        showResult({
            success: false,
            message: 'Error: ' + error.message
        });
    });
}

// Get webhook URL
function getWebhookUrl() {
    fetch('/settings/telegram/webhook-url')
        .then(response => response.json())
        .then(data => {
            showResult(data);
        })
        .catch(error => {
            showResult({
                success: false,
                message: 'Error: ' + error.message
            });
        });
}

// Copy webhook URL
function copyWebhookUrl() {
    const webhookInput = document.getElementById('telegram_webhook_url');
    webhookInput.select();
    webhookInput.setSelectionRange(0, 99999); // For mobile devices
    
    try {
        document.execCommand('copy');
        showResult({
            success: true,
            message: 'Webhook URL copied to clipboard!'
        });
    } catch (err) {
        showResult({
            success: false,
            message: 'Failed to copy URL'
        });
    }
}

// Validate Chat ID
function validateChatId() {
    const form = document.getElementById('telegram-settings-form');
    const formData = new FormData(form);
    
    const botToken = formData.get('telegram_bot_token');
    
    // Find first active group with Chat ID
    let testChatId = null;
    document.querySelectorAll('[name^="telegram_groups["]').forEach(input => {
        if (input.name.includes('[chat_id]') && input.value.trim() !== '') {
            const groupId = input.name.match(/telegram_groups\[(\d+)\]/)[1];
            const activeCheckbox = document.querySelector(`[name="telegram_groups[${groupId}][is_active]"]`);
            if (activeCheckbox && activeCheckbox.checked) {
                testChatId = input.value;
            }
        }
    });
    
    if (!botToken || !testChatId) {
        showResult({
            success: false,
            message: 'Please enter Bot Token and at least one active Chat ID before validating'
        });
        return;
    }
    
    const data = {
        telegram_bot_token: botToken,
        telegram_chat_id: testChatId
    };
    
    fetch('/settings/telegram/validate-chat-id', {
        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 => {
        showResult(data);
        if (data.success) {
            document.getElementById('connection-status').textContent = 'Valid';
            document.getElementById('connection-status').className = 'badge bg-success';
        } else {
            document.getElementById('connection-status').textContent = 'Invalid';
            document.getElementById('connection-status').className = 'badge bg-danger';
        }
    })
    .catch(error => {
        showResult({
            success: false,
            message: 'Error: ' + error.message
        });
    });
}

// Show result in modal
function showResult(data) {
    const modalBody = document.getElementById('resultModalBody');
    const modal = new bootstrap.Modal(document.getElementById('resultModal'));
    
    if (data.success) {
        modalBody.innerHTML = `
            <div class="alert alert-success">
                <i class="fas fa-check-circle me-2"></i>
                <strong>Success!</strong> ${data.message}
            </div>
            ${data.data ? '<pre class="mt-3">' + JSON.stringify(data.data, null, 2) + '</pre>' : ''}
        `;
    } else {
        modalBody.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-times-circle me-2"></i>
                <strong>Error!</strong> ${data.message}
            </div>
            ${data.errors ? '<div class="mt-3"><strong>Validation Errors:</strong><pre>' + JSON.stringify(data.errors, null, 2) + '</pre></div>' : ''}
        `;
    }
    
    modal.show();
}
</script>
@endsection