{% extends 'layouts/authenticated.html.twig' %}
{% import 'flowbite_components/macros.html.twig' as flowbite %}

{% block page_title %}Configuration POS{% endblock %}

{% block content %}
<div class="space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-emerald-600 to-teal-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-cog mr-3"></i>Configuration POS
                </h1>
                <p class="mt-2 text-emerald-100">Paramétrage de la boutique {{ company.name }}</p>
            </div>
            <div>
                {% if settings.isPosEnabled %}
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                        <i class="fas fa-check-circle mr-1"></i> POS Activé
                    </span>
                {% else %}
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                        <i class="fas fa-times-circle mr-1"></i> POS Désactivé
                    </span>
                {% endif %}
            </div>
        </div>
    </div>

    {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

    {# Activation POS #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                    <i class="fas fa-power-off mr-2 text-emerald-500"></i>Activation du module
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Activez le module POS pour accéder à toutes les fonctionnalités de vente</p>
            </div>
            <div>
                {{ form_widget(form.isPosEnabled, {'attr': {'class': 'w-5 h-5 text-emerald-600 rounded focus:ring-emerald-500'}}) }}
            </div>
        </div>
    </div>

    {# Onglets de configuration #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow" data-controller="pos-settings">
        {# Navigation onglets #}
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="flex -mb-px overflow-x-auto" aria-label="Onglets">
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="general" data-tab="general"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-emerald-500 text-emerald-600">
                    <i class="fas fa-store mr-2"></i>Général
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="stock" data-tab="stock"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-boxes-stacked mr-2"></i>Stock
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="sales" data-tab="sales"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-shopping-cart mr-2"></i>Ventes
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="payments" data-tab="payments"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-credit-card mr-2"></i>Paiements
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="employees" data-tab="employees"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-user-shield mr-2"></i>Employés
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="notifications" data-tab="notifications"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-bell mr-2"></i>Notifications
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="receipt" data-tab="receipt"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-receipt mr-2"></i>Ticket
                </button>
                <button type="button" data-action="pos-settings#switchTab" data-pos-settings-tab-param="barcode" data-tab="barcode"
                    class="pos-tab-btn whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-barcode mr-2"></i>Code-barres
                </button>
            </nav>
        </div>

        <div class="p-6">
            {# Onglet Général #}
            <div class="pos-tab-content" data-pos-settings-target="tabContent" data-tab="general">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Paramètres généraux</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>{{ form_row(form.shopName) }}</div>
                    <div>{{ form_row(form.currency) }}</div>
                    <div>{{ form_row(form.currencySymbol) }}</div>
                    <div>{{ form_row(form.taxRate) }}</div>
                    <div>{{ form_row(form.decimalPlaces) }}</div>
                    <div class="flex items-center pt-6">{{ form_row(form.taxIncluded) }}</div>
                </div>
            </div>

            {# Onglet Stock #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="stock">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Paramètres de stock</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>{{ form_row(form.lowStockThreshold) }}</div>
                    <div>{{ form_row(form.criticalStockThreshold) }}</div>
                    <div class="flex items-center pt-6">{{ form_row(form.enableNegativeStock) }}</div>
                </div>
            </div>

            {# Onglet Ventes #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="sales">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Paramètres de vente</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex items-center">{{ form_row(form.allowDiscount) }}</div>
                    <div>{{ form_row(form.maxDiscountPercent) }}</div>
                    <div class="flex items-center">{{ form_row(form.requireCustomer) }}</div>
                    <div class="flex items-center">{{ form_row(form.allowCreditSales) }}</div>
                    <div>{{ form_row(form.creditLimit) }}</div>
                    <div class="flex items-center">{{ form_row(form.enableLoyalty) }}</div>
                    <div>{{ form_row(form.loyaltyPointsPerUnit) }}</div>
                </div>
            </div>

            {# Onglet Paiements #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="payments">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Moyens de paiement</h3>
                <div class="space-y-6">
                    <div>{{ form_row(form.acceptedPaymentMethods) }}</div>
                    <div>{{ form_row(form.mobileMoneyProviders) }}</div>
                </div>
            </div>

            {# Onglet Employés #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="employees">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Paramètres employés</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex items-center">{{ form_row(form.requireEmployeePin) }}</div>
                    <div>{{ form_row(form.autoLogoutMinutes) }}</div>
                    <div class="flex items-center">{{ form_row(form.allowEmployeeVoid) }}</div>
                    <div class="flex items-center">{{ form_row(form.allowEmployeeRefund) }}</div>
                </div>
            </div>

            {# Onglet Notifications #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="notifications">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Notifications</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex items-center">{{ form_row(form.lowStockAlertEnabled) }}</div>
                    <div class="flex items-center">{{ form_row(form.dailyReportEnabled) }}</div>
                    <div class="flex items-center">{{ form_row(form.largeSaleAlertEnabled) }}</div>
                    <div>{{ form_row(form.largeSaleThreshold) }}</div>
                </div>
            </div>

            {# Onglet Ticket #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="receipt">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Ticket de caisse</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">{{ form_row(form.receiptHeader) }}</div>
                    <div class="md:col-span-2">{{ form_row(form.receiptFooter) }}</div>
                    <div class="flex items-center">{{ form_row(form.receiptShowTax) }}</div>
                    <div class="flex items-center">{{ form_row(form.receiptShowLogo) }}</div>
                </div>
            </div>

            {# Onglet Code-barres #}
            <div class="pos-tab-content hidden" data-pos-settings-target="tabContent" data-tab="barcode">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Codes-barres</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>{{ form_row(form.barcodeFormat) }}</div>
                    <div class="flex items-center pt-6">{{ form_row(form.autoGenerateBarcode) }}</div>
                    <div class="flex items-center">{{ form_row(form.autoGenerateSku) }}</div>
                </div>
            </div>
        </div>
    </div>

    {# Bouton sauvegarder #}
    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors">
            <i class="fas fa-save mr-2"></i>
            Enregistrer la configuration
        </button>
    </div>

    {{ form_end(form) }}
</div>
{% endblock %}