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

{% block page_title %}Fermer la caisse{% endblock %}

{% block content %}
<div class="max-w-lg mx-auto mt-12">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
        <div class="bg-gradient-to-r from-red-500 to-orange-500 px-6 py-8 text-center text-white">
            <svg class="w-16 h-16 mx-auto mb-3 opacity-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
            <h1 class="text-2xl font-bold">Fermer la caisse</h1>
            <p class="text-red-100 mt-1">{{ session.register.name }}</p>
        </div>

        {# Résumé de la session #}
        <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <span class="text-gray-500 dark:text-gray-400">Ouverte à</span>
                    <p class="font-semibold text-gray-900 dark:text-white">{{ session.createdAt|date('d/m/Y H:i') }}</p>
                </div>
                <div>
                    <span class="text-gray-500 dark:text-gray-400">Fond de caisse</span>
                    <p class="font-semibold text-gray-900 dark:text-white">{{ session.openingAmount|number_format(0, ',', ' ') }} FCFA</p>
                </div>
                <div>
                    <span class="text-gray-500 dark:text-gray-400">Ventes réalisées</span>
                    <p class="font-semibold text-gray-900 dark:text-white">{{ session.salesCount|default(0) }}</p>
                </div>
                <div>
                    <span class="text-gray-500 dark:text-gray-400">CA estimé</span>
                    <p class="font-semibold text-emerald-600">{{ session.totalSalesAmount|default(0)|number_format(0, ',', ' ') }} FCFA</p>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ path('employer_pos_cashier_close') }}" class="p-6 space-y-5">
            <input type="hidden" name="_token" value="{{ csrf_token('cashier_close_session') }}">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Montant réel en caisse (FCFA)</label>
                <input type="number" name="actual_closing_amount" min="0" step="1" required autofocus
                       class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2.5 px-3 text-lg dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                <p class="text-xs text-gray-400 mt-1">Comptez les espèces et saisissez le montant total</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes (optionnel)</label>
                <textarea name="notes" rows="2"
                          class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500"
                          placeholder="Observations, incidents..."></textarea>
            </div>

            <div class="flex gap-3">
                <a href="{{ path('employer_pos_cashier_index') }}" class="flex-1 py-3 text-center border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 font-medium">
                    Annuler
                </a>
                <button type="submit" class="flex-1 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg transition-colors">
                    Fermer la caisse
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}