<html>

<head>
  <style>
    /**
                Set the margins of the page to 0, so the footer and the header
                can be of the full height and width !
             **/
    @page {
      margin: 0cm 0cm;
    }

    .invoice-box {
      max-width: 800px;
      margin: auto;
      padding: 30px;
      border: 1px solid #eee;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      font-size: 16px;
      line-height: 24px;
      font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
      color: #555;
    }

    .invoice-box table {
      width: 100%;
      line-height: inherit;
      text-align: left;
    }

    .invoice-box table td {
      padding: 5px;
      vertical-align: top;
    }

    .invoice-box table tr td:nth-child(2) {
      text-align: right;
    }

    .invoice-box table tr.top table td {
      padding-bottom: 20px;
    }

    .invoice-box table tr.top table td.title {
      font-size: 45px;
      line-height: 45px;
      color: #333;
    }

    .invoice-box table tr.information table td {
      padding-bottom: 40px;
    }

    .invoice-box table tr.heading td {
      background: #eee;
      border-bottom: 1px solid #ddd;
      font-weight: bold;
    }

    .invoice-box table tr.details td {
      padding-bottom: 20px;
    }

    .invoice-box table tr.item td {
      border-bottom: 1px solid #eee;
    }

    .invoice-box table tr.item.last td {
      border-bottom: none;
    }

    .invoice-box table tr.total td:nth-child(2) {
      border-top: 2px solid #eee;
      font-weight: bold;
    }

    @media only screen and (max-width: 600px) {
      .invoice-box table tr.top table td {
        width: 100%;
        display: block;
        text-align: center;
      }

      .invoice-box table tr.information table td {
        width: 100%;
        display: block;
        text-align: center;
      }
    }

    /** RTL **/
    .invoice-box.rtl {
      direction: rtl;
      font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    }

    .invoice-box.rtl table {
      text-align: right;
    }

    .invoice-box.rtl table tr td:nth-child(2) {
      text-align: left;
    }

    /** Define the header rules **/
    header {
      position: fixed;
      top: 0cm;
      left: 0cm;
      right: 0cm;
      height: 2cm;
      /** Extra personal styles **/
      background-color: #03a9f4;
      color: white;
      text-align: center;
      line-height: 1.5cm;
    }

    /** Define the footer rules **/
    footer {
      position: fixed;
      bottom: 0cm;
      left: 0cm;
      right: 0cm;
      height: 2cm;
      /** Extra personal styles **/
      background-color: #95a5a6;
      color: white;
      text-align: center;
      line-height: 1.5cm;
    }
  </style>
</head>

<body>

  <footer>
    <div style="text-align: right; margin-right: 1cm;">page 1 / 1</div>
  </footer>

  <main>
    <div class="invoice-box">
      <table
        cellpadding="0"
        cellspacing="0"
      >
        <tr class="top">
          <td colspan="2">
            <table>
              <tr>
                <td class="title">
                  <img
                    src="https://upload.wikimedia.org/wikipedia/commons/b/bc/The_New_School_Logo.svg"
                    style="width: 100%; max-width: 100px"
                  />
                </td>

                <td>
                  Invoice #: {{ $payment->id }}<br />
                  Created: {{ $payment->date }}<br />
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr class="information">
          <td colspan="2">
            <table>
              <tr>
                <td>
                  Hong Kong International School<br />
                  (Primary Section), <br />
                  23 S Bay Cl, <br />
                  Repulse Bay
                </td>

                {{ $student }}
                <td>
                  {{ $student->lastName }}, {{ $student->firstName }} <br />
                  {{ $payment->from }}
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr class="heading">
          <td>Item</td>

          <td>Price</td>
        </tr>

        <tr class="item">
          <td>Tuition fee</td>

          <td>${{ $payment->amount }}</td>
        </tr>

        <tr class="total">
          <td></td>

          <td>Total: ${{ $payment->amount }}</td>
        </tr>
      </table>
    </div>
  </main>
</body>

</html>
