{% extends "base.html" %}
{% block title %}Order {{ order.ref }} — Jason Studio{% endblock %}
{% block extra_head %}
<style>
    @page { size: portrait; }
    @media print {
        .navbar, .no-print { display: none !important; }
        .card { border: none !important; box-shadow: none !important; }
    }
    .stamp-status {
        border: 3px solid; font-size: 1.2rem; font-weight: bold;
        padding: 4px 16px; opacity: 0.6; text-align: center;
        display: inline-block; text-transform: uppercase;
    }
    .stamp-paid { border-color: #28a745; color: #28a745; }
    .stamp-unpaid { border-color: #dc3545; color: #dc3545; }
    .stamp-delivered { border-color: #212529; color: #212529; }
    @media (min-width: 576px) {
        .stamp-status {
            border-width: 4px; font-size: 2rem; padding: 5px 24px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-end mb-3 no-print flex-wrap gap-2">
    <button class="btn btn-outline-dark btn-sm" onclick="window.print()"><i class="fa-solid fa-print"></i> Print</button>
    <a href="{% url 'event_orders' event.pk %}" class="btn btn-outline-secondary btn-sm">Back to Quotes &amp; Orders</a>
</div>

<div class="card mb-4">
    <!-- Status stamp (screen only) -->
    <div class="text-center pt-3 pb-0 no-print">
        {% if order.is_paid %}
        <span class="stamp-status stamp-paid">PAID</span>
        {% else %}
        <span class="stamp-status stamp-unpaid">UNPAID</span>
        {% endif %}
        {% if order.status == 'delivered' %}
        <span class="stamp-status stamp-delivered">DELIVERED</span>
        {% endif %}
    </div>

    <div class="card-body">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-sm-6">
                <h3>{% if photographer %}{{ photographer.business_name|default:"Jason Studio" }}{% else %}Jason Studio{% endif %}</h3>
                <p class="text-muted mb-0">Photography Services</p>
                {% if photographer.address %}
                <p class="small mb-0" style="white-space:pre-line;">{{ photographer.address }}</p>
                {% endif %}
                {% if photographer.phone %}
                <p class="small mb-0">{{ photographer.phone }}</p>
                {% endif %}
                {% if photographer.email %}
                <p class="small mb-0">{{ photographer.email }}</p>
                {% endif %}
            </div>
            <div class="col-sm-6 text-end">
                <h4>Order</h4>
                <p class="mb-0"><strong>Order #:</strong> {{ order.ref }}</p>
                <p class="mb-0"><strong>Date:</strong> {{ order.date|date:"N j, Y" }}</p>
                <p class="mb-1"><strong>Quote #:</strong> {{ quotation.quote_number }}</p>
            </div>
        </div>

        <hr>

        <!-- Customer / Event -->
        <div class="row mb-4">
            <div class="col-sm-6">
                <strong>Customer:</strong><br>
                {{ customer.user.get_full_name|default:customer.user.username }}<br>
                {% if customer.company_name %}{{ customer.company_name }}<br>{% endif %}
                {% if customer.user.email %}{{ customer.user.email }}<br>{% endif %}
                {% if customer.phone %}{{ customer.phone }}{% endif %}
            </div>
            <div class="col-sm-6 text-end">
                <strong>Event:</strong><br>
                {{ event.name }}<br>
                {{ event.date|date:"N j, Y" }}<br>
                {% if event.location %}{{ event.location }}{% endif %}
            </div>
        </div>

        <!-- Line Items from Quotation -->
        <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Description</th>
                    <th class="text-end">Qty</th>
                    <th class="text-end">Unit Cost</th>
                    <th class="text-end">Price</th>
                </tr>
            </thead>
            <tbody>
                {% for item in quotation_line_items %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.description }}</td>
                    <td class="text-end">{{ item.qty|floatformat:2 }}</td>
                    <td class="text-end">${{ item.unit_cost|floatformat:2 }}</td>
                    <td class="text-end">${{ item.price|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-end">Subtotal</td>
                    <td class="text-end">${{ quotation.subtotal|floatformat:2 }}</td>
                </tr>
                {% if quotation.deposit_amount and quotation.deposit_amount != 0 %}
                <tr>
                    <td colspan="4" class="text-end">Deposit</td>
                    <td class="text-end">-${{ quotation.deposit_amount|floatformat:2 }}</td>
                </tr>
                {% endif %}
                {% if quotation.tax_rate and quotation.tax_rate != 0 %}
                <tr>
                    <td colspan="4" class="text-end">Tax ({{ quotation.tax_rate|floatformat:2 }}%)</td>
                    <td class="text-end">${{ quotation.tax_amount|floatformat:2 }}</td>
                </tr>
                {% endif %}
                <tr>
                    <td colspan="4" class="text-end"><strong>Total</strong></td>
                    <td class="text-end"><strong>${{ quotation.total|floatformat:2 }}</strong></td>
                </tr>
            </tfoot>
        </table>
        </div>

        <!-- Notes -->
        {% if order.notes %}
        <hr>
        <div class="row mt-3">
            <div class="col-12">
                <strong>Notes:</strong>
                <p class="mb-0" style="white-space:pre-line;">{{ order.notes }}</p>
            </div>
        </div>
        {% endif %}

        <!-- Payment info -->
        {% if order.is_paid and order.paid_at %}
        <hr>
        <p class="text-muted small mb-0">
            Paid on {{ order.paid_at|date:"N j, Y" }}.
        </p>
        {% endif %}

        <!-- Customer comments -->
        <hr>
        <div class="row mt-3">
            <div class="col-12">
                <strong>Customer Comments / Special Requests:</strong>
                <div style="border-bottom: 1px solid #dee2e6; min-height: 5rem; margin-top: 0.5rem;"></div>
            </div>
        </div>
    </div>
</div>

{% endblock %}