@extends('adminlte::page')

@section('title', 'Invoice')

@section('content_header')
<h1>Invoice</h1>
@stop

@section('content')
<div class="container-fliud">
  <div class="row">
    <div class="col-12">
      <div class="callout callout-info">
        <h5><i class="fas fa-info"></i> Note:</h5>
        This page has been enhanced for printing. Click the print button at the bottom of the invoice to test.<br><br>
        <button type="button" class="btn btn-primary btn-print" style="margin-right: 5px;">
              <i class="fas fa-print"></i> Print
            </button>
            <br>
      </div>

      <div class="invoice" style="height: auto; max-height: 100vh; overflow-y: scroll;">
        @foreach($orders as $order => $v)
      <div class="invoice-div p-3 mb-3">

        <div class="row">
          <div class="col-12">
            <h4>
              <i class="fas fa-globe"></i> Warehouse APP, Inc.
              <small class="float-right" style="text-align: right; font-size: 18pt;">
                <b>{{$v['order']['invoice_no']}}</b>
                <br>
               </small>
            </h4>
          </div>

        </div>

        <div class="row invoice-info">
          <div class="col-sm-4 invoice-col">
            From
            <address style="text-transform: uppercase;">
              <strong>Warehous APP, Inc.</strong><br>
              Denpasar<br>
              Phone: -<br>
              Email: -
            </address>
          </div>

          <div class="col-sm-4 invoice-col">
            To
            <address style="text-transform: uppercase;">
              <strong>{{$v['order']['receiver_full_name']}}</strong><br>
              {{$v['order']['receiver_address']}}, <br>{{$v['order']['city_or_region']}}, {{$v['order']['receiver_province']}} {{$v['order']['receiver_zip_code']}}<br>
              Phone: {{$v['order']['receiver_phone_number']}}<br>
            </address>
          </div>
          <div class="col-sm-4">
            <p style="text-align: right;">
              
            <img style="border: 4px solid black;" src="http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=L|0&chl=" id="inv-qr">
          </p>
          </div>

        </div>


        <div class="row">
          <div class="col-12 table-responsive">
           
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Qty</th>
                  <th>Product</th>
                  <th>Item Code #</th>
                  <th>Item Weight #</th>
                  <th>Description</th>
                  <th>Price</th>
                  <th>Subtotal</th>
                </tr>
              </thead>
              <tbody>
                                 @foreach($v['item_order'] as $key)
                                 <tr>
                  <td>{{$qty}}</td>
                  <td>{{$key['item_name']}}</td>
                  <td>{{$key['item_code']}}</td>
                  <td>{{$key['item_weight']}} gr</td>
                  <td>{{$key['item_description']}}</td>
                  <td>Rp. {{number_format($key['item_price'],0,",",".")}}</td>
                  <td>Rp. {{number_format($total,0,",",".")}}</td>
                </tr>
                @endforeach
                <tr>
                  <td colspan="5"></td>
                  <th>Total:</th>
                  <td>Rp. {{$totalAll}}</td>
                </tr>
              </tbody>
            </table>
            <hr>
             <h4>Print date: 11 Dec 2025</h4>
          </div>

        </div>

    


        
      </div>
      <pagebreak>
      @endforeach
    </div>


    </div>
  </div>
</div>
@stop

@section('css')

<link rel="stylesheet" href="{{asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">
<style type="text/css">
  @media print {
    @page {
      size: A5 landscape;
    }
  body {
    visibility: hidden;
  }
  .invoice {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }

  .invoice-div{
    zoom: 0.5;
    page-break-after: always;
  }

  .no-print{
    visibility: hidden;
  }
}
</style>

@stop

@section('js')

<script src="{{asset('plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('plugins/moment/moment.min.js')}}"></script>
<script src="{{asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
<script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".btn-print").click(function(){
      window.print();
    });
  });
</script>
@stop