{% 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">
            <h3 class="text-[10px] font-black text-gray-500 uppercase tracking-widest">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">
            <h3 class="text-[10px] font-black text-gray-500 uppercase tracking-widest">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">
            <h3 class="text-[10px] font-black text-gray-500 uppercase tracking-widest">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>

<script>
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: [{ label: 'RPS', 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: [{ label: 'Unique IPs', 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, interaction: { mode: 'index', intersect: 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));
}

document.addEventListener("DOMContentLoaded", () => {
    renderLiveCharts();
    setInterval(renderLiveCharts, 10000); 
});
</script>
{% 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') %}
        {% set friendly_name = zone_name %}
        {% if is_reverse %}
            {% set rev_parts = zone_name.replace('.in-addr.arpa', '').replace('.ip6.arpa', '').split('.') %}
            {% set friendly_name = (rev_parts | reverse | join('.')) ~ '.x (Reverse)' %}
        {% endif %}
        <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 is_hint %}<span class="text-[9px] font-black uppercase tracking-widest px-2 py-1 rounded bg-red-900/30 text-red-500">ROOT</span>{% endif %}
                    {% 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>
                    <button onclick="openAssignModal('{{ zone_name }}', '{{ owners.get(zone_name, 'admin') }}')" class="text-[9px] bg-blue-600/20 text-blue-400 px-2 py-1 rounded border border-blue-500/30">Assign</button>
                    {% endif %}
                </div>
                <div class="flex gap-3 opacity-0 group-hover:opacity-100 transition items-center">
                    {% if is_master and not is_hint %}
                    <form action="/zones/manage/{{ url_param }}/cluster_sync" method="POST" onsubmit="handleAjaxForm(event, this, 'dashboard-dynamic-content', restoreDashboardState)">
                        <button type="submit" class="text-blue-400 text-[10px] font-black uppercase tracking-widest hover:text-blue-300 transition">Cluster Sync</button>
                    </form>
                    {% 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 {% if not is_reverse %}mb-6{% endif %} font-mono truncate" title="{{ zone_name }}">{% if zone_name == '.' %}. (Root Zone){% else %}{{ friendly_name }}{% endif %}</h3>
            {% if is_reverse %}<p class="text-[9px] text-gray-500 font-mono mb-4 truncate tracking-widest">{{ zone_name }}</p>{% endif %}
            <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_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') %}
                {% set friendly_name = zone_name %}
                {% if is_reverse %}{% set rev_parts = zone_name.replace('.in-addr.arpa', '').replace('.ip6.arpa', '').split('.') %}{% set friendly_name = (rev_parts | reverse | join('.')) ~ '.x (Reverse)' %}{% endif %}
                <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 %}{{ friendly_name }}{% endif %}{% if is_reverse %}<br><span class="text-[9px] text-gray-500 tracking-widest">{{ zone_name }}</span>{% 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 %}
                            {% if is_master and not is_hint %}<form action="/zones/manage/{{ url_param }}/cluster_sync" method="POST" onsubmit="handleAjaxForm(event, this, 'dashboard-dynamic-content', restoreDashboardState)" class="inline-block opacity-0 group-hover:opacity-100 transition"><button type="submit" class="text-blue-400 text-[10px] font-black uppercase tracking-widest hover:text-blue-300">Cluster Sync</button></form>{% 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 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</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"><option value="">-- Blank (No Template) --</option>{% for tname in templates.keys() %}<option value="{{ tname }}">{{ tname }}</option>{% endfor %}</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>
</div>

<script>
async function handleAjaxForm(e, form, containerId, callback) {
    e.preventDefault();
    const btn = form.querySelector('button[type="submit"]');
    if(btn) { btn.innerHTML = spinnerSvg + ' WAIT'; 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 scriptContent = Array.from(doc.querySelectorAll('script')).map(s => s.innerHTML).join('\n');
        const errorMatch = scriptContent.match(/Toast\.fire\(\{\s*icon:\s*'error',\s*title:\s*'([^']+)'/);
        const successMatch = scriptContent.match(/Toast\.fire\(\{\s*icon:\s*'success',\s*title:\s*'([^']+)'/);
        const newCont = doc.getElementById(containerId);
        if(newCont) {
            document.getElementById(containerId).innerHTML = newCont.innerHTML;
            if(callback) callback();
            if(errorMatch) AppToast.fire({ icon: 'error', title: errorMatch[1] });
            else if(successMatch) AppToast.fire({ icon: 'success', title: successMatch[1] });
            else AppToast.fire({ icon: 'success', title: 'Action Completed!' });
        } 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 scriptContent = Array.from(doc.querySelectorAll('script')).map(s => s.innerHTML).join('\n');
        const errorMatch = scriptContent.match(/Toast\.fire\(\{\s*icon:\s*'error',\s*title:\s*'([^']+)'/);
        const successMatch = scriptContent.match(/Toast\.fire\(\{\s*icon:\s*'success',\s*title:\s*'([^']+)'/);
        const newCont = doc.getElementById(containerId);
        if(newCont) {
            document.getElementById(containerId).innerHTML = newCont.innerHTML;
            if(callback) callback();
            if(errorMatch) AppToast.fire({ icon: 'error', title: errorMatch[1] });
            else if(successMatch) AppToast.fire({ icon: 'success', title: successMatch[1] });
            else AppToast.fire({ icon: 'success', title: 'Action Executed!' });
        } else window.location.reload();
    } catch(err) { window.location.reload(); }
}
function initTableSort(container) {
    const getCellValue = (tr, idx) => tr.children[idx].innerText.trim();
    const comparer = (idx, asc) => (a, b) => ((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2, undefined, {numeric: true}))(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
    container.querySelectorAll('table').forEach(table => {
        if(table.dataset.sortBound) return; table.dataset.sortBound = "true";
        table.querySelectorAll('th').forEach(th => {
            if (th.innerText.trim().toLowerCase() === 'actions') return;
            th.classList.add('cursor-pointer', 'hover:text-blue-400', 'transition-colors', 'select-none', 'group');
            const originalText = th.innerHTML;
            if(!originalText.includes('sort-icon')) { th.innerHTML = `<div class="flex items-center gap-2 justify-${th.classList.contains('text-right') ? 'end' : 'start'}">${originalText}<span class="sort-icon opacity-0 group-hover:opacity-50 transition-opacity text-blue-500 text-lg leading-none">↕</span></div>`; }
            th.addEventListener('click', function() {
                const tbody = table.querySelector('tbody'); if(!tbody) return;
                table.querySelectorAll('.sort-icon').forEach(icon => { icon.innerHTML = '↕'; icon.classList.remove('opacity-100', 'text-blue-400'); icon.classList.add('opacity-0', 'text-blue-500'); });
                this.asc = !this.asc; const icon = this.querySelector('.sort-icon'); icon.innerHTML = this.asc ? '↑' : '↓';
                icon.classList.remove('opacity-0', 'text-blue-500', 'group-hover:opacity-50'); icon.classList.add('opacity-100', 'text-blue-400');
                Array.from(tbody.querySelectorAll('tr')).sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc)).forEach(tr => tbody.appendChild(tr));
            });
        });
    });
}
function openBackupModal() { document.getElementById('backupModal').classList.remove('hidden'); }
function closeBackupModal() { document.getElementById('backupModal').classList.add('hidden'); }
function openAddModal() { document.getElementById('addZoneModal').classList.remove('hidden'); setTimeout(() => document.getElementById('domainInput').focus(), 100); }
function closeAddModal() { const m = document.getElementById('addZoneModal'); if(m) m.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() { const m = document.getElementById('assignZoneModal'); if(m) m.classList.add('hidden'); }
function toggleZoneFields() {
    const type = document.getElementById('zoneType').value, domCont = document.getElementById('domainContainer'), domInp = document.getElementById('domainInput');
    if(type === 'hint') { domCont.classList.add('hidden'); domInp.required = false; domInp.value = '.'; } 
    else { domCont.classList.remove('hidden'); domInp.required = true; if(domInp.value === '.') domInp.value = ''; }
    document.getElementById('masterFields').style.display = (type === 'master') ? 'block' : 'none';
    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 or 10.0'; } 
    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 outline-none focus:border-blue-500 transition"><button type="button" onclick="this.parentElement.remove()" class="text-red-500 font-black px-4 hover:bg-red-500/10 rounded-xl transition">×</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'); 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 restoreDashboardState() { switchTab(activeTab); initTableSort(document.getElementById('dashboard-dynamic-content')); const searchInput = document.getElementById('zoneSearch'); if(searchInput && searchInput.value) filterZones(); updateLiveStatus(); }

function updateLiveStatus() {
    fetch('/api/service/status')
        .then(r => r.json())
        .then(data => {
            const dot = document.getElementById('status-dot');
            const 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 / Crashed";
                text.classList.replace('text-green-400', 'text-red-500');
            }
        })
        .catch(() => {
            const txt = document.getElementById('status-text');
            if(txt) txt.innerText = "Status: Connection Error";
        });
}
setInterval(updateLiveStatus, 5000);
document.addEventListener("DOMContentLoaded", restoreDashboardState);
</script>
{% endblock %}