@extends('layout.main')


@section('main-section')

<script>
    function printDiv(divId) {
     var printContents = document.getElementById(divId).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>
<style>
    @media print {

    @page {
        size: A4;
        margin: 1mm;   /* control page margins here */
    }

    html, body {
        width: 280mm;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Times New Roman', Times, serif !important;
    }

    body * {
        visibility: hidden;
    }

    #printableArea, #printableArea * {
        visibility: visible;
    }

    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transform: scale(1);   /* adjust if needed */
        transform-origin: top left;
    }

    .invoice-actions {
        display: none !important;
    }
}
</style>

<!-- Content wrapper -->
          <div class="content-wrapper" style="font-family: 'Times New Roman', Times, serif">
            <!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">
              <div class="row invoice-preview">
                <!-- Invoice -->
                <div class="col-xl-9 col-md-8 col-12 mb-md-0 mb-6" id="printableArea">
                  <div class="card invoice-preview-card p-sm-12 p-6">
                    <div class="card-body invoice-preview-header rounded">
                      <div
                        class="d-flex justify-content-between flex-xl-row flex-md-column flex-sm-row flex-column align-items-xl-center align-items-md-start align-items-sm-center align-items-start">
                        <div class="mb-xl-0 mb-6 text-heading">
                            <img src="{{url('assets/headerlogo.png')}}" width="100%" />
                        </div>

                      </div>
                    </div>
                    <div class="card-body px-0">

                    </div>

                    @foreach ($bill as $b)


                                        <div class="row">
                                            <div class="col-12">
                                                <div class="table-responsive">
                                                    <table class="table mt-4 table-centered table-sm table-striped">

                                                        <tbody>

                                                          <tr>
        	<td><b>Owners' CNIC</b></td> <td>4230194385293, 4230175755205</td>

		<td><b>License #</b></td> <td>124.S.MOTOR.F - Motor Third Party Compulsory Business</td>
	</tr>

	<tr>
		<td><b>Company NTN</b></td> <td>1228507-2</td>

		<td><b>License Validity</b></td> <td>14/May/2026</td>
	</tr>


                                                        </tbody>
                                                    </table>


                                                    <table class="table mt-4 table-centered table-sm table-striped">

                                                        <tbody>
                                                           <tr style="font-size: 16px; font-weight: bold; border:solid;">
		<td><b>Invoice #</b></td> <td><u>PICL/A-12118374/ 2025</u></td>
		<td><b>Date:</b></td> <td><u>{{ \Carbon\Carbon::parse($b->created_at)->format('d-m-Y') }}</u></td>
	</tr>

	<tr>
		<td><b>Survey Report #</b></td> <td>{{$assignInfo->_ReferenceNo}}</td>
	</tr>

	<tr>
		<td><b>Client: </b> </td> <td><b>{{$assignInfo->_Client}} ({{$assignInfo->_ClientBranch}})</b></td>
	</tr>


		<tr>
		<td><b>Description:</b></td> <td>{{$assignInfo->_Make}} {{$assignInfo->_YearOfManf}} {{$assignInfo->_RegNo}} CH. {{$assignInfo->_ChassisNo}} EN. {{$assignInfo->_EngineNo}} </td>
	</tr>


		<tr>
		<td><b>Insured:</b></td> <td>{{$assignInfo->_InsuredParticipant}}</td>
	</tr>
		<tr>
		<td><b>Policy #: </b></td> <td>{{$assignInfo->_PolicyPMDNo}}</td>
	</tr>

	<tr>
		<td><b>Claim / Loss #: </b></td> <td>{{$assignInfo->_LossBenefitNo}}</td>
	</tr>


                                                        </tbody>

                                                    </table>

                                                   <table class="table-sm table table-bordered">

    	<tr style="font-size: 16px; border:solid;">
		<th><b><u>Particulars</u></b></th>
		<th style="text-align:center;"><b><u>Amount</u></b></th>
	</tr>
		<tr>
		<td>Professional Fee:</td> <td style="text-align:center;">{{number_format($b->_ProfessionalFee)}}</td>
	</tr>
	@if(($b->_ServicesTaxonTotalAmount != 'on'))
	<tr>
		<td>Tax Charged @ {{ $b->_Province }} {{$b->_SSTPSTKPRABRAProvincialServicesTax}}%:</td> <td style="text-align:center;"> @if(empty($b->_ServicesTaxonTotalAmount)) {{number_format($b->_ProfessionalFee * $b->_SSTPSTKPRABRAProvincialServicesTax / 100)}} @else {{number_format( $total * $b->_SSTPSTKPRABRAProvincialServicesTax / 100)}} @endif</td>
	</tr>
	@endif

    <tr>
		<td>Photographs:</td> <td style="text-align:center;">{{number_format($b->_Photographs)}}</td>
	</tr>

    <tr>
		<td>Re-Inspection:</td> <td style="text-align:center;">{{number_format($b->_Re_Inspection)}}</td>
	</tr>

	@if(($b->_TotalTravellingExpense > 0))
    </tr>
		<tr>
		<td>Travel Exp. {{$b->_TravelFrom }} - {{ $b->_TravelTo }} {{ $b->_KM }}KM:</td> <td style="text-align:center;"> {{ number_format($b->_TotalTravellingExpense) }}</td>
	</tr>
    @endif

    @foreach ($billCaption as $bcap)

    @if($bcap->_Amount > 0)

    <tr>
		<td>{{$bcap->_Caption}}</td> <td style="text-align:center;">{{number_format($bcap->_Amount)}}</td>
	</tr>

    @endif

    @endforeach

    @if(($b->_ServicesTaxonTotalAmount == 'on'))
    <tr>
		<td>Tax Charged @ {{ $b->_Province }} {{$b->_SSTPSTKPRABRAProvincialServicesTax}}%:</td> <td style="text-align:center;"> @if(empty($b->_ServicesTaxonTotalAmount)) {{number_format($b->_ProfessionalFee * $b->_SSTPSTKPRABRAProvincialServicesTax / 100)}} @else {{number_format( $total * $b->_SSTPSTKPRABRAProvincialServicesTax / 100)}} @endif</td>
	</tr>
	@endif
    	<tr style="border:solid;">
		<th><u>TOTAL INVOICE AMOUNT:</u></th> <td style="text-align:center;"><b><u>@if(empty($b->_ServicesTaxonTotalAmount)) {{ number_format($total + $serTaxProv)  }} @else {{ $total + $serTaxProvTotal }} @endif</u></b></td>
	</tr>


</table>



                                                </div> <!-- end table-responsive -->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end row -->

                                        @endforeach

                                        <div class="row">

                                            <div class="col-sm-6">
                                                <div class="">
                                                    <!--<p><b>Assigned By</b> <span class="">{{$assignInfo->UserEmail}}</span></p>-->

                                                </div>

                                            </div> <!-- end col -->
                                        </div>


                    <hr class="mt-0 mb-6" />
                  </div>
                </div>
                <!-- /Invoice -->

                <!-- Invoice Actions -->
                <div class="col-xl-3 col-md-4 col-12 invoice-actions">
                  <div class="card">
                    <div class="card-body">
                      <button
                        class="btn btn-primary d-grid w-100 mb-4"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#sendInvoiceOffcanvas">
                        <span class="d-flex align-items-center justify-content-center text-nowrap"
                          ><i class="icon-base ti tabler-send icon-xs me-2"></i>Send Invoice</span
                        >
                      </button>
                      <button class="btn btn-label-secondary d-grid w-100 mb-4">Download</button>
                      <div class="d-flex mb-4">
                        <a
                          class="btn btn-label-secondary d-grid w-100 me-4"
                          target=""
                           onclick="window.print()">
                          Print
                        </a>
                        <a href="./app-invoice-edit.html" class="btn btn-label-secondary d-grid w-100"> Edit </a>
                      </div>
                      <button
                        class="btn btn-success d-grid w-100"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#addPaymentOffcanvas">
                        <span class="d-flex align-items-center justify-content-center text-nowrap"
                          ><i class="icon-base ti tabler-currency-dollar icon-xs me-2"></i>Add Payment</span
                        >
                      </button>
                    </div>
                  </div>
                </div>
                <!-- /Invoice Actions -->
              </div>

              <!-- Offcanvas -->
              <!-- Send Invoice Sidebar -->
              <div class="offcanvas offcanvas-end" id="sendInvoiceOffcanvas" aria-hidden="true">
                <div class="offcanvas-header mb-6 border-bottom">
                  <h5 class="offcanvas-title">Send Invoice</h5>
                  <button
                    type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
                </div>
                <div class="offcanvas-body pt-0 flex-grow-1">
                  <form>
                    <div class="mb-6">
                      <label for="invoice-from" class="form-label">From</label>
                      <input
                        type="text"
                        class="form-control"
                        id="invoice-from"
                        value="shelbyComapny@email.com"
                        placeholder="company@email.com" />
                    </div>
                    <div class="mb-6">
                      <label for="invoice-to" class="form-label">To</label>
                      <input
                        type="text"
                        class="form-control"
                        id="invoice-to"
                        value="qConsolidated@email.com"
                        placeholder="company@email.com" />
                    </div>
                    <div class="mb-6">
                      <label for="invoice-subject" class="form-label">Subject</label>
                      <input
                        type="text"
                        class="form-control"
                        id="invoice-subject"
                        value="Invoice of purchased Admin Templates"
                        placeholder="Invoice regarding goods" />
                    </div>
                    <div class="mb-6">
                      <label for="invoice-message" class="form-label">Message</label>
                      >
                    </div>
                    <div class="mb-6">
                      <span class="badge bg-label-primary">
                        <i class="icon-base ti tabler-link icon-xs"></i>
                        <span class="align-middle">Invoice Attached</span>
                      </span>
                    </div>
                    <div class="mb-6 d-flex flex-wrap">
                      <button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Send</button>
                      <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                    </div>
                  </form>
                </div>
              </div>
              <!-- /Send Invoice Sidebar -->

              <!-- Add Payment Sidebar -->
              <div class="offcanvas offcanvas-end" id="addPaymentOffcanvas" aria-modal="true" role="dialog">
                <div class="offcanvas-header border-bottom">
                  <h5 class="offcanvas-title">Add Payment</h5>
                  <button
                    type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
                </div>
                <div class="offcanvas-body flex-grow-1">
                  <div class="d-flex justify-content-between bg-lighter p-2 mb-4">
                    <p class="mb-0">Invoice Balance:</p>
                    <p class="fw-medium mb-0">$5000.00</p>
                  </div>
                  <form>
                    <div class="mb-6">
                      <label class="form-label" for="invoiceAmount">Payment Amount</label>
                      <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input
                          type="text"
                          id="invoiceAmount"
                          name="invoiceAmount"
                          class="form-control invoice-amount"
                          placeholder="100" />
                      </div>
                    </div>
                    <div class="mb-6">
                      <label class="form-label" for="payment-date">Payment Date</label>
                      <input id="payment-date" class="form-control invoice-date" type="text" />
                    </div>
                    <div class="mb-6">
                      <label class="form-label" for="payment-method">Payment Method</label>
                      <select class="form-select" id="payment-method">
                        <option value="" selected disabled>Select payment method</option>
                        <option value="Cash">Cash</option>
                        <option value="Bank Transfer">Bank Transfer</option>
                        <option value="Debit Card">Debit Card</option>
                        <option value="Credit Card">Credit Card</option>
                        <option value="Paypal">Paypal</option>
                      </select>
                    </div>
                    <div class="mb-6">
                      <label class="form-label" for="payment-note">Internal Payment Note</label>
                      <textarea class="form-control" id="payment-note" rows="2"></textarea>
                    </div>
                    <div class="mb-6 d-flex flex-wrap">
                      <button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Send</button>
                      <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                    </div>
                  </form>
                </div>
              </div>
              <!-- /Add Payment Sidebar -->

              <!-- /Offcanvas -->
            </div>
            <!-- / Content -->

@endsection('main-section')