{% extends 'base.html' %}

{% block content %}
<!-- Am adăugat clasa 'text-center' aici pentru a centra titlul -->
<div class="mb-4 text-center">
    <h2 class="fw-bold">Panou de Control</h2>
    <p class="text-muted">Privire de ansamblu asupra infrastructurii I.T.</p>
</div>

<div class="row g-4">
    
    <!-- Coloana 1: Sumar Inventar -->
    <div class="col-md-4">
        <div class="card shadow-sm border-primary">
            <div class="card-header bg-primary text-white fw-bold">
                ℹ️ Sumar & Echipamente Libere
            </div>
            <!-- Am adăugat înălțime fixă (max-height) și overflow-y pentru scroll -->
            <div class="card-body" style="max-height: 450px; overflow-y: auto;">
                <p class="mb-1">Total Calculatoare: <strong>{{ total_computers }}</strong></p>
                <p class="mb-1">Total Monitoare: <strong>{{ total_monitors }}</strong></p>
                <p class="mb-0">Total Periferice: <strong>{{ total_peripherals }}</strong></p>
                <hr>
                <h6 class="fw-bold text-danger mt-3">Calculatoare Neasignate:</h6>
                <ul class="list-unstyled mb-3">
                    {% for pc in unassigned_computers %}
                        <li>💻 {{ pc.equipment_code }} - <small>{{ pc.cpu }} / {{ pc.ram }}</small></li>
                    {% empty %}
                        <li><small class="text-muted">Toate calculatoarele sunt asignate.</small></li>
                    {% endfor %}
                </ul>
                
                <h6 class="fw-bold text-danger mt-3">Monitoare Neasignate:</h6>
                <ul class="list-unstyled">
                    {% for mon in unassigned_monitors %}
                        <li>🖥️ {{ mon.equipment_code }} - <small>{{ mon.screen_diagonal }}</small></li>
                    {% empty %}
                        <li><small class="text-muted">Toate monitoarele sunt asignate.</small></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <!-- Coloana 2: Acțiuni Executate (Istoric) -->
    <div class="col-md-4">
        <div class="card shadow-sm border-success">
            <div class="card-header bg-success text-white fw-bold">
                🔄 Ultimele Acțiuni
            </div>
            <!-- Scroll adăugat aici -->
            <div class="card-body p-0" style="max-height: 450px; overflow-y: auto;">
                <ul class="list-group list-group-flush">
                    {% for record in activity_log %}
                        <li class="list-group-item">
                            <small class="text-muted d-block">{{ record.history_date|date:"d.m.Y H:i" }}</small>
                            <strong>{{ record.history_user.username|default:"Sistem" }}</strong> a 
                            {% if record.history_type == '+' %}
                                <span class="text-success">adăugat</span>
                            {% elif record.history_type == '~' %}
                                <span class="text-warning text-dark">modificat</span>
                            {% elif record.history_type == '-' %}
                                <span class="text-danger">șters</span>
                            {% endif %}
                            <br>
                            <span class="text-dark fw-bold">
                                {{ record.equipment_code|default:record.name }}
                            </span>
                        </li>
                    {% empty %}
                        <li class="list-group-item text-muted text-center py-4">Nu există acțiuni recente.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <!-- Coloana 3: Mentenanțe Efectuate -->
    <div class="col-md-4">
        <div class="card shadow-sm border-warning">
            <div class="card-header bg-warning text-dark fw-bold">
                🛠️ Ultimele Mentenanțe
            </div>
            <!-- Scroll adăugat aici -->
            <div class="card-body p-0" style="max-height: 450px; overflow-y: auto;">
                <ul class="list-group list-group-flush">
                    {% for maint in recent_maintenance %}
                        <li class="list-group-item">
                            <small class="text-muted d-block">{{ maint.date|date:"d.m.Y" }} | Efectuat de: {{ maint.performed_by }}</small>
                            <strong>{{ maint.operation_type }}</strong>
                            <br>
                            <span class="text-dark small">
                                Pentru: 
                                {% if maint.computer %}💻 {{ maint.computer.equipment_code }}{% endif %}
                                {% if maint.monitor %}🖥️ {{ maint.monitor.equipment_code }}{% endif %}
                                {% if maint.peripheral %}🖨️ {{ maint.peripheral.equipment_code }}{% endif %}
                            </span>
                        </li>
                    {% empty %}
                        <li class="list-group-item text-muted text-center py-4">Nu există mentenanțe înregistrate.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

</div>
{% endblock %}