<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facture</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
            position: relative;
        }

        .invoice-box {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            page-break-inside: avoid;
        }

        h1 {
            text-align: left;
            color: #333;
            margin-top: 0;
        }

        .invoice-date {
            text-align: right;
            margin-bottom: 20px;
            font-style: italic;
        }

        .info-container {
            display: table;
            width: 100%;
            margin-bottom: 20px;
        }

        .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;
        }

        .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;
        }

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

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

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

        .total-in-words {
            font-style: italic;
            font-size: 0.9em;
        }

        .payment-method {
            text-align: right;
            margin-top: 10px;
        }

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

        .separator-line {
            border: none;
            border-top: 2px solid #ddd;
            margin: 20px 0;
        }

        .footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background-color: #fff;
            text-align: center;
            font-size: 0.9em;
            border-top: 1px solid #ddd;
            page-break-inside: avoid;
        }

        .footer p {
            margin: 5px 0;
        }

        /* Style pour le logo */
        .logo {
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        .logo img {
            max-width: 150px;  /* Ajuster la taille du logo */
            height: auto;
        }

        /* Reset le float */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

    </style>
</head>
<body>
    <div class="invoice-box">
        <!-- Affichage du logo aligné à gauche -->
        <div class="logo">
        @foreach($info as $inf)
                <div class="logo">
                    <img src="{{ asset('img/'.$inf->logo) }}" alt="Logo">
                </div>
                <div class="company-name">
                    <p><strong>{{$inf->nom}}</strong></p>
                </div>
            @endforeach
        </div>

        <div class="clearfix"></div>

        <h1>Bon de Commande N°:{{$boncommandes->id}}</h1>
        <p class="invoice-date">Date : {{$boncommandes->created_at}}</p>

        <div class="info-container">
            <div class="company-info">
                @foreach($info as $inf)
                    <p><strong> {{$inf->nom}}</strong></p>
                    <p> {{$inf->adress}}</p>
                    <p> {{$inf->tele}}</p>
                    <p>Email: {{$inf->email}}</p>
                @endforeach
            </div>


    <div class="client-info">
    <p><strong>Facturé de :</strong></p>
        <p>{{$boncommandes->fournisseur->nom}}</p>
        <p>Adresse du Fournisseur</p>
        <p>Téléphone: {{$boncommandes->fournisseur->tele}}</p>
        <p>Email: fourbn@email.com</p>
    </div>
</div>


<table class="invoice-table">
    <thead>
        <tr>
        <th>Description</th>
            <th>Quantité</th>
            <th>P.U</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
 
	@foreach($boncommandes->detaille_boncommande as $det)
				<tr style="outline: thin solid">
		
				
					
				<td>{{$det->produit->nom}}</td>
					<td style="text-align: center;">{{$det->quantite}}</td>
					<td style="text-align: center;"> {{$det->prixun}} </td>
					<td style="text-align: center;">{{$det->x}} </td>
			
			</tr>
			@endforeach
       
   




    </tbody>
</table>

<div class="totals-container">
    <p>Total  : {{$boncommandes->prixtotal}} DH</p>

</div>

<div class="payment-method">

</div>
</div>

<div class="footer">
@foreach($info as $inf)
            <p><strong>{{$inf->line1}} </strong> </p>
            <p>{{$inf->line2}}</p>
            <p>{{$inf->line3}}</p>
        @endforeach
</div>
</body>
</html>


