{% extends "base.html" %}

{% block title %}Transaction #{{ transaction.id }} - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Transaction #{{ transaction.id }}</h1>
    <span class="status-badge status-{{ transaction.status }}">{{ transaction.status|capitalize }}</span>
</div>

<div class="two-col">
    <div>
        <div class="section-header">Transaction Details</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Type</span>
                <span class="detail-value {% if transaction.transaction_type == 'check_out' %}transaction-type-checkout{% else %}transaction-type-checkin{% endif %}">
                    {{ 'CHECK OUT' if transaction.transaction_type == 'check_out' else 'CHECK IN' }}
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Status</span>
                <span class="detail-value">
                    <span class="status-badge status-{{ transaction.status }}">{{ transaction.status|capitalize }}</span>
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Created</span>
                <span class="detail-value">{{ transaction.created_at[:16] if transaction.created_at else '-' }}</span>
            </div>
            {% if transaction.checkout_date %}
            <div class="detail-row">
                <span class="detail-label">Checkout Date</span>
                <span class="detail-value">{{ transaction.checkout_date[:10] }}</span>
            </div>
            {% endif %}
            {% if transaction.return_date %}
            <div class="detail-row">
                <span class="detail-label">Return Date</span>
                <span class="detail-value">{{ transaction.return_date[:10] }}</span>
            </div>
            {% endif %}
            {% if transaction.condition_on_return %}
            <div class="detail-row">
                <span class="detail-label">Condition</span>
                <span class="detail-value">{{ transaction.condition_on_return|title }}</span>
            </div>
            {% endif %}
            {% if transaction.notes %}
            <div class="detail-row">
                <span class="detail-label">Notes</span>
                <span class="detail-value">{{ transaction.notes }}</span>
            </div>
            {% endif %}
        </div>
    </div>

    <div>
        <div class="section-header">Device</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Asset Tag</span>
                <span class="detail-value">
                    <a href="{{ url_for('device_detail', device_id=transaction.device_id) }}">{{ transaction.asset_tag }}</a>
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Make/Model</span>
                <span class="detail-value">{{ transaction.make }} {{ transaction.model }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Serial</span>
                <span class="detail-value">{{ transaction.serial_number }}</span>
            </div>
        </div>

        <div class="section-header">Person</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Name</span>
                <span class="detail-value">
                    <a href="{{ url_for('person_detail', person_id=transaction.person_id) }}">{{ transaction.person_name }}</a>
                </span>
            </div>
            {% if transaction.location %}
            <div class="detail-row">
                <span class="detail-label">Location</span>
                <span class="detail-value">{{ transaction.location }}</span>
            </div>
            {% endif %}
            {% if transaction.position %}
            <div class="detail-row">
                <span class="detail-label">Position</span>
                <span class="detail-value">{{ transaction.position }}</span>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% if transaction.it_signature or transaction.recipient_signature %}
<div class="section-header mt-3">Signatures</div>
<div class="card">
    <div class="two-col signatures-grid">
        {% if transaction.recipient_signature %}
        <div>
            <label class="caption">Recipient Signature</label>
            <div class="signature-display mt-1">
                <img src="{{ transaction.recipient_signature }}" alt="Recipient Signature">
            </div>
            {% if transaction.recipient_signed_at %}
            <p class="footnote text-muted mt-1">Signed: {{ transaction.recipient_signed_at[:16] }}</p>
            {% endif %}
        </div>
        {% endif %}

        {% if transaction.it_signature %}
        <div>
            <label class="caption">IT Staff Signature</label>
            <div class="signature-display mt-1">
                <img src="{{ transaction.it_signature }}" alt="IT Staff Signature">
            </div>
            {% if transaction.it_signed_at %}
            <p class="footnote text-muted mt-1">Signed: {{ transaction.it_signed_at[:16] }}</p>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

<div class="action-buttons mt-3">
    <a href="{{ url_for('log_list') }}" class="btn">Back to Log</a>
    <a href="{{ url_for('transaction_print', transaction_id=transaction.id) }}" class="btn btn-primary" target="_blank">Print</a>
</div>
{% endblock %}