@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.
      </div>

      <div class="invoice p-3 mb-3">

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

        </div>

        <div class="row invoice-info">
          <div class="col-sm-4 invoice-col">
            Dari
            <address style="text-transform: uppercase;">
              <strong>PT. Panggilan Burung Kutilang</strong><br>
              Jl. Bypass Ngurah Rai no 154, Denpasar<br>
              Phone: -<br>
            </address>
          </div>

          <div class="col-sm-4 invoice-col">
            Kepada
            <address style="text-transform: uppercase;">
              <strong>{{$order['receiver_full_name']}}</strong><br>
              {{$order['receiver_address']}}, <br>{{$order['city_or_region']}}, {{$order['receiver_province']}} {{$order['receiver_zip_code']}}<br>
              Phone: {{$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($item_order as $key)
                                 <tr>
                  <td>{{$qty}}</td>
                  <td>{{$key['item_name']}}</td>
                  <td>
                    @foreach($key['order_detail'] as $k => $od)
                      @if($k>0)
                      <br>,
                      @endif
                    {{$od->item_stock_code}}
                    @endforeach
                  </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="4"></td>
                  <th>Total:</th>
                  <td>Rp. {{number_format($totalAll,0,",",".")}}</td>
                </tr>
              </tbody>
            </table>
            <hr>
             <h4>Print date: 11 Dec 2025</h4>
          </div>

        </div>

    


        <div class="row no-print">
          <div class="col-12">
            
            <button type="button" class="btn btn-primary float-right btn-print" style="margin-right: 5px;">
              <i class="fas fa-print"></i> Print
            </button>
          </div>
        </div>
      </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: landscape}
  body {
    visibility: hidden;
  }
  .invoice {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }

  .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