<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bon de Commande - {{ $purchaseOrder->reference }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @media print {
            .no-print { display: none !important; }
            body { margin: 0; }
            .print-container { margin: 0; }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="print-container max-w-4xl mx-auto bg-white p-8">
      
        <!-- Header -->
        <div class="border-b-2 border-gray-300 pb-6 mb-6">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">{{ \App\Models\Setting::merchantName() }}</h1>
                    <p class="text-gray-600">{{ \App\Models\Setting::merchantAddress() }}</p>
                    <p class="text-gray-600">Tél: {{ \App\Models\Setting::merchantPhone() }}</p>
                    <p class="text-gray-600">Email: {{ \App\Models\Setting::merchantEmail() }}</p>
                </div>
                <div class="text-right">
                    <h2 class="text-2xl font-bold text-blue-600">BON DE COMMANDE</h2>
                    <p class="text-lg font-semibold">{{ $purchaseOrder->reference }}</p>
                    <p class="text-gray-600">Date: {{ $purchaseOrder->order_date?->format('d/m/Y') ?? $purchaseOrder->created_at->format('d/m/Y') }}</p>
                </div>
            </div>
        </div>

        <!-- Supplier Info -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <h3 class="font-semibold text-gray-900 mb-2">Fournisseur:</h3>
                <div class="bg-gray-50 p-4 rounded">
                    @if($purchaseOrder->supplier)
                        <p class="font-semibold">{{ $purchaseOrder->supplier->name }}</p>
                        @if($purchaseOrder->supplier->phone)
                            <p>Tél: {{ $purchaseOrder->supplier->phone }}</p>
                        @endif
                        @if($purchaseOrder->supplier->email)
                            <p>Email: {{ $purchaseOrder->supplier->email }}</p>
                        @endif
                        @if($purchaseOrder->supplier->address)
                            <p>Adresse: {{ $purchaseOrder->supplier->address }}</p>
                        @endif
                    @else
                        <p class="text-gray-600">Fournisseur non défini</p>
                    @endif
                </div>
            </div>
            <div>
                <h3 class="font-semibold text-gray-900 mb-2">Informations de commande:</h3>
                <div class="bg-gray-50 p-4 rounded">
                    <p><span class="font-semibold">Référence:</span> {{ $purchaseOrder->reference }}</p>
                    <p><span class="font-semibold">Date de commande:</span> {{ $purchaseOrder->order_date?->format('d/m/Y') ?? 'Non définie' }}</p>
                    @if($purchaseOrder->expected_delivery_date)
                        <p><span class="font-semibold">Date de livraison prévue:</span> {{ $purchaseOrder->expected_delivery_date->format('d/m/Y') }}</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Items Table -->
        <div class="mb-6">
            <h3 class="font-semibold text-gray-900 mb-4">Articles commandés:</h3>
            <table class="w-full border-collapse border border-gray-300">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border border-gray-300 px-4 py-2 text-left">#</th>
                        <th class="border border-gray-300 px-4 py-2 text-left">Produit</th>
                        <th class="border border-gray-300 px-4 py-2 text-left">Catégorie</th>
                        <th class="border border-gray-300 px-4 py-2 text-center">Quantité</th>
                        <th class="border border-gray-300 px-4 py-2 text-right">Prix unitaire</th>
                        <th class="border border-gray-300 px-4 py-2 text-right">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @php $grandTotal = 0; @endphp
                    @foreach($purchaseOrder->items as $index => $item)
                        @php 
                            $lineTotal = ($item->unit_price ?? 0) * ($item->quantity ?? 0);
                            $grandTotal += $lineTotal;
                        @endphp
                        <tr>
                            <td class="border border-gray-300 px-4 py-2">{{ $index + 1 }}</td>
                            <td class="border border-gray-300 px-4 py-2">
                                <div>
                                    <p class="font-semibold">{{ $item->product?->name ?? 'Produit non défini' }}</p>
                                    @if($item->product?->generic_name)
                                        <p class="text-sm text-gray-600">{{ $item->product->generic_name }}</p>
                                    @endif
                                </div>
                            </td>
                            <td class="border border-gray-300 px-4 py-2">{{ $item->product?->category?->name ?? 'Sans catégorie' }}</td>
                            <td class="border border-gray-300 px-4 py-2 text-center">{{ number_format($item->quantity ?? 0, 0, ',', ' ') }}</td>
                            <td class="border border-gray-300 px-4 py-2 text-right">
                                {{ number_format($item->unit_price ?? 0, 2, ',', ' ') }} {!! \App\Models\Setting::DEFAULT_CURRENCY !!}
                            </td>
                            <td class="border border-gray-300 px-4 py-2 text-right font-semibold">
                                {{ number_format($lineTotal, 2, ',', ' ') }} {!! \App\Models\Setting::DEFAULT_CURRENCY !!}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Totals -->
        <div class="flex justify-end mb-6">
            <div class="w-80">
                <div class="border border-gray-300">
                    <div class="flex justify-between px-4 py-2 bg-gray-100 font-bold text-lg">
                        <span>Total de la Commande:</span>
                        <span>{{ number_format($grandTotal, 2, ',', ' ') }} {!! \App\Models\Setting::DEFAULT_CURRENCY !!}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notes -->
        @if($purchaseOrder->notes)
            <div class="mb-6">
                <h3 class="font-semibold text-gray-900 mb-2">Notes:</h3>
                <div class="bg-gray-50 p-4 rounded">
                    <p>{{ $purchaseOrder->notes }}</p>
                </div>
            </div>
        @endif

        <!-- Footer -->
        <div class="border-t-2 border-gray-300 pt-6 text-center text-gray-600">
            <p class="text-sm mt-2">Généré par <strong>Ango</strong> le {{ now()->format('d/m/Y à H:i') }}</p>
        </div>
    </div>

    <script>
        // Auto print when page loads (optional)
        window.onload = function() { window.print(); }
    </script>
</body>
</html>
