{% extends "base.html" %}
{% block title %}Resources — Official Election Links{% endblock %}

{% block content %}
<section class="page-header">
    <h1>Election Resources</h1>
    <p class="page-sub">Official links and platforms to help you participate in the 2026 General Election.</p>
</section>

<!-- Google Maps — Polling Station Finder -->
<section class="map-section glass" aria-label="Find your polling station">
    <h2>📍 Find Your Polling Station</h2>
    <p class="map-desc">Use Google Maps to search for your nearest Election Commission office or polling station.</p>
    <div class="map-search">
        <label for="map-query" class="sr-only">Search location</label>
        <input type="text" id="map-query" class="map-input" placeholder="Search: e.g. Polling station near Connaught Place, Delhi" aria-label="Search polling stations">
        <button id="map-search-btn" class="btn btn-primary btn-sm">Search</button>
    </div>
    <div id="map-container" class="map-container">
        <iframe id="google-map" width="100%" height="400" style="border:0; border-radius:12px;"
                loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
                src="" title="Google Maps — Polling Station Search" aria-label="Google Maps embed">
        </iframe>
        <p id="map-fallback" class="map-fallback" hidden>
            Google Maps requires an API key. <a href="https://www.nvsp.in" target="_blank" rel="noopener">Use NVSP to find your polling booth →</a>
        </p>
    </div>
</section>

<div class="resources-grid">
    <div class="resource-card glass">
        <div class="rc-icon">🏛️</div>
        <h3>Official Election Bodies</h3>
        <ul>
            <li><a href="https://eci.gov.in" target="_blank" rel="noopener">Election Commission of India (ECI)</a></li>
            <li><a href="https://www.nvsp.in" target="_blank" rel="noopener">NVSP — Voter Registration Portal</a></li>
            <li><a href="https://voterportal.eci.gov.in" target="_blank" rel="noopener">Voter Helpline Portal & App</a></li>
            <li><a href="https://results.eci.gov.in" target="_blank" rel="noopener">ECI Results Portal</a></li>
        </ul>
    </div>

    <div class="resource-card glass">
        <div class="rc-icon">🔍</div>
        <h3>Candidate & Party Research</h3>
        <ul>
            <li><a href="https://www.myneta.info" target="_blank" rel="noopener">MyNeta — Candidate Criminal & Financial Records</a></li>
            <li><a href="https://affidavit.eci.gov.in" target="_blank" rel="noopener">Candidate Affidavits (ECI)</a></li>
            <li><a href="https://adrindia.org" target="_blank" rel="noopener">ADR — Association for Democratic Reforms</a></li>
            <li><a href="https://www.indiavotes.com" target="_blank" rel="noopener">IndiaVotes — Election Analysis</a></li>
        </ul>
    </div>

    <div class="resource-card glass">
        <div class="rc-icon">📱</div>
        <h3>Voter Tools</h3>
        <ul>
            <li><a href="https://www.nvsp.in" target="_blank" rel="noopener">Check Your Name on Electoral Roll</a></li>
            <li><a href="https://voterportal.eci.gov.in" target="_blank" rel="noopener">Find Your Polling Booth</a></li>
            <li><a href="tel:1950">Voter Helpline — ☎️ 1950</a></li>
            <li><a href="https://play.google.com/store/apps/details?id=com.eci.citizen" target="_blank" rel="noopener">Voter Helpline App (Android)</a></li>
        </ul>
    </div>

    <div class="resource-card glass">
        <div class="rc-icon">⚖️</div>
        <h3>Laws & Rights</h3>
        <ul>
            <li><a href="https://legislative.gov.in/constitution-of-india" target="_blank" rel="noopener">Constitution of India — Electoral Provisions</a></li>
            <li><a href="https://eci.gov.in/mcc/" target="_blank" rel="noopener">Model Code of Conduct</a></li>
            <li><a href="https://eci.gov.in/voter-rights/" target="_blank" rel="noopener">Your Rights as a Voter</a></li>
            <li><a href="https://eci.gov.in/pwd-voters/" target="_blank" rel="noopener">Facilities for PwD Voters</a></li>
        </ul>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mapIframe = document.getElementById('google-map');
    const fallback = document.getElementById('map-fallback');
    const searchBtn = document.getElementById('map-search-btn');
    const queryInput = document.getElementById('map-query');

    // Fetch Google config to check Maps availability
    fetch('/api/google/config')
        .then(r => r.json())
        .then(config => {
            if (config.maps_available && config.maps_key) {
                // Load default map
                loadMap(config.maps_key, 'Election Commission Office India');

                searchBtn.addEventListener('click', () => {
                    const q = queryInput.value.trim();
                    if (q) loadMap(config.maps_key, q);
                });

                queryInput.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        const q = queryInput.value.trim();
                        if (q) loadMap(config.maps_key, q);
                    }
                });
            } else {
                // No API key — show fallback
                mapIframe.hidden = true;
                fallback.hidden = false;
            }
        })
        .catch(() => {
            mapIframe.hidden = true;
            fallback.hidden = false;
        });

    function loadMap(apiKey, query) {
        mapIframe.src = 'https://www.google.com/maps/embed/v1/search?key='
            + encodeURIComponent(apiKey)
            + '&q=' + encodeURIComponent(query)
            + '&zoom=12';
        mapIframe.hidden = false;
        fallback.hidden = true;
    }
});
</script>
{% endblock %}