<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>{{ $company }} - Invoice Number: IN00{{$id}}</title>
   <style>
   @media screen {
       body.invoice {
           background: #ffffff;
           font: 11px "Lato", Helvetica, Arial, Verdana, sans-serif;
           font-weight: lighter;
       }
       .invoice .status {
           background: #ffffff;
           width: 878px;
           margin: 0 auto;
           display: block;
           border: 1px solid #c4c7c7;
           padding: 5px 40px 5px 40px;
           position: relative;
           z-index: 0;
       }
       .invoice .page {
           background: #ffffff;
           width: 100%;
           margin: 0 auto;
           /*border: 1px solid #c4c7c7;*/
           padding: 40px 40px 50px 40px;
           position: relative;
           z-index: 0;
           display: block;
       }

       .footer {
          position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: center;
          }
   }

   @media print {
       body.invoice {
           background: #ffffff;
           font: 11px "Lato", Helvetica, Arial, Verdana, sans-serif;
           font-weight: lighter !important;
           margin: 0;
           padding: 0;
       }
       .invoice .status {
           background: #ffffff;
           width: 878px;
           margin: 0 auto;
           border: 1px solid #c4c7c7;
           padding: 5px 40px 5px 40px;
           position: relative;
           margin-bottom: 5px;
           z-index: 0;
           display: none;
       }
       .invoice .page {
           background: #ffffff;
           width: 100%;
           position: relative;
           z-index: 0;
           display: block;
           border: 1px solid #fff;
           padding: 0;
           margin: 0;
       }

       .footer {
          position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: center;
          }
   }

   html,
   body,
   div,
   span,
   applet,
   object,
   iframe,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   blockquote,
   pre,
   a,
   abbr,
   acronym,
   address,
   big,
   cite,
   code,
   del,
   dfn,
   em,
   img,
   ins,
   kbd,
   q,
   s,
   samp,
   small,
   strike,
   strong,
   sub,
   sup,
   tt,
   var,
   b,
   u,
   i,
   center,
   dl,
   dt,
   dd,
   ol,
   ul,
   li,
   fieldset,
   form,
   label,
   legend,
   table,
   caption,
   tbody,
   tfoot,
   thead,
   tr,
   th,
   td,
   article,
   aside,
   canvas,
   details,
   embed,
   figure,
   figcaption,
   footer,
   header,
   hgroup,
   menu,
   nav,
   output,
   ruby,
   section,
   summary,
   time,
   mark,
   audio,
   video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 60%;
       vertical-align: baseline;
       position: inherit;
   }

   .clear {
       clear: both;
   }

   .invoice * h1 {
       color: #4d5357;
       font-weight: lighter;
       font-size: 25px;
       margin: 20px 0 0 0;
   }

   .invoice * .notes {
       float: left;
      /* width: 50%;*/
   }

   .invoice * .invoice-totals-wrap {
       float: right;
   }

   .invoice * .terms {
       float: left;
       width: 400px;
       margin: 0 0 40px 0;
       font-size: 10px;
       color: #a1a7ac;
       line-height: 180%;
   }

   .invoice * .terms strong {
       font-size: 6px;
   }

   .invoice * .recipient-address {
       float: left;
   }

   .invoice * .company-address {
       color: #a1a7ac;
       float: right;
       text-align: right;
   }

   .invoice * hr {
       clear: both;
       border: none;
       background: none;
       border-bottom: 1px solid #d6dde2;
   }

   .invoice * table.invoice-items {
       border: 1px #d3d3d3;
       background: #fefefe;
       width: 100%;
       border-collapse: collapse;
   }

   .invoice * table.invoice-totals {
       border: 1px #d3d3d3;
       background: #fefefe;
       border-collapse: collapse;
   }

   .invoice * th {
       font-weight: bold;
   }

   .invoice * th,
   .invoice * td {
       padding: 12px 6px;
       text-align: center;
       border: 1px solid #e0e0e0;
   }

   .invoice * td.first,
   .invoice * th.first {
       text-align: left
   }

   strong,
   b {
       font-weight: bold;
   }

   </style>
</head>
<body class="invoice">
  <div class="page">
  <img style="margin-left: auto;margin-right: auto;display: block;" width="20%" src="http://collectionsonline.co.za/img/pcg.png" />
    <div class="company-address">
      <strong>Prestige Credit</strong>
      <br> 526, 16th Road
      <br> Constantia Square Office Park
      <br> Section 14 Midrand
      <br> Gauteng 1685
      <p></p>
    </div>
    <div class="recipient-address">
      <strong>{{ $company }}</strong>
      <br> Dale Avenue 4587
      <br> Puyallup
      <br> WA 98371
      <br> 555-(45)234573
    </div>
    <div class="clear"></div>
    <h1>Invoice IN00{{$id}}</h1>
    <p class="terms">
      <strong>21 November 2017</strong>
      <br> Payment due by 1 December 2017</p>
    <div class="clear"></div>
    <table cellspacing="0" class="invoice-items">
      <thead>
        <tr>
          <th scope="col" class="first" width="110"><span>Item Name</span></th>
          <th scope="col" class="first" width="110"><span>Report pulled by</span></th>
          <th scope="col" width="90"><span>Unit Price</span></th>
          <th scope="col" width="90"><span>Quantity</span></th>
          <th scope="col" width="90"><span>Total</span></th>
        </tr>
      </thead>
      <tbody>
      @foreach($transactions as $transaction)
        <tr>
          <td class="first">{{ $transaction->product }}</td>
          <td class="first">{{ $transaction->user }}</td>
          <td>{{ $transaction->price }}</td>
          <td>{{ $transaction->qty }}</td>
          <td>{{ $transaction->price }}</td>
        </tr>
        @endforeach
      </tbody>
      <tfoot>
        <tr>
          <th scope="col" colspan="4" style="text-align:right;"><span>Subtotal:</span></th>
          <th scope="col">R {{ $total }}</th>
        </tr>
      </tfoot>
    </table>
    <p>
      <br>
    </p>
    <div class="invoice-totals-wrap">
      <table cellspacing="0" class="invoice-totals">
        <tbody>
          <tr>
            <td scope="col" width="220" style="text-align:right;" nowrap=""><span>Amount Due:</span></td>
            <td scope="col" width="100"> R {{ $total }}</td>
          </tr>
        </tbody>
      </table>
      <br>
    </div>
    <div class="notes">
      <br><strong>Notes:</strong>
      <br>Nulla ligula nibh, pharetra quis egestas et, molestie ac neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus nunc, tristique vitae mattis vitae, pellentesque id libero. Aliquam erat volutpat.
      Praesent ut augue eget turpis consequat auctor. In volutpat tristique nisi, eget viverra lorem dignissim et.</div>
    <div class="clear"></div>
    <br>
    <p>Nulla ligula nibh, pharetra quis egestas et, molestie ac neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus nunc, tristique vitae mattis vitae, pellentesque id libero. Aliquam erat volutpat.
      Praesent ut augue eget turpis consequat auctor. In volutpat tristique nisi, eget viverra lorem dignissim et. Integer rutrum, lectus vitae congue gravida, erat turpis varius lorem, et tempor justo nisl vitae tortor. Etiam pretium, tortor id egestas
      varius, nisi orci mattis nulla, sed tincidunt ante leo ut nibh.</p>
    <hr> Don’t miss the opportunities to thank ones who matter. Make your acknowledgment special with the thank you messages.
    <p></p>

  </div>
</body>

</html>
