<!doctype html>
<html lang="fr">
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
        }

        .header {
            background-color: #007b8f;
            color: #fff;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            height: 60px;
        }

        .payee {
            text-align: right;
        }

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

        .info-table {
            width: 48%;
            margin-bottom: 20px;
        }

        .info-table td {
            padding: 5px 10px;
        }

        .billing-details {
            display: flex;
            justify-content: space-between;
        }

        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

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

        .items-table th {
            background-color: #007b8f;
            color: #fff;
        }

        .items-table .align-right {
            text-align: right;
        }

        .bg-gray {
            background-color: #f4f4f4;
        }

        .payment-summary {
            margin-top: 20px;
        }

        .summary-table {
            width: 100%;
        }

        .summary-table td {
            padding: 10px;
        }

        .payment-history h3 {
            color: #007b8f;
        }

        .history-table {
            width: 100%;
            border-collapse: collapse;
        }

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

        .history-table th {
            background-color: #007b8f;
            color: #fff;
        }

        .card {
            background-color: #eef7f9;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .order-total {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 20px;
        }

        .total {
            text-align: right;
        }

        .amount-due {
            font-size: 18px;
            font-weight: bold;
        }

        .amount-due-total {
            font-size: 24px;
            font-weight: bold;
            color: #007b8f;
        }

        .space-between {
            display: flex;
            justify-content: space-between;
        }

        .text-break {
            word-wrap: break-word;
        }
    </style>
</head>

<body>
<div class="header space-between">
    <img class="logo" src="assets/img/logo.png"/>
    <div class="payee">
        <b>{{ .Host.Name }}</b><br/>
        {{ .Host.Address }}<br/>
        {{ .Host.ZipCode }} {{ .Host.City }}<br/>
        <b>Tel :</b> {{ .Host.Phone }}<br/>
        <b>Mail :</b> {{ .Host.Email }}<br/>
    </div>
</div>
<hr/>
<div class="billing-details space-between">
    <table class="info-table">
        <tbody>
        <tr>
            <td><strong>{{ .Name }}</strong></td>
        </tr>
        <tr>
            <td><strong>Tel :</strong></td>
            <td>{{ .PhoneNumber }}</td>
        </tr>
        <tr>
            <td><strong>Client :</strong></td>
            <td>{{ .CustomersNumber }}</td>
        </tr>
        <tr>
            <td><strong>Plateforme :</strong></td>
            <td>{{ .Platform }}</td>
        </tr>
        </tbody>
    </table>
    <table class="info-table">
        <tbody>
        <tr>
            <td><strong>Nº de facture :</strong></td>
            <td>{{ .ID }}</td>
        </tr>
        <tr>
            <td><strong>Du :</strong></td>
            <td>{{ .From }}</td>
        </tr>
        <tr>
            <td><strong>Au :</strong></td>
            <td>{{ .To }}</td>
        </tr>
        <tr>
            <td><strong>Montant Total :</strong></td>
            <td>{{ .Total }}</td>
        </tr>
        </tbody>
    </table>
</div>
<hr/>
<div class="order-details">
    <table class="items-table">
        <thead>
        <tr>
            <th>Objet</th>
            <th>Quantité</th>
            <th>Prix (€)</th>
            <th class="align-right">Total (€)</th>
        </tr>
        </thead>
        <tbody class="bg-gray rounded">
        {{ range .Lines }}
        <tr class="item-row">
            <td class="text-break product_name">{{ .Name }}</td>
            <td>{{ .Quantity }}</td>
            <td>{{ .Price }}</td>
            <td class="align-right">{{ .Total }}</td>
        </tr>
        {{ end }}
        </tbody>
    </table>
</div>

<div class="payment-history">
    <h3>Historique des Paiements</h3>
    <table class="history-table">
        <thead>
        <tr>
            <th>Date</th>
            <th>Mode de Paiement</th>
            <th>Montant (€)</th>
        </tr>
        </thead>
        <tbody>
        {{ range .Payments }}
        <tr>
            <td>{{ .Date }}</td>
            <td>{{ .Method }}</td>
            <td>{{ .Amount }}</td>
        </tr>
        {{ end }}
        </tbody>
    </table>
</div>

<div class="payment-summary space-between">
    <table class="summary-table">
        <tbody>
        <tr>
            <td><strong>Montant Total :</strong></td>
            <td>{{ .Total }}</td>
        </tr>
        <tr>
            <td><strong>Montant Payé :</strong></td>
            <td>{{ .AmountPaid }}</td>
        </tr>
        <tr>
            <td><strong>Solde Restant :</strong></td>
            <td>{{ .BalanceDue }}</td>
        </tr>
        </tbody>
    </table>
</div>
<hr/>
<div class="order-summary space-between">
    <div class="card">
        <b>Notes</b> <br/>
        TVA non applicable, art. 293 B du CGI <br/>
        Dispensé d’immatriculation au registre du commerce et des sociétés (RCS)
        et au répertoire des métiers. <br/>
        Conditions de paiement : paiement à réception de facture. Aucun escompte
        consenti pour règlement anticipé ou désistement. Tout incident de
        paiement est passible d'intérêts de retard. Le montant des pénalités
        résulte de l'application aux sommes restant dues d'un taux d'intérêt
        légal en vigueur au moment de l'incident. <br/>
    </div>
</div>
<div class="order-total space-between">
    <div></div>
    <div class="total">
        <div class="amount-due">Total</div>
        <div class="amount-due-total">{{ .Total }}</div>
    </div>
</div>
</body>
</html>
