@extends('web.layout.master')

@section('content')

<div class="container order-details-wrapper" id="printableArea">
    <div class="row">
        {{-- <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{ route('my-account') }}" aria-label="Account overview">Account overview</a></li>
              <li class="breadcrumb-item active" aria-current="page">Order Details</li>
            </ol>
          </nav> --}}
        <div class="col-sm-12">
          {{-- <h2 class="clearfix order-details-heading">Order Details <span>
              <button aria-labelledby="..." class="btn btn-danger font-weight-bold" onclick="printDiv('printableArea')">Print</button></span></h2> --}}

              <h2 class="clearfix order-details-heading">Order Details <span>
                <a href="{{ route('order-receipt-html', ['id' => $order->orderid ]) }}" target="_blank" class="btn btn-danger font-weight-bold" style="text-transform:initial">Print</a></span></h2>
        </div>

    </div>

    <div class="col-lg-12 OrderReceipt" id="OrderReceipt" page-url="{{ route('order-receipt',$order->orderid) }}">
    </div>


  </div>


<script>
    $(document).ready(function () {
        $('.OrderReceipt').text('Loading....');

        var url = $('#OrderReceipt').attr('page-url');
        $('#OrderReceipt').load(url);

    });

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

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
   }
</script>
@endsection