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

{% block page_title %}{{ supplier.name }}{% endblock %}

{% block content %}
<div class="space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-indigo-600 to-purple-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-truck mr-3"></i>{{ supplier.name }}</h1>
                <p class="mt-2 text-indigo-100">
                    {% if supplier.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>
                    {% else %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-500/30 text-white">Inactif</span>
                    {% endif %}
                    {% if supplier.city %}— {{ supplier.city }}, {{ supplier.country }}{% endif %}
                </p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_suppliers_edit', {id: supplier.id}) }}"
                   class="inline-flex items-center px-4 py-2 bg-white text-indigo-700 rounded-lg font-medium text-sm hover:bg-indigo-50 transition-colors">
                    <i class="fas fa-edit mr-2"></i>Modifier
                </a>
                <a href="{{ path('manager_pos_purchase_orders_create', {supplier: supplier.id}) }}"
                   class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors">
                    <i class="fas fa-file-invoice mr-2"></i>Nouvelle commande
                </a>
                <a href="{{ path('manager_pos_suppliers_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">
        {# Infos fournisseur #}
        <div class="lg:col-span-1 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-indigo-600"></i>Informations</h2>
                <dl class="space-y-3">
                    {% if supplier.contactName %}
                        <div>
                            <dt class="text-xs text-gray-500 dark:text-gray-400">Contact</dt>
                            <dd class="text-sm font-medium text-gray-900 dark:text-white">{{ supplier.contactName }}</dd>
                        </div>
                    {% endif %}
                    {% if supplier.email %}
                        <div>
                            <dt class="text-xs text-gray-500 dark:text-gray-400">Email</dt>
                            <dd class="text-sm text-gray-900 dark:text-white"><a href="mailto:{{ supplier.email }}" class="text-indigo-600 hover:underline">{{ supplier.email }}</a></dd>
                        </div>
                    {% endif %}
                    {% if supplier.phone %}
                        <div>
                            <dt class="text-xs text-gray-500 dark:text-gray-400">Téléphone</dt>
                            <dd class="text-sm text-gray-900 dark:text-white"><a href="tel:{{ supplier.phone }}" class="text-indigo-600 hover:underline">{{ supplier.phone }}</a></dd>
                        </div>
                    {% endif %}
                    {% if supplier.fullAddress %}
                        <div>
                            <dt class="text-xs text-gray-500 dark:text-gray-400">Adresse</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">{{ supplier.fullAddress }}</dd>
                        </div>
                    {% endif %}
                    {% if supplier.taxId %}
                        <div>
                            <dt class="text-xs text-gray-500 dark:text-gray-400">NINEA / ID fiscal</dt>
                            <dd class="text-sm text-gray-900 dark:text-white font-mono">{{ supplier.taxId }}</dd>
                        </div>
                    {% endif %}
                    {% if supplier.paymentTerms %}
                        <div>
                            <dt class="text-xs text-gray-500 dark:text-gray-400">Conditions de paiement</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">{{ supplier.paymentTerms }}</dd>
                        </div>
                    {% endif %}
                </dl>
            </div>

            {% if supplier.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">{{ supplier.notes|nl2br }}</p>
                </div>
            {% endif %}

            <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-clock mr-2 text-gray-400"></i>Métadonnées</h2>
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Créé le</dt>
                        <dd class="text-gray-900 dark:text-white">{{ supplier.createdAt|date('d/m/Y') }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Modifié le</dt>
                        <dd class="text-gray-900 dark:text-white">{{ supplier.updatedAt|date('d/m/Y') }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        {# Produits liés #}
        <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 flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><i class="fas fa-link mr-2 text-indigo-600"></i>Produits liés ({{ supplierProducts|length }})</h2>
                </div>

                {# Formulaire d'ajout #}
                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
                    {{ form_start(linkForm, {'action': path('manager_pos_suppliers_link_product', {id: supplier.id}), 'attr': {'class': 'grid grid-cols-1 md:grid-cols-5 gap-3 items-end'}}) }}
                        <div>{{ form_row(linkForm.product) }}</div>
                        <div>{{ form_row(linkForm.purchasePrice) }}</div>
                        <div>{{ form_row(linkForm.supplierReference) }}</div>
                        <div>{{ form_row(linkForm.isPreferred) }}</div>
                        <div>
                            <button type="submit" class="w-full inline-flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-link mr-2"></i>Lier
                            </button>
                        </div>
                    {{ form_end(linkForm) }}
                </div>

                {% if supplierProducts|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">Produit</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Prix d'achat</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Réf. fournisseur</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Qté min.</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Délai</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Préféré</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Action</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                {% for sp in supplierProducts %}
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                        <td class="px-4 py-3">
                                            <div class="font-medium text-gray-900 dark:text-white text-sm">{{ sp.product.name }}</div>
                                            <div class="text-xs text-gray-500">{{ sp.product.sku }}</div>
                                        </td>
                                        <td class="px-4 py-3 text-right text-sm font-medium text-gray-900 dark:text-white">
                                            {{ sp.purchasePrice|number_format(0, ',', ' ') }} FCFA
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500 font-mono">{{ sp.supplierReference ?? '-' }}</td>
                                        <td class="px-4 py-3 text-center text-sm text-gray-500">{{ sp.minOrderQuantity }}</td>
                                        <td class="px-4 py-3 text-center text-sm text-gray-500">{{ sp.leadTimeDays ? sp.leadTimeDays ~ ' j' : '-' }}</td>
                                        <td class="px-4 py-3 text-center">
                                            {% if sp.preferred %}
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"><i class="fas fa-star mr-1"></i>Oui</span>
                                            {% else %}
                                                <span class="text-gray-400 text-xs">Non</span>
                                            {% endif %}
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <button type="button" data-modal-target="confirm-modal-unlink-{{ sp.id }}" data-modal-toggle="confirm-modal-unlink-{{ sp.id }}" data-no-loader class="p-1.5 text-red-600 hover:bg-red-100 rounded" title="Délier">
                                                <i class="fas fa-unlink"></i>
                                            </button>
                                            {% include 'components/pos/_confirm_modal.html.twig' with {
                                                modal_id: 'unlink-' ~ sp.id,
                                                title: 'Délier le produit',
                                                message: 'Délier ce produit du fournisseur ?',
                                                action_url: path('manager_pos_suppliers_unlink_product', {id: supplier.id, spId: sp.id}),
                                                csrf_token_name: 'unlink_product_' ~ sp.id,
                                            } %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                        <i class="fas fa-box-open text-3xl mb-2 text-gray-300"></i>
                        <p>Aucun produit lié. Utilisez le formulaire ci-dessus pour associer des produits.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}