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

{% block page_title %}Nouveau remboursement{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-orange-600 to-red-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-undo mr-3"></i>Nouveau remboursement</h1>
                <p class="mt-2 text-orange-100">Vente {{ sale.saleNumber }} du {{ sale.createdAt|date('d/m/Y H:i') }}</p>
            </div>
            <a href="{{ path('manager_pos_sales_show', {id: sale.id}) }}" 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>

    {# Sale info #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div>
                <span class="text-gray-500">Vente :</span>
                <span class="font-medium text-gray-900 dark:text-white ml-1">{{ sale.saleNumber }}</span>
            </div>
            <div>
                <span class="text-gray-500">Date :</span>
                <span class="font-medium text-gray-900 dark:text-white ml-1">{{ sale.createdAt|date('d/m/Y H:i') }}</span>
            </div>
            <div>
                <span class="text-gray-500">Total :</span>
                <span class="font-bold text-green-600 ml-1">{{ sale.total|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</span>
            </div>
            {% if sale.customer %}
                <div>
                    <span class="text-gray-500">Client :</span>
                    <span class="font-medium text-gray-900 dark:text-white ml-1">{{ sale.customer.fullName }}</span>
                </div>
            {% endif %}
        </div>
    </div>

    <form method="post" action="{{ path('manager_pos_refunds_create', {sale: sale.id}) }}" id="refund-form">
        <input type="hidden" name="_token" value="{{ csrf_token('create_refund_' ~ sale.id) }}">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {# Lines #}
            <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-list mr-2 text-orange-500"></i>Lignes remboursables</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">Vendu</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Deja remb.</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Remboursable</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Qte a rembourser</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">PU</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Restock</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                {% for line in refundableLines %}
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                        <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 text-sm">{{ line.quantity }}</td>
                                        <td class="px-4 py-3 text-center text-sm text-orange-600">{{ line.refundedQuantity }}</td>
                                        <td class="px-4 py-3 text-center text-sm font-bold">{{ line.refundableQuantity }}</td>
                                        <td class="px-4 py-3 text-center">
                                            <input type="number" name="qty_{{ line.id }}" value="0" min="0" max="{{ line.refundableQuantity }}"
                                                   class="w-20 text-center rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-orange-500 focus:border-orange-500 refund-qty-input"
                                                   data-unit-price="{{ line.unitPrice }}"
                                                   data-tax-rate="{{ line.taxRate }}">
                                        </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-center">
                                            <input type="checkbox" name="restock_{{ line.id }}" value="1" checked
                                                   class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Reason #}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-comment mr-1 text-orange-500"></i>Motif du remboursement <span class="text-red-500">*</span>
                    </label>
                    <textarea name="reason" rows="3" required
                              class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-orange-500 focus:border-orange-500"
                              placeholder="Indiquez la raison du remboursement..."></textarea>
                </div>
            </div>

            {# Sidebar: Payments + Summary #}
            <div class="space-y-6">
                {# Refund Payment #}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-credit-card mr-1 text-orange-500"></i>Mode de remboursement</h3>
                    <div id="payment-lines" class="space-y-3">
                        <div class="payment-line grid grid-cols-2 gap-2">
                            <select name="payment_method[]" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-orange-500 focus:border-orange-500">
                                <option value="cash">Especes</option>
                                <option value="mobile_money">Mobile Money</option>
                                <option value="card">Carte bancaire</option>
                                <option value="transfer">Virement</option>
                                {% if sale.customer %}
                                    <option value="credit">Credit client</option>
                                {% endif %}
                            </select>
                            <input type="text" name="payment_amount[]" value="0" placeholder="Montant"
                                   class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-orange-500 focus:border-orange-500 payment-amount-input">
                            <input type="hidden" name="payment_reference[]" value="">
                        </div>
                    </div>
                    <button type="button" id="add-payment-btn" class="mt-3 text-sm text-orange-600 hover:text-orange-800">
                        <i class="fas fa-plus mr-1"></i>Ajouter un paiement
                    </button>
                </div>

                {# Summary #}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-calculator mr-1 text-orange-500"></i>Resume</h3>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">Sous-total :</span>
                            <span id="refund-subtotal" class="font-medium">0 {{ settings.currencySymbol }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">TVA :</span>
                            <span id="refund-tax" class="font-medium">0 {{ settings.currencySymbol }}</span>
                        </div>
                        <div class="flex justify-between border-t pt-2 mt-2">
                            <span class="font-bold text-gray-900 dark:text-white">Total :</span>
                            <span id="refund-total" class="font-bold text-orange-600 text-lg">0 {{ settings.currencySymbol }}</span>
                        </div>
                    </div>
                </div>

                <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 transition-colors">
                    <i class="fas fa-undo mr-2"></i>Demander le remboursement
                </button>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const currencySymbol = '{{ settings.currencySymbol }}';
    const qtyInputs = document.querySelectorAll('.refund-qty-input');
    const subtotalEl = document.getElementById('refund-subtotal');
    const taxEl = document.getElementById('refund-tax');
    const totalEl = document.getElementById('refund-total');

    function formatNumber(n) {
        return Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
    }

    function updateTotals() {
        let subtotal = 0;
        let tax = 0;
        qtyInputs.forEach(function(input) {
            const qty = parseInt(input.value) || 0;
            const unitPrice = parseFloat(input.dataset.unitPrice) || 0;
            const taxRate = parseFloat(input.dataset.taxRate) || 0;
            const lineSubtotal = qty * unitPrice;
            const lineTax = lineSubtotal * (taxRate / 100);
            subtotal += lineSubtotal;
            tax += lineTax;
        });
        const total = subtotal + tax;
        subtotalEl.textContent = formatNumber(subtotal) + ' ' + currencySymbol;
        taxEl.textContent = formatNumber(tax) + ' ' + currencySymbol;
        totalEl.textContent = formatNumber(total) + ' ' + currencySymbol;

        // Auto-fill first payment amount
        const firstPaymentAmount = document.querySelector('.payment-amount-input');
        if (firstPaymentAmount) {
            firstPaymentAmount.value = Math.round(total);
        }
    }

    qtyInputs.forEach(function(input) {
        input.addEventListener('input', updateTotals);
    });

    // Add payment line
    document.getElementById('add-payment-btn').addEventListener('click', function() {
        const container = document.getElementById('payment-lines');
        const html = `<div class="payment-line grid grid-cols-2 gap-2">
            <select name="payment_method[]" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-orange-500 focus:border-orange-500">
                <option value="cash">Especes</option>
                <option value="mobile_money">Mobile Money</option>
                <option value="card">Carte bancaire</option>
                <option value="transfer">Virement</option>
                ${('{{ sale.customer }}' !== '') ? '<option value="credit">Credit client</option>' : ''}
            </select>
            <input type="text" name="payment_amount[]" value="0" placeholder="Montant" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-orange-500 focus:border-orange-500 payment-amount-input">
            <input type="hidden" name="payment_reference[]" value="">
        </div>`;
        container.insertAdjacentHTML('beforeend', html);
    });
});
</script>
{% endblock %}