<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Facture</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0; padding: 0;
            background-color: #fff;
            color: #333;
        }
        .invoice-box {
            max-width: 800px;
            margin: 30px auto;
            padding: 30px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            page-break-inside: avoid;
        }

        /* Header */
        .header {
          display: flex;
          align-items: flex-start;   /* logo + nom en haut */
          justify-content: flex-start;
          gap: 20px; /* espace entre logo et bloc nom */
          margin-bottom: 30px;
        }

        .logo img {
          width: 60px;
          height: 60px;
          object-fit: contain;
        }

        .company-block {
          display: flex;
          flex-direction: column; /* Nom au-dessus, infos en dessous */
        }

        .company-name {
          font-size: 1.8rem;
          font-weight: bold;
          color: #222;
          margin-bottom: 8px; /* espace avec infos facture */
        }

        .invoice-info p {
          margin: 2px 0;
          font-size: 0.9rem;
          color: #444;
        }

        /* Infos client */
        .info-container {
            display: table;
            width: 100%;
            margin-bottom: 25px;
        }

        .company-info,
        .client-info {
            display: table-cell;
            width: 50%;
            vertical-align: top;
        }

        .client-info {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        /* Tableau */
        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            page-break-inside: avoid;
        }

        .invoice-table th, 
        .invoice-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .invoice-table th {
            background-color: #f2f2f2;
        }

        /* Totaux */
        .totals-container {
            text-align: right;
            margin-top: 20px;
        }

        .totals-container p {
            margin: 5px 0;
        }

        .total-amount {
            font-size: 1.5em;
            color: #333;
        }

        /* Mode paiement */
        .payment-method {
            text-align: right;
            margin-top: 10px;
        }

        .payment-method p {
            margin: 5px 0;
        }

        /* Footer */
        .footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            text-align: center;
            font-size: 0.7rem;
            padding: 4px 0;
            border-top: 1px solid #ddd;
            line-height: 1.1;
        }

        .footer p {
            margin: 2px 0;
            font-weight: normal;
        }

        /* Pour gérer les descriptions longues */
        .description-cell {
            word-wrap: break-word;
            white-space: normal;
            max-width: 200px;
            text-align: justify;
            vertical-align: top;
        }
    </style>
</head>
<body>

    <div class="invoice-box">
        <!-- En-tête -->
        <div class="header">
           <div class="logo">
            @if(!empty($info->logo) && file_exists(public_path('img/' . $info->logo)))
              <img src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('img/' . $info->logo))) }}" alt="Logo" />
            @else
              <img src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('img/777.jpg'))) }}" alt="Logo par défaut" />
            @endif
          </div>

          <div class="company-block">
              <div class="company-name">
                {{ $info->nom ?? 'Nom de la Société' }}
              </div>
              <div class="invoice-info">
                <p>Facture N° : {{ $ventes->ref }}</p>
                <p>Date : {{ $ventes->created_at }}</p>
              </div>
          </div>
        </div>

        <!-- Infos livraison / client -->
        <div class="info-container">
            <div class="company-info">
                <!-- laissé vide si بغيت تزيد شي حاجة ديال الشركة -->
            </div>
            <div class="client-info">
                <p><strong>Facturé à :</strong></p>
                <p>Nom : {{ $ventes->client->nom }}</p>
                <p>Ice : {{ $ventes->client->ice }}</p>
                <p>Téléphone : {{ $ventes->client->tele }}</p>
            </div>
        </div>

        <!-- Tableau des produits -->
        <table class="invoice-table">
            <thead>
                <tr style="text-align: center;">
                    <th>Désignation</th>
                    <th>PU</th>
                    <th>Qté</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($ventes->detaille_vente as $det)
                <tr>
                    <td class="description-cell">{{ $det->nom }}</td>
                    <td>{{ $det->prixvents }}</td>
                    <td>{{ $det->quantite }}</td>
                    <td>{{ $det->x }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Totaux -->
        <div class="totals-container">
            @if($ventes->totalTVA == 0)
                <p><strong>Total : <span class="total-amount">{{ $ventes->prixtotal }} DH</span></strong></p>
            @else
                <p>Total : {{ $ventes->prixtotal }} DH</p>
                @if($ventes->totalremise > 0)
                    <p>Remise : {{ $ventes->totalremise }} DH</p>
                @endif
                <p>TVA : {{ $ventes->totalTVA }} DH</p>
                <p><strong>Total TTC : <span class="total-amount">{{ $ventes->totalavecTVA }} DH</span></strong></p>
            @endif
        </div>

        <!-- Mode de paiement -->
        <div class="payment-method">
            <p>Mode de paiement : {{ $ventes->modepayement->mode }}</p>
            @if($ventes->modepayement->id == 2)
                @if($ventes->avance > 0)
                    <p>Avance : {{ number_format($ventes->avance, 2) }} DH</p>
                @endif
                @if($ventes->rest > 0)
                    <p>Reste : {{ number_format($ventes->rest, 2) }} DH</p>
                @endif
            @endif
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <p>{{ $info->line1 ?? '' }}</p>
        <p>{{ $info->line2 ?? '' }}</p>
        <p>{{ $info->line3 ?? '' }}</p>
    </div>

</body>
</html>
