<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

@foreach($cus as $cuse)
@php $deli=0; $tot=0; $unit=0; @endphp
<div style="float:right;display: inline-block;">#{{$cuse->id}}</div>
    <div class="center">
        <img src="{{$cuse->getpage2->imgpath}}" style="height: 110px;" alt="logo">
    </div>
    <!-- <table class="table-borderless">
            <thead>
                  <tr>
                    <td style="width:540px" class="text-left">Customer Name : {{$cuse->name}}</td>
                    <td style="width:90px" class="text-right">Date : {{$ldate}}</td>
                  </tr>
            </thead>
    </table> -->
    <div class="row">
        <div class="col-xs-1 col-md-1"></div>
        <div class="col-xs-7 col-md-7"><h4>Customer Name : {{$cuse->name}}</h4></div>
        <div class="col-xs-4 col-md-4"><h4>Date : {{$ldate}}</h4></div>  
    </div> <br>
 <table class="table" id="book-table" name="book-table" style="font-size: 12px;">
            <thead>
                  <tr>
                    <th style="width:60px;" class="text-center">QTY</th>
                    <th class="text-left">DESCRIPTION</th>
                    <th style="width:140px" class="text-right">UNIT PRICE</th>
                    <th style="width:90px" class="text-right">TOTAL</th>
   
                  </tr>
            </thead>
            <tbody>
                    
            @foreach($cuse->cus_or as $data) 
                    <tr>
                        <td class="text-center">{{ $data->qty }}</td>
                        <td>{{ $data->orders->name }}
                        @if($data->attribute=="null" or $data->attribute=="")
                        @else
                            @foreach (json_decode($data->attribute) as $key => $val)
                                ({{$key }}:{{$val}})
                            @endforeach
                        @endif
                        </td>
                        <td class="text-right">{{ $data->orders->sell_price }}</td>
                        <td class="text-right"> {{ $data->qty * $data->orders->sell_price }}
                        </td>
                        <input type="hidden" value="">
                    </tr>
                    @php $deli+=$data->delivery;
                    $unit = ($data->orders->sell_price)*($data->qty);
                    $tot += $unit;
                    @endphp
            
                @endforeach
                    <tr>
                            <td colspan="2" rowspan="4">
                             
                              <td class="text-right"><strong>Delivery Charge</strong></td>
                              <td class="text-right">{{ $deli  }}  </td>
                          </tr>

                          <tr>
                            <td class="text-right no-border">
                              <strong>Total</strong>
                            </td>
                            <td class="text-right"><strong>{{ $tot+$deli }}</strong></td>
                          </tr>
            </tbody>
        </table>   
        <div class="breakNow"></div>
@endforeach


<style>
div.breakNow { page-break-inside:avoid; page-break-after:always; }
.center {
                text-align: center;
            }
            .center img {
                display: block;
            }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	border:0;
	padding:0;
	margin-left:-0.00001;
}

                @page  {
        margin: 0.5cm;
    }
</style>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>