<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">

<style>
  @page {
    size: A4;
    margin: 20mm 15mm 25mm 15mm;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
  }

  h1 {
    text-align: center;
    margin: 30px 0 20px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  th, td {
    border: 1px solid #333;
    padding: 6px;
  }

  th {
    background: #f0f0f0;
  }

  .no-border td {
    border: none;
    padding: 4px 2px;
  }

  .total {
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
  }

  .footer {
    margin-top: 30px;
    font-size: 10px;
  }

  tr {
    page-break-inside: avoid;
  }

.doctor-block {
  margin-top: 25px;
  page-break-inside: avoid;
}
</style>
</head>

<body>


<table style="width:100%; margin-bottom:25px; border:none;">
  <tr>
    <!-- LOGO LINKS -->
    <td style="width:40%; vertical-align:top; border:none;">
      <% if (logoBase64) { %>
        <img
          src="<%= logoBase64 %>"
          style="max-height:90px;"
        >
      <% } %>
    </td>

    <!-- FIRMA RECHTS -->
    <td style="width:60%; text-align:right; vertical-align:top; border:none;">
      <strong>
        <%= company.company_name %>
        <%= company.company_legal_form || "" %>
      </strong><br>

      <%= company.street %> <%= company.house_number %><br>
      <%= company.postal_code %> <%= company.city %><br>
      <%= company.country %><br>

      <% if (company.phone) { %>
        Tel: <%= company.phone %><br>
      <% } %>

      <% if (company.email) { %>
        E-Mail: <%= company.email %>
      <% } %>
    </td>
  </tr>
</table>

<h1>RECHNUNG / FACTURA</h1>

<% if (company.invoice_logo_path) { %>
  <img src="<%= company.invoice_logo_path %>"
       style="max-height:80px; margin-bottom:10px;">
<% } %>

<table class="no-border" style="width:auto;">
  <tr>
    <td style="white-space:nowrap;"><strong>Rechnungsnummer: </strong></td>
    <td style="padding-left:10px;"><%= invoice.number %></td>
  </tr>
</table>

<table class="no-border" style="width:100%;">
  <colgroup>
    <col style="width:160px;">
    <col style="width:200px;">
  </colgroup>

  <tr>
    <td>
      <strong>N.I.E / DNI:</strong> <%= patient.dni || "" %>
    </td>
    <td>
      <strong>Geburtsdatum:</strong>
      <%= patient.birthdate
        ? new Date(patient.birthdate).toLocaleDateString("de-DE")
        : "" %>
    </td>
  </tr>
</table>

</table>

<br>

<strong>Patient:</strong><br>
<%= patient.firstname %> <%= patient.lastname %><br>
<%= patient.street %> <%= patient.house_number %><br>
<%= patient.postal_code %> <%= patient.city %>

<br><br>

<p>Für unsere Leistungen erlauben wir uns Ihnen folgendes in Rechnung zu stellen:</p>

<table>
<thead>
<tr>
  <th>Menge</th>
  <th>Behandlung</th>
  <th>Preis (€)</th>
  <th>Summe (€)</th>
</tr>
</thead>
<tbody>
<% services.forEach(s => { %>
<tr>
  <td><%= s.quantity %></td>
  <td><%= s.name %></td>
  <td><%= s.price.toFixed(2) %></td>
  <td><%= s.total.toFixed(2) %></td>
</tr>
<% }) %>
</tbody>
</table>

<div class="total">
TOTAL: <%= total.toFixed(2) %> €
</div>

<div class="doctor-block">

  <strong>Behandelnder Arzt:</strong><br>
  <%= doctor.first_name %> <%= doctor.last_name %><br>

  <% if (doctor.fachrichtung) { %>
    <strong>Fachrichtung:</strong> <%= doctor.fachrichtung %><br>
  <% } %>

  <% if (doctor.arztnummer) { %>
    <strong>Arztnummer:</strong> <%= doctor.arztnummer %><br>
  <% } %>

  <div class="footer">
    Privatärztliche Rechnung – gemäß spanischem und deutschem Recht
  </div>

</div>


</body>
</html>
