@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div>
            <a href="{{ route('client.orders.index') }}" class="text-gray-500 hover:text-gray-700 mb-2 inline-block">
                <i class="fas fa-arrow-left"></i> Retour à mes commandes
            </a>
            <h1 class="text-3xl font-bold text-gray-900">
                Commande #{{ $order->id }}

                @if($order->validation_status == 'attente_creation')
                    <span class="ml-3 text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">En cours de création</span>
                @elseif($order->validation_status == 'attente_validation_client')
                    <span class="ml-3 text-sm bg-orange-100 text-orange-800 px-3 py-1 rounded-full animate-pulse border border-orange-200">Validation requise</span>
                @elseif($order->validation_status == 'valide')
                    <span class="ml-3 text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full border border-green-200">Validé pour fabrication</span>
                @elseif($order->validation_status == 'refuse')
                    <span class="ml-3 text-sm bg-red-100 text-red-800 px-3 py-1 rounded-full">Modification demandée</span>
                @endif
            </h1>
            <p class="text-gray-500">Du {{ $order->created_at->format('d/m/Y') }} • Total : {{ $order->total_price }} €</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <div class="lg:col-span-1 space-y-6">
            <x-card class="p-6">
                <h3 class="font-bold text-gray-800 mb-4 border-b pb-2">Articles commandés</h3>
                @foreach($order->items as $item)
                    <div class="flex gap-4 mb-4 last:mb-0">
                        <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden border">
                            <img src="{{ $item->preview_image }}" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <div class="font-bold text-sm">{{ $item->product_name }}</div>
                            <div class="text-xs text-gray-500">Qté: {{ $item->quantity }}</div>
                            <div class="text-xs font-bold text-primary">{{ $item->price }} €</div>
                        </div>
                    </div>
                @endforeach
            </x-card>

            <x-card class="p-6">
                <h3 class="font-bold text-gray-800 mb-4 border-b pb-2">Livraison</h3>
                <p class="text-sm text-gray-600">
                    {{ $order->customer_name }}<br>
                    {{ $order->address }}<br>
                    {{ $order->zip_code }} {{ $order->city }}
                </p>
            </x-card>
        </div>

        <div class="lg:col-span-2 space-y-6">

            @if($order->artisan_proof_image)
                <x-card class="p-6 border-2 {{ $order->validation_status == 'attente_validation_client' ? 'border-orange-300 bg-orange-50' : 'border-gray-200' }}">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-eye text-primary mr-2"></i> Aperçu avant fabrication (B.A.T)
                    </h3>

                    <div class="bg-white p-2 rounded-lg border shadow-sm mb-4 inline-block">
                        <img src="{{ asset($order->artisan_proof_image) }}" class="max-h-64 rounded">
                    </div>

                    @if($order->validation_status == 'attente_validation_client')
                        <div class="bg-white p-4 rounded-lg border border-orange-200">
                            <p class="mb-4 font-bold text-gray-800">Cet aperçu vous convient-il ?</p>
                            <form action="{{ route('client.orders.status', $order->id) }}" method="POST" class="flex gap-4">
                                @csrf
                                <button type="submit" name="action" value="valider" class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-theme shadow hover:scale-105 transition">
                                    ✅ OUI, LANCER LA FABRICATION
                                </button>
                                <button type="submit" name="action" value="refuser" class="bg-white text-red-500 border border-red-500 font-bold py-3 px-4 rounded-theme hover:bg-red-50 transition">
                                    ❌ NON, je veux changer
                                </button>
                            </form>
                        </div>
                    @elseif($order->validation_status == 'valide')
                         <div class="text-green-600 font-bold bg-green-100 p-4 rounded-lg border border-green-200">
                            <i class="fas fa-check-circle"></i> Vous avez validé ce design. La fabrication est lancée !
                        </div>
                    @endif
                </x-card>
            @endif

            <x-card class="flex flex-col h-[500px]"> <div class="p-4 border-b bg-gray-50 font-bold text-gray-700 flex justify-between">
                    <span>💬 Discussion avec l'artisan</span>
                </div>

                <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50/50" id="chat-box">
                    @include('partials.chat-messages', ['order' => $order])
                </div>

                <div class="p-4 border-t bg-white">
                    <form action="{{ route('client.orders.message', $order->id) }}" method="POST" class="flex gap-2">
                        @csrf
                        <input type="text" name="content" required placeholder="Écrivez votre message..."
                               class="flex-1 border-gray-300 rounded-full px-4 py-2 focus:ring-primary focus:border-primary">
                        <button type="submit" class="bg-primary hover:bg-primary-dark text-white rounded-full w-10 h-10 flex items-center justify-center shadow transition hover:scale-110">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </x-card>

        </div>
    </div>
</div>

<script>
    const chatBox = document.getElementById('chat-box');
    const orderId = "{{ $order->id }}";
    const refreshUrl = "{{ route('client.orders.chat_refresh', $order->id) }}";
    let currentStatus = "{{ $order->validation_status }}";

    // Fonction pour scroller en bas
    function scrollToBottom() {
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    // On scrolle au chargement de la page
    scrollToBottom();

    // LE CŒUR DU SYSTÈME : Une boucle qui tourne toutes les 3 secondes
    setInterval(() => {
        fetch(refreshUrl)
            .then(response => response.json())
            .then(data => {
                // 1. On compare le contenu HTML. Si ça a changé, on met à jour.
                if (chatBox.innerHTML.trim() !== data.html.trim()) {
                    chatBox.innerHTML = data.html;
                    scrollToBottom(); // On redescend car nouveau message
                }

                // 2. Si le statut de la commande a changé (ex: l'admin a envoyé une photo)
                // On recharge TOUTE la page pour afficher les boutons de validation
                if (data.status !== currentStatus) {
                    location.reload();
                }
            })
            .catch(error => console.error('Erreur refresh:', error));
    }, 3000); // 3000ms = 3 secondes
</script>
@endsection