{% extends 'admin/layout.html.twig' %}
{% block title %}Receipt {{ receipt.receiptNumber }} - KitscoApp{% endblock %}
{% block page_title %}Stock Receipt{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_inventory_receipts') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Receipts
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden max-w-3xl">
    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
        <div>
            <h3 class="font-semibold text-gray-800">{{ receipt.receiptNumber }}</h3>
            <p class="text-xs text-gray-400 mt-1">Created {{ receipt.createdAt|date('d/m/Y H:i') }} by {{ receipt.createdBy.fullName ?? receipt.createdBy.email }}</p>
        </div>
    </div>

    <div class="p-6">
        {# Product & Supplier Info #}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <h4 class="text-xs text-gray-400 uppercase mb-2">Product</h4>
                <p class="font-medium text-gray-800">{{ receipt.product.name }}</p>
                {% if receipt.product.sku %}<p class="text-sm text-gray-500">SKU: {{ receipt.product.sku }}</p>{% endif %}
            </div>
            <div>
                <h4 class="text-xs text-gray-400 uppercase mb-2">Supplier</h4>
                {% if receipt.supplier %}
                <p class="font-medium text-gray-800">{{ receipt.supplier.name }}</p>
                {% if receipt.supplier.contactPerson %}<p class="text-sm text-gray-500">{{ receipt.supplier.contactPerson }}</p>{% endif %}
                {% else %}
                <p class="text-gray-400">No supplier specified</p>
                {% endif %}
            </div>
        </div>

        {# Quantity & Date #}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <h4 class="text-xs text-gray-400 uppercase mb-2">Quantity Received</h4>
                <p class="text-2xl font-bold text-green-600">+{{ receipt.quantity }}</p>
            </div>
            <div>
                <h4 class="text-xs text-gray-400 uppercase mb-2">Purchase Date</h4>
                <p class="font-medium text-gray-800">{{ receipt.purchaseDate|date('d/m/Y') }}</p>
            </div>
        </div>

        {# Cost Breakdown #}
        <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <h4 class="text-sm font-medium text-gray-700 mb-4">
                <i class="bi bi-calculator mr-1"></i> Cost Breakdown
            </h4>
            <div class="space-y-2">
                <div class="flex justify-between">
                    <span class="text-gray-600">Purchase Cost</span>
                    <div class="text-right">
                        <span class="font-medium">{{ receipt.purchaseCostInTzs|money }}</span>
                        {% if receipt.purchaseCostCurrency %}
                            <div class="text-xs text-gray-400">({{ receipt.purchaseCostCurrency.code }} {{ receipt.purchaseCost|money }} @ {{ receipt.purchaseCostExchangeRate|money }})</div>
                        {% endif %}
                    </div>
                </div>
                {% if receipt.shippingCost %}
                <div class="flex justify-between">
                    <span class="text-gray-600">Shipping/Transport</span>
                    <div class="text-right">
                        <span class="font-medium">{{ receipt.shippingCostInTzs|money }}</span>
                        {% if receipt.shippingCostCurrency %}
                            <div class="text-xs text-gray-400">({{ receipt.shippingCostCurrency.code }} {{ receipt.shippingCost|money }} @ {{ receipt.shippingCostExchangeRate|money }})</div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                {% if receipt.customsCost %}
                <div class="flex justify-between">
                    <span class="text-gray-600">Customs/Import Taxes</span>
                    <div class="text-right">
                        <span class="font-medium">{{ receipt.customsCostInTzs|money }}</span>
                        {% if receipt.customsCostCurrency %}
                            <div class="text-xs text-gray-400">({{ receipt.customsCostCurrency.code }} {{ receipt.customsCost|money }} @ {{ receipt.customsCostExchangeRate|money }})</div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                {% if receipt.otherCosts and receipt.otherCosts|length > 0 %}
                <div x-data="{ expanded: false }">
                    <div class="flex justify-between items-center cursor-pointer hover:bg-gray-100 -mx-2 px-2 py-1 rounded" @click="expanded = !expanded">
                        <span class="text-gray-600 flex items-center gap-1">
                            <i class="bi text-xs" :class="expanded ? 'bi-chevron-down' : 'bi-chevron-right'"></i>
                            Other Costs ({{ receipt.otherCosts|length }})
                        </span>
                        <span class="font-medium">{{ receipt.otherCostsTotal|money }} TZS</span>
                    </div>
                    <div x-show="expanded" x-collapse class="ml-4 mt-1 space-y-1">
                        {% for cost in receipt.otherCosts %}
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">{{ cost.description }}</span>
                            <div class="text-right">
                                {% if cost.currencyCode and cost.currencyCode != 'TZS' and cost.exchangeRate %}
                                    <span class="text-gray-600">{{ (cost.amount * cost.exchangeRate)|money }}</span>
                                    <div class="text-xs text-gray-400">({{ cost.currencyCode }} {{ cost.amount|money }} @ {{ cost.exchangeRate|money }})</div>
                                {% else %}
                                    <span class="text-gray-600">{{ cost.amount|money }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                <div class="border-t border-gray-200 pt-2 mt-2">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-700">Total Cost (TZS)</span>
                        <span class="font-bold text-gray-800">{{ receipt.totalCost|money }}</span>
                    </div>
                </div>
            </div>
        </div>

        {# Landed Cost #}
        <div class="bg-kitsco-accent/10 rounded-lg p-4 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h4 class="text-sm font-medium text-gray-700">Landed Cost Per Unit</h4>
                    <p class="text-xs text-gray-500 mt-1">Total Cost / Quantity = {{ receipt.totalCost|money }} / {{ receipt.quantity }}</p>
                </div>
                <p class="text-2xl font-bold text-kitsco-accent">{{ receipt.landedCostPerUnit|money }} <span class="text-sm font-normal">TZS</span></p>
            </div>
        </div>

        {# Notes #}
        {% if receipt.notes %}
        <div class="mb-6">
            <h4 class="text-xs text-gray-400 uppercase mb-2">Notes</h4>
            <p class="text-gray-600 bg-gray-50 rounded-lg p-3">{{ receipt.notes }}</p>
        </div>
        {% endif %}

        {# Documents #}
        {% if receipt.documents and receipt.documents|length > 0 %}
        <div class="mb-6">
            <h4 class="text-xs text-gray-400 uppercase mb-2"><i class="bi bi-paperclip"></i> Documents ({{ receipt.documents|length }})</h4>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {% for doc in receipt.documents %}
                <a href="{{ path('admin_inventory_receipt_document', {id: receipt.id, filename: doc.filename}) }}"
                   target="_blank"
                   class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group">
                    {% if doc.mimeType == 'application/pdf' %}
                        <i class="bi bi-file-earmark-pdf text-xl text-red-500"></i>
                    {% elseif doc.mimeType starts with 'image/' %}
                        <i class="bi bi-file-earmark-image text-xl text-blue-500"></i>
                    {% else %}
                        <i class="bi bi-file-earmark text-xl text-gray-500"></i>
                    {% endif %}
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-700 truncate group-hover:text-kitsco-accent">{{ doc.originalName }}</p>
                        <p class="text-xs text-gray-400">
                            {% if doc.size < 1024 %}
                                {{ doc.size }} B
                            {% elseif doc.size < 1048576 %}
                                {{ (doc.size / 1024)|number_format(1) }} KB
                            {% else %}
                                {{ (doc.size / 1048576)|number_format(1) }} MB
                            {% endif %}
                        </p>
                    </div>
                    <i class="bi bi-box-arrow-up-right text-gray-400 group-hover:text-kitsco-accent"></i>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {# Actions #}
        <div class="flex gap-3 pt-4 border-t border-gray-100">
            <a href="{{ path('admin_inventory_history', {id: receipt.product.id}) }}" class="inline-flex items-center gap-2 bg-white border border-gray-300 text-gray-700 font-medium py-2.5 px-5 rounded-lg hover:bg-gray-50 transition-colors text-sm">
                <i class="bi bi-clock-history"></i> View Product History
            </a>
            <a href="{{ path('admin_inventory_receive') }}" class="inline-flex items-center gap-2 bg-kitsco-accent text-white font-medium py-2.5 px-5 rounded-lg hover:bg-kitsco-dark transition-colors text-sm">
                <i class="bi bi-plus"></i> Receive More Stock
            </a>
        </div>
    </div>
</div>
{% endblock %}