<html>

<head>
    <link href='{{ asset(' fonts/fontstyle.css ') }}' rel='stylesheet'>

    <link href="{{ asset('css/bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('fontawsome/css/all.min.css') }}" rel="stylesheet" />
</head>

<style>
     body::-webkit-scrollbar {
  width: 1em;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

    ol {
        padding-left: 1.8em;
    }
    .detail-footer{
        font-size: 12px;
    }
    .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #000000; //your desired color
    font-size:14px;
}
.invoice-table{
    font-size:16px;
}

    .subhead {
        color: gray;
        font-size: 12px;
        font-family: 'Montserrat';
    }

    .companyName {
        font-weight: 600;
    }

    .address {
        font-weight: 300;
        font-size: 14px;
    }

    .card-header {
    color: black !important;
    background-color: #D1D1D1 !important;
    }
    html {
        font-size: 14px;
        font-family: 'Montserrat';
    }

    .table-condensed {
        font-size: 14px;
        font-family: 'Montserrat';
    }

    .card-footer {
        background-color: white;
    }

    div.subheading {
        font-weight: 500;
        line-height: .5;
        font-family: 'Montserrat';
    }

    .thin {
        /* Montserrat Thin = 100 */
        font-weight: 500;
        font-family: "Montserrat";
    }

    p {
        line-height: 1.2;
        margin-bottom: .4rem;
    }

    hr{
        border-top: 1px solid #848484;
    }
   

    li {
    list-style-type: none;
}
ul{
    padding: 0;
    margin-block-end:0;
}

    body {
    border: solid #000000;
    border-width: 1px;
        background-color: white;
        font-weight: 400;
        -webkit-print-color-adjust: exact;
        font-family: "Montserrat";
    }



    /* Styles go here */

.page-header, .page-header-space {
  height: 130px;
}

.page-footer, .page-footer-space {
  height: 160px;

}
.border-right {
    border-right: 1px solid #000000!important;
}

.border-left {
    border-left: 1px solid #000000!important;
}

.border-top {
    border-top: 1px solid #000000!important;
}
.border-bottom {
    border-bottom: 1px solid #000000!important;
}
.border {
    border: 1px solid #000000!important;
}

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.page-header {
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #848484; /* for demo */
}


.page {
  page-break-after: always;
}

@page {
  margin: 2mm
}

@media print {
   thead {display: table-header-group;} 
   tfoot {display: table-footer-group;}
   
   button {display: none;}
   
   body {margin: 0;}
}
  
   
   
</style>

<body class="">


    <div class="page-header" style="text-align: center">
        
    </div>

     


      <div class="page-footer">
         
        <div class="row px-3 border-bottom border-top">
            
        </div>

        <div class="row px-3 border_bottom">
                <div class="w-100 p-0 px-2">
                        <div>
                            <div class="text-center detail-footer">
                                This is a computer generated page
                            </div>
                        </div>
                    </div>
         </div> 
      </div>
    
      <table style="width:100%">
      <thead>
        <tr>
          <td>
            <!--place holder for the fixed-position header-->
            <div class="page-header-space"></div>
          </td>
        </tr>
        

      </thead>
      <tbody>
            <tr>
                <td >
                        
                         
                </td>
            </tr>
            <tr>
                <td>
                        <div class="row px-1">
                                <div class="image"></div>
                                <div class="col-md-6">
                                <h6 class="mb-3">Party Detail</h6>
                                <hr>
                                   <div>
                                        <strong>{!! $invoice->account->name !!}</strong>
                                   </div>
                                </div>

                                <div class="col-md-6">
                                        <h6 class="mb-3">Invoice Detail</h6>
                                        <hr>

                                        <table style="width:100%">
                                            <tr>
                                                <th>Ref Number</th>
                                                <td> {!! $invoice->ref_number!!}</td>
                                            </tr>                                                                                                        
                                        </table>

                                        
                                </div>


                         </div>
                    
                </td>
            </tr>

            <tr>
                <td>
                        <div class="row card-header">
                                <div class="col-md-4 p-0 m-0 pl-1">
                                </div>
                                <div class="col-md-4 p-0 m-0 pl-1">
                                    <div class="text-center">
                                        <strong>PARTICULAR ITEMS</strong>
                                    </div>
                                </div>
                                <div class="col-md-4 p-0 m-0 pl-1">
                                </div>
                         </div>
                </td>
            </tr>

            <tr>
                    <td>
                            <div class="page">
                            <div class="row px-4" >
                                    
                                    <div class="table-responsive-sm " style="width:100%;">
            
                                        <table class="table table-striped table-bordered table-condensed invoice-table" >
                                            <thead>
                                                <tr>
                                                    <th class="center" width="4%">SN</th>
                                                    <th width="35%">Item</th>
                                                    <th width="6%">Qty</th>
                                                    <th width="4%">UnitPrice</th>
                                                    @if(!empty($invoice->discount) && $invoice->discount > 0)
                                                    <th>Dis</th>
                                                    @endif
                                                    <th class="text-right">Net Amount</th>
                                                </tr>
                                            </thead>
            
                                            <tbody>
                                                @php $i = 1 
                                                @endphp 
                                                
                                                @foreach($invoice->pendingInvoiceDetail as $id) 
                                                @php $pd = $id->packingDetail; 
                                                $bondData = $pd->getBondData($pd->packing_id);
                                                
                                                @endphp

                                                <td class="center">{!! $i !!}</td>
                                                <td class="center">
                                                    {!! $bondData->product_name !!} Spec ({!! $bondData->size !!})
                                                    <p>{!! $bondData->category !!} PKID ({!! $pd->packing_id !!})</p>
                                                </td>
                                                <td class="center">{!! $id->qty !!}</td>
                                                <td class="center">{!! $id->unit_price !!}</td>
            
                                                @if(!empty($id->discount) && $id->discount > 0)
                                                <td>{!! $id->discount !!}</td>
                                                <td class="text-right">{!! $id->discount_val!!}</td>
                                                @endif                                                
                                                <td class="text-right">{!! $id->net_amount !!}</td>
                                                @endforeach
                                                
            
                                            </tbody>
                                            <tfoot align="right">
                                                <tr>
                                                    @php 
                                                    $dVisible = (!empty($id->discount) && $id->discount>0); 
                                                    $colspan = 3; 
                                                    $totalColSpan = 6; 
                                                    $colspan = (!$dVisible)? ($colspan+1):$colspan; 
            @endphp
                                                    <th class="text-right" colspan="{!! $colspan !!}">Total</th>
            
                                                    @if(!empty($id->discount) && $id->discount > 0)
                                                    <th>{!! $id->discount !!}</th>
                                                    @endif
            
                                                    <th>&#8377; {!! $id->amount !!}</th>
            
                                                    <th class="text-right">&#8377; {!! $id->net_amount!!}</th>
                                                </tr>
                                    
            
                                                @if(isset($invoice->packing_charge) && $invoice->packing_charge>0)
                                                <tr>
                                                    <th class="text-right" colspan="{!! $totalColSpan !!}">Packing Charges</th>
                                                    <th>&#8377; {!! $invoice->packing_charge!!}</th>
                                                </tr>
                                                @endIf @if(isset($invoice->transport) && $invoice->transport>0)
                                                <tr>
                                                    <th class="text-right" colspan="{!! $totalColSpan !!}">Transport Charges</th>
                                                    <th>&#8377; {!! $invoice->transport!!}</th>
                                                </tr>
                                                @endIf @if((isset($invoice->transport) && $invoice->transport>0) || (isset($invoice->packing_charge) && $invoice->packing_charge>0))
                                                <tr>
                                                    <th class="text-right" colspan="{!! $totalColSpan !!}">Total</th>
                                                    <th>&#8377;  {!! $invoice->totalAmount!!}</th>
                                                </tr>
                                                @endIf
            
                                                <tr>
                                                    <td colspan="{!! $totalColSpan+1 !!}">Net Payable Amount in words :<strong> &#8377; {!! BladeUtil::getIndianCurrency($invoice->totalAmount) !!}</strong></td>
                                                </tr>
            
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>       
                    </td>

                </tr>
                <tfoot>
                    <tr>
                        <td>
                                <div class="row px-3">
                                        <div class="w-50 p-0 px-2">
                                                <div>
                                                   
                                                </div>
                                            </div>
                                 </div> 
                        </td>
                    </tr>
                </tfoot>
      </tbody>
      </table>

</body>
</html>