{% extends 'base.html.twig' %}

{% block title %}Commande {{ order.orderNumber }} - Espace Vendeur{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ path('vendor_orders') }}" class="text-primary-600 hover:underline">
            <i class="fas fa-arrow-left mr-2"></i> Retour aux commandes
        </a>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <!-- En-tête -->
        <div class="p-6 border-b bg-gradient-to-r from-gray-50 to-white">
            <div class="flex justify-between items-center flex-wrap gap-4">
                <div>
                    <h1 class="text-2xl font-bold">Commande #{{ order.orderNumber }}</h1>
                    <p class="text-gray-500 mt-1">Passée le {{ order.createdAt|date('d/m/Y à H:i') }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <span class="px-3 py-1 rounded-full text-sm font-semibold 
                        {% if order.status == 'pending' %}bg-yellow-100 text-yellow-800
                        {% elseif order.status == 'confirmed' %}bg-blue-100 text-blue-800
                        {% elseif order.status == 'preparing' %}bg-purple-100 text-purple-800
                        {% elseif order.status == 'shipped' %}bg-indigo-100 text-indigo-800
                        {% elseif order.status == 'delivered' %}bg-green-100 text-green-800
                        {% elseif order.status == 'cancelled' %}bg-red-100 text-red-800
                        {% endif %}">
                        {{ order.status|trans }}
                    </span>
                    
                    <!-- Menu déroulant changement de statut -->
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" 
                                class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 text-sm">
                            <i class="fas fa-sync-alt mr-1"></i> Changer statut
                        </button>
                        <div x-show="open" 
                             @click.away="open = false"
                             class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl z-10 border"
                             x-cloak>
                            <div class="py-1">
                                <button onclick="updateStatus('confirmed')" 
                                        class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-sm">
                                    <i class="fas fa-check-circle text-blue-500 mr-2"></i> Confirmer
                                </button>
                                <button onclick="updateStatus('preparing')" 
                                        class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-sm">
                                    <i class="fas fa-box-open text-purple-500 mr-2"></i> Préparer
                                </button>
                                <button onclick="updateStatus('shipped')" 
                                        class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-sm">
                                    <i class="fas fa-truck text-indigo-500 mr-2"></i> Expédier
                                </button>
                                <button onclick="updateStatus('delivered')" 
                                        class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-sm">
                                    <i class="fas fa-home text-green-500 mr-2"></i> Livrer
                                </button>
                                <hr class="my-1">
                                <button onclick="updateStatus('cancelled')" 
                                        class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-sm text-red-600">
                                    <i class="fas fa-times-circle mr-2"></i> Annuler
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Timeline de suivi -->
        <div class="p-6 border-b bg-gray-50">
            <h2 class="font-semibold text-lg mb-4">Suivi de la commande</h2>
            <div class="relative">
                <div class="flex justify-between items-center">
                    <div class="flex-1 text-center">
                        <div class="w-10 h-10 mx-auto rounded-full flex items-center justify-center
                            {% if order.status in ['pending', 'confirmed', 'preparing', 'shipped', 'delivered'] %}
                                bg-green-500 text-white
                            {% else %}
                                bg-gray-300 text-gray-500
                            {% endif %}">
                            <i class="fas fa-shopping-cart text-sm"></i>
                        </div>
                        <p class="text-xs mt-2">Commandée</p>
                        <p class="text-xs text-gray-500">{{ order.createdAt|date('d/m') }}</p>
                    </div>
                    <div class="flex-1 text-center">
                        <div class="w-10 h-10 mx-auto rounded-full flex items-center justify-center
                            {% if order.status in ['confirmed', 'preparing', 'shipped', 'delivered'] %}
                                bg-green-500 text-white
                            {% else %}
                                bg-gray-300 text-gray-500
                            {% endif %}">
                            <i class="fas fa-check-circle text-sm"></i>
                        </div>
                        <p class="text-xs mt-2">Confirmée</p>
                        <p class="text-xs text-gray-500">{% if order.confirmedAt %}{{ order.confirmedAt|date('d/m') }}{% endif %}</p>
                    </div>
                    <div class="flex-1 text-center">
                        <div class="w-10 h-10 mx-auto rounded-full flex items-center justify-center
                            {% if order.status in ['preparing', 'shipped', 'delivered'] %}
                                bg-green-500 text-white
                            {% else %}
                                bg-gray-300 text-gray-500
                            {% endif %}">
                            <i class="fas fa-box-open text-sm"></i>
                        </div>
                        <p class="text-xs mt-2">Préparée</p>
                        <p class="text-xs text-gray-500">{% if order.preparingAt %}{{ order.preparingAt|date('d/m') }}{% endif %}</p>
                    </div>
                    <div class="flex-1 text-center">
                        <div class="w-10 h-10 mx-auto rounded-full flex items-center justify-center
                            {% if order.status in ['shipped', 'delivered'] %}
                                bg-green-500 text-white
                            {% else %}
                                bg-gray-300 text-gray-500
                            {% endif %}">
                            <i class="fas fa-truck text-sm"></i>
                        </div>
                        <p class="text-xs mt-2">Expédiée</p>
                        <p class="text-xs text-gray-500">{% if order.shippedAt %}{{ order.shippedAt|date('d/m') }}{% endif %}</p>
                    </div>
                    <div class="flex-1 text-center">
                        <div class="w-10 h-10 mx-auto rounded-full flex items-center justify-center
                            {% if order.status == 'delivered' %}
                                bg-green-500 text-white
                            {% else %}
                                bg-gray-300 text-gray-500
                            {% endif %}">
                            <i class="fas fa-home text-sm"></i>
                        </div>
                        <p class="text-xs mt-2">Livrée</p>
                        <p class="text-xs text-gray-500">{% if order.deliveredAt %}{{ order.deliveredAt|date('d/m') }}{% endif %}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Articles commandés -->
        <div class="p-6 border-b">
            <h2 class="font-semibold text-lg mb-4">Articles commandés</h2>
            
            <div class="space-y-4">
                {% for item in vendorItems %}
                    <div class="flex items-center justify-between border-b pb-4">
                        <div class="flex items-center">
                            {% set image = item.product.images|first %}
                            <img src="{{ image ? asset('uploads/products/' ~ image) : 'https://via.placeholder.com/80' }}" 
                                 alt="{{ item.product.name }}"
                                 class="w-16 h-16 object-cover rounded">
                            <div class="ml-4">
                                <h3 class="font-semibold">{{ item.product.name }}</h3>
                                <p class="text-sm text-gray-500">Référence: {{ item.product.sku }}</p>
                                <p class="text-sm text-gray-500">Quantité: {{ item.quantity }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="font-semibold">{{ (item.price * item.quantity)|number_format(2, ',', ' ') }} €</div>
                            <div class="text-sm text-gray-500">{{ item.price|number_format(2, ',', ' ') }} € l'unité</div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

        <!-- Informations client et livraison -->
        <div class="p-6 border-b">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Adresse de livraison -->
                <div>
                    <h3 class="font-semibold mb-3">Adresse de livraison</h3>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="font-medium">{{ order.shippingAddress.fullName|default(order.user.fullName) }}</p>
                        <p>{{ order.shippingAddress.address|default('') }}</p>
                        <p>{{ order.shippingAddress.postalCode|default('') }} {{ order.shippingAddress.city|default('') }}</p>
                        <p>{{ order.shippingAddress.country|default('FR')|country_name('fr') }}</p>
                        {% if order.shippingAddress.phone|default(false) %}
                            <p class="mt-2"><i class="fas fa-phone mr-2"></i>{{ order.shippingAddress.phone }}</p>
                        {% endif %}
                    </div>
                </div>

                <!-- Informations de livraison -->
                <div>
                    <h3 class="font-semibold mb-3">Informations de livraison</h3>
                    <div class="bg-gray-50 p-4 rounded-lg space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Transporteur</span>
                            <span class="font-medium">
                                {% if order.shippingMethod %}
                                    {{ order.shippingMethod.name }}
                                {% else %}
                                    Livraison standard
                                {% endif %}
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Frais de livraison</span>
                            <span>{{ order.shippingCost|number_format(2, ',', ' ') }} €</span>
                        </div>
                        
                        <!-- Numéro de suivi -->
                        <div class="mt-3 pt-3 border-t">
                            <label class="block text-sm font-medium mb-2">Numéro de suivi</label>
                            <div class="flex gap-2">
                                <input type="text" 
                                       id="trackingNumber" 
                                       value="{{ order.shipment.trackingNumber|default('') }}"
                                       placeholder="Ex: 6C123456789FR"
                                       class="flex-1 border rounded-lg px-3 py-2 text-sm">
                                <button onclick="updateTrackingNumber()" 
                                        class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 text-sm">
                                    <i class="fas fa-save"></i>
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">
                                <i class="fas fa-info-circle mr-1"></i> 
                                Saisissez le numéro de suivi fourni par le transporteur
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Récapitulatif des montants -->
        <div class="p-6">
            <div class="flex justify-end">
                <div class="w-80 space-y-2">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Sous-total</span>
                        <span>{{ order.subtotal|number_format(2, ',', ' ') }} €</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Livraison</span>
                        <span>{{ order.shippingCost|number_format(2, ',', ' ') }} €</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">TVA (20%)</span>
                        <span>{{ order.tax|number_format(2, ',', ' ') }} €</span>
                    </div>
                    <div class="flex justify-between font-bold text-lg pt-2 border-t">
                        <span>Total</span>
                        <span class="text-primary-600">{{ order.total|number_format(2, ',', ' ') }} €</span>
                    </div>
                    
                    <!-- Commission -->
                    {% set firstItem = vendorItems|first %}
                    {% if firstItem %}
                    <div class="flex justify-between text-sm text-gray-500 pt-2">
                        <span>Commission ({{ firstItem.commissionRate|default(10) }}%)</span>
                        <span>- {{ firstItem.commissionAmount|default(0)|number_format(2, ',', ' ') }} €</span>
                    </div>
                    <div class="flex justify-between font-semibold text-green-600">
                        <span>Votre gain</span>
                        <span>{{ firstItem.vendorEarnings|default(0)|number_format(2, ',', ' ') }} €</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function updateStatus(status) {
        if (!confirm(`Passer cette commande en statut "${status}" ?`)) {
            return;
        }
        
        fetch(`/vendor/orders/{{ order.id }}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ status: status })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                alert('Erreur: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erreur lors de la mise à jour du statut');
        });
    }
    
    function updateTrackingNumber() {
        const trackingNumber = document.getElementById('trackingNumber').value;
        
        if (!trackingNumber) {
            alert('Veuillez saisir un numéro de suivi');
            return;
        }
        
        fetch(`/vendor/orders/{{ order.id }}/tracking`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ tracking_number: trackingNumber })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Numéro de suivi enregistré avec succès !');
            } else {
                alert('Erreur: ' + (data.error || 'Impossible d\'enregistrer'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erreur lors de l\'enregistrement');
        });
    }
</script>

<style>
    [x-cloak] { display: none !important; }
</style>
{% endblock %}