{% extends "base.html" %}

{% block title %}Complete Checkout - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Complete Checkout</h1>
</div>

<div class="checkout-summary">
    <div class="two-col">
        <div class="summary-section">
            <div class="caption mb-1 color-blue">Device</div>
            <div class="card mb-0">
                <div class="detail-row">
                    <span class="detail-label">Asset Tag</span>
                    <span class="detail-value">{{ transaction.asset_tag }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Serial</span>
                    <span class="detail-value">{{ transaction.serial_number }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Make/Model</span>
                    <span class="detail-value">{{ transaction.make }} {{ transaction.model }}</span>
                </div>
                {% if transaction.hostname %}
                <div class="detail-row">
                    <span class="detail-label">Hostname</span>
                    <span class="detail-value">{{ transaction.hostname }}</span>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="summary-section">
            <div class="caption mb-1 color-blue">Recipient</div>
            <div class="card mb-0">
                <div class="detail-row">
                    <span class="detail-label">Name</span>
                    <span class="detail-value">{{ transaction.person_name }}</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 %}
                {% if transaction.phone %}
                <div class="detail-row">
                    <span class="detail-label">Phone</span>
                    <span class="detail-value">{{ transaction.phone }}</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% if transaction.notes %}
    <div class="summary-section mt-2">
        <div class="caption mb-1 color-blue">Notes</div>
        <p class="subhead">{{ transaction.notes }}</p>
    </div>
    {% endif %}
</div>

<form method="POST" onsubmit="return validateSignatures(this)">
    <div class="section-header">Signatures Required</div>

    <div class="two-col">
        <div class="signature-container">
            <label>Recipient Signature *</label>
            <div class="signature-pad-wrapper">
                <canvas id="recipientSigPad" class="signature-pad" data-input="recipient_signature"></canvas>
                <div class="signature-controls">
                    <span class="signature-status empty">Not signed</span>
                    <button type="button" class="btn btn-sm" onclick="clearSignature('recipientSigPad')">Clear</button>
                </div>
            </div>
            <input type="hidden" id="recipient_signature" name="recipient_signature">
        </div>

        <div class="signature-container">
            <label>IT Staff Signature *</label>
            <div class="signature-pad-wrapper">
                <canvas id="itSigPad" class="signature-pad" data-input="it_signature"></canvas>
                <div class="signature-controls">
                    <span class="signature-status empty">Not signed</span>
                    <button type="button" class="btn btn-sm" onclick="clearSignature('itSigPad')">Clear</button>
                </div>
            </div>
            <input type="hidden" id="it_signature" name="it_signature">
        </div>
    </div>

    <div class="action-buttons mt-3">
        <button type="submit" class="btn btn-primary btn-lg">Complete Checkout</button>
        <a href="{{ url_for('pending_pickups') }}" class="btn btn-lg">Cancel</a>
    </div>
</form>
{% endblock %}