{% extends 'admin/layout.html.twig' %}
{% block title %}Transfer {{ transfer.referenceNumber }} - KitscoApp{% endblock %}
{% block page_title %}Transfer {{ transfer.referenceNumber }}{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div class="flex items-center gap-3 text-sm">
        <a href="{{ path('admin_account_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
            Accounts
        </a>
        <span class="text-gray-300">/</span>
        <a href="{{ path('admin_account_transfer_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
            Transfers
        </a>
    </div>
    <form action="{{ path('admin_account_transfer_toggle_reconciled', {id: transfer.id}) }}" method="POST" class="inline">
        <button type="submit" class="inline-flex items-center gap-1.5 border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
            <i class="bi bi-{{ transfer.isReconciled ? 'x-circle' : 'check-circle' }}"></i>
            {{ transfer.isReconciled ? 'Mark Unreconciled' : 'Mark Reconciled' }}
        </button>
    </form>
</div>

<div class="max-w-2xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800">Transfer Details</h3>
            {% if transfer.isReconciled %}
            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Reconciled</span>
            {% endif %}
        </div>
        <div class="p-6">
            <div class="flex items-center justify-center mb-6">
                <div class="text-center px-6">
                    <p class="text-xs text-gray-400 mb-1">From</p>
                    <p class="font-semibold text-gray-800">{{ transfer.fromAccount.name }}</p>
                    <span class="inline-block px-2 py-0.5 rounded text-xs {{ transfer.fromAccount.type.badgeClass }}">{{ transfer.fromAccount.type.label }}</span>
                </div>
                <div class="px-4">
                    <i class="bi bi-arrow-right text-2xl text-gray-400"></i>
                </div>
                <div class="text-center px-6">
                    <p class="text-xs text-gray-400 mb-1">To</p>
                    <p class="font-semibold text-gray-800">{{ transfer.toAccount.name }}</p>
                    <span class="inline-block px-2 py-0.5 rounded text-xs {{ transfer.toAccount.type.badgeClass }}">{{ transfer.toAccount.type.label }}</span>
                </div>
            </div>

            {% if transfer.isCrossCurrency %}
            <div class="flex items-center justify-center py-6 border-y border-gray-100 gap-4">
                <div class="text-center">
                    <p class="text-xs text-gray-400 mb-1">Sent</p>
                    <p class="text-2xl font-bold text-red-600">-{{ transfer.formattedAmount }}</p>
                </div>
                <div class="text-gray-300">
                    <i class="bi bi-arrow-right text-xl"></i>
                </div>
                <div class="text-center">
                    <p class="text-xs text-gray-400 mb-1">Received</p>
                    <p class="text-2xl font-bold text-green-600">+{{ transfer.formattedToAmount }}</p>
                </div>
            </div>
            {% if transfer.exchangeRate %}
            <div class="text-center py-2 bg-gray-50">
                <p class="text-xs text-gray-500">Exchange Rate: {{ transfer.exchangeRate }}</p>
            </div>
            {% endif %}
            {% else %}
            <div class="text-center py-6 border-y border-gray-100">
                <p class="text-xs text-gray-400 mb-1">Amount</p>
                <p class="text-3xl font-bold text-gray-800">{{ transfer.formattedAmount }}</p>
            </div>
            {% endif %}

            <div class="grid grid-cols-2 gap-6 mt-6">
                <div>
                    <p class="text-xs text-gray-400 mb-1">Reference Number</p>
                    <p class="font-mono text-gray-800">{{ transfer.referenceNumber }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 mb-1">Transfer Date</p>
                    <p class="text-gray-800">{{ transfer.transferDate|date('d M Y') }}</p>
                </div>
                {% if transfer.description %}
                <div class="col-span-2">
                    <p class="text-xs text-gray-400 mb-1">Description</p>
                    <p class="text-gray-600">{{ transfer.description }}</p>
                </div>
                {% endif %}
            </div>

            <div class="border-t border-gray-100 mt-6 pt-6">
                <p class="text-xs text-gray-400 mb-2">Audit Info</p>
                <div class="text-sm text-gray-600">
                    <span>Created by {{ transfer.createdBy.fullName }}</span>
                    <span class="text-gray-400 mx-2">|</span>
                    <span>{{ transfer.createdAt|date('d M Y H:i') }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4 flex justify-end">
        <form action="{{ path('admin_account_transfer_delete', {id: transfer.id}) }}" method="POST" class="inline">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ transfer.id) }}">
            <button type="button" class="inline-flex items-center gap-2 py-2 px-4 border border-red-300 rounded-lg text-red-600 hover:bg-red-50 transition-colors text-sm"
                    onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete Transfer', 'Are you sure you want to delete this transfer? This will reverse the account balances.', 'Delete', 'danger')">
                <i class="bi bi-trash"></i> Delete Transfer
            </button>
        </form>
    </div>
</div>
{% endblock %}