{% extends 'school/base_school.html' %}

{% block title %}Dashboard | STD Lab{% endblock %}

{% block page_title %}Today's Overview{% endblock %}

{% block content %}
<style>
    .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 35px; }
    .stat-card-compact { 
        background: #fff; padding: 25px; border-radius: 0; border: 1px solid #f1f5f9; 
        display: flex; align-items: center; gap: 20px;
        transition: 0.3s;
    }
    .stat-card-compact:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
    .stat-card-compact .icon-wrap { 
        width: 54px; height: 54px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    }
    @keyframes pulse {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(1.2); }
        100% { opacity: 1; transform: scale(1); }
    }
</style>

<!-- Premium Localization & Sync Engine -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 35px;">
    <!-- Time Sync Engine Card -->
    {% if school.is_time_test_enabled %}
    <div style="background: #fff; padding: 25px; border: 2px solid {% if is_time_test_active %}#ef4444{% else %}#0f172a{% endif %}; box-shadow: 8px 8px 0px {% if is_time_test_active %}#ef4444{% else %}#0f172a{% endif %};">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="margin: 0; font-weight: 950; color: #1e293b; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; display: flex; align-items: center; gap: 8px;">
                <i class="fas fa-microchip"></i> <span>Time Sync Engine</span>
            </h3>
            <a href="{% url 'school_toggle_test_mode' %}" style="font-size: 0.62rem; font-weight: 950; color: {% if is_time_test_active %}#ef4444{% else %}#10b981{% endif %}; text-decoration: none; text-transform: uppercase; border: 1px solid currentColor; padding: 2px 6px;">
                {% if is_time_test_active %}DEACTIVATE TEST{% else %}ACTIVATE TEST{% endif %}
            </a>
        </div>
        
        <div style="cursor: ns-resize; user-select: none;" id="scroll-clock-area" title="Scroll mouse wheel here to adjust time">
            <div id="sim-clock" style="font-size: 3.2rem; font-weight: 950; color: {% if is_time_test_active %}#ef4444{% else %}#0f172a{% endif %}; letter-spacing: -2px; line-height: 1;">
                {{ current_system_time|date:"h:i:s A" }}
            </div>
        </div>
        
        <div style="margin-top: 10px; display: flex; align-items: center; gap: 15px;">
            <div style="font-size: 0.85rem; font-weight: 800; color: #64748b;">{{ current_system_time|date:"l, d M Y" }}</div>
            {% if is_time_test_active %}
            <input type="datetime-local" id="target-time-picker" 
                   value="{{ current_system_time|date:'Y-m-d' }}T{{ current_system_time|date:'H:i' }}"
                   style="border: 1px solid #000; font-weight: 800; font-size: 0.7rem; padding: 2px 5px;"
                   onchange="syncTime(this.value)">
            {% endif %}
        </div>
    </div>
    {% else %}
    <!-- Simplified Clock for Non-Test Mode -->
    <div style="background: #fff; padding: 25px; border: 2px solid #0f172a; box-shadow: 8px 8px 0px #0f172a;">
        <h3 style="margin: 0; font-weight: 950; color: #1e293b; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; margin-bottom: 15px;">
            <i class="fas fa-clock"></i> <span>System Time</span>
        </h3>
        <div id="sim-clock" style="font-size: 3.2rem; font-weight: 950; color: #0f172a; letter-spacing: -2px; line-height: 1;">
            {{ current_system_time|date:"h:i:s A" }}
        </div>
        <div style="margin-top: 10px; font-size: 0.85rem; font-weight: 800; color: #64748b;">
            {{ current_system_time|date:"l, d M Y" }}
        </div>
    </div>
    {% endif %}

    <!-- Localization & Heartbeat Card -->
    <div style="background: #fff; padding: 25px; border: 2px solid #0f172a; box-shadow: 8px 8px 0px #0f172a;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="margin: 0; font-weight: 950; color: #1e293b; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; display: flex; align-items: center; gap: 8px;">
                <i class="fas fa-satellite-dish"></i> <span>Global Localization</span>
            </h3>
            <div id="sync-heartbeat" style="display: flex; align-items: center; gap: 6px; font-size: 0.6rem; font-weight: 950; color: #10b981; text-transform: uppercase;">
                <span style="width: 8px; height: 8px; background: #10b981; border-radius: 50%; display: inline-block; animation: pulse 1.5s infinite;"></span>
                LIVE SYNC
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            <div>
                <label style="display: block; font-size: 0.6rem; font-weight: 900; color: #94a3b8; text-transform: uppercase; margin-bottom: 5px;">Detected District</label>
                <div style="font-size: 1.1rem; font-weight: 950; color: #0f172a; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-map-marker-alt" style="color: #ef4444;"></i>
                    <span id="loc-display">{{ school.location_name|default:"Detecting..." }}</span>
                </div>
            </div>
            <div>
                <label style="display: block; font-size: 0.6rem; font-weight: 900; color: #94a3b8; text-transform: uppercase; margin-bottom: 5px;">Active Timezone</label>
                <div style="font-size: 0.8rem; font-weight: 800; color: #475569; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ school.timezone_name }}</div>
            </div>
        </div>

        <div style="margin-top: 15px; border-top: 1px dashed #e2e8f0; padding-top: 15px;">
            <button onclick="detectLocation()" id="loc-btn" style="width: 100%; padding: 10px; background: #0f172a; color: #fff; border: none; font-weight: 950; font-size: 0.7rem; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;">
                <i class="fas fa-crosshairs"></i> RE-SYNC CURRENT LOCATION
            </button>
        </div>
    </div>
</div>

<div class="stats-row">
    <div class="stat-card-compact">
        <div class="icon-wrap" style="background: rgba(16, 185, 129, 0.1); color: #10b981;"><i class="fas fa-user-graduate"></i></div>
        <div>
            <h3 style="font-size: 1.4rem; font-weight: 950; color: #0f172a;">{{ student_count }}</h3>
            <p style="font-size: 0.65rem; font-weight: 900; color: #94a3b8; text-transform: uppercase;">STUDENTS</p>
        </div>
    </div>
    <div class="stat-card-compact">
        <div class="icon-wrap" style="background: rgba(16, 185, 129, 0.1); color: #10b981;"><i class="fas fa-clock"></i></div>
        <div>
            <h3 style="font-size: 1.4rem; font-weight: 950; color: #0f172a;">{{ logs.count }}</h3>
            <p style="font-size: 0.65rem; font-weight: 900; color: #94a3b8; text-transform: uppercase;">LOGS TODAY</p>
        </div>
    </div>
    <div class="stat-card-compact">
        <div class="icon-wrap" style="background: rgba(239, 68, 68, 0.1); color: #ef4444;"><i class="fas fa-wifi"></i></div>
        <div>
            <h3 style="font-size: 1.4rem; font-weight: 950; color: #0f172a;">{{ device_count }}</h3>
            <p style="font-size: 0.65rem; font-weight: 900; color: #94a3b8; text-transform: uppercase;">DEVICES</p>
        </div>
    </div>
    <div class="stat-card-compact">
        <div class="icon-wrap" style="background: rgba(16, 185, 129, 0.1); color: #10b981;"><i class="fas fa-school"></i></div>
        <div>
            <h3 style="font-size: 1.4rem; font-weight: 950; color: #0f172a;">{{ school.classes.count }}</h3>
            <p style="font-size: 0.65rem; font-weight: 900; color: #94a3b8; text-transform: uppercase;">CLASSES</p>
        </div>
    </div>
</div>

<div class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 style="font-size: 1.1rem; font-weight: 700;">Recent Attendance Activity</h3>
        <span style="background-color: rgba(16, 185, 129, 0.1); color: #059669; padding: 4px 12px; border-radius: 0; font-size: 0.7rem; font-weight: 700;">LIVE OVERVIEW</span>
    </div>
    <div style="overflow-x: auto;">
        <table style="margin-top: 0;">
            <thead>
                <tr><th>Student</th><th>Roll</th><th>Class</th><th>Time</th></tr>
            </thead>
            <tbody>
                {% for log in logs|slice:":10" %}
                <tr>
                    <td><div style="font-weight: 700;">{{ log.student.name }}</div><div style="font-size: 0.7rem; color: #10b981; font-weight: 700;">ID: {{ log.student.pin }}</div></td>
                    <td><span style="color: #64748b; font-weight: 700; font-size: 0.8rem;">{{ log.student.roll }}</span></td>
                    <td><span style="color: var(--accent-green); font-weight: 700; font-size: 0.8rem;">{{ log.student.student_class.name }}</span></td>
                    <td style="color: var(--text-muted); font-size: 0.85rem;">{{ log.timestamp|date:"h:i A" }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="4" style="text-align: center; padding: 40px; color: var(--text-muted);">No records found for today.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Password Modal -->
<div id="passModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px);">
    <div style="background: #fff; border: 2px solid #000; padding: 40px; width: 400px; box-shadow: 15px 15px 0px #000;">
        <h2 style="font-weight: 950; text-transform: uppercase; margin-bottom: 10px; font-size: 1.3rem;">Set New Password</h2>
        <form id="passForm">
            <div style="margin-bottom: 20px;">
                <label style="display: block; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; color: #94a3b8; margin-bottom: 8px;">New Secure Password</label>
                <input type="password" id="new_pass" required style="width: 100%; padding: 12px; border: 2px solid #000; font-weight: 800; outline: none;">
            </div>
            <div style="display: flex; gap: 15px;">
                <button type="button" onclick="updatePassword()" style="flex: 1; background: #10b981; color: #fff; border: 2px solid #000; padding: 15px; font-weight: 950; text-transform: uppercase;">Update Now</button>
                <button type="button" onclick="document.getElementById('passModal').style.display='none'" style="flex: 0.5; background: #fff; color: #000; border: 2px solid #000; padding: 15px; font-weight: 950; text-transform: uppercase;">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
    let scrollTimeout;
    const scrollClock = document.getElementById('scroll-clock-area');
    if(scrollClock) {
        scrollClock.addEventListener('wheel', function(e) {
            e.preventDefault();
            {% if not is_time_test_active %} alert("Please activate Test Mode first."); return; {% endif %}
            const direction = e.deltaY < 0 ? 60 : -60;
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(() => { executeAdjust({ 'seconds': direction }); }, 150);
        });
    }

    function syncTime(newVal) {
        if (!newVal) return;
        {% if not is_time_test_active %} alert("Please activate Test Mode first."); return; {% endif %}
        executeAdjust({ 'timestamp': newVal });
    }

    function executeAdjust(params) {
        const formData = new FormData();
        Object.keys(params).forEach(key => formData.append(key, params[key]));
        fetch("{% url 'school_update_test_time' %}", {
            method: 'POST', body: formData, headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        }).then(r => r.json()).then(data => { if(data.status === 'ok') window.location.reload(); });
    }

    const serverStart = new Date("{{ current_system_time|date:'Y-m-d H:i:s' }}").getTime();
    const localStart = Date.now();
    setInterval(() => {
        const drift = Date.now() - localStart;
        const currentTs = serverStart + drift;
        const d = new Date(currentTs);
        document.getElementById('sim-clock').innerText = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true });
    }, 1000);

    function detectLocation() {
        if (!navigator.geolocation) { alert("Geolocation not supported"); return; }
        const btn = document.getElementById('loc-btn');
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> SYNCING...';
        navigator.geolocation.getCurrentPosition(position => {
            const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${position.coords.latitude}&lon=${position.coords.longitude}&zoom=10`)
                .then(r => r.json()).then(data => {
                    const loc = data.address.state_district || data.address.county || data.address.state || data.address.city || "Dhaka";
                    const fd = new FormData(); fd.append('location', loc); fd.append('timezone', tz);
                    fetch("{% url 'api_sync_location' %}", { method: 'POST', body: fd, headers: { 'X-CSRFToken': '{{ csrf_token }}' } })
                    .then(r => r.json()).then(() => window.location.reload());
                });
        }, () => { alert("Location access denied."); btn.innerHTML = '<i class="fas fa-crosshairs"></i> RE-SYNC CURRENT LOCATION'; });
    }

    function updatePassword() {
        const pass = document.getElementById('new_pass').value;
        const fd = new FormData(); fd.append('password', pass);
        fetch("{% url 'api_update_school_password' %}", { method: 'POST', body: fd, headers: { 'X-CSRFToken': '{{ csrf_token }}' } })
        .then(r => r.json()).then(data => { if(data.status === 'ok') { alert('Success!'); location.reload(); } });
    }
</script>

{% if is_subscription_expired %}
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.95); z-index: 9999; display: flex; justify-content: center; align-items: center; color: #fff;">
    <div style="background: #fff; color: #000; padding: 50px; text-align: center; border: 2px solid #ef4444; box-shadow: 8px 8px 0px #ef4444;">
        <i class="fas fa-exclamation-triangle" style="font-size: 3rem; color: #ef4444; margin-bottom: 20px;"></i>
        <h2>Subscription Expired</h2>
        <p>Please contact support to renew.</p>
        <a href="{% url 'logout' %}" style="display: inline-block; padding: 12px 30px; background: #0f172a; color: #fff; text-decoration: none;">Logout</a>
    </div>
</div>
{% endif %}

{% if pending_announcements and not is_subscription_expired %}
<div id="announcementModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 5000; display: flex; justify-content: center; align-items: center;">
    <div style="background: #fff; border: 2px solid #1e293b; width: 600px; box-shadow: 8px 8px 0px #1e293b;">
        <div style="background: #1e293b; color: #fff; padding: 20px; font-weight: 900;">SYSTEM ANNOUNCEMENT</div>
        <div id="annBody" style="padding: 30px;">{% for ann in pending_announcements %}{{ ann.message|linebreaksbr }}{% endfor %}</div>
        <div style="padding: 20px; text-align: right;"><button onclick="location.reload()" style="background: #10b981; color: #fff; padding: 12px 25px; border: none; cursor: pointer;">OK</button></div>
    </div>
</div>
{% endif %}
{% endblock %}