@extends('admin.app')

{{-- Web site Title --}}
@section('title') Invoices :: @parent @stop


@section('content')

    @if (isset($status))
    <div class="pad margin no-print">
        <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
            <ul>
                @foreach ($status['messages'] as $m)
                    <li>{{$m}}</li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif

    <section class="content-header">
        <!--<h1>Users <small>Platform Users</small></h1>-->
        <h1>Invoices #{{$invoice->uid}} 
            @if($invoice->status == 1)
                <small class="label bg-green">Sent</small>
            @elseif($invoice->status == 2)
                <small class="label bg-green">Paid</small>
            @elseif($invoice->status == 3)
                <small class="label bg-red">Cancelled</small>
            @elseif($invoice->status == 4)
                <small class="label bg-red">Rejected</small>
            @elseif($invoice->status == 0)
                <small class="label bg-yellow">Draft</small>
            @endif
        </h1>
        <ol class="breadcrumb">
            <li><a href="/admin"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Invoices</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row no-print">
            <div class="col-xs-12">
                <a href="/invoice/{{$invoice->id}}/pdf" target="_blank" class="btn btn-info"><i class="fa fa-download"></i> Generate PDF</a>
                 <button class="btn btn-info" id="printInvoice"><i class="fa fa-print"></i> Print Invoice</button>

                @if($invoice->status == 0)
                    <a href="/admin/invoice/{{$invoice->id}}/status/sent" class="btn btn-success pull-right" style="margin-right: 5px;"><i class="fa fa-check"></i> Sent
                    </a>
                    <a href="/admin/invoice/{{$invoice->id}}/status/reject"  class="btn btn-danger pull-right" style="margin-right: 5px;"><i class="fa fa-times"></i> Reject
                    </a>
                    <a href="/admin/invoice/{{$invoice->id}}/status/cancel"  class="btn btn-primary pull-right" style="margin-right: 5px;">
                        <i class="fa fa-trash"></i> Cancel
                    </a>
                @else 
                    <a href="/admin/invoice/{{$invoice->id}}/status/draft"  class="btn btn-info pull-right" style="margin-right: 5px;">
                        <i class="fa fa-refresh"></i> Reset Status
                    </a>
                @endif

                @if($invoice->status == 1) 
                    <a href="/admin/invoice/{{$invoice->id}}/status/paid" class="btn btn-success pull-right" style="margin-right: 5px;"><i class="fa fa-money"></i> Paid
                    </a>
                @endif
            </div>
        </div>
        <div class="invoice" id="invoiceViewDiv"> 
            @include($partialView, array(
                'invoice' => $invoice,
                'items' => $invoice->items,
                'stamp' => '/assets/invoice/img/quoto-sign.jpg',
                'line' => '/assets/invoice/img/Line.png',
                'amountInWords' => $amountInWords
            ))
        </div>
    </section>     
@endsection

@section('styles')
    <style type="text/css">
        .hrline{
            height: 10px;
            width:100%;
        }
        #hrline
        {
            width: 100%;
            color: #ffffff; 
            margin-left: -50px; 
        }

        th { font-size: 11px;
            text-align: center;
        }
        td { font-size: 10px !important; }
        .heading1 {
            font-size: 20px; font-weight: bold;
        }
        .heading2{
            font-size: 15px; 
            font-weight: bold;   
            margin-bottom: 10px;
        }
        .f15 {
            font-size: 15px;
        }
        .f12 {
            font-size: 12px;
        }
        .f10 {
            font-size: 10px;
        }
        .logo {
            height: 70px;
        }

        #addresses
        {
            margin-bottom: 15px;
            margin-top: 5px;
        }

        .address {
            margin-left: 15px;
            float: left;
            line-height: 15px;
            border: 1px solid #000;
            padding: 10px;
            min-height: 200px;
            width: 45%;
        }
        hr {
            border-top-color: #000 !important;
            margin-top: 5px !important;
            margin-bottom: 5px !important;
        }

        #table{
            border: 1px solid #000 !important;
        }

        th, td  {
            border-right: 1px solid #000 !important;
            border-bottom: 1px solid #000 !important;
        }
        
        @media print {
           #invoiceViewDiv {
             width: auto;
             height: auto;
             overflow: visible;
           }
        }
    </style>
@endsection

{{-- Scripts --}}
@section('scripts')
    @parent
    
    <script>
        $('#printInvoice').click(function(){
            // $("#invoiceViewDiv").show();
            // window.print();
              var divElements = document.getElementById("invoiceViewDiv").innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;

        })
    </script>

@endsection