@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;
   }
   
    document.addEventListener("DOMContentLoaded", function () {
    const gregDate = document.getElementById("greg-date").innerText.trim();

    fetch(`https://api.aladhan.com/v1/gToH?date=${gregDate}`)
        .then(res => res.json())
        .then(data => {
            if (data.code === 200) {
                const hijri = data.data.hijri;
                document.getElementById("hijri-date").innerText =
                    `${hijri.day} ${hijri.month.en} ${hijri.year} `;
            } else {
                document.getElementById("hijri-date").innerText = "N/A";
            }
        })
        .catch(() => {
            document.getElementById("hijri-date").innerText = "N/A";
        });
});
</script>
<style>
@media print {

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

    html, body {
        width: 250mm;
        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 class="col-12" style="text-align: center;">
               <h5><b><u>WITHOUT PREJUDICE</u></b></h5>
               <!--<h4>Survey Report – Motor Accidental Loss </h4>-->
               <p class="fs-4">Document Request Letter - DRL</p>
               <b><span style="border:solid; padding-top:5px; padding-bottom:5px; padding-right:30px; padding-left:30px; font-size:20px">CLAIM / LOSS # {{ $assignInfo->_LossBenefitNo }}</span></b>
               <p></p>
            </div>
            
            <div class="d-flex justify-content-between align-items-start mb-3">
                        <!-- Left -->
                        <h5 class="mb-0">
                           <b> Reference # {{ $assignInfo->_ReferenceNo }}</b>
                        </h5>

                       <div class="text-end">
                        <div class="fw-medium fs-5">
                            <span><b>Report Date:</b></span>
                            <span id="greg-date">
                                {{ $assignInfo->created_at->format('d-m-Y') }}
                            </span>
                        </div>
                        <div class="text-muted fs-5">
                            Hijri:
                            <span id="hijri-date">Loading...</span>
                        </div>
                    </div>
                    </div>
            </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>
                              <th><b>Job Specification </b></th>
                              <td> {{$assignInfo->_JobSpecification}} </td>
                              <th><b>Date of Intimation</b></th>
                              <td>{{ \Carbon\Carbon::parse($assignInfo->_DateOfIntimation)->format('d-m-Y') }}</td>
                           </tr>
                           <tr>
                              <th><b>Client</b></th>
                            <td>
                                {{ $assignInfo->_Client }}
                            </td>
                              <th><b>Branch</b></th>
                              <td>{{$assignInfo->_ClientBranch}}</td>
                           </tr>
                           <tr>
                              <th><b>Policy No.</b></th>
                              <td>{{$assignInfo->_PolicyPMDNo}}</td>
                              <th><b>Loss No</b></th>
                              <td>{{$assignInfo->_LossBenefitNo}}</td>
                           </tr>
                           <tr>
                              <th><b>Insured</b></th>
                              <td>{{$assignInfo->_InsuredParticipant}}</td>
                              <th><b>Contact Details</b></th>
                              <td>{{$assignInfo->_ContactDetails}}</td>
                           </tr>
                           <tr>
                              <th><b>Description of interest</b></th>
                              <td>{{$assignInfo->_RegNo}}</td>
                              <th><b>Repairer</b></th>
                              <td>{{$assignInfo->_Workshop}}</td>
                           </tr>
                        </tbody>
                     </table>
                     <!--<table class="table mt-4 table-centered table-sm table-striped">-->
                     <!--   <tbody>-->
                     <!--      <tr>-->
                     <!--         <th><b>Description of interest</b></th>-->
                     <!--         <td>{{$assignInfo->_RegNo}}</td>-->
                     <!--      </tr>-->
                     <!--   </tbody>-->
                     <!--</table>-->
                     <textarea  class="form-control" style="height: 620px; border: none; overflow: auto;">@foreach ($jobSpec as $j){{  $j->_Detail }} @endforeach </textarea>
                  </div>
                  <!-- end table-responsive -->
               </div>
               <!-- end col -->
            </div>
            <!-- end row -->
            <div class="row">
               <div class="col-sm-6">
                  <div class="">
                     <p><b>Surveyor Name</b> <span class=""> &nbsp;&nbsp;&nbsp; {{$assignInfo->_AssignTeamMember}}</span></p>
                     <p><b>Assigned By</b> <span class=""> {{$assignInfo->_UserEmail}}</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="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>
               <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')