bindmanager/templates/dashboard.html

{% extends "layout.html" %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-4xl font-black text-white tracking-tighter italic">DNS Zones Dashboard</h2>
        {% if session.get('role') == 'admin' %}
        <div class="flex items-center gap-4 mt-2">
            <div class="flex items-center gap-2">
                <span id="status-dot" class="w-2.5 h-2.5 rounded-full bg-gray-600 transition-all duration-500"></span>
                <span id="status-text" class="text-[10px] font-bold text-gray-500 uppercase tracking-widest leading-none">Checking Service...</span>
            </div>
            <div class="flex gap-2 border-l border-gray-800 pl-4">
                <a href="/service/start" class="text-[9px] bg-green-600/20 text-green-400 px-3 py-1 rounded font-black border border-green-500/30">Start</a>
                <a href="/service/stop" class="text-[9px] bg-red-600/20 text-red-400 px-3 py-1 rounded font-black border border-red-500/30">Stop</a>
                <a href="/service/restart" class="text-[9px] bg-yellow-600/20 text-yellow-400 hover:bg-yellow-600/40 px-3 py-1 rounded font-black border border-yellow-500/30">Restart</a>
                <a href="/service/reload" title="Reload" class="text-[9px] bg-blue-600/20 text-blue-400 px-3 py-1 rounded font-black border border-blue-500/30">Apply</a>
            </div>
        </div>
        {% endif %}
    </div>
    
    <div class="flex gap-3">
        {% if session.get('role') == 'admin' %}
        <button onclick="openBackupModal()" class="bg-gray-800 hover:bg-gray-700 border border-gray-700 px-6 py-3 rounded-xl font-black shadow-lg transition text-white uppercase text-xs tracking-widest flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>Backup
        </button>
        {% endif %}
        <button onclick="openAddModal()" class="bg-blue-600 hover:bg-blue-500 px-8 py-3 rounded-xl font-black shadow-2xl transition transform hover:scale-105 text-white uppercase text-xs tracking-widest">+ New Zone</button>
    </div>
</div>

{% if session.get('role') == 'admin' %}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
    <div class="bg-[#12161f] border border-gray-800 rounded-2xl p-6 shadow-xl relative">
        <div class="flex justify-between items-center mb-4 text-[10px] font-black text-gray-500 uppercase tracking-widest">
            <h3>Requests Per Second</h3>
            <span class="flex h-2 w-2 relative"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span></span>
        </div>
        <div class="h-40"><canvas id="rpsChart"></canvas></div>
    </div>
    <div class="bg-[#12161f] border border-gray-800 rounded-2xl p-6 shadow-xl relative">
        <div class="flex justify-between items-center mb-4 text-[10px] font-black text-gray-500 uppercase tracking-widest">
            <h3>Top TLDs</h3>
            <span class="flex h-2 w-2 relative"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span></span>
        </div>
        <div class="h-40 flex justify-center"><canvas id="tldChart"></canvas></div>
    </div>
    <div class="bg-[#12161f] border border-gray-800 rounded-2xl p-6 shadow-xl relative">
        <div class="flex justify-between items-center mb-4 text-[10px] font-black text-gray-500 uppercase tracking-widest">
            <h3>Unique IPs</h3>
            <span class="flex h-2 w-2 relative"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span></span>
        </div>
        <div class="h-40"><canvas id="ipsChart"></canvas></div>
    </div>
</div>
{% endif %}

<div class="flex border-b border-gray-800 mb-6 gap-6 overflow-x-auto whitespace-nowrap scrollbar-hide">
    <button onclick="switchTab('master_forward')" id="btnTab_master_forward" class="pb-4 text-[10px] font-black uppercase tracking-widest text-blue-500 border-b-2 border-blue-500 transition focus:outline-none">Master Forward</button>
    <button onclick="switchTab('master_reverse')" id="btnTab_master_reverse" class="pb-4 text-[10px] font-black uppercase tracking-widest text-gray-500 border-b-2 border-transparent hover:text-gray-300 transition focus:outline-none">Master Reverse</button>
    <button onclick="switchTab('slave_forward')" id="btnTab_slave_forward" class="pb-4 text-[10px] font-black uppercase tracking-widest text-gray-500 border-b-2 border-transparent hover:text-gray-300 transition focus:outline-none">Slave Forward</button>
    <button onclick="switchTab('slave_reverse')" id="btnTab_slave_reverse" class="pb-4 text-[10px] font-black uppercase tracking-widest text-gray-500 border-b-2 border-transparent hover:text-gray-300 transition focus:outline-none">Slave Reverse</button>
    <button onclick="switchTab('forward_zones')" id="btnTab_forward_zones" class="pb-4 text-[10px] font-black uppercase tracking-widest text-gray-500 border-b-2 border-transparent hover:text-gray-300 transition focus:outline-none">Forward Zones</button>
</div>

<div class="flex flex-col md:flex-row gap-4 mb-8">
    <input type="text" id="zoneSearch" onkeyup="filterZones()" placeholder="Search zones..." class="flex-1 bg-[#12161f] border border-gray-800 rounded-2xl py-4 px-6 text-white font-mono outline-none focus:border-blue-500 transition text-sm">
    <div class="flex bg-[#12161f] border border-gray-800 rounded-2xl p-1 h-[54px]">
        <button onclick="changeViewMode('cards')" id="btnViewCards" class="px-6 rounded-xl text-xs font-black uppercase transition {% if view_mode != 'table' %}bg-blue-600 text-white shadow-lg{% else %}text-gray-500{% endif %}">Cards</button>
        <button onclick="changeViewMode('table')" id="btnViewTable" class="px-6 rounded-xl text-xs font-black uppercase transition {% if view_mode == 'table' %}bg-blue-600 text-white shadow-lg{% else %}text-gray-500{% endif %}">Table</button>
    </div>
</div>

<div id="dashboard-dynamic-content">
    <div class="{% if view_mode == 'table' %}hidden{% endif %} grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6" id="zonesGrid">
        {% for zone_name, ztype in zones %}
        {% set url_param = 'root_zone' if zone_name == '.' else zone_name %}
        {% set is_reverse = '.arpa' in zone_name %}
        {% set is_master = ztype == 'master' or ztype == 'hint' %}
        {% set is_hint = ztype == 'hint' %}
        {% set is_forward = ztype == 'forward' %}
        {% set tab_cat = 'forward_zones' if is_forward else ('master_forward' if is_master and not is_reverse else 'master_reverse' if is_master and is_reverse else 'slave_forward' if not is_master and not is_reverse else 'slave_reverse') %}
        
        <div class="zone-item zone-card bg-[#12161f] border border-gray-800 rounded-2xl p-6 shadow-xl hover:border-blue-500/40 transition group relative" data-domain="{{ zone_name|lower }}" data-owner="{{ owners.get(zone_name, 'admin')|lower }}" data-category="{{ tab_cat }}">
            <div class="flex justify-between items-start mb-4">
                <div class="flex gap-2 flex-wrap">
                    <span class="text-[9px] font-black uppercase tracking-widest px-2 py-1 rounded bg-gray-900 {% if is_hint %}text-yellow-400 border border-yellow-500/20{% elif ztype=='master' %}text-green-400 border border-green-500/20{% elif ztype=='forward' %}text-cyan-400 border border-cyan-500/20{% else %}text-blue-400 border border-blue-500/20{% endif %}">{{ ztype }}</span>
                    {% if session.get('role') == 'admin' %}
                    <span class="text-[9px] font-black text-gray-400 bg-gray-800/50 px-2 py-1 rounded">{{ owners.get(zone_name, 'admin') }}</span>
                    {% endif %}
                </div>
                <div class="flex gap-3 opacity-0 group-hover:opacity-100 transition items-center">
                    {% if session.get('role') == 'admin' %}
                    <button onclick="openAssignModal('{{ zone_name }}', '{{ owners.get(zone_name, 'admin') }}')" class="text-blue-400 text-[10px] font-black uppercase tracking-widest hover:text-blue-300">Assign</button>
                    {% endif %}
                    <a href="/zones/delete/{{ url_param }}" onclick="handleAjaxLink(event, this, 'dashboard-dynamic-content', restoreDashboardState, 'Delete this zone permanently?')" class="text-red-500 text-[10px] font-black uppercase tracking-widest hover:text-red-400 transition">Delete</a>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-6 font-mono truncate" title="{{ zone_name }}">
                {% if zone_name == '.' %}. (Root Zone){% else %}{{ zone_name }}{% endif %}
            </h3>
            <a href="/zones/manage/{{ url_param }}" class="block w-full text-center bg-gray-800 hover:bg-blue-600 py-3 rounded-xl text-gray-300 hover:text-white font-black text-xs transition uppercase tracking-widest">Manage</a>
        </div>
        {% endfor %}
    </div>

    <div id="zonesTableContainer" class="{% if view_mode != 'table' %}hidden{% endif %} bg-[#12161f] border border-gray-800 rounded-3xl overflow-x-auto shadow-2xl mb-8">
        <table class="w-full text-left whitespace-nowrap">
            <thead class="bg-black/20 text-[10px] font-black text-gray-500 uppercase border-b border-gray-800">
                <tr><th class="p-6">Domain / IP Subnet</th><th class="p-6">Type</th><th class="p-6">Owner</th><th class="p-6 text-right">Actions</th></tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                {% for zone_name, ztype in zones %}
                {% set url_param = 'root_zone' if zone_name == '.' else zone_name %}
                {% set is_reverse = '.arpa' in zone_name %}
                {% set is_master = ztype == 'master' or ztype == 'hint' %}
                {% set is_forward = ztype == 'forward' %}
                {% set tab_cat = 'forward_zones' if is_forward else ('master_forward' if is_master and not is_reverse else 'master_reverse' if is_master and is_reverse else 'slave_forward' if not is_master and not is_reverse else 'slave_reverse') %}
                <tr class="zone-item group" data-domain="{{ zone_name|lower }}" data-owner="{{ owners.get(zone_name, 'admin')|lower }}" data-category="{{ tab_cat }}">
                    <td class="p-6 font-mono font-bold text-white">{% if zone_name == '.' %}. (Root Zone){% else %}{{ zone_name }}{% endif %}</td>
                    <td class="p-6"><span class="text-[9px] font-black uppercase px-2 py-1 rounded bg-gray-900 {% if is_forward %}text-cyan-400{% else %}text-blue-400{% endif %}">{{ ztype }}</span></td>
                    <td class="p-6 text-gray-400 text-xs uppercase">{{ owners.get(zone_name, 'admin') }}</td>
                    <td class="p-6 text-right">
                        <div class="flex justify-end gap-4 items-center">
                            {% if session.get('role') == 'admin' %}<button onclick="openAssignModal('{{ zone_name }}', '{{ owners.get(zone_name, 'admin') }}')" class="opacity-0 group-hover:opacity-100 text-purple-400 text-[10px] font-black uppercase transition">Assign</button>{% endif %}
                            <a href="/zones/manage/{{ url_param }}" class="text-green-400 font-black text-[10px] uppercase">Manage</a>
                            <a href="/zones/delete/{{ url_param }}" onclick="handleAjaxLink(event, this, 'dashboard-dynamic-content', restoreDashboardState, 'Delete this zone permanently?')" class="opacity-0 group-hover:opacity-100 text-red-500 text-[10px] font-black uppercase transition">Delete</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <div id="noZonesMsg" class="hidden py-20 text-center border-2 border-dashed border-gray-800 rounded-3xl mt-6"><span class="text-gray-600 font-black uppercase text-xs">No zones found in this category</span></div>
</div>

<div id="assignZoneModal" class="hidden fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-4">
    <div class="bg-[#12161f] border border-gray-800 w-full max-w-sm rounded-3xl p-8 shadow-2xl">
        <h3 class="text-xl font-black text-white mb-6 uppercase text-center">Assign Ownership</h3>
        <form action="/zones/assign" method="POST" class="space-y-6" onsubmit="handleAjaxForm(event, this, 'dashboard-dynamic-content', restoreDashboardState)">
            <input type="hidden" name="domain" id="assignDomainInput"><div class="text-center mb-4"><span id="assignDomainDisplay" class="text-lg font-mono text-blue-400 font-bold"></span></div>
            <select name="owner" id="assignOwnerSelect" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-bold outline-none cursor-pointer"><option value="admin">admin (Unassign)</option>{% for u in all_usernames %}{% if u != 'admin' %}<option value="{{ u }}">{{ u }}</option>{% endif %}{% endfor %}</select>
            <div class="flex gap-4 pt-6"><button type="button" onclick="closeAssignModal()" class="flex-1 bg-gray-800 text-gray-400 font-bold py-4 rounded-xl uppercase text-xs">Cancel</button><button type="submit" class="flex-1 bg-blue-600 text-white font-black py-4 rounded-xl uppercase text-xs shadow-xl">Assign</button></div>
        </form>
    </div>
</div>

<div id="addZoneModal" class="hidden fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-4">
    <div class="bg-[#12161f] border border-gray-800 w-full max-w-lg rounded-3xl p-8 shadow-2xl">
        <h3 class="text-2xl font-black text-white mb-8 uppercase border-b border-gray-800 pb-4 text-center">Create New Zone</h3>
        <form action="/zones/add" method="POST" id="addZoneForm" class="space-y-6" onsubmit="handleAjaxForm(event, this, 'dashboard-dynamic-content', restoreDashboardState)">
            <div class="grid grid-cols-2 gap-4">
                <div><label class="block text-[10px] font-bold text-gray-500 uppercase mb-2 ml-1">Direction</label><select name="direction" id="zoneDirection" onchange="updatePlaceholder()" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-bold outline-none text-sm cursor-pointer"><option value="forward">Forward</option><option value="reverse">Reverse</option></select></div>
                <div><label class="block text-[10px] font-bold text-gray-500 uppercase mb-2 ml-1">Type</label><select name="type" id="zoneType" onchange="toggleZoneFields()" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-bold outline-none text-sm cursor-pointer"><option value="master">Master</option><option value="slave">Slave</option><option value="forward">Forwarder</option><option value="hint">Hint (Root Zone)</option></select></div>
            </div>
            <div id="domainContainer"><label id="domainLabel" class="block text-[10px] font-bold text-gray-500 uppercase mb-2 ml-1">Domain Name</label><input type="text" name="domain" id="domainInput" placeholder="example.com" required class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-mono outline-none focus:border-blue-500 transition-colors"></div>
            <div id="masterFields" class="space-y-4">
				<label class="block text-[10px] font-bold text-gray-500 uppercase mb-2 ml-1">Template (Required)</label>
				<select name="template_name" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-bold outline-none cursor-pointer" required>
					{% if not templates %}
						<option value="" disabled selected>No templates assigned to your account!</option>
					{% else %}
						{% for tname in templates.keys() %}
							<option value="{{ tname }}">{{ tname }}</option>
						{% endfor %}
					{% endif %}
				</select>
			</div>
            <div id="slaveFields" class="hidden space-y-4"><div class="flex justify-between items-center"><label class="text-[10px] font-bold text-gray-500 uppercase">Master IPs</label><button type="button" onclick="addDynamicIp('slaveIpCont', 'master_ips[]')" class="text-[9px] bg-purple-600/20 text-purple-400 px-3 py-1 rounded font-black uppercase">+ Add</button></div><div id="slaveIpCont" class="space-y-2"><input type="text" name="master_ips[]" placeholder="1.2.3.4" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-3 text-white font-mono"></div></div>
            <div id="forwardFields" class="hidden space-y-4"><div class="flex justify-between items-center"><label class="text-[10px] font-bold text-gray-500 uppercase">Forwarders</label><button type="button" onclick="addDynamicIp('forwardIpCont', 'forwarders[]')" class="text-[9px] bg-blue-600/20 text-blue-400 px-3 py-1 rounded font-black uppercase">+ Add</button></div><div id="forwardIpCont" class="space-y-2"><input type="text" name="forwarders[]" placeholder="8.8.8.8" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-3 text-white font-mono"></div></div>
            <div class="flex gap-4 pt-6 border-t border-gray-800"><button type="button" onclick="closeAddModal()" class="flex-1 bg-gray-800 text-gray-400 font-bold py-4 rounded-xl hover:text-white transition uppercase text-xs tracking-widest">Cancel</button><button type="submit" class="flex-1 bg-blue-600 text-white font-black py-4 rounded-xl shadow-xl transition uppercase text-xs tracking-widest hover:bg-blue-500">Create</button></div>
        </form>
    </div>
</div>

<div id="backupModal" class="hidden fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-4">
    <div class="bg-[#12161f] border border-gray-800 w-full max-w-md rounded-3xl p-8 shadow-2xl">
        <h3 class="text-2xl font-black text-white mb-8 uppercase text-center italic">System Backup & Restore</h3>
        <div class="space-y-6">
            <div class="bg-gray-900/50 p-6 rounded-2xl border border-gray-800"><h4 class="text-xs font-black text-green-500 uppercase mb-2">Export Data</h4><a href="/backup/export" class="block w-full text-center bg-green-600/20 text-green-400 font-black py-3 rounded-xl border border-green-500/30 uppercase text-xs">Download ZIP</a></div>
            <div class="bg-gray-900/50 p-6 rounded-2xl border border-gray-800"><h4 class="text-xs font-black text-blue-500 uppercase mb-2">Restore Data</h4><form action="/backup/import" method="POST" enctype="multipart/form-data" class="space-y-4"><input type="file" name="backup_file" required class="block w-full text-xs text-gray-400 file:bg-gray-800 file:text-white file:border-0 file:py-2 file:px-4 file:rounded-lg"><button type="submit" class="w-full bg-blue-600 text-white font-black py-3 rounded-xl uppercase text-xs shadow-xl">Restore ZIP</button></form></div>
        </div>
        <button onclick="closeBackupModal()" class="w-full mt-6 bg-gray-800 text-gray-400 py-3 rounded-xl uppercase text-xs font-bold">Close</button>
    </div>
</div>

<script>
// CHART LOGIC
let rpsChartInst = null, ipsChartInst = null, tldChartInst = null;
function renderLiveCharts() {
    fetch('/api/stats').then(r => r.json()).then(data => {
        const today = new Date().toISOString().split('T')[0];
        const todayData = data[today] || { timeline: {}, tlds: {} };
        const times = Object.keys(todayData.timeline).sort();
        const rpsData = times.map(t => todayData.timeline[t].rps);
        const ipsData = times.map(t => todayData.timeline[t].unique_ips);
        const tldLabels = Object.keys(todayData.tlds).sort((a,b) => todayData.tlds[b] - todayData.tlds[a]).slice(0, 5);
        const tldData = tldLabels.map(t => todayData.tlds[t]);
        const chartOptions = { animation: false, interaction: { mode: 'index', intersect: false }, responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { grid: { color: '#1f2937' }, beginAtZero: true } } };
        if(!rpsChartInst) {
            rpsChartInst = new Chart(document.getElementById('rpsChart'), { type: 'line', data: { labels: times, datasets: [{ data: rpsData, borderColor: '#3b82f6', fill: true, tension: 0.4 }] }, options: chartOptions });
        } else {
            rpsChartInst.data.labels = times; rpsChartInst.data.datasets[0].data = rpsData; rpsChartInst.update('none');
        }
        if(!ipsChartInst) {
            ipsChartInst = new Chart(document.getElementById('ipsChart'), { type: 'bar', data: { labels: times, datasets: [{ data: ipsData, backgroundColor: '#8b5cf6' }] }, options: chartOptions });
        } else {
            ipsChartInst.data.labels = times; ipsChartInst.data.datasets[0].data = ipsData; ipsChartInst.update('none');
        }
        if(!tldChartInst) {
            tldChartInst = new Chart(document.getElementById('tldChart'), { type: 'doughnut', data: { labels: tldLabels, datasets: [{ data: tldData, backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#6366f1'], borderWidth: 0 }] }, options: { animation: false, responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { color: '#9ca3af', font: { size: 10 } } } }, cutout: '70%' } });
        } else {
            tldChartInst.data.labels = tldLabels; tldChartInst.data.datasets[0].data = tldData; tldChartInst.update('none');
        }
    }).catch(e => console.log('Stats sync error:', e));
}

// AJAX HELPERS
async function handleAjaxForm(e, form, containerId, callback) {
    e.preventDefault();
    const btn = form.querySelector('button[type="submit"]');
    if(btn) { btn.disabled = true; }
    try {
        const res = await fetch(form.action, { method: form.method || 'POST', body: new FormData(form) });
        const html = await res.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const newCont = doc.getElementById(containerId);
        if(newCont) {
            document.getElementById(containerId).innerHTML = newCont.innerHTML;
            if(callback) callback();
            AppToast.fire({ icon: 'success', title: 'Success' });
        } else window.location.reload();
    } catch(err) { window.location.reload(); }
}

async function handleAjaxLink(e, link, containerId, callback, confirmMsg) {
    e.preventDefault(); if(confirmMsg && !confirm(confirmMsg)) return;
    try {
        const res = await fetch(link.href);
        const html = await res.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const newCont = doc.getElementById(containerId);
        if(newCont) {
            document.getElementById(containerId).innerHTML = newCont.innerHTML;
            if(callback) callback();
            AppToast.fire({ icon: 'success', title: 'Deleted' });
        } else window.location.reload();
    } catch(err) { window.location.reload(); }
}

// DASHBOARD LOGIC
function openBackupModal() { document.getElementById('backupModal').classList.remove('hidden'); }
function closeBackupModal() { document.getElementById('backupModal').classList.add('hidden'); }
function openAddModal() { document.getElementById('addZoneModal').classList.remove('hidden'); }
function closeAddModal() { document.getElementById('addZoneModal').classList.add('hidden'); }
function openAssignModal(d, o) { document.getElementById('assignDomainInput').value=d; document.getElementById('assignDomainDisplay').innerText=d; document.getElementById('assignOwnerSelect').value=o; document.getElementById('assignZoneModal').classList.remove('hidden'); }
function closeAssignModal() { document.getElementById('assignZoneModal').classList.add('hidden'); }

function toggleZoneFields() { 
    const type = document.getElementById('zoneType').value;
    const domCont = document.getElementById('domainContainer');
    const domInp = document.getElementById('domainInput');
    const tmplSelect = document.querySelector('select[name="template_name"]');
    
    if(type === 'hint') { 
        domCont.classList.add('hidden'); 
        domInp.value = '.'; 
    } else { 
        domCont.classList.remove('hidden'); 
        if(domInp.value === '.') domInp.value = ''; 
    }
    
    // Εμφάνιση/Απόκρυψη και προσθήκη/αφαίρεση του Required!
    if (type === 'master') {
        document.getElementById('masterFields').style.display = 'block';
        if (tmplSelect) tmplSelect.required = true;
    } else {
        document.getElementById('masterFields').style.display = 'none';
        if (tmplSelect) tmplSelect.required = false;
    }
    
    document.getElementById('slaveFields').style.display = (type === 'slave') ? 'block' : 'none';
    document.getElementById('forwardFields').style.display = (type === 'forward') ? 'block' : 'none';
}

function updatePlaceholder() { 
    const dir = document.getElementById('zoneDirection').value, inp = document.getElementById('domainInput'), lbl = document.getElementById('domainLabel');
    if(dir === 'reverse') { lbl.innerText = 'IP SUBNET (e.g. 192.168.1)'; inp.placeholder = '192.168.1'; } 
    else { lbl.innerText = 'DOMAIN NAME'; inp.placeholder = 'example.com'; }
}

function addDynamicIp(contId, name) { 
    const div = document.createElement('div'); div.className = 'flex gap-2 mt-2'; 
    div.innerHTML = `<input type="text" name="${name}" placeholder="0.0.0.0" class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-3 text-white font-mono"><button type="button" onclick="this.parentElement.remove()" class="text-red-500 font-black px-4">×</button>`; 
    document.getElementById(contId).appendChild(div); 
}

function changeViewMode(mode) { 
    document.getElementById('zonesGrid').classList.toggle('hidden', mode==='table'); 
    document.getElementById('zonesTableContainer').classList.toggle('hidden', mode==='cards');
    document.getElementById('btnViewCards').className = mode==='cards' ? 'px-6 rounded-xl text-xs font-black uppercase transition bg-blue-600 text-white shadow-lg' : 'px-6 rounded-xl text-xs font-black uppercase transition text-gray-500';
    document.getElementById('btnViewTable').className = mode==='table' ? 'px-6 rounded-xl text-xs font-black uppercase transition bg-blue-600 text-white shadow-lg' : 'px-6 rounded-xl text-xs font-black uppercase transition text-gray-500';
    fetch('/settings/view_mode', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({mode: mode}) }); 
}

let activeTab = 'master_forward';
function switchTab(tab) { 
    activeTab = tab; 
    ['master_forward', 'master_reverse', 'slave_forward', 'slave_reverse', 'forward_zones'].forEach(t => { 
        const btn = document.getElementById('btnTab_' + t); 
        if(btn) btn.className = (t === activeTab) ? "pb-4 text-[10px] font-black uppercase tracking-widest text-blue-500 border-b-2 border-blue-500 transition focus:outline-none" : "pb-4 text-[10px] font-black uppercase tracking-widest text-gray-500 border-b-2 border-transparent hover:text-gray-300 transition focus:outline-none"; 
    }); 
    filterZones(); 
}

function filterZones() { 
    let input = document.getElementById('zoneSearch').value.toLowerCase(), items = document.querySelectorAll('.zone-item'), count = 0; 
    items.forEach(item => { 
        let domain = item.getAttribute('data-domain'), owner = item.getAttribute('data-owner') || '', category = item.getAttribute('data-category'), match = (domain.includes(input) || owner.includes(input)) && category === activeTab; 
        item.classList.toggle('hidden', !match); if(match) count++; 
    }); 
    const msg = document.getElementById('noZonesMsg'); if(msg) msg.classList.toggle('hidden', count > 0); 
}

function updateLiveStatus() {
    fetch('/api/service/status').then(r => r.json()).then(data => {
        const dot = document.getElementById('status-dot'), text = document.getElementById('status-text');
        if(data.status === 'active') {
            dot.className = "w-2.5 h-2.5 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.8)] animate-pulse";
            text.innerHTML = `Service: Active <span class="text-gray-600 ml-2 font-normal italic lowercase">(since ${data.uptime})</span>`;
            text.classList.replace('text-gray-500', 'text-green-400');
        } else {
            dot.className = "w-2.5 h-2.5 rounded-full bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.8)]";
            text.innerText = "Service: Offline";
            text.classList.replace('text-green-400', 'text-red-500');
        }
    });
}

function restoreDashboardState() { switchTab(activeTab); updateLiveStatus(); }

document.addEventListener("DOMContentLoaded", () => {
    renderLiveCharts();
    setInterval(renderLiveCharts, 10000);
    setInterval(updateLiveStatus, 5000);
    restoreDashboardState();
});
</script>
{% endblock %}