{% extends "base.html" %}

{% block title %}Config Dashboard{% endblock %}

{% block content %}
<div class="container">
    <h2>Configuration Dashboard</h2>
    <p>Welcome to the configuration page.</p>
    <button id="send-test-notification-btn" class="btn btn-primary">Send Test Notification</button>
    <button id="check-expiring-accounts-btn" class="btn btn-info">Check Expiring Accounts</button>

    <div class="card mt-4">
        <div class="card-header">
            DNS Manager
        </div>
        <div class="card-body">
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="dns-entry-input" placeholder="Enter DNS entry">
                <div class="input-group-append">
                    <button class="btn btn-primary" id="add-dns-btn">Add</button>
                </div>
            </div>
        </div>
        <ul class="list-group list-group-flush" id="dns-list">
            <!-- DNS entries will be loaded here -->
        </ul>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // DNS Manager
        const dnsList = document.getElementById('dns-list');
        const addDnsBtn = document.getElementById('add-dns-btn');
        const dnsEntryInput = document.getElementById('dns-entry-input');

        function fetchDnsList() {
            fetch("{{ url_for('dns.get_dns_list') }}")
                .then(response => response.json())
                .then(data => {
                    dnsList.innerHTML = '';
                    if (data.length === 0) {
                        dnsList.innerHTML = '<li class="list-group-item">No DNS entries found.</li>';
                    } else {
                        data.forEach(entry => {
                            const li = document.createElement('li');
                            li.className = 'list-group-item d-flex justify-content-between align-items-center';
                            li.textContent = entry;
                            const removeBtn = document.createElement('button');
                            removeBtn.className = 'btn btn-danger btn-sm';
                            removeBtn.textContent = 'Remove';
                            removeBtn.addEventListener('click', () => removeDnsEntry(entry));
                            li.appendChild(removeBtn);
                            dnsList.appendChild(li);
                        });
                    }
                });
        }

        function addDnsEntry() {
            const dnsEntry = dnsEntryInput.value.trim();
            if (dnsEntry) {
                fetch("{{ url_for('dns.add_dns') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ dns_entry: dnsEntry })
                }).then(() => {
                    dnsEntryInput.value = '';
                    fetchDnsList();
                });
            }
        }

        function removeDnsEntry(dnsEntry) {
            fetch("{{ url_for('dns.remove_dns') }}", {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ dns_entry: dnsEntry })
            }).then(() => {
                fetchDnsList();
            });
        }

        addDnsBtn.addEventListener('click', addDnsEntry);
        fetchDnsList();

        // Other buttons
        document.getElementById('send-test-notification-btn').addEventListener('click', function() {
            fetch('{{ url_for("send_test_notification") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Test notification sent successfully!');
                } else {
                    alert('Failed to send test notification.');
                }
            }).catch(err => {
                console.error('Error sending test notification:', err);
                alert('An error occurred while sending the test notification.');
            });
        });

        document.getElementById('check-expiring-accounts-btn').addEventListener('click', function() {
            fetch('{{ url_for("check_expiring_accounts") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Expiring accounts check triggered successfully!');
                } else {
                    alert('Failed to trigger expiring accounts check.');
                }
            }).catch(err => {
                console.error('Error triggering expiring accounts check:', err);
                alert('An error occurred while triggering the expiring accounts check.');
            });
        });
    });
</script>
{% endblock %}