{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Vente {{ sale.saleNumber }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-receipt mr-3"></i>{{ sale.saleNumber }}</h1>
                <p class="mt-2 text-teal-100">{{ sale.createdAt|date('d/m/Y à H:i') }} — {{ sale.statusLabel }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_sales_receipt', {id: sale.id}) }}" target="_blank"
                   class="inline-flex items-center px-4 py-2 bg-white text-teal-700 rounded-lg font-medium text-sm hover:bg-teal-50 transition-colors">
                    <i class="fas fa-print mr-2"></i>Ticket
                </a>
                <a href="{{ path('manager_pos_export_receipt_pdf', {id: sale.id}) }}" target="_blank"
                   class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-file-pdf mr-2"></i>PDF
                </a>
                <a href="{{ path('manager_pos_export_invoice_pdf', {id: sale.id}) }}" target="_blank"
                   class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-file-invoice mr-2"></i>Facture
                </a>
                {% if sale.completed or sale.status == 'partial_refund' %}
                    {% set hasRefundableLines = false %}
                    {% for line in sale.lines %}
                        {% if line.refundableQuantity > 0 %}
                            {% set hasRefundableLines = true %}
                        {% endif %}
                    {% endfor %}
                    {% if hasRefundableLines %}
                        <a href="{{ path('manager_pos_refunds_create', {sale: sale.id}) }}"
                           class="inline-flex items-center px-4 py-2 bg-orange-500/80 text-white rounded-lg text-sm hover:bg-orange-600 transition-colors">
                            <i class="fas fa-undo mr-2"></i>Rembourser
                        </a>
                    {% endif %}
                {% endif %}
                {% if sale.completed %}
                    <button onclick="document.getElementById('voidModal').classList.remove('hidden')"
                       class="inline-flex items-center px-4 py-2 bg-red-500/80 text-white rounded-lg text-sm hover:bg-red-600 transition-colors">
                        <i class="fas fa-ban mr-2"></i>Annuler
                    </button>
                {% endif %}
                <a href="{{ path('manager_pos_sales_index') }}" class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Retour
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Lignes de vente #}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><i class="fas fa-shopping-cart mr-2 text-teal-600"></i>Articles ({{ sale.itemsCount }})</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Produit</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Qté</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Prix unit.</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Remise</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            {% for line in sale.lines %}
                                <tr>
                                    <td class="px-4 py-3">
                                        <div class="font-medium text-gray-900 dark:text-white text-sm">{{ line.productName }}</div>
                                        <div class="text-xs text-gray-500">{{ line.productSku }}</div>
                                    </td>
                                    <td class="px-4 py-3 text-center">{{ line.quantity }}</td>
                                    <td class="px-4 py-3 text-right text-sm">{{ line.unitPrice|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</td>
                                    <td class="px-4 py-3 text-right text-sm text-orange-600">
                                        {% if line.discountAmount > 0 %}-{{ line.discountAmount|number_format(0, ',', ' ') }}{% else %}-{% endif %}
                                    </td>
                                    <td class="px-4 py-3 text-right font-medium text-gray-900 dark:text-white">{{ line.total|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            {# Paiements #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4"><i class="fas fa-money-bill-wave mr-2 text-green-600"></i>Paiements</h2>
                <div class="space-y-3">
                    {% for payment in sale.payments %}
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center gap-3">
                                <i class="fas {{ payment.methodIcon }} text-lg text-gray-600 dark:text-gray-300"></i>
                                <div>
                                    <div class="font-medium text-sm text-gray-900 dark:text-white">{{ payment.methodLabel }}</div>
                                    {% if payment.provider %}
                                        <div class="text-xs text-gray-500">{{ payment.providerLabel }}</div>
                                    {% endif %}
                                    {% if payment.reference %}
                                        <div class="text-xs text-gray-500">Réf: {{ payment.reference }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="font-bold text-gray-900 dark:text-white">{{ payment.amount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# Sidebar résumé #}
        <div class="space-y-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4"><i class="fas fa-calculator mr-2 text-teal-600"></i>Résumé</h2>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Sous-total</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ sale.subtotal|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    {% if sale.discountAmount > 0 %}
                        <div class="flex justify-between">
                            <dt class="text-sm text-orange-600">Remise{{ sale.discountPercent ? ' (' ~ sale.discountPercent ~ '%)' : '' }}</dt>
                            <dd class="text-sm font-medium text-orange-600">-{{ sale.discountAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                        </div>
                    {% endif %}
                    {% if settings.receiptShowTax %}
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">TVA</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ sale.taxAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                        </div>
                    {% endif %}
                    <div class="flex justify-between border-t pt-3">
                        <dt class="text-lg font-bold text-gray-900 dark:text-white">Total</dt>
                        <dd class="text-lg font-bold text-teal-600">{{ sale.total|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Payé</dt>
                        <dd class="text-sm font-medium text-green-600">{{ sale.amountPaid|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    {% if sale.changeAmount > 0 %}
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Monnaie rendue</dt>
                            <dd class="text-sm font-medium text-blue-600">{{ sale.changeAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                        </div>
                    {% endif %}
                </dl>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4"><i class="fas fa-info-circle mr-2 text-gray-400"></i>Informations</h2>
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Vendeur</dt>
                        <dd class="text-gray-900 dark:text-white">{{ sale.seller.fullName|default(sale.seller.email) }}</dd>
                    </div>
                    {% if sale.registerSession %}
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Caisse</dt>
                            <dd class="text-gray-900 dark:text-white">{{ sale.registerSession.register.name }}</dd>
                        </div>
                    {% endif %}
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Statut</dt>
                        <dd><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-{{ sale.statusBadgeColor }}-100 text-{{ sale.statusBadgeColor }}-800">{{ sale.statusLabel }}</span></dd>
                    </div>
                    {% if sale.voided %}
                        <div class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
                            <p class="text-xs text-red-700 dark:text-red-300"><strong>Annulée par:</strong> {{ sale.voidedBy.fullName|default('?') }}</p>
                            <p class="text-xs text-red-700 dark:text-red-300"><strong>Le:</strong> {{ sale.voidedAt|date('d/m/Y H:i') }}</p>
                            <p class="text-xs text-red-700 dark:text-red-300"><strong>Motif:</strong> {{ sale.voidReason }}</p>
                        </div>
                    {% endif %}
                </dl>
            </div>
        </div>
    </div>

    {# Modal Annulation #}
    {% if sale.completed %}
        <div id="voidModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4"><i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>Annuler cette vente ?</h3>
                <p class="text-sm text-gray-500 mb-4">Le stock sera automatiquement restauré. Cette action est irréversible.</p>
                <form method="post" action="{{ path('manager_pos_sales_void', {id: sale.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('void_sale_' ~ sale.id) }}">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Motif d'annulation</label>
                        <textarea name="reason" rows="2" required class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm" placeholder="Raison de l'annulation..."></textarea>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" onclick="document.getElementById('voidModal').classList.add('hidden')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Fermer</button>
                        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700">Confirmer l'annulation</button>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}