{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Fișă Tehnică: {{ computer.equipment_code }}</h2>
    <a href="{% url 'equipment:equipment_list' %}" class="btn btn-outline-secondary">⬅️ Înapoi la Inventar</a>
</div>

<div class="row g-4">
    <!-- Left Column: Current Specs -->
    <div class="col-md-5">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-dark text-white fw-bold">Specificații Curente</div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><strong>OEM:</strong> {{ computer.oem_name|default:"Sistem Asamblat" }}</li>
                <li class="list-group-item"><strong>Placă de bază:</strong> {{ computer.motherboard }}</li>
                <li class="list-group-item"><strong>CPU:</strong> {{ computer.cpu }}</li>
                <li class="list-group-item"><strong>RAM:</strong> {{ computer.ram }}</li>
                <li class="list-group-item"><strong>Stocare:</strong> {{ computer.storage }}</li>
                <li class="list-group-item"><strong>OS:</strong> {{ computer.os_license }}</li>
                <li class="list-group-item"><strong>MAC:</strong> {{ computer.mac_address }}</li>
                <li class="list-group-item"><strong>Utilizator Curent:</strong> {{ computer.assigned_to.name|default:"Neasignat" }}</li>
            </ul>
        </div>
    </div>

    <!-- Right Column: History & Maintenance -->
    <div class="col-md-7">
        
        <!-- Hardware History -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white fw-bold">Istoric Modificări Hardware</div>
            <div class="card-body p-0">
                <table class="table table-sm table-striped mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Dată</th>
                            <th>Componentă</th>
                            <th>Valoare Veche</th>
                            <th>Valoare Nouă</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for change in hardware_changes %}
                        <tr>
                            <td>{{ change.date|date:"d.m.Y H:i" }}</td>
                            <td><strong>{{ change.field }}</strong></td>
                            <td class="text-danger text-decoration-line-through">{{ change.old|default:"-" }}</td>
                            <td class="text-success">{{ change.new|default:"-" }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="4" class="text-center py-3">Nu există modificări hardware înregistrate.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Maintenance Logs -->
        <div class="card shadow-sm">
            <div class="card-header bg-warning text-dark fw-bold d-flex justify-content-between align-items-center">
                <span>Jurnal Mentenanță</span>
                <!-- Buton care deschide modalul HTMX -->
                {% if user.is_staff %}
                    <button class="btn btn-sm btn-dark" 
                            hx-get="{% url 'equipment:computer_maintenance_create' computer.id %}" 
                            hx-target="#modal-content-area" 
                            data-bs-toggle="modal" 
                            data-bs-target="#form-modal">
                        + Adaugă Mentenanță
                    </button>
                {% endif %}
            </div>
            <div class="card-body p-0">
                <table class="table table-sm table-striped mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Dată</th>
                            <th>Tip Operațiune</th>
                            <th>Efectuat de</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in maintenance_logs %}
                        <tr>
                            <td>{{ log.date|date:"d.m.Y" }}</td>
                            <td>{{ log.operation_type }}<br><small class="text-muted">{{ log.description }}</small></td>
                            <td>{{ log.performed_by }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="3" class="text-center py-3">Nu există intervenții de mentenanță.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <h5 class="fw-bold mt-4 mb-3 border-bottom pb-2">Istoric Posesie (Custodie)</h5>
        <ul class="list-group mb-4 shadow-sm">
            {% for record in ownership_history %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        <strong>👤 {{ record.owner }}</strong>
                    </div>
                    <div class="text-muted small">
                        {{ record.start_date|date:"d.m.Y" }} 
                        <span class="mx-1">→</span> 
                        {% if record.end_date %}
                            {{ record.end_date|date:"d.m.Y" }}
                        {% else %}
                            <span class="badge bg-success">Prezent</span>
                        {% endif %}
                    </div>
                </li>
            {% empty %}
                <li class="list-group-item text-muted text-center">Fără istoric de posesie.</li>
            {% endfor %}
        </ul>
</div>
<div class="modal fade" id="form-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content-area">
            <!-- Conținutul se va încărca dinamic -->
        </div>
    </div>
</div>
{% endblock %}