@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>
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- 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>
            <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>Settelement of Claim Number</td>
                              <td>CL-0325-1101010101-V11-D-01576 / CLI/34753</td>
                           </tr>
                           <tr>
                              <td>TID</td>
                              <td></td>
                           </tr>
                           <tr>
                              <td>Registration Number</td>
                              <td><u>BYT-759</u></td>
                           </tr>
                           <tr>
                              <td>Parts Amount</td>
                              <td><u>12,000</u></td>
                           </tr>
                           <tr>
                              <td>Less: Depreciation%</td>
                              <td><u>6,000</u></td>
                           </tr>
                           <tr>
                              <td>Net Payable Amount</td>
                              <td><u>6,000</u></td>
                           </tr>
                           <tr>
                              <td>Payment in favour of workshop / Insured</td>
                              <td><u>Participant</u></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <!-- end table-responsive -->
               </div>
               <!-- end col -->
            </div>
            <!-- end row -->
            <div class="row">
               <div class="col-sm-6">
                  <div class="">
                     <p><b>Surveyor Company</b> <span class=""> &nbsp;&nbsp;&nbsp; </span></p>
                     <p><b>Assigned By</b> <span class=""></span></p>
                  </div>
               </div>
               <!-- end col -->
            </div>
            <hr class="mt-0 mb-6" />
            <div class="card-body p-0">
               <div class="row">
                  <div class="col-12">
                     <span class="fw-medium text-heading">Note:</span>
                     <span
                        >It was a pleasure working with you and your team. We hope you will keep us in mind for
                     future freelance projects. Thank You!</span
                        >
                  </div>
               </div>
            </div>
         </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="printDiv('printableArea')">
                  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>
               <textarea class="form-control" name="invoice-message" id="invoice-message" cols="3" rows="8">
               Dear Queen Consolidated,
               Thank you for your business, always a pleasure to work with you!
               We have generated a new invoice in the amount of $95.59
               We would appreciate payment of this invoice by 05/11/2021</textarea
                  >
            </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')