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

{% block page_title %}Session #{{ session.id }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-violet-600 to-purple-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-clipboard-list mr-3"></i>Détail session</h1>
                <p class="mt-2 text-violet-100">{{ session.register.name }} — {{ session.openedAt|date('d/m/Y H:i') }}</p>
            </div>
            <a href="{{ path('manager_pos_registers_sessions', {id: session.register.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>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Résumé session #}
        <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-violet-600"></i>Résumé</h2>
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Statut</dt>
                        <dd>
                            {% if session.open %}<span class="text-green-600 font-medium">Ouverte</span>
                            {% elseif session.suspended %}<span class="text-yellow-600 font-medium">Suspendue</span>
                            {% else %}<span class="text-gray-600 font-medium">Fermée</span>{% endif %}
                        </dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Ouvert par</dt>
                        <dd class="text-gray-900 dark:text-white">{{ session.openedBy.fullName|default(session.openedBy.email) }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Ouverture</dt>
                        <dd>{{ session.openedAt|date('d/m/Y H:i') }}</dd>
                    </div>
                    {% if session.closedAt %}
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Fermeture</dt>
                            <dd>{{ session.closedAt|date('d/m/Y H:i') }}</dd>
                        </div>
                        {% if session.closedBy %}
                            <div class="flex justify-between">
                                <dt class="text-gray-500">Fermé par</dt>
                                <dd>{{ session.closedBy.fullName|default(session.closedBy.email) }}</dd>
                            </div>
                        {% endif %}
                    {% 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-calculator mr-2 text-green-600"></i>Finances</h2>
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Fond de caisse</dt>
                        <dd class="font-medium">{{ session.openingAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Ventes ({{ session.salesCount }})</dt>
                        <dd class="font-medium text-green-600">+{{ session.totalSales|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Remboursements</dt>
                        <dd class="font-medium text-red-600">-{{ session.totalRefunds|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Entrées caisse</dt>
                        <dd class="font-medium text-blue-600">+{{ session.totalCashIn|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Sorties caisse</dt>
                        <dd class="font-medium text-orange-600">-{{ session.totalCashOut|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                    </div>
                    {% if session.closed %}
                        <div class="border-t pt-3">
                            <div class="flex justify-between">
                                <dt class="text-gray-500">Attendu</dt>
                                <dd class="font-medium">{{ session.expectedClosingAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                            </div>
                            <div class="flex justify-between mt-2">
                                <dt class="text-gray-500">Réel</dt>
                                <dd class="font-medium">{{ session.actualClosingAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</dd>
                            </div>
                            <div class="flex justify-between mt-2">
                                <dt class="font-bold">Ecart</dt>
                                <dd class="font-bold {% if session.difference == 0 %}text-green-600{% elseif session.difference > 0 %}text-blue-600{% else %}text-red-600{% endif %}">
                                    {{ session.difference > 0 ? '+' : '' }}{{ session.difference|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}
                                </dd>
                            </div>
                        </div>
                    {% endif %}
                </dl>
            </div>
        </div>

        {# Mouvements de caisse + ventes #}
        <div class="lg:col-span-2 space-y-6">
            {# Mouvements de caisse #}
            <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-exchange-alt mr-2 text-orange-600"></i>Mouvements de caisse ({{ cashMovements|length }})</h2>
                </div>
                {% if cashMovements|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-left text-xs font-medium text-gray-500 uppercase">Motif</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 cm in cashMovements %}
                                    <tr>
                                        <td class="px-4 py-3 text-sm text-gray-500">{{ cm.createdAt|date('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 {{ cm.in ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                {{ cm.typeLabel }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-right font-medium {{ cm.in ? 'text-green-600' : 'text-red-600' }}">
                                            {{ cm.in ? '+' : '-' }}{{ cm.amount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">{{ cm.reason }}</td>
                                        <td class="px-4 py-3 text-sm text-gray-500">{{ cm.performedBy.fullName|default('?') }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="p-6 text-center text-gray-500">Aucun mouvement de caisse</div>
                {% endif %}
            </div>

            {# Ventes de la session #}
            <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-receipt mr-2 text-teal-600"></i>Ventes ({{ session.salesCount }})</h2>
                </div>
                {% if session.sales|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">N° Vente</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Heure</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 session.sales %}
                                    <tr class="{{ sale.voided ? 'opacity-60' : '' }}">
                                        <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('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>
                {% else %}
                    <div class="p-6 text-center text-gray-500">Aucune vente dans cette session</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}