@extends('layouts.app')

@section('content')

<div class="max-w-7xl mx-auto">

    <div class="flex justify-between items-center mb-6">
        <a href="{{ route('admin.orders.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded shadow hover:bg-gray-700">
            ← Retour liste
        </a>
        <h1 class="text-3xl font-bold text-gray-800">Commande #{{ $order->id }}</h1>
        <div class="text-right">
             <span class="px-3 py-1 rounded-full text-sm font-bold
                {{ $order->status == 'paye' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                Paiement : {{ $order->status }}
            </span>
        </div>
    </div>

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

        <div class="space-y-6">

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="font-bold text-gray-700 border-b pb-2 mb-4">👤 Client</h3>
                <p><strong>{{ $order->customer_name }}</strong></p>
                <p><a href="mailto:{{ $order->customer_email }}" class="text-blue-600 underline">{{ $order->customer_email }}</a></p>
                <div class="mt-4 bg-gray-50 p-3 rounded text-sm text-gray-600">
                    📍 {{ $order->address }}<br>
                    {{ $order->zip_code }} {{ $order->city }}
                </div>
            </div>
            <div class="bg-white shadow rounded-lg p-6 mb-6 border-l-4 border-green-500">
                <h3 class="font-bold text-gray-800 mb-4">💰 Paiement & Facture</h3>

                <form action="{{ route('admin.orders.update_payment', $order->id) }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <div class="mb-3">
                        <label class="block text-xs font-bold text-gray-500 uppercase">Statut du paiement</label>
                        <select name="payment_status" class="w-full border rounded p-2 text-sm">
                            <option value="en_attente" {{ $order->payment_status == 'en_attente' ? 'selected' : '' }}>⏳ En attente</option>
                            <option value="paye" {{ $order->payment_status == 'paye' ? 'selected' : '' }}>✅ Payé (Validé)</option>
                            <option value="rembourse" {{ $order->payment_status == 'rembourse' ? 'selected' : '' }}>↩️ Remboursé</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="block text-xs font-bold text-gray-500 uppercase">Mode de règlement</label>
                        <select name="payment_method" class="w-full border rounded p-2 text-sm">
                            <option value="" {{ is_null($order->payment_method) ? 'selected' : '' }}>-- Non défini --</option>
                            <option value="stripe" {{ $order->payment_method == 'stripe' ? 'selected' : '' }}>💳 Carte (En ligne)</option>
                            <option value="especes" {{ $order->payment_method == 'especes' ? 'selected' : '' }}>💶 Espèces (Marché)</option>
                            <option value="tpe" {{ $order->payment_method == 'tpe' ? 'selected' : '' }}>💳 Carte (TPE Physique)</option>
                            <option value="cheque" {{ $order->payment_method == 'cheque' ? 'selected' : '' }}>🖊️ Chèque</option>
                            <option value="virement" {{ $order->payment_method == 'virement' ? 'selected' : '' }}>🏦 Virement</option>
                        </select>
                    </div>

                    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white text-xs font-bold py-2 rounded mb-4">
                        Mettre à jour le paiement
                    </button>
                </form>

                <a href="{{ route('orders.invoice', $order->id) }}" class="block text-center border border-gray-300 bg-gray-50 hover:bg-gray-100 text-gray-700 font-bold py-2 rounded text-sm">
                    <i class="fas fa-file-pdf text-red-500 mr-2"></i> Télécharger Facture
                </a>
            </div>

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="font-bold text-gray-700 border-b pb-2 mb-4">📂 Fichiers Client</h3>
                @foreach($order->items as $item)
                    <div class="mb-6 last:mb-0">
                        <div class="flex items-center gap-4 mb-2">
                            <img src="{{ $item->preview_image }}" class="w-16 h-16 object-cover rounded border">
                            <div>
                                <div class="font-bold">{{ $item->product_name }}</div>
                                <div class="text-xs text-gray-500">JSON ID: {{ $item->id }}</div>
                            </div>
                        </div>

                        <div class="flex flex-col gap-2">
                            @if($item->source_image_path)
                                <a href="{{ asset($item->source_image_path) }}" download class="block text-center bg-purple-600 text-white text-xs font-bold py-2 rounded">
                                    📎 Photo Client
                                </a>
                            @endif

                            <button onclick="generateHD('{{ $item->id }}')" class="bg-gray-800 hover:bg-black text-white text-xs py-2 rounded shadow transition">
                                📥 Générer Rendu Impression (HD)
                            </button>

                            <textarea id="json-{{ $item->id }}" class="hidden">{{ $item->design_json }}</textarea>
                            <canvas id="canvas-{{ $item->id }}" width="500" height="500" class="hidden"></canvas>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="bg-white p-6 rounded-lg shadow border-2 border-primary">
                <h3 class="font-bold text-primary border-b pb-2 mb-4">✅ Workflow B.A.T</h3>

                <p class="text-sm text-gray-600 mb-2">Statut actuel :</p>
                <div class="mb-6 font-bold text-lg">
                    @if($order->validation_status == 'attente_creation')
                        🔵 À créer
                    @elseif($order->validation_status == 'attente_validation_client')
                        🟠 En attente client
                    @elseif($order->validation_status == 'valide')
                        🟢 VALIDÉ PAR CLIENT
                    @elseif($order->validation_status == 'refuse')
                        🔴 REFUSÉ (Modif demandée)
                    @endif
                </div>

                <form action="{{ route('admin.orders.proof', $order->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <label class="block text-sm font-medium text-gray-700 mb-2">Envoyer une maquette (Preuve)</label>
                    <input type="file" name="proof_image" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-dark cursor-pointer mb-2">
                    <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-2 rounded transition">
                        Envoyer au client 🚀
                    </button>
                </form>

                @if($order->artisan_proof_image)
                    <div class="mt-4">
                        <p class="text-xs text-gray-500 mb-1">Dernière maquette envoyée :</p>
                        <a href="{{ asset($order->artisan_proof_image) }}" target="_blank">
                            <img src="{{ asset($order->artisan_proof_image) }}" class="w-full rounded border hover:opacity-75 transition">
                        </a>
                    </div>
                @endif
            </div>

        </div>

        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow h-[600px] flex flex-col">
                <div class="p-4 border-b bg-gray-50 font-bold text-gray-700">
                    💬 Discussion avec le client
                </div>

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

                <div class="p-4 border-t">
                    <form action="{{ route('admin.orders.message', $order->id) }}" method="POST" class="flex gap-2">
                        @csrf
                        <input type="text" name="content" placeholder="Répondre au client..." required class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-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">
                            ➤
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    const chatBox = document.getElementById('chat-box');
    const orderId = "{{ $order->id }}";
    // URL spécifique Admin pour le rafraîchissement
    const refreshUrl = "{{ route('admin.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();

    // Boucle de mise à jour (toutes les 3 secondes)
    setInterval(() => {
        fetch(refreshUrl)
            .then(response => response.json())
            .then(data => {
                // 1. Si le HTML est différent, on met à jour le chat
                if (chatBox.innerHTML.trim() !== data.html.trim()) {
                    chatBox.innerHTML = data.html;
                    scrollToBottom();
                }

                // 2. Si le statut de la commande a changé (ex: le client a validé)
                if (data.status !== currentStatus) {
                    location.reload();
                }
            })
            .catch(error => console.error('Erreur refresh:', error));
    }, 3000);
</script>
<script>
    function generateHD(itemId) {
        // 1. Récupérer le JSON
        const jsonContent = document.getElementById('json-' + itemId).value;
        if (!jsonContent || jsonContent === 'null') {
            alert("Aucun design personnalisé détecté pour cet article.");
            return;
        }

        // 2. Créer un canvas Fabric temporaire
        const canvas = new fabric.Canvas('canvas-' + itemId);

        // 3. Charger le design
        canvas.loadFromJSON(jsonContent, function() {
            // Une fois chargé...

            // Masquer le masque (l'overlay mug) pour ne garder que le design
            // (Supposons que le masque est la dernière image ou qu'on veut tout imprimer)
            // Pour l'impression, on veut souvent TOUT le design à plat.

            // 4. Exporter en Grand (Multiplicateur x3 pour 300DPI)
            const dataURL = canvas.toDataURL({
                format: 'png',
                multiplier: 3 // Rendu 3x plus grand pour l'impression
            });

            // 5. Créer un lien de téléchargement automatique
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'Design_HD_Item_' + itemId + '.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            alert("Image HD générée et téléchargée !");
        });
    }
</script>
@endsection