POS-Server/app/views/cash_outs/cfdi_gpi.pdf.erb

<div class='pdf-body' style="margin:50px;">
  <header class='document-header'>
  </header>
  <section>
    <article class="left-left logo" style="height:100px; width: 50%;margin-top: 2cm;">
      <% if user.pointsale.img_pointsale? %>
        <%= wicked_pdf_image_tag user.pointsale.img_pointsale_url, { width: 300, height: 80 } %>
      <% end %>
    </article>
    <article style="width: 40%;float: right;text-align: right; margin-top: 2cm;">
      <p style="margin: 5px; font-size: 14px; color: red;"><b>FACTURA</b></p>
      <p style="margin: 5px; font-size: 11px;">Tipo de comprobante:&nbsp;<b><%= Rails.application.config.issuing['CveIngreso'].to_s %></b></p>
      <p style="margin: 5px; font-size: 11px;">Serie: <b><%= doc.xpath("//@Serie")%></b> Folio: <b><%= doc.xpath("//@Folio")%></b></p>
      <p style="margin: 5px; font-size: 11px;">Folio Fiscal (UUID):</b></p>
      <p style="margin: 5px; font-size: 11px;"><b><%= doc.xpath("//cfdi:Complemento//@UUID")%></b></p>
      <p style="margin: 5px; font-size: 11px;">No. de Serie del Certificado del CSD:</p>
      <p style="margin: 5px; font-size: 11px;"><b><%= doc.xpath("//@NoCertificadoSAT") %></b></p>
      <p style="margin: 5px; font-size: 11px;">C.P., fecha y hora de emision: </p>
      <p style="margin: 5px; font-size: 11px;"><b><%= "#{doc.xpath('//cfdi:Comprobante/@LugarExpedicion')}, #{doc.xpath('//cfdi:Comprobante/@Fecha')}" %></b></p>
      <p style="margin: 5px; font-size: 11px;">Id. Usu. - Usuario </p>
      <p style="margin: 5px; font-size: 11px;"><b><%= "#{user.id} - #{user.first_name} #{user.last_name}" %></b></p>
    </article>
  </section>
  <section style="margin-bottom: 5px;">
    <article style="width: 40%;">
    <fieldset style="border-color: #f2f2f2;"><legend><b>Emisor</b></legend>
      <p style="margin: 5px; font-size: 10px;"><b><%= doc.xpath("//cfdi:Emisor/@Rfc")%></b></p>
      <p style="margin: 5px; font-size: 10px;"><%= doc.xpath('//cfdi:Emisor/@Nombre') %></p>
      <p style="margin: 5px; font-size: 10px;"><b><%= "#{doc.xpath('//cfdi:Emisor/@RegimenFiscal')} - #{Rails.application.config.issuing['regimenFiscal']}"%></b></p>
    </fieldset>
    </article>
    <article style="width: 40%;">
    <fieldset style="border-color: #f2f2f2;"><legend><b>Receptor</b></legend>
      <p style="margin: 5px; font-size: 10px;"><b><%= doc.xpath("//cfdi:Receptor/@Rfc")%></b></p>
    </fieldset>
    </article>
  </section>
  <section class="products" style="height: auto;">
    <table cellspacing="0" class="table">
      <thead>
        <tr>
          <th style="text-align:center;font-weight:bold;width:5%;font-size:10px; padding: 2px;">Clave Prod.</th>
          <th style="text-align:center;font-weight:bold;width:5%;font-size:10px; padding: 2px;">Cantidad</th>
          <th style="text-align:center;font-weight:bold;width:5%;font-size:10px; padding: 2px;">Unidad de medida</th>
          <th style="text-align:center;font-weight:bold;width:20%;font-size:10px; padding: 2px;">Descripcion</th>
          <th colspan="2" style="text-align:center;font-weight:bold;width:10%;font-size:10px; padding: 2px;">Impuesto</th>
          <th style="text-align:center;font-weight:bold;width:10%;font-size:10px; padding: 2px;">Precio unitario</th>
          <th style="text-align:center;font-weight:bold;width:10%;font-size:10px; padding: 2px;">Importe</th>
        </tr>
      </thead>
      <tbody>
        <% concepts.each do |concept| %>
        <tr>
          <td style="font-size: 9px;">
            <%= concept['ProductKey'] %>
          </td>
          <td style="font-size: 9px;">
            <%= concept['Quantity'] %>
          </td>
          <td style="font-size: 9px;">
            <%= concept['UnitKey'] %>
          </td>
          <td style="font-size: 9px; overflow:hidden;text-overflow:'';white-space:nowrap;max-width:200px;">
            <%= concept['Description'] %>
          </td>
          <td style="font-size: 9px;">
            <%= if concept['Tax'].to_f > 0.00; "002"; end; %>
          </td>
          <td style="font-size: 9px;">
            <%= if concept['Tax'].to_f > 0.00 ; "$#{concept["Tax"].to_s}"; end; %>
          </td>
          <td style="font-size: 9px;">
            <%= "$#{concept['Price']}" %>
          </td>
          <td style="font-size: 9px;">
            <%= "$#{concept['Amount']}" %>
          </td>
        </tr>
        <% end %>
      </tbody>
    </table>
  </section>
  <hr>
  <section style="word-wrap: break-word;">
    <article style="float:right;width: 17%;">
      <p style="text-align:right; margin: 5px;font-size: 9px; background-color: #f2f2f2;">$ <%= doc.xpath("//cfdi:Comprobante/@SubTotal") %></p>
      <p style="text-align:right; margin: 5px;font-size: 9px;">
        <%= "#{doc.xpath('//cfdi:Impuestos/@TotalImpuestosTrasladados')}" if "$#{doc.xpath('//cfdi:Impuestos/@TotalImpuestosTrasladados')}"%><br></p>
      <p style="text-align:right; margin: 5px;font-size: 9px; background-color: #f2f2f2;"><b>$<%= doc.xpath("//cfdi:Comprobante/@Total") %></b></p>
    </article>
    <article style="float:right; width: 10%;">
      <p style="text-align:right; margin: 5px; font-size: 9px;"><b>Subtotal:</b></p>
      <p style="text-align:right; margin: 5px; font-size: 9px;">IVA(16%):</p>
      <p style="text-align:right; margin: 5px; font-size:9px;"><b>Total:</b></p>
    </article>
    <article style="float:right; width: 40%;">
      <p style="font-size: 11px;"><b>Total con letra:</b></p>
      <% numeros = doc.xpath("//cfdi:Comprobante/@Total").to_s.split('.') %>
      <p style="font-size: 11px;">
        <%= "#{numeros[0].to_i.to_words.split.each { |x| x.capitalize! }.join(' ')} Pesos #{numeros[1]}/100 M.N." %>
      </p>
    </article>
    <article style="width: 30%;float:right;">
      <p style="font-size: 10px;"><%= "#{doc.xpath('//@MetodoPago')}: Pago en una sola exhibición" %></p>
      <% payment_method = PaymentMethod.find_by(payment_method_key: "#{doc.xpath('//cfdi:Comprobante/@FormaPago')}") %>
      <p style="font-size: 10px;"><%= "#{doc.xpath('//cfdi:Comprobante/@FormaPago')} - #{payment_method.method}" %> </p>
    </article>
  </section>
  <section style="word-wrap: break-word;">
    <article style="width: 100%;">
      <hr>
      <p style="font-size: 9px;"><br><b>Sello Digital del CFDI:</b><br><%= doc.xpath("//@SelloCFD") %></p>
      <p style="font-size: 9px;"><b>Sello del SAT:</b><br><%= doc.xpath("//@SelloSAT") %>
      </p>
    </article>
  </section>
  <section style="word-wrap: break-word;">
    <article style="float:left;width: 20%; padding-top: 10px;">
      <!-- < % wicked_pdf_image_tag("invoice_qr/qr_#{uuid}.png", width: "120", height: "120") %> -->
      <%= wicked_pdf_image_tag_qr("#{qr_path}", width: "120", height: "120") %>
    </article>
    <article style="float:left;width: 80%">
      <p style="font-size: 9px;">
        <b >Cadena Original del complemento de certificación digital del SAT:</b><br>
        <%= details %>
      </p>
      <p style="font-size: 9px;">
        <b>No de Serie del Certificado del SAT:</b> <%= doc.xpath("//@NoCertificadoSAT") %>
      </p>
      <p style="font-size: 9px;">
        <b>Fecha y hora de certificación:</b> <%= doc.xpath("//@FechaTimbrado") %>
      </p>
    </article>
  </section>
  <footer style="text-align:center;font-size:9px; margin-bottom: 3cm;">
      <b>Este documento es una representación impresa de un CFDI</b>
  </footer>
</div>