<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Facture - #{{ $order->id }}</title>
    <style>
        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 12px;
            line-height: 1.6;
            color: #333;
        }
        .header {
            border-bottom: 3px solid #3498db;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .header h1 {
            color: #3498db;
            margin: 0;
            font-size: 24px;
        }
        .invoice-info {
            margin: 20px 0;
        }
        .invoice-info p {
            margin: 5px 0;
        }
        .section {
            margin-bottom: 30px;
        }
        .section-title {
            background-color: #f8f9fa;
            padding: 10px;
            font-weight: bold;
            border-left: 4px solid #3498db;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table th, table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .total-row {
            font-weight: bold;
            font-size: 14px;
        }
        .status {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: bold;
        }
        .status.paid {
            background-color: #d4edda;
            color: #155724;
        }
        .status.pending {
            background-color: #fff3cd;
            color: #856404;
        }
        .status.partial {
            background-color: #ffeaa7;
            color: #856404;
        }
        .footer {
            margin-top: 50px;
            padding-top: 20px;
            border-top: 2px solid #eee;
            text-align: center;
            color: #666;
            font-size: 11px;
        }
        .company-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-left: 4px solid #3498db;
            margin-bottom: 20px;
        }
        .company-info h2 {
            margin: 0 0 10px 0;
            color: #3498db;
            font-size: 18px;
        }
        .company-info p {
            margin: 5px 0;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Facture #{{ $order->id }}</h1>
        <p style="margin-top: 5px; color: #666;">Date: {{ $order->created_at->format('d/m/Y H:i') }}</p>
    </div>

    <div class="company-info">
        <h2>Informations de l'Entreprise</h2>
        <p><strong>Nom de l'entreprise:</strong> SM Bayar</p>
        <p><strong>Adresse:</strong> Ksar Hellal</p>
        <p><strong>Email:</strong> contact@smbayer.com</p>
        <p><strong>Téléphone:</strong> 53 338 869</p>
    </div>

    <div class="section">
        <div class="section-title">Informations Client</div>
        <table>
            <tr>
                <th>Nom</th>
                <td>{{ $order->client->firstname }} {{ $order->client->lastname }}</td>
            </tr>
            <tr>
                <th>Téléphone</th>
                <td>{{ $order->client->phone_number }}</td>
            </tr>
            <tr>
                <th>ID Client</th>
                <td>#{{ $order->client->id }}</td>
            </tr>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Détails de la Commande</div>
        <table>
            <thead>
                <tr>
                    <th>Article</th>
                    <th>Quantité</th>
                    <th>Prix Unitaire</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <strong>{{ $order->fibreType->name }}</strong><br>
                        <small style="color: #666;">Couleur: {{ $order->fibreType->color }}</small>
                    </td>
                    <td>{{ number_format($order->quantity, 2) }} kg</td>
                    <td>{{ number_format($order->unit_price, 3) }} DT</td>
                    <td>{{ number_format($order->total_price, 3) }} DT</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="total-row">
                    <td colspan="3" style="text-align: right;">TOTAL:</td>
                    <td>{{ number_format($order->total_price, 3) }} DT</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Crédit du Client</div>
        <table>
            <tr>
                <th>Crédit Restant du Client</th>
                <td>{{ number_format($order->client->remaining_credit, 3) }} DT</td>
            </tr>
        </table>
    </div>

    <div class="footer">
        <p>Ceci est une facture générée automatiquement. Aucune signature requise.</p>
        <p>Générée le {{ now()->format('d/m/Y à H:i') }}</p>
    </div>
</body>
</html>

