<div class="invoice-box">
  <table cellpadding="0" cellspacing="0">
    <tr class="top">
      <td colspan="4">
        <table>
          <tr>
            <td class="title">
              <img src="http://netsolution.online/images/logo.png" style="width:100%; max-width:300px;">
            </td>

            <td width="400px" align="right">
              User Code: {{ $data['user_code'] }}<br> User Name: {{ $data['user_name'] }} <br> Date & Time: {{ $data['created_at'] }}
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
        <td colspan="4">
            <br>
        </td>
    </tr>
    <tr class="information">
      <td colspan="4">
        <table>
          <tr>
            <td>
              Account Name:<br> Account Code:<br> User or Email
            </td>

            <td>
             {{ $data['account_name'] }}<br> {{ $data['to_account'] }}<br> {{$data['email']}}
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
        <td colspan="4">
            <br>
        </td>
    </tr>

    <tr>
        <td colspan="4">
            Dear sir/madam,<br>
            {{ $data['remark'] }}
        </td>
    </tr>

    <tr>
        <td colspan="4">
            <br>
        </td>
    </tr>


    <tr class="heading">
      <td colspan="3">
        Payment Method
      </td>

      <td width="400px" align="right">
        Add Funds
      </td>
    </tr>

    <tr class="details">
      <td colspan="3">
        Amount
      </td>

      <td width="400px" align="right">
        $ {{ number_format($data['amount'], 2) }}
      </td>
    </tr>

    <tr>
        <td colspan="4">
            <br>
        </td>
    </tr>

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

      <td width="100px" align="right">
        Total: $ {{ number_format($data['amount'], 2) }}
      </td>
    </tr>
  </table>
</div>
<style>

.invoice-box {
  max-width: 800px;
  margin: auto;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(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(n+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;
}
</style>