<html>
  <head>
    <style>
      body {
        font-family: Helvetica, sans-serif;
        padding-right: 30px;
        padding-left: 30px;
      }
      p {
        margin-top: 5px;
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center;">
      <img
        style="max-width: 170px;"
        alt="image_logo"
        src="{{record.company.logo_link}}"
      />
    </div>
    <br />
    <p>Estimado cliente / Dear customer</p>
    <p><b>{{record.party.rec_name}}</b></p>
    <br />
    <p>
      Hemos recibido un nuevo pago, a continuación encontrará el detalle de la
      transacción y el estado de cuenta / We have received a new payment, below
      you will find the details of the transaction and account statement:
    </p>
    <br />
    <table class="default">
      <tr>
        <td
          style="background-color: darkgray; height: 20px; min-width: 190px;"
        />
        <td
          style="background-color: darkgray; height: 20px; min-width: 190px;"
        />
      </tr>
      {% for pay in record.payments %}
      <tr>
        <td style="padding: 3px 5px;">Fecha:</td>
        <td style="text-align: right; padding-right: 3px;">{{pay.date}}</td>
      </tr>
      <tr>
        <td style="padding: 3px 5px;">Medio de Pago:</td>
        <td style="text-align: right; padding-right: 3px;">
          {{pay.statement.journal.name}}
        </td>
      </tr>
      <tr>
        <td style="padding: 3px 5px;">Valor del Pago:</td>
        <td style="text-align: right; padding-right: 3px;">
          {{ "{:,.2f}".format(pay.amount)}}
        </td>
      </tr>
      <tr>
        <td style="padding: 3px 5px;">No. Voucher:</td>
        <td style="text-align: right; padding-right: 3px;">{{pay.number}}</td>
      </tr>
      <tr>
        <td style="background-color: darkseagreen; height: 10px;" />
        <td style="background-color: darkseagreen; height: 10px;" />
      </tr>
      {% endfor %}
      <tr>
        <td style="background-color: aliceblue; height: 10px;">
          Total Pagado:
        </td>
        <td
          style="
            background-color: aliceblue;
            height: 10px;
            padding: 3px 5px;
            text-align: right;
          "
        >
          {{"{:,.2f}".format(record.total_advances)}}
        </td>
      </tr>
      <tr>
        <td
          style="background-color: aliceblue; height: 10px; padding: 3px 5px;"
        >
          Pendiente de Pago:
        </td>
        <td
          style="
            background-color: aliceblue;
            height: 10px;
            padding: 3px 5px;
            text-align: right;
          "
        >
          {{"{:,.2f}".format(record.pending_to_pay)}}
        </td>
      </tr>
    </table>
    <br />
    <br />
    <p>Atentamente / Best regards,</p>
    <p>
      <b
        >Servicio al Cliente / Customer Service |
        {{record.company.party.commercial_name}}</b
      >
    </p>
    <p />

    <p>{{record.company.party.addresses[0].street}}</p>
    <p>{{record.company.party.city_name}}</p>
    <p>Teléfono {{record.company.party.phone}}</p>
    <p>Cel. {{record.company.party.mobile}}</p>
    <p>
      <a href="{{record.company.party.website}}">
        {{record.company.party.website}}
      </a>
    </p>
    <div style="margin-top: 30px; margin-bottom: 10px;">
      <img
        alt="Software for hotels"
        src="https://res.cloudinary.com/presik-com/image/upload/v1661200297/banner_emails_jumq4s.png"
      />
    </div>
    <p style="text-align: center;">
      <a href="https://www.presik.com" style="color: #554400ff;">
        Hotels powered by presik.com
      </a>
    </p>
  </body>
</html>
