<x-app-layout>
    @include('admin.include.sidebar')
<div class="card">
<div class="card-header">
   <h3 class="modal-title" style="background: #5cb85c;color: #fff;padding: 5px 19px;">View OrderDetails</h3>
   <div class="clearfix"></div>
</div>

<form method="POST" action="{{ route('booking.update',$booking->id)}}" enctype="multipart/form-data">
   @csrf
   @method('PATCH')

   <div class="settingpdf" style="    padding: 10px 6px;">
      <a href="javascript:void();" onclick="printContent('printpage')" target="" class="btn btn-info"><i class="fa fa-print"></i></a>
      <a target="" class="btn btn-info" id="exportForm">Download Pdf</a>
   </div>

   <div class="card-body">
   <div id="first-page" style="background-color: #fff;">
        <div class="row">
            <div class="col-md-6">
            <div class="invoice_logo_holder">
                <img src="" alt="">
            </div>
            <h2>CUSTOMER DETAILS</h2>
            <hr>
            <p><strong>Customer Name</strong>: {{$user->name}}</p>
            <p><strong>Customer Email</strong>: {{$user->email}}</p>
            <p><strong>Phone Number</strong>:{{$booking->dlv_tel}}</p>
            <p><strong>Customer Address</strong>:{{$booking->dlv_add}}</p>
            </div>
            {{-- <div class="col-md-4 col-md-offset-4">
            </div> --}}
            <div class="col-md-6">
            <h2>INVOICE</h2>
            <hr>
            <p><strong>Order Id</strong>: {{$booking->orderid}}</p>
            <p><strong>Booking Date & Time</strong>: {{$booking->created_at}}</p>
            <p><strong>Paid Status</strong>: {{$booking->paymentstatus}}</p>
            </div>
        </div>
      <div class="table-responsive">
         <table  class="table table-striped table-bordered" style="width:100%">
            <thead>
               <tr>
                  <th width="5%">#OrderId</th>
                  <th width="10%">Car Name</th>
                  <th width="10%">Car Model</th>
                  <th width="10%">From Date</th>
                  <th width="10%">To Date</th>
                  <th width="10%">From Time</th>
                  <th width="10%">To Time</th>
                  <th width="10%">Tax Amount</th>
                  <th width="10%">Upsells Amount</th>
                  <th width="10%">Car Price</th>
               </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#{{$booking->orderid}}</td>
                    <td>{{ $booking->carname}}</td>
                    <td>{{ $booking->car_model}}</td>
                    <td>{{$booking->res_from_date}}</td>
                    <td>{{$booking->res_to_date}}</td>
                    <td>{{$booking->res_fm_time}}</td>
                    <td>{{$booking->res_to_time}}</td>
                    <td>{{$setting->curr}} {{$booking->totaltaxamount}}</td>
                    <td>{{$setting->curr}} {{$booking->upsellsamt}}</td>
                    <td>{{$setting->curr}} {{$booking->finaltotal - ($booking->totaltaxamount + $booking->upsellsamt)}} </td>
                </tr>
            </tbody>
         </table>
      </div>
      <div class="invoice_total_holder" style="float: right;">
         <p class="border_bottom_invoice"><strong>Total: </strong>
            {{$setting->curr}} {{$booking->finaltotal}}
         </p>
      </div>
   </div>
   <div class="clearfix"></div>

   <div class="card-footer">
      <!--<button type="submit" class="btn btn-primary">Update</button>-->
      {{-- <a href="{{route('order.index')}}">
      <span class="btn btn-primary">Back</span>
      </a> --}}
   </div>
   <div class="card-body" id="printpage" style="display: none;">
      <div class="row">
        <div class="col-md-6">
        <div class="invoice_logo_holder">
            <img src="" alt="">
        </div>
        <h2>CUSTOMER DETAILS</h2>
        <hr>
        <p><strong>Customer Name</strong>: {{$user->name}}</p>
        <p><strong>Customer Email</strong>: {{$user->email}}</p>
        <p><strong>Phone Number</strong>:{{$booking->dlv_tel}}</p>
        <p><strong>Customer Address</strong>:{{$booking->dlv_add}}</p>
        </div>
        <div class="col-md-6">
        <h2>INVOICE</h2>
        <hr>
        <p><strong>Order Id</strong>: {{$booking->id}}</p>
        <p><strong>Booking Date & Time</strong>: {{$booking->created_at}}</p>
        <p><strong>Paid Status</strong>: {{$booking->paymentstatus}}</p>
        </div>
      </div>
      <div class="table-responsive">
         <table  class="table table-striped table-bordered" style="width:100%">
            <thead>
               <tr>
                  <th width="5%">#OrderId</th>
                  <th width="10%">Car Name</th>
                  <th width="10%">Car Model</th>
                  <th width="10%">From Date</th>
                  <th width="10%">To Date</th>
                  <th width="10%">From Time</th>
                  <th width="10%">To Time</th>
                  <th width="10%">Tax Amount</th>
                  <th width="10%">Upsells Amount</th>
                  <th width="10%">Car Price</th>
               </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#{{$booking->id}}</td>
                    <td>{{ $booking->carname}}</td>
                    <td>{{ $booking->car_model}}</td>
                    <td>{{$booking->res_from_date}}</td>
                    <td>{{$booking->res_to_date}}</td>
                    <td>{{$booking->res_fm_time}}</td>
                    <td>{{$booking->res_to_time}}</td>
                    <td>{{$setting->curr}} {{$booking->totaltaxamount}}</td>
                    <td>{{$setting->curr}} {{$booking->upsellsamt}}</td>
                    <td>{{$setting->curr}} {{$booking->daily_price * $booking->days}} </td>
                </tr>
            </tbody>
         </table>
      </div>
      <div class="invoice_total_holder" style="float: right;">
         <p class="border_bottom_invoice"><strong>Total: </strong>
            {{$setting->curr}} {{$booking->finaltotal}}
         </p>
      </div>
      {{-- <div class="invoice_total_holder" style="float: right;">
         <p class="border_bottom_invoice"><strong>Total: </strong>
            £{{$subtotal}}
         </p>
      </div> --}}
</form>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
   $('#exportForm').click(function(){
   var pdf = new jsPDF('a', 'mm', 'a4');
   var firstPage;
   var secondPage;

   html2canvas($('#first-page'), {
   onrendered: function(canvas) {
     firstPage = canvas.toDataURL('image/jpeg', 1.0);
   }
   });
   setTimeout(function(){
   pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0);
   pdf.save("order.pdf");
   }, 150);
   });
</script>
<script>
   function printContent(printpage){
     // var restorepage=document.body.innerHTML;
     // var printcontent= document.getElementById(printpage).innerHTML;
     // document.body.innerHTML=printcontent;
     //   window.print();
     //   document.body.innerHTML=restorepage;

       var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=800,height=600,left=100,top=25";
      var sWinHTML = document.getElementById('printpage').innerHTML;
      var winprint=window.open("","",sOption);
          winprint.document.open();
          winprint.document.write('<html><head><style type="text/css">');
          winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
          winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
          winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
          winprint.document.write('</style></head><body onload="window.print();">');
          winprint.document.write(sWinHTML);
          winprint.document.write('</body></html>');
          winprint.document.close();
          winprint.focus();
   }
</script>
</x-app-layout>
