<!DOCTYPE html>
<html lang="dv" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ކައުންސިލް އިންތިޚާބު 2026 - ހަންގްނާމީދޫ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

        :root {
            --glass-bg: rgba(255, 255, 255, 0.4);
            --glass-border: rgba(255, 255, 255, 0.5);
            --accent-blue: #007aff;
            --accent-purple: #af52de;
            --accent-green: #34c759;
            --text-main: #1d1d1f;
        }

        body {
            background: #f5f5f7;
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            margin: 0;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Liquid Background Animation */
        .liquid-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
            overflow: hidden;
        }

        .blob {
            position: absolute;
            width: 60vw;
            height: 60vw;
            background: rgba(255, 255, 255, 0.6);
            filter: blur(80px);
            border-radius: 50%;
            animation: move 25s infinite alternate ease-in-out;
        }

        @keyframes move {
            0% { transform: translate(-10%, -10%) scale(1); }
            100% { transform: translate(20%, 15%) scale(1.1); }
        }

        /* White Glassmorphism */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(30px) saturate(180%);
            -webkit-backdrop-filter: blur(30px) saturate(180%);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.05);
        }

        .glass-btn {
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.8);
            color: var(--text-main);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
        }

        .glass-btn:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: scale(1.02);
        }

        .glass-btn.active-01 { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
        .glass-btn.active-02 { background: var(--accent-purple); color: #fff; border-color: var(--accent-purple); }
        .glass-btn.active-03 { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }

        .progress-bar {
            height: 10px;
            border-radius: 100px;
            background: rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
        }

        .search-input {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 18px;
            padding: 14px 22px;
            width: 100%;
            outline: none;
            transition: all 0.3s;
        }
        .search-input:focus { background: white; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(0,122,255,0.1); }

        .dv { text-align: right; }

        /* Login Overlay */
        #admin-lock {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255,255,255,0.3);
            backdrop-filter: blur(60px);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease;
        }

        .hidden-content { filter: blur(30px); pointer-events: none; }

        .poll-vote-btn {
            font-size: 10px;
            padding: 8px 12px;
            border-radius: 12px;
            font-weight: bold;
            flex: 1;
        }
    </style>
</head>
<body class="p-4 md:p-10">

    <div class="liquid-bg">
        <div class="blob" style="top: -10%; left: -10%;"></div>
        <div class="blob" style="bottom: -10%; right: -10%; background: rgba(0, 122, 255, 0.1); animation-delay: -5s;"></div>
    </div>

    <!-- ADMIN LOGIN MODAL & PUBLIC POLL -->
    <div id="admin-lock">
        <div class="glass p-8 w-full max-w-md mx-4 space-y-6 shadow-2xl">
            <!-- Login Section -->
            <div class="text-center">
                <i class="fas fa-lock text-3xl text-slate-400 mb-4"></i>
                <h2 class="text-2xl font-black dv">އިންތިޚާބީ ޕޯޓަލް</h2>
                <p class="text-[11px] opacity-50 mb-6 dv">އެޑްމިން ލޮގިން ބޭނުންކުރައްވާ</p>
                <div class="space-y-3">
                    <input type="text" id="username" placeholder="ޔޫސަރ ނޭމް" class="search-input text-right text-sm">
                    <input type="password" id="password" placeholder="ޕާސްވޯޑް" class="search-input text-right text-sm">
                    <button onclick="attemptLogin()" class="w-full bg-slate-800 text-white py-3.5 rounded-2xl font-bold hover:bg-black transition-all">ލޮގިން</button>
                </div>
            </div>

            <!-- Public Poll Section (Visible to everyone) -->
            <div class="pt-6 border-t border-black/5">
                <h3 class="text-sm font-bold mb-4 dv">ޢާންމު ޚިޔާލު ހޯދުމުގެ ޕޯލް (Start from 0)</h3>
                
                <div class="grid grid-cols-3 gap-2 mb-6">
                    <button onclick="castPublicVote(1)" class="poll-vote-btn glass-btn">ފިރާޤު</button>
                    <button onclick="castPublicVote(2)" class="poll-vote-btn glass-btn">ނާފިޒް</button>
                    <button onclick="castPublicVote(3)" class="poll-vote-btn glass-btn">އަޝްރަފް</button>
                </div>

                <div id="public-poll-results" class="space-y-4">
                    <div class="space-y-1">
                        <div class="flex justify-between text-[10px] font-bold"><span>ފިރާޤު</span><span id="pub-p-1">0%</span></div>
                        <div class="progress-bar"><div id="pub-pb-1" class="progress-fill bg-blue-500" style="width: 0%"></div></div>
                    </div>
                    <div class="space-y-1">
                        <div class="flex justify-between text-[10px] font-bold"><span>ނާފިޒް</span><span id="pub-p-2">0%</span></div>
                        <div class="progress-bar"><div id="pub-pb-2" class="progress-fill bg-purple-500" style="width: 0%"></div></div>
                    </div>
                    <div class="space-y-1">
                        <div class="flex justify-between text-[10px] font-bold"><span>އަޝްރަފް</span><span id="pub-p-3">0%</span></div>
                        <div class="progress-bar"><div id="pub-pb-3" class="progress-fill bg-green-500" style="width: 0%"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MAIN PORTAL CONTENT -->
    <div id="main-content" class="hidden-content">
        <header class="max-w-7xl mx-auto mb-16 text-center">
            <h1 class="text-5xl md:text-7xl font-black mb-6 text-slate-800">
                ލޯކަލް ކައުންސިލް 2026
            </h1>
            <p class="text-xl opacity-60 dv">އދ. ހަންގްނާމީދޫ ކައުންސިލްގެ ރައީސް ހޮވުމަށް ބާއްވާ އިންތިޚާބުގެ މަރުކަޒީ ޕޯޓަލް</p>
        </header>

        <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Results Dashboard -->
            <div class="lg:col-span-5 space-y-8">
                <div class="glass p-8 grid grid-cols-2 gap-4">
                    <div class="text-center">
                        <p class="text-xs opacity-50 mb-1">ޖުމްލަ ވޯޓަރުން</p>
                        <p class="text-3xl font-bold" id="stat-total">547</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs opacity-50 mb-1">ވޯޓުދީފައިވާ މިންވަރު</p>
                        <p class="text-3xl font-bold text-blue-600" id="stat-voted">0</p>
                    </div>
                </div>

                <div class="glass p-8 space-y-10">
                    <h2 class="text-2xl font-bold mb-6 dv text-slate-700">ކެންޑިޑޭޓުންގެ އަޅާކިޔުން</h2>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-end">
                            <div class="dv">
                                <span class="text-[10px] px-2 py-0.5 bg-blue-100 text-blue-600 rounded-md font-bold">ކެންޑިޑޭޓް 01</span>
                                <h3 class="text-lg font-bold">އަޙްމަދު ފިރާޤު</h3>
                            </div>
                            <div class="text-right">
                                <span class="text-2xl font-black" id="c1-votes">0</span>
                                <span class="text-xs opacity-50 block" id="c1-pct">0%</span>
                            </div>
                        </div>
                        <div class="progress-bar"><div id="c1-bar" class="progress-fill bg-blue-500" style="width: 0%"></div></div>
                    </div>

                    <div class="space-y-3">
                        <div class="flex justify-between items-end">
                            <div class="dv">
                                <span class="text-[10px] px-2 py-0.5 bg-purple-100 text-purple-600 rounded-md font-bold">ކެންޑިޑޭޓް 02</span>
                                <h3 class="text-lg font-bold">އަޙްމަދު ނާފިޒް</h3>
                            </div>
                            <div class="text-right">
                                <span class="text-2xl font-black" id="c2-votes">0</span>
                                <span class="text-xs opacity-50 block" id="c2-pct">0%</span>
                            </div>
                        </div>
                        <div class="progress-bar"><div id="c2-bar" class="progress-fill bg-purple-500" style="width: 0%"></div></div>
                    </div>

                    <div class="space-y-3">
                        <div class="flex justify-between items-end">
                            <div class="dv">
                                <span class="text-[10px] px-2 py-0.5 bg-green-100 text-green-600 rounded-md font-bold">ކެންޑިޑޭޓް 03</span>
                                <h3 class="text-lg font-bold">ޙަސަން އަޝްރަފް</h3>
                            </div>
                            <div class="text-right">
                                <span class="text-2xl font-black" id="c3-votes">0</span>
                                <span class="text-xs opacity-50 block" id="c3-pct">0%</span>
                            </div>
                        </div>
                        <div class="progress-bar"><div id="c3-bar" class="progress-fill bg-green-500" style="width: 0%"></div></div>
                    </div>
                </div>

                <button onclick="location.reload()" class="w-full glass p-4 text-xs font-bold opacity-60 hover:opacity-100">ސައިން އައުޓް</button>
            </div>

            <!-- Voter List -->
            <div class="lg:col-span-7 flex flex-col h-[750px]">
                <div class="glass p-6 flex flex-col h-full overflow-hidden">
                    <div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
                        <h2 class="text-2xl font-bold dv text-slate-700">ވޯޓަރުންގެ ލިސްޓު</h2>
                        <div class="relative w-full md:w-64">
                            <i class="fas fa-search absolute left-4 top-5 opacity-30"></i>
                            <input type="text" id="voter-search" placeholder="ހޯދާ..." class="search-input pl-12 text-sm">
                        </div>
                    </div>
                    <div class="flex-1 overflow-y-auto space-y-2 pr-2" id="voter-container"></div>
                    <div class="mt-4 pt-4 border-t border-black/5 flex justify-between items-center text-[10px] opacity-40">
                        <span id="voter-count-display">ޖުމްލަ 547 ވޯޓަރުން</span>
                        <span>ލޯކަލް ކައުންސިލް އިންތިޚާބު 2026</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast -->
    <div id="toast" class="fixed bottom-10 left-10 glass bg-white/90 px-6 py-4 transform translate-x-[-150%] transition-transform duration-500 font-bold text-sm z-[200]">
        <span>ވޯޓު ރެކޯޑު ކުރެވިއްޖެ!</span>
    </div>

    <script>
        // Data from PDF
        const rawVoters = [
            { id: 'AXXX312', name: 'Ibrahim Naseem', address: 'Aabaadhuge' },
            { id: 'AXXX447', name: 'Mohamed Solih', address: 'Aabaadhuge' },
            { id: 'AXXX131', name: 'Abdulla Naeem', address: 'Aahiya' },
            { id: 'AXXX337', name: 'Adam Amdah Abdulla', address: 'Aahiya' },
            { id: 'AXXX551', name: 'Ahmed Shan', address: 'Aahiya' },
            { id: 'AXXX552', name: 'Ali Wishaal', address: 'Aahiya' },
            { id: 'AXXX550', name: 'Mohamed Irufaan', address: 'Aahiya' },
            { id: 'AXXX325', name: 'Sofiyya Adam', address: 'Aahiya' },
            { id: 'AXXX476', name: 'Ahmed Rasheed', address: 'Aarifaa Manzil' },
            { id: 'AXXX484', name: 'Aishath Samna', address: 'Aarifaa Manzil' },
            { id: 'AXXX250', name: 'Ali Arif', address: 'Aarifaa Manzil' },
            { id: 'AXXX315', name: 'Arifa Adam', address: 'Aarifaa Manzil' },
            { id: 'AXXX478', name: 'Hassan Rasheed', address: 'Aarifaa Manzil' },
            { id: 'AXXX316', name: 'Hussain Rasheedh', address: 'Aarifaa Manzil' },
            { id: 'AXXX218', name: 'Aishath Zahira', address: 'Alimasge' },
            { id: 'AXXX243', name: 'Abdulla Azhar', address: 'Aman' },
            { id: 'AXXX231', name: 'Abida Ahmed', address: 'Aman' },
            { id: 'AXXX148', name: 'Ahmed Aksham', address: 'Aman' },
            { id: 'AXXX301', name: 'Aishath Amane', address: 'Aman' },
            { id: 'AXXX590', name: 'Aminath Asna Azuhar', address: 'Aman' }
        ];

        let voters = rawVoters.map(v => ({ ...v, votedFor: null }));
        // Resetting Poll Data to 0
        let publicPoll = { 1: 0, 2: 0, 3: 0 };

        function attemptLogin() {
            const user = document.getElementById('username').value;
            const pass = document.getElementById('password').value;

            if (user === 'admin' && pass === 'admin123') {
                document.getElementById('admin-lock').style.opacity = '0';
                setTimeout(() => {
                    document.getElementById('admin-lock').style.display = 'none';
                    document.getElementById('main-content').classList.remove('hidden-content');
                }, 500);
            } else {
                showToast("ކުށް ޔޫސަރނޭމް އެއް ނުވަތަ ޕާސްވޯޑެއް!");
            }
        }

        function castPublicVote(id) {
            publicPoll[id]++;
            updatePublicPollDisplay();
            showToast("ވޯޓު ބަލައިގަނެވިއްޖެ!");
        }

        function updatePublicPollDisplay() {
            const total = publicPoll[1] + publicPoll[2] + publicPoll[3];
            [1, 2, 3].forEach(id => {
                const pct = total > 0 ? ((publicPoll[id] / total) * 100).toFixed(1) : 0;
                document.getElementById(`pub-p-${id}`).innerText = pct + '%';
                document.getElementById(`pub-pb-${id}`).style.width = pct + '%';
            });
        }

        function renderVoters(filter = "") {
            const container = document.getElementById('voter-container');
            container.innerHTML = "";
            const filtered = voters.filter(v => v.name.toLowerCase().includes(filter.toLowerCase()));

            filtered.forEach(voter => {
                const row = document.createElement('div');
                row.className = "p-4 flex flex-col md:flex-row justify-between items-center gap-4 bg-white/30 rounded-2xl border border-white/40 mb-2";
                row.innerHTML = `
                    <div class="flex-1 dv">
                        <div class="font-bold text-sm text-slate-800">${voter.name}</div>
                        <div class="text-[10px] opacity-40">${voter.id} • ${voter.address}</div>
                    </div>
                    <div class="flex gap-1">
                        <button onclick="setVoterChoice('${voter.id}', 1)" class="glass-btn px-4 py-2 rounded-xl text-[10px] font-bold ${voter.votedFor === 1 ? 'active-01' : ''}">01</button>
                        <button onclick="setVoterChoice('${voter.id}', 2)" class="glass-btn px-4 py-2 rounded-xl text-[10px] font-bold ${voter.votedFor === 2 ? 'active-02' : ''}">02</button>
                        <button onclick="setVoterChoice('${voter.id}', 3)" class="glass-btn px-4 py-2 rounded-xl text-[10px] font-bold ${voter.votedFor === 3 ? 'active-03' : ''}">03</button>
                    </div>
                `;
                container.appendChild(row);
            });
        }

        function setVoterChoice(voterId, candId) {
            const voter = voters.find(v => v.id === voterId);
            voter.votedFor = voter.votedFor === candId ? null : candId;
            updateCalculations();
            renderVoters(document.getElementById('voter-search').value);
        }

        function updateCalculations() {
            const results = { 1: 0, 2: 0, 3: 0 };
            let total = 0;
            voters.forEach(v => { if(v.votedFor) { results[v.votedFor]++; total++; } });
            document.getElementById('stat-voted').innerText = total;
            [1,2,3].forEach(id => {
                const pct = total > 0 ? ((results[id]/total)*100).toFixed(1) : 0;
                document.getElementById(`c${id}-votes`).innerText = results[id];
                document.getElementById(`c${id}-pct`).innerText = pct + '%';
                document.getElementById(`c${id}-bar`).style.width = pct + '%';
            });
        }

        function showToast(msg) {
            const t = document.getElementById('toast');
            t.querySelector('span').innerText = msg;
            t.style.transform = "translateX(0)";
            setTimeout(() => { t.style.transform = "translateX(-150%)"; }, 2000);
        }

        document.getElementById('voter-search').addEventListener('input', e => renderVoters(e.target.value));

        window.onload = () => {
            renderVoters();
            updateCalculations();
            updatePublicPollDisplay();
        };
    </script>
</body>
</html>