<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#invoice{
    padding: 30px;
}
.invoice {
    position: relative;
    background-color: #FFF;
    min-height: 680px;
    padding: 15px
}
.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #3989c6
}
.invoice .company-details {
    text-align: right;
    margin-top: -100px;
}
.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0
}
.invoice .contacts {
    margin-bottom: 50px
}
.invoice .invoice-to {
    text-align: left
}
.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0
}
.invoice .invoice-details {
    text-align: right;
    margin-top: -100px;
}
.invoice .invoice-details .invoice-id {
    margin-top: 0;
    color: #3989c6
}
.invoice main {
    padding-bottom: 50px
}
.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 50px
}
.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #3989c6
}
.invoice main .notices .notice {
    font-size: 1.2em
}
.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px
}
.invoice table td,.invoice table th {
    padding: 15px;
    background: #eee;
    border-bottom: 1px solid #fff
}
.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 18px;
    background: #daa520;
}
.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #3989c6;
    font-size: 1.2em
}
.invoice table .qty,.invoice table .total,.invoice table .unit {
    text-align: right;
    font-size: 1.2em
}
.invoice table .no {
    color: #fff;
    /*font-size: 1.6em;*/
    background: #3989c6
}
.invoice table .unit {
    background: #ddd
}
.invoice table .total {
    background: #3989c6;
    color: #fff
}
.invoice table tbody tr:last-child td {
    border: none
}
.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2em;
    border-top: 1px solid #aaa
}
.invoice table tfoot tr:first-child td {
    border-top: none
}
.invoice table tfoot tr:last-child td {
    color: #3989c6;
    font-size: 1.4em;
    border-top: 1px solid #3989c6
}
.invoice table tfoot tr td:first-child {
    border: none
}
.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0
}
@media print {
    .invoice {
        font-size: 11px!important;
        overflow: hidden!important
    }
    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: always
    }
    .invoice>div:last-child {
        page-break-before: always
    }
}
</style>
<div id="invoice">
    <div class="invoice overflow-auto">
        <div style="min-width: 600px">
            <header>
                <div class="row">
                    <div class="col">
                        <a target="_blank" href="https://www.punjabcabs.com.au/">
                            <img src="{{ asset('asset/punjab-cabs.png') }}" data-holder-rendered="true" />
                        </a>
                    </div>
                    <div class="col company-details">
                        <h2 class="name">
                            <a target="_blank" href="https://www.punjabcabs.com.au/">
                            Punjab Cabs
                            </a>
                        </h2>
                        <div>24 Graham Rd, Clayton South 3169, Australia</div>
                        <div>03 95408998(AU)</div>
                        <div>info@punjabcabs.com.au</div>
                    </div>
                </div>
            </header>
            <main>
                <div class="row contacts">
                    <div class="col invoice-to">
                        <div class="text-gray-light">INVOICE TO:</div>
                        <h2 class="to">{{$payOut->fleetCompany}}</h2>
                        <div class="address">{{$payOut->fleetName}}</div>
                        <div class="email">{{$payOut->fleetEmail}}</div>
                    </div>
                    <div class="col invoice-details">
                        <h1 class="invoice-id">{{$transId}}</h1>
                        <div class="date">Date of Invoice: {{date_format(date_create($payOut->created_at), 'd-m-Y')}}</div>
                    </div>
                </div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th class="text-left">DC</th>
                            <th class="text-left">Name</th>
                            <th class="text-left">Taxi No.</th>
                            <th class="text-right">Total</th>
                            <th class="text-right">Commission</th>
                            <th class="text-right">Payout</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($payOutDetails as $payOutDetail)
                        <tr>
                            <td class="no">{{$payOutDetail->certificate_number}}</td>
                            <td class="text-left"><h3>{{$payOutDetail->providerFirstName.' '.$payOutDetail->providerLastName}}</h3></td>
                            <td class="text-left">{{$payOutDetail->service_number}}</td>
                            <td class="unit">${{number_format((float) $payOutDetail->total_amount, 2, '.', '')}}</td>
                            <td class="qty">${{number_format((float) $payOutDetail->percent_amount, 2, '.', '')}}</td>
                            <td class="total">${{number_format((float) $payOutDetail->payout_amount, 2, '.', '')}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3"></td>
                            <td colspan="2">SUBTOTAL</td>
                            <td>${{number_format((float) $payOut->total_amount, 2, '.', '')}}</td>
                        </tr>
                        <tr>
                            <td colspan="3"></td>
                            <td colspan="2">COMMISSION</td>
                            <td>${{number_format((float) $payOut->total_commission, 2, '.', '')}}</td>
                        </tr>
                        <tr>
                            <td colspan="3"></td>
                            <td colspan="2">GRAND TOTAL</td>
                            <td>${{number_format((float) $payOut->total_payout, 2, '.', '')}}</td>
                        </tr>
                    </tfoot>
                </table>
                <div class="thanks">Thank you!<br/>Punjab Cabs</div>
            </main>
        </div>
        <div></div>
    </div>
</div>