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

{% block page_title %}{{ customer.fullName }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-pink-600 to-rose-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-user mr-3"></i>{{ customer.fullName }}</h1>
                <p class="mt-2 text-pink-100">
                    {% if customer.active %}<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/30 text-white">Actif</span>{% endif %}
                    {% if customer.phone %}— {{ customer.phone }}{% endif %}
                </p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_customers_edit', {id: customer.id}) }}" class="inline-flex items-center px-4 py-2 bg-white text-pink-700 rounded-lg font-medium text-sm hover:bg-pink-50 transition-colors">
                    <i class="fas fa-edit mr-2"></i>Modifier
                </a>
                {% if customer.hasDebt %}
                    <a href="{{ path('manager_pos_customers_record_payment', {id: customer.id}) }}" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-colors">
                        <i class="fas fa-hand-holding-usd mr-2"></i>Encaisser
                    </a>
                {% endif %}
                <a href="{{ path('manager_pos_customers_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">
        {# Sidebar infos #}
        <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-info-circle mr-2 text-pink-600"></i>Informations</h2>
                <dl class="space-y-3">
                    {% if customer.phone %}
                        <div><dt class="text-xs text-gray-500">Téléphone</dt><dd class="text-sm font-medium"><a href="tel:{{ customer.phone }}" class="text-pink-600 hover:underline">{{ customer.phone }}</a></dd></div>
                    {% endif %}
                    {% if customer.email %}
                        <div><dt class="text-xs text-gray-500">Email</dt><dd class="text-sm"><a href="mailto:{{ customer.email }}" class="text-pink-600 hover:underline">{{ customer.email }}</a></dd></div>
                    {% endif %}
                    {% if customer.address %}
                        <div><dt class="text-xs text-gray-500">Adresse</dt><dd class="text-sm">{{ customer.address }}{% if customer.city %}, {{ customer.city }}{% endif %}</dd></div>
                    {% endif %}
                    <div><dt class="text-xs text-gray-500">Client depuis</dt><dd class="text-sm">{{ customer.createdAt|date('d/m/Y') }}</dd></div>
                    {% if customer.lastPurchaseAt %}
                        <div><dt class="text-xs text-gray-500">Dernier achat</dt><dd class="text-sm">{{ customer.lastPurchaseAt|date('d/m/Y') }}</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-chart-line mr-2 text-blue-600"></i>Statistiques</h2>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Achats</dt>
                        <dd class="text-sm font-bold">{{ customer.totalPurchases }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Total dépensé</dt>
                        <dd class="text-sm font-bold text-green-600">{{ customer.totalSpent|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    <div class="flex justify-between border-t pt-3">
                        <dt class="text-sm text-gray-500">Solde crédit</dt>
                        <dd class="text-sm font-bold {{ customer.hasDebt ? 'text-red-600' : 'text-green-600' }}">
                            {{ customer.creditBalance|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}
                        </dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Points fidélité</dt>
                        <dd class="text-sm font-bold text-purple-600">{{ customer.loyaltyPoints }} pts</dd>
                    </div>
                </dl>
            </div>

            {% if customer.notes %}
                <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-2"><i class="fas fa-sticky-note mr-2 text-yellow-500"></i>Notes</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ customer.notes|nl2br }}</p>
                </div>
            {% endif %}

            {# Delete #}
            <button type="button" data-modal-target="confirm-modal-del-customer" data-modal-toggle="confirm-modal-del-customer" data-no-loader class="w-full px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200 transition-colors">
                <i class="fas fa-trash mr-2"></i>Supprimer ce client
            </button>
            {% include 'components/pos/_confirm_modal.html.twig' with {
                modal_id: 'del-customer',
                title: 'Supprimer le client',
                message: 'Supprimer « ' ~ customer.fullName ~ ' » ? Cette action est irréversible.',
                action_url: path('manager_pos_customers_delete', {id: customer.id}),
                csrf_token_name: 'delete_customer_' ~ customer.id,
            } %}
        </div>

        {# Historique crédit #}
        <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-history mr-2 text-orange-600"></i>Historique crédit</h2>
                </div>
                {% if credits|length > 0 %}
                    <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">Date</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Type</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Montant</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Solde avant</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Solde après</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Référence</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Par</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                {% for credit in credits %}
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                        <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">{{ credit.createdAt|date('d/m/Y H:i') }}</td>
                                        <td class="px-4 py-3 text-center">
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ credit.credit ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}">
                                                {{ credit.typeLabel }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-right font-medium {{ credit.credit ? 'text-red-600' : 'text-green-600' }}">
                                            {{ credit.credit ? '+' : '-' }}{{ credit.amount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}
                                        </td>
                                        <td class="px-4 py-3 text-right text-sm text-gray-500">{{ credit.balanceBefore|number_format(0, ',', ' ') }}</td>
                                        <td class="px-4 py-3 text-right text-sm font-medium">{{ credit.balanceAfter|number_format(0, ',', ' ') }}</td>
                                        <td class="px-4 py-3 text-sm text-gray-500">
                                            {% if credit.sale %}
                                                <a href="{{ path('manager_pos_sales_show', {id: credit.sale.id}) }}" class="text-teal-600 hover:underline">{{ credit.sale.saleNumber }}</a>
                                            {% else %}
                                                {{ credit.notes ?? 'Manuel' }}
                                            {% endif %}
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">{{ credit.recordedBy.fullName|default('?') }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="p-8 text-center text-gray-500">
                        <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
                        <p>Aucun historique de crédit</p>
                    </div>
                {% endif %}
            </div>

            {# Dernières ventes #}
            {% if customer.sales|length > 0 %}
                <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>Derniers achats</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">N° Vente</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Articles</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Total</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Statut</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                {% for sale in customer.sales|slice(0, 10) %}
                                    <tr>
                                        <td class="px-4 py-3"><a href="{{ path('manager_pos_sales_show', {id: sale.id}) }}" class="text-teal-600 hover:underline text-sm">{{ sale.saleNumber }}</a></td>
                                        <td class="px-4 py-3 text-sm text-gray-500">{{ sale.createdAt|date('d/m/Y H:i') }}</td>
                                        <td class="px-4 py-3 text-center text-sm">{{ sale.itemsCount }}</td>
                                        <td class="px-4 py-3 text-right text-sm font-medium">{{ sale.total|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</td>
                                        <td class="px-4 py-3 text-center">
                                            <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>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}