{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Procese Verbale (Predare-Primire)</h2>
    {% if user.is_staff %}
        <button class="btn btn-success fw-bold" 
                hx-get="{% url 'equipment:handover_create' %}" 
                hx-target="#modal-content-area" 
                data-bs-toggle="modal" 
                data-bs-target="#form-modal">
            + Adaugă Proces Verbal
        </button>
    {% endif %}
</div>

<div class="card shadow-sm">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-dark">
                <tr>
                    <th>Nr. / Dată</th>
                    <th>Predat de</th>
                    <th>Primit de</th>
                    <th>Echipamente transferate</th>
                    <th>Document Scanat</th>
                    <th class="text-center">Acțiuni</th>
                </tr>
            </thead>
            <tbody>
                {% for protocol in protocols %}
                <tr>
                    <td class="align-middle fw-bold">Nr. {{ protocol.document_number }}<br><small class="text-muted">{{ protocol.date|date:"d.m.Y" }}</small></td>
                    <td class="align-middle text-danger">{{ protocol.previous_holder.name|default:"-" }}</td>
                    <td class="align-middle text-success">{{ protocol.new_holder.name|default:"-" }}</td>
                    <td class="align-middle">
                        <small>
                            {% for pc in protocol.computers.all %}💻 {{ pc.equipment_code }}<br>{% endfor %}
                            {% for mon in protocol.monitors.all %}🖥️ {{ mon.equipment_code }}<br>{% endfor %}
                            {% for peri in protocol.peripherals.all %}🖨️ {{ peri.equipment_code }}<br>{% endfor %}
                        </small>
                    </td>
                    <td class="align-middle text-center">
                        {% if protocol.scanned_document %}
                            <a href="{{ protocol.scanned_document.url }}" target="_blank" class="btn btn-sm btn-outline-danger">📥 Vezi PDF</a>
                        {% else %}
                            <span class="text-muted small">Fără document</span>
                        {% endif %}
                    </td>
                    <td class="align-middle text-center">
                        <!-- Butonul nou pentru Generare PDF -->
                        <a href="{% url 'equipment:handover_pdf' protocol.id %}" 
                           class="btn btn-sm btn-outline-primary me-1" 
                           target="_blank" 
                           title="Descarcă Procesul Verbal în format PDF">
                            📄 PDF
                        </a>

                        <!-- Butonul existent de Editare -->
                        <button class="btn btn-sm btn-outline-secondary" 
                                hx-get="{% url 'equipment:handover_edit' protocol.id %}" 
                                hx-target="#modal-content-area" 
                                data-bs-toggle="modal" 
                                data-bs-target="#form-modal">
                            ✏️ Editează
                        </button>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">Nu există procese verbale înregistrate.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Container Modal -->
<div class="modal fade" id="form-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="modal-content-area">
            <!-- Formularul se va încărca aici prin HTMX -->
        </div>
    </div>
</div>
{% endblock %}