{% extends "base.html" %}
{% load tz %}
{% block title %}Receipt {{ payment.receipt_number }} — 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-paid {
        border: 3px solid #28a745; color: #28a745;
        font-size: 1.2rem; font-weight: bold;
        padding: 4px 16px; opacity: 0.6; text-align: center;
        display: inline-block;
    }
    @media (min-width: 576px) {
        .stamp-paid {
            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">
    <div class="text-center pt-3 pb-0 no-print">
        <span class="stamp-paid">PAID</span>
    </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>Receipt</h4>
                <p class="mb-0"><strong>Receipt #:</strong> {{ payment.receipt_number }}</p>
                <p class="mb-0"><strong>Date:</strong> {{ payment.date|date:"N j, Y" }}</p>
                <p class="mb-0"><strong>Invoice #:</strong> {{ invoice.invoice_number }}</p>
                <p class="mb-1"><strong>Order #:</strong> {{ order.ref }}</p>
            </div>
        </div>

        <hr>

        <!-- Customer / Event -->
        <div class="row mb-4">
            <div class="col-sm-6">
                <strong>Received From:</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>

        <!-- Payment details -->
        <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Description</th>
                    <th class="text-end">Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Payment for Invoice {{ invoice.invoice_number }}<br>
                        <small class="text-muted">Method: {{ payment.get_method_display }}</small>
                        {% if payment.reference %}
                        <br><small class="text-muted">Ref: {{ payment.reference }}</small>
                        {% endif %}
                    </td>
                    <td class="text-end">${{ payment.amount|floatformat:2 }}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="text-end"><strong>Total Paid</strong></td>
                    <td class="text-end"><strong>${{ payment.amount|floatformat:2 }}</strong></td>
                </tr>
            </tfoot>
        </table>
        </div>

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

        <!-- Thank you -->
        <hr>
        <p class="text-center text-muted mt-3 mb-0">Thank you for your payment.</p>
    </div>
</div>
{% endblock %}