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

{% block page_title %}Caisse — {{ session.register.name }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-100 dark:bg-gray-900"
     data-controller="pos-cashier"
     data-pos-cashier-sell-url-value="{{ path('employer_pos_cashier_sell') }}"
     data-pos-cashier-search-url-value="{{ path('employer_pos_cashier_search') }}"
     data-pos-cashier-customer-search-url-value="{{ path('employer_pos_cashier_customer_search') }}"
     data-pos-cashier-currency-value="{{ settings.currencySymbol }}"
     data-pos-cashier-tax-rate-value="{{ settings.taxRate }}"
     data-pos-cashier-tax-included-value="{{ settings.isTaxIncluded ? '1' : '0' }}"
     data-pos-cashier-require-customer-value="{{ settings.requireCustomer ? '1' : '0' }}"
     data-pos-cashier-csrf-sell-value="{{ csrf_token('cashier_sell') }}"
     data-pos-cashier-csrf-void-value="{{ csrf_token('cashier_void') }}">

    {# Barre supérieure #}
    <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center justify-between">
        <div class="flex items-center gap-4">
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">
                <svg class="w-6 h-6 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                {{ settings.effectiveShopName }}
            </span>
            <span class="text-sm text-gray-500 dark:text-gray-400">
                Caisse : <strong>{{ session.register.name }}</strong>
            </span>
            <span class="text-sm text-gray-500 dark:text-gray-400">
                Vendeur : <strong>{{ app.user.fullName|default(app.user.email) }}</strong>
            </span>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-400" data-pos-cashier-target="clock"></span>
            <a href="{{ path('employer_pos_cashier_close') }}" class="px-3 py-1.5 text-sm font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
                <svg class="w-4 h-4 inline mr-1" 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>
                Fermer caisse
            </a>
        </div>
    </div>

    <div class="flex h-[calc(100vh-8rem)]">
        {# ====== ZONE GAUCHE : Produits ====== #}
        <div class="flex-1 flex flex-col overflow-hidden">
            {# Barre recherche + catégories #}
            <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-3">
                <div class="flex items-center gap-3">
                    <div class="relative flex-1">
                        <input type="text"
                               data-pos-cashier-target="searchInput"
                               data-action="input->pos-cashier#search keydown->pos-cashier#handleSearchKeydown"
                               class="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:ring-emerald-500 focus:border-emerald-500 dark:text-white"
                               placeholder="Rechercher un produit (nom, SKU, code-barres) — F1">
                        <svg class="absolute left-3 top-3 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </div>
                </div>

                {# Onglets catégories #}
                <div class="flex gap-2 mt-2 overflow-x-auto pb-1">
                    <button data-action="click->pos-cashier#filterCategory" data-category="" class="px-3 py-1 text-xs font-medium rounded-full bg-emerald-100 text-emerald-700 whitespace-nowrap">
                        Tous
                    </button>
                    {% for category in categories %}
                        <button data-action="click->pos-cashier#filterCategory" data-category="{{ category.id }}" class="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-emerald-100 hover:text-emerald-700 whitespace-nowrap transition-colors">
                            {{ category.name }}
                        </button>
                    {% endfor %}
                </div>
            </div>

            {# Grille produits #}
            <div class="flex-1 overflow-y-auto p-3" data-pos-cashier-target="productGrid">
                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
                    {% for product in products %}
                        <button data-action="click->pos-cashier#addToCart"
                                data-product-id="{{ product.id }}"
                                data-product-name="{{ product.name }}"
                                data-product-sku="{{ product.sku }}"
                                data-product-price="{{ product.price }}"
                                data-product-tax-rate="{{ product.taxRate }}"
                                data-product-stock="{{ product.currentStock }}"
                                data-product-is-service="{{ product.isService ? '1' : '0' }}"
                                data-product-allow-discount="{{ product.isAllowDiscount ? '1' : '0' }}"
                                data-product-max-discount="{{ product.maxDiscountPercent }}"
                                class="flex flex-col items-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-emerald-400 hover:shadow-md transition-all text-center cursor-pointer {{ product.currentStock <= 0 and not product.isService ? 'opacity-50' : '' }}">
                            <div class="w-10 h-10 rounded-full bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center mb-2">
                                {% if product.isService %}
                                    <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                {% else %}
                                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                {% endif %}
                            </div>
                            <span class="text-xs font-medium text-gray-900 dark:text-white truncate w-full">{{ product.name }}</span>
                            <span class="text-xs font-bold text-emerald-600 mt-1">{{ product.price|number_format(0, ',', ' ') }}</span>
                            {% if not product.isService %}
                                <span class="text-[10px] text-gray-400 mt-0.5">Stock: {{ product.currentStock }}</span>
                            {% endif %}
                        </button>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# ====== ZONE DROITE : Panier ====== #}
        <div class="w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 flex flex-col">
            {# Header panier #}
            <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                    <span class="font-semibold text-gray-900 dark:text-white">Panier</span>
                    <span class="bg-emerald-100 text-emerald-800 text-xs font-medium px-2 py-0.5 rounded-full" data-pos-cashier-target="cartCount">0</span>
                </div>
                <button data-action="click->pos-cashier#clearCart" class="text-xs text-red-500 hover:text-red-700">Vider</button>
            </div>

            {# Client (optionnel) #}
            <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                <div class="relative">
                    <input type="text"
                           data-pos-cashier-target="customerInput"
                           data-action="input->pos-cashier#searchCustomer"
                           class="w-full pl-8 pr-8 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700 dark:text-white"
                           placeholder="Client (optionnel)">
                    <svg class="absolute left-2.5 top-2 w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    <button data-action="click->pos-cashier#clearCustomer" data-pos-cashier-target="clearCustomerBtn" class="absolute right-2 top-1.5 text-gray-400 hover:text-red-500 hidden">&times;</button>
                </div>
                <div data-pos-cashier-target="customerDropdown" class="hidden absolute z-50 w-80 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-40 overflow-y-auto"></div>
                <div data-pos-cashier-target="customerInfo" class="hidden mt-1 text-xs text-gray-500"></div>
            </div>

            {# Lignes panier #}
            <div class="flex-1 overflow-y-auto px-4 py-2" data-pos-cashier-target="cartLines">
                <div class="flex items-center justify-center h-full text-gray-400 text-sm" data-pos-cashier-target="cartEmpty">
                    <div class="text-center">
                        <svg class="w-12 h-12 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                        <p>Panier vide</p>
                        <p class="text-xs mt-1">Cliquez sur un produit pour l'ajouter</p>
                    </div>
                </div>
            </div>

            {# Totaux #}
            <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-3 space-y-1">
                <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                    <span>Sous-total</span>
                    <span data-pos-cashier-target="subtotal">0 {{ settings.currencySymbol }}</span>
                </div>
                <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                    <span>TVA ({{ settings.taxRate }}%)</span>
                    <span data-pos-cashier-target="taxAmount">0 {{ settings.currencySymbol }}</span>
                </div>
                <div class="flex justify-between text-lg font-bold text-gray-900 dark:text-white pt-1 border-t border-gray-200 dark:border-gray-700">
                    <span>Total</span>
                    <span data-pos-cashier-target="cartTotal" class="text-emerald-600">0 {{ settings.currencySymbol }}</span>
                </div>
            </div>

            {# Boutons action #}
            <div class="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
                <button data-action="click->pos-cashier#openPayment"
                        data-pos-cashier-target="payBtn"
                        disabled
                        class="w-full py-3 text-white bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed font-bold rounded-lg text-base transition-colors">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    Payer (F2)
                </button>
                <div class="flex gap-2 text-xs">
                    <span class="text-gray-400">F1: Recherche</span>
                    <span class="text-gray-400">F2: Payer</span>
                    <span class="text-gray-400">F4: Suppr. ligne</span>
                    <span class="text-gray-400">F10: Cash</span>
                </div>
            </div>
        </div>
    </div>

    {# ====== MODAL PAIEMENT ====== #}
    <div data-pos-cashier-target="paymentModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="fixed inset-0 bg-black bg-opacity-50" data-action="click->pos-cashier#closePayment"></div>
            <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg p-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                    <svg class="w-6 h-6 inline mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    Paiement
                </h3>

                <div class="text-center mb-4">
                    <span class="text-3xl font-bold text-emerald-600" data-pos-cashier-target="paymentTotal">0</span>
                    <span class="text-lg text-gray-500"> {{ settings.currencySymbol }}</span>
                </div>

                {# Lignes de paiement #}
                <div data-pos-cashier-target="paymentLines" class="space-y-3 mb-4">
                    <div class="flex gap-2 items-center" data-payment-line>
                        <select class="flex-shrink-0 w-36 text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 dark:bg-gray-700 dark:text-white" data-payment-method>
                            <option value="cash">Espèces</option>
                            <option value="mobile_money">Mobile Money</option>
                            <option value="card">Carte</option>
                            <option value="transfer">Virement</option>
                            <option value="credit">Crédit</option>
                        </select>
                        <input type="number" step="1" min="0" class="flex-1 text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 dark:bg-gray-700 dark:text-white" placeholder="Montant" data-payment-amount data-action="input->pos-cashier#updatePaymentTotals">
                        <select class="hidden w-28 text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 dark:bg-gray-700 dark:text-white" data-payment-provider>
                            <option value="">Fournisseur</option>
                            <option value="orange_money">Orange Money</option>
                            <option value="wave">Wave</option>
                            <option value="free_money">Free Money</option>
                        </select>
                        <input type="text" class="hidden w-28 text-sm border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 dark:bg-gray-700 dark:text-white" placeholder="Réf." data-payment-reference>
                    </div>
                </div>

                <button data-action="click->pos-cashier#addPaymentLine" class="text-sm text-emerald-600 hover:text-emerald-700 mb-3">
                    + Ajouter un mode de paiement
                </button>

                {# Résumé paiement #}
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 mb-4 space-y-1">
                    <div class="flex justify-between text-sm">
                        <span>Total à payer</span>
                        <span data-pos-cashier-target="paymentDueAmount">0 {{ settings.currencySymbol }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span>Total payé</span>
                        <span data-pos-cashier-target="paymentPaidAmount">0 {{ settings.currencySymbol }}</span>
                    </div>
                    <div class="flex justify-between text-sm font-bold border-t border-gray-200 dark:border-gray-600 pt-1">
                        <span>Monnaie à rendre</span>
                        <span data-pos-cashier-target="paymentChange" class="text-emerald-600">0 {{ settings.currencySymbol }}</span>
                    </div>
                </div>

                <div class="flex gap-3">
                    <button data-action="click->pos-cashier#closePayment" class="flex-1 py-2.5 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
                    </button>
                    <button data-action="click->pos-cashier#submitSale" data-pos-cashier-target="confirmPayBtn" disabled class="flex-1 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed font-bold transition-colors">
                        Valider la vente
                    </button>
                </div>
            </div>
        </div>
    </div>

    {# ====== MODAL TICKET ====== #}
    <div data-pos-cashier-target="receiptModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="fixed inset-0 bg-black bg-opacity-50" data-action="click->pos-cashier#closeReceipt"></div>
            <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-sm p-6 text-center">
                <div class="mb-4">
                    <div class="w-16 h-16 mx-auto bg-emerald-100 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mt-3">Vente enregistrée !</h3>
                    <p class="text-gray-500 mt-1">N° <span data-pos-cashier-target="receiptSaleNumber"></span></p>
                </div>
                <div class="text-3xl font-bold text-emerald-600 mb-2" data-pos-cashier-target="receiptTotal"></div>
                <div class="text-sm text-gray-500 mb-4" data-pos-cashier-target="receiptChange"></div>

                <div class="flex gap-3">
                    <button data-action="click->pos-cashier#printReceipt" class="flex-1 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 font-medium">
                        <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                        Imprimer
                    </button>
                    <button data-action="click->pos-cashier#newSale" class="flex-1 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-bold">
                        Nouvelle vente
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}