{% extends 'superuser/base_super_user.html' %}

{% block title %}Live Monitoring | SaaS Command{% endblock %}

{% block page_title %}Terminal Monitoring Centre{% endblock %}
{% block page_subtitle %}Real-time hardware status and biometric asset tracking.{% endblock %}

{% block content %}
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px;">
    <!-- Active Devices Card -->
    <div class="card" style="padding: 25px; border-bottom: 4px solid #6366f1;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="width: 50px; height: 50px; background: rgba(99, 102, 241, 0.08); color: #6366f1; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;">
                <i class="fas fa-microchip"></i>
            </div>
            <div>
                <span style="font-size: 0.65rem; color: #94a3b8; font-weight: 850; text-transform: uppercase;">ACTIVE TERMINALS</span>
                <div style="font-size: 1.6rem; font-weight: 950; color: #0f172a;">{{ active_count }}</div>
            </div>
        </div>
    </div>
    
    <div class="card" style="padding: 25px; border-bottom: 4px solid #f59e0b;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="width: 50px; height: 50px; background: rgba(245, 158, 11, 0.08); color: #f59e0b; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;">
                <i class="fas fa-trash-alt"></i>
            </div>
            <div>
                <span style="font-size: 0.65rem; color: #94a3b8; font-weight: 850; text-transform: uppercase;">TERMINATED</span>
                <div style="font-size: 1.6rem; font-weight: 950; color: #0f172a;">{{ terminated_count }}</div>
            </div>
        </div>
    </div>

    <div class="card" style="padding: 25px; border-bottom: 4px solid #10b981;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="width: 50px; height: 50px; background: rgba(16, 185, 129, 0.08); color: #10b981; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;">
                <i class="fas fa-link"></i>
            </div>
            <div>
                <span style="font-size: 0.65rem; color: #94a3b8; font-weight: 850; text-transform: uppercase;">TOTAL DEVICES</span>
                <div style="font-size: 1.6rem; font-weight: 950; color: #0f172a;">{{ total_devices }}</div>
            </div>
        </div>
    </div>

    <div class="card" style="padding: 25px; border-bottom: 4px solid #ef4444;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="width: 50px; height: 50px; background: rgba(239, 68, 68, 0.08); color: #ef4444; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;">
                <i class="fas fa-unlink"></i>
            </div>
            <div>
                <span style="font-size: 0.65rem; color: #94a3b8; font-weight: 850; text-transform: uppercase;">UNASSIGNED</span>
                <div style="font-size: 1.6rem; font-weight: 950; color: #0f172a;">{{ unassigned_count }}</div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-bottom: 30px; padding: 25px 35px; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px;">
    <div style="display: flex; gap: 15px;">
        <a href="{% url 'super_monitoring' %}?filter=active" class="btn {% if view_filter == 'active' %}btn-primary{% else %}btn-light{% endif %}" style="height: 45px; border-radius: 12px; padding: 0 25px; font-weight: 950; font-size: 0.8rem; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-check-circle"></i> ACTIVE DEVICES
        </a>
        <a href="{% url 'super_monitoring' %}?filter=terminated" class="btn {% if view_filter == 'terminated' %}btn-danger{% else %}btn-light{% endif %}" style="height: 45px; border-radius: 12px; padding: 0 25px; font-weight: 950; font-size: 0.8rem; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-trash-alt"></i> TERMINATED LIST
        </a>
    </div>

    <form method="get" style="display: flex; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 15px; padding: 5px 20px; width: 450px;">
        <i class="fas fa-search" style="color: #94a3b8;"></i>
        <input type="hidden" name="filter" value="{{ view_filter }}">
        <input type="text" name="q" value="{{ query|default:'' }}" placeholder="Search Serial # / Name..." style="border: none; background: none; font-size: 0.9rem; padding: 12px 15px; outline: none; flex: 1; font-weight: 750; color: #0f172a;">
        {% if query %}
            <a href="{% url 'super_monitoring' %}?filter={{ view_filter }}" style="color: #ef4444; margin-right: 10px;"><i class="fas fa-times-circle"></i></a>
        {% endif %}
        <button type="submit" class="btn" style="height: 40px; padding: 0 20px; font-size: 0.8rem;">SEARCH</button>
    </form>
</div>

<div class="card" style="padding: 0; overflow: hidden; border-radius: 28px;">
    <table>
        <thead style="background: #f8fafc;">
            <tr>
                <th style="padding-left: 35px;">Hardware Profile</th>
                <th>Status</th>
                <th>Metrics</th>
                <th>Asset Assignment</th>
                <th style="text-align: right; padding-right: 35px;">Control Action</th>
            </tr>
        </thead>
        <tbody>
            {% for stat in device_stats %}
            <tr style="border-bottom: 1px solid #f1f5f9; transition: background 0.3s;" onmouseover="this.style.background='#f8fafc';" onmouseout="this.style.background='transparent';">
                <td style="padding-left: 35px;">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div style="width: 45px; height: 45px; border-radius: 12px; background: rgba(15, 23, 42, 0.03); display: flex; align-items: center; justify-content: center; color: #475569; border: 1px solid #e2e8f0;">
                            <i class="fas fa-hdd"></i>
                        </div>
                        <div>
                            <div style="font-weight: 900; color: #0f172a; font-size: 0.95rem;">{{ stat.device.serial_number }}</div>
                            <div style="font-size: 0.7rem; color: #64748b; font-weight: 800;">{{ stat.device.name }}</div>
                        </div>
                    </div>
                </td>
                <td>
                    {% if stat.device.is_terminated %}
                        <span class="badge badge-danger" style="padding: 6px 12px; font-size: 0.62rem; font-weight: 950; background: #fee2e2; color: #ef4444;">TERMINATED</span>
                    {% elif stat.device.is_authorized %}
                        <span class="badge badge-success" style="padding: 6px 12px; font-size: 0.62rem; font-weight: 950; background: #dcfce7; color: #10b981;">AUTHORIZED</span>
                    {% else %}
                        <span style="font-size: 0.62rem; background: #f1f5f9; color: #64748b; padding: 6px 12px; border-radius: 50px; font-weight: 950;">WAITING</span>
                    {% endif %}
                </td>
                <td>
                    <div style="display: flex; gap: 10px;">
                        <div title="Total Logs" style="width: 32px; height: 32px; border-radius: 8px; background: rgba(99, 102, 241, 0.1); color: #6366f1; display: flex; align-items: center; justify-content: center; position: relative;">
                            <i class="fas fa-fingerprint" style="font-size: 0.8rem;"></i>
                            <span style="position: absolute; top: -8px; right: -8px; background: #6366f1; color: white; font-size: 0.55rem; padding: 2px 5px; border-radius: 10px; font-weight: 900;">{{ stat.logs_count }}</span>
                        </div>
                        <div title="Enrolled Persons" style="width: 32px; height: 32px; border-radius: 8px; background: rgba(16, 185, 129, 0.1); color: #10b981; display: flex; align-items: center; justify-content: center; position: relative;">
                            <i class="fas fa-users" style="font-size: 0.8rem;"></i>
                            <span style="position: absolute; top: -8px; right: -8px; background: #10b981; color: white; font-size: 0.55rem; padding: 2px 5px; border-radius: 10px; font-weight: 900;">{{ stat.students_count }}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div style="font-weight: 900; color: #475569; font-size: 0.82rem; display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-university" style="color: #94a3b8;"></i> {{ stat.school_name|upper }}
                    </div>
                </td>
                <td style="text-align: right; padding-right: 35px;">
                    <div style="display: flex; justify-content: flex-end; gap: 8px;">
                        <a href="{% url 'super_device_edit' stat.device.id %}" class="btn" style="width: 36px; height: 36px; padding: 0; background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; border-radius: 10px; display: flex; align-items: center; justify-content: center;" title="Edit Hardware">
                            <i class="fas fa-edit" style="font-size: 0.8rem;"></i>
                        </a>
                        
                        {% if stat.device.id %}
                            <form action="{% url 'super_device_terminate' stat.device.id %}" method="post" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn" style="width: 36px; height: 36px; padding: 0; background: #fffbeb; border: 1px solid #fde68a; color: #d97706; border-radius: 10px; display: flex; align-items: center; justify-content: center;" title="{% if stat.device.is_terminated %}Reactivate{% else %}Terminate{% endif %}">
                                    <i class="fas {% if stat.device.is_terminated %}fa-undo{% else %}fa-power-off{% endif %}" style="font-size: 0.8rem;"></i>
                                </button>
                            </form>
                        {% endif %}

                        <form action="{% url 'super_device_delete' stat.device.id %}" method="post" style="display: inline;" onsubmit="return confirm('DANGER: This will PERMANENTLY DELETE this device and its configuration. Continue?')">
                            {% csrf_token %}
                            <button type="submit" class="btn" style="width: 36px; height: 36px; padding: 0; background: #fff1f2; border: 1px solid #fecdd3; color: #e11d48; border-radius: 10px; display: flex; align-items: center; justify-content: center;" title="Delete Permanently">
                                <i class="fas fa-trash-alt" style="font-size: 0.8rem;"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" style="text-align: center; padding: 100px; color: #94a3b8;">
                    <i class="fas fa-satellite-dish" style="font-size: 4rem; opacity: 0.1; display: block; margin-bottom: 20px;"></i>
                    No biometric terminals found in this category.
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<style>
    @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
    .badge-live { animation: pulse 2s infinite; }
</style>
{% endblock %}