@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" style="padding: 0px; padding-top: 0px; ">
        <div class="row" style="border: solid 1px #000; border-bottom: none;">
          <div class="col-2" style="display: flex; align-items: center; justify-content: center; border-right: solid 1px #000;">
            <p class="text-center" style="margin-top: 5px;">
            <img src="{{asset($settings['company_logo'])}}" style="width: auto; height: 80px;" />
          </p>
          </div>
          <div class="col-10" style="display: flex; align-items: center; justify-content: center;">
            <p style="font-size: 32pt; margin: 0; " class="text-center"><b>{{$settings['company_name']}}</b></p>
          </div>
        </div>
        <div class="row" style="border: solid 1px #000; border-bottom: none;">
          <div class="col-6" style="border-right: solid 1px #000;">
            <p style="font-size: 24pt;"><b>PENGIRIM</b></p>
            <p>{{$settings['company_name']}}
            <br>{{$settings['company_address']}}
            <br>{{$settings['company_city']}} {{$settings['company_postal_code']}}
            <br></p>
          </div>
          <div class="col-6">
            <p style="font-size: 24pt;"><b>PENERIMA</b></p>
            <p class="uppertext">{{$order['receiver_full_name']}}</p>
            <p class="uppertext">{{$order['receiver_address']}}</p>
            <br>
          </div>
        </div>
        <div class="row">
          <div class="col-6" style="border-left: solid 1px #000; border-right: solid 1px #000;"><h3>ID PEL : <b style="font-weight: 600;">{{$settings['company_id']}}</b></h3></div>
          <div class="col-3"><p class="uppertext">{{$order['city_or_region']}}, {{$order['receiver_province']}}</p></div>
          <div class="col-3" style="border-right: solid 1px #000;"><p class="text-right">{{$order['receiver_zip_code']}}</p></div>
        </div>
        <div class="row" style="border: solid 1px #000; border-bottom: none;">
          <div class="col-6" style=" border-right: solid 1px #000;"><p class="text-center"> <b>{{$order['invoice_no']}}</b></p></div>
          <div class="col-6"><p>TELP <b style="font-weight: 600;">{{$order['receiver_phone_number']}}</b></p></div>
        </div>
        <div class="row" style="border: solid 1px #000;">
          <div class="col-3" style=" border-right: solid 1px #000;"> 
            <p class="text-center" style="margin: 5px;">
              <!-- <img src="http://chart.googleapis.com/chart?cht=qr&chs=124x124&choe=UTF-8&chld=L|0&chl=" id="inv-qr"> -->
              {{$order['qr']}}
            </p>
          </div>
          <div class="col-3" style=" border-right: solid 1px #000;">
                <p class="text-center"><b style="font-weight: 600;">ISI KIRIMAN</b></p>
                <p class="text-center">
                                @foreach($item_order as $k => $v)
                                  @if($k>0)
                  <br>
                  @endif
                  {{$v['item_name']}} x {{$qty}}
                @endforeach
              </p>
            </div>
          <div class="col-6">
                <p class="text-center" style="font-size: 42px;">
                  <b style="font-weight: 600; margin-bottom: 5px;">COD</b></p>
                  <p class="text-center" style="font-size: 54px;">
                Rp. {{number_format($order['cod_money'],0,",",".")}}
              </p>
            </div>
        </div>
        <div class="row" style="border: solid 1px #000; border-top: none;">
          <div class="col-12"><p style="text-align: center;">TERIMA KASIH ATAS KEPERCAYAAN ANDA BERBELANJA DI TOKO KAMI</p></div>
        </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">

  .invoice .col-2, .col-3, .col-6, .col-10, .col-12{
/*    border: solid 1px #000;*/
    box-sizing: border-box;
  }
  .invoice b{
    font-weight: 500;
  }
  .invoice p{
    font-size: 16pt;
    line-height: 1;
    margin-bottom: 0;
    margin: 5px;
  }
  .uppertext{
    text-transform: uppercase;
  }
  .col-md-*{
    border: solid 1px #eee;
  }
  @media print {
   @page {
    size: landscape
  }
  body {
    visibility: hidden;
  }
  .invoice {
    visibility: visible;
    position: absolute;
    /*display: block; */
    left: -7.5%; top: 10%;
    margin: auto;
    transform: scale(0.8,0.8);
    /*max-height: 393px;*/
  }

  .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