{% extends 'base.html' %}
{% load i18n static %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div id="receipt-content" class="card shadow border-0 p-4 p-md-5">
                <div class="d-flex justify-content-between align-items-start mb-4">
                    <div>
                        {% if app_settings.logo %}
                        <img src="{{ app_settings.logo.url }}" alt="{{ app_settings.app_name }}" style="height: 60px;">
                        {% else %}
                        <h2 class="text-primary fw-bold">{{ app_settings.app_name|default:"MASAR CARGO" }}</h2>
                        {% endif %}
                        <p class="text-muted small mt-2">
                            {{ app_settings.contact_address|linebreaksbr }}<br>
                            {% trans "Phone:" %} {{ app_settings.contact_phone }}<br>
                            {% trans "Email:" %} {{ app_settings.contact_email }}
                        </p>
                    </div>
                    <div class="text-end">
                        <h3 class="text-uppercase text-muted">{% trans "Receipt" %}</h3>
                        <p class="mb-0"><strong>{% trans "Receipt #" %}:</strong> {{ transaction.receipt_number }}</p>
                        <p class="mb-0"><strong>{% trans "Date" %}:</strong> {{ transaction.created_at|date:"Y-m-d" }}</p>
                    </div>
                </div>

                <hr class="my-4">

                <div class="row mb-4">
                    <div class="col-6">
                        <h6 class="text-uppercase text-muted small">{% trans "Bill To" %}</h6>
                        <p class="mb-0"><strong>{{ transaction.user.get_full_name|default:transaction.user.username }}</strong></p>
                        <p class="mb-0">{{ transaction.user.email }}</p>
                        <p class="mb-0">{{ transaction.user.profile.full_phone_number }}</p>
                    </div>
                    <div class="col-6 text-end">
                        <h6 class="text-uppercase text-muted small">{% trans "Payment Method" %}</h6>
                        <p>{{ transaction.payment_method|default:"N/A" }}</p>
                    </div>
                </div>

                <div class="table-responsive mb-4">
                    <table class="table">
                        <thead class="table-light">
                            <tr>
                                <th>{% trans "Description" %}</th>
                                <th class="text-end">{% trans "Total" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ transaction.description }}</td>
                                <td class="text-end">{{ transaction.amount }}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th class="text-end">{% trans "Total Paid" %}</th>
                                <th class="text-end text-primary h4">{{ transaction.amount }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="bg-light p-3 rounded mb-4">
                    <p class="small mb-0"><strong>{% trans "Note:" %}</strong> {% trans "This is an electronically generated receipt and does not require a physical signature." %}</p>
                </div>

                <div class="text-center text-muted small">
                    <p>{% trans "Thank you for choosing MASAR CARGO!" %}</p>
                    {% if app_settings.registration_number %}
                    <p class="mb-0">{% trans "CR:" %} {{ app_settings.registration_number }} | {% trans "VAT:" %} {{ app_settings.tax_number }}</p>
                    {% endif %}
                </div>
            </div>

            <div class="mt-4 d-flex justify-content-center gap-3 no-print">
                <button onclick="window.print()" class="btn btn-primary">
                    <i class="fas fa-print"></i> {% trans "Print Receipt" %}
                </button>
                <a href="{% url 'financial_history' %}" class="btn btn-outline-secondary">
                    {% trans "Back to History" %}
                </a>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    .no-print, nav, footer, .btn-scroll-top {
        display: none !important;
    }
    body {
        background: white !important;
    }
    .card {
        box-shadow: none !important;
        border: none !important;
    }
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
</style>
{% endblock %}