@extends('app.master')
@section('title',$title)
@section('breadcrumb')       
    @include('app.layouts.rent.breadcrumb',[
        'pageTitle' => $title,
        'lists' => [
            [
                'link'  => '#',
                'name'  => 'Invoice Management',
            ],
            [
                'link'  => 'payments.index',
                'name'  => 'Payments',
            ],
            [
                'link'  => 'invoices.generate',
                'name'  => $title,
            ]
        ]
    ])
@endsection
@section('style')
<style>
    /* Targets all the pages */
    /* @page {
        size: 8.5in 9in;
        margin-top: 4in;
    } */

    /* Targets all even-numbered pages */
    /* @page :left {
        margin-top: 4in;
    } */

    /* Targets all odd-numbered pages */
    /* @page :right {
        size: 11in;
        margin-top: 4in;
    } */

    /* Targets all selectors with `page: wide;` set */
    /* @page wide {
        size: a4 landscape;
    } */
    @media print {
        .print {
            display: none;
        }
        .header {
            display: none;
        }
    }
</style>
@endsection
@section('content')
<div class="col-md-12">
    <div class="card">
        <div class="card-header tx-medium bd-0 tx-white bg-indigo">@yield('title')</div>
        
        <div class="card-body">
            <div class="container">
                <div class="az-content-body az-content-body-invoice">
                    <div class="card card-invoice" id="printInvoice">
                        <a href="javascript:;" class="header btn btn-gray-700 btn-block"><h4>Invoice</h4></a>
                        <div class="card-body">
                            <h1 class="invoice-title" align="left">
                                <img width="150px" src="{{ asset(config('company.logo')) }}" alt="">
                            </h1>
                            <div class="invoice-header">
                                <div class="invoice-bill-to">
                                    <label class="tx-gray-600">Billed To</label>
                                    <div class="billed-to">
                                        <h6>{{ $invoice->tenant->name }}</h6>
                                        <p>{{ $invoice->tenant->present_address }}<br>
                                        Mobile: {{ $invoice->tenant->mobile }}<br>
                                        Email: {{ $invoice->tenant->email }}</p>
                                    </div>
                                </div><!-- col -->
                                <div class="billed-from">
                                <h6>{{ config('company.name') }}</h6>
                                <p>{{ config('company.address') }}<br>
                                Phone: {{ config('company.phone') }}<br>
                                Email: {{ config('company.email') }}</p>
                                </div><!-- billed-from -->
                            </div><!-- invoice-header -->

                            <div class="row mg-t-20">
                                
                                <div class="col-md" >
                                    <label class="tx-gray-600">Invoice Information</label>
                                    <p class="invoice-info-row">
                                        <span>Invoice No</span>
                                        <span>{{ $invoice->invoice }}</span>
                                    </p>
                                    {{-- <p class="invoice-info-row">
                                        <span>Project ID</span>
                                        <span>32334300</span>
                                    </p> --}}
                                    <p class="invoice-info-row">
                                        <span>Issue Date:</span>
                                        <span>{{ date("F d, Y",strtotime($invoice->date)) }}</span>
                                    </p>
                                    <p class="invoice-info-row">
                                        <span>Due Date:</span>
                                        <span>{{ date("F d, Y",strtotime(date("Y-m-".config('rent.paymentDueDay')))) }}</span>
                                    </p>
                                </div><!-- col -->
                            </div><!-- row -->

                            <div class="table-responsive mg-t-40">
                                <table class="table table-invoice">
                                    <thead>
                                        <tr>
                                            <th class="wd-20p">#Sl.</th>
                                            <th class="wd-40p tx-left">Rent Items</th>
                                            <th class="wd-20p tx-left">Month/Year</th>
                                            <th class="wd-20p tx-right">SF</th>
                                            <th class="wd-20p tx-right">PPSF</th>
                                            <th class="wd-20p tx-right">Unit</th>
                                            <th class="wd-20p tx-right">PPU</th>
                                            <th class="wd-20p tx-right">Amount</th>
                                        </tr>
                                    </thead>
                                    @php 
                                        $subTotal = 0;
                                    @endphp
                                    <tbody>
                                        @foreach($invoice->houseRents as $key => $houserent)
                                        @php 
                                            $subTotal += $houserent->amount;
                                        @endphp
                                        <tr>
                                            <td>{{ $key+1 }}</td>
                                            <td class="tx-12">{{ $houserent->rentHead->name }}</td>
                                            <td class="tx-12">{{ months()[$houserent->bill_month]."/".$houserent->bill_year }}</td>
                                            <td class="tx-right tx-12">{{ $houserent->sf }}</td>
                                            <td class="tx-right tx-12">{{ $houserent->ppsf }}</td>
                                            <td class="tx-right tx-12">{{ $houserent->unit }}</td>
                                            <td class="tx-right tx-12">{{ $houserent->ppu }}</td>
                                            <td class="tx-right tx-12">{{ $houserent->amount }}</td>
                                        </tr>
                                        @endforeach
                                        <tr>
                                            <td colspan="5" rowspan="4" class="valign-middle">
                                                <div class="invoice-notes">
                                                <label class="az-content-label tx-13">Notes</label>
                                                <p></p>
                                                </div><!-- invoice-notes -->
                                            </td>
                                                <td colspan="2" class="tx-right">Sub-Total</td>
                                                <td colspan="2" class="tx-right">{{ formatMoney($subTotal,2) }}</td>
                                            </tr>
                                            {{-- <tr>
                                                <td colspan="2" class="tx-right">Tax (5%)</td>
                                                <td colspan="2"  class="tx-right">$287.50</td>
                                            </tr> --}}
                                            <tr>
                                                <td colspan="2" class="tx-right">Paid</td>
                                                <td colspan="2" class="tx-right">{{ formatMoney($invoice->amount,2) }}</td>
                                            </tr>
                                            @if($invoice->arrear > 0)
                                            <tr>
                                                <td colspan="2" class="tx-right">Arrear</td>
                                                <td colspan="2" class="tx-right">{{ $invoice->arrear }}</td>
                                            </tr>
                                            @endif
                                            <tr>
                                                <td colspan="2" class="tx-right tx-uppercase tx-bold tx-inverse">Total Due</td>
                                                <td colspan="2" class="tx-right"><h4 class="tx-primary tx-bold">{{ formatMoney($subTotal-$invoice->amount,2) }}</h4></td>
                                            </tr>
                                    </tbody>
                                </table>
                            </div><!-- table-responsive -->

                            <hr class="mg-b-40">
                            <div class="col-md-12 bg-light text-right">
                                <a href="javascript:;" onclick="printInvoice('printInvoice')" class="print btn btn-primary btn-block float-right">Print</a>
                            </div>
                            {!! poweredBy() !!}
                        </div><!-- card-body -->
                    </div><!-- card -->
                </div><!-- az-content-body -->
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    
    function printInvoice(printArea) {
        var printContents = document.getElementById(printArea).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;

        // var winPrint =  window.open(originalContents, '_blank', 'fullscreen=1,channelmode=1,status=1,resizable=1');
        // winPrint.document.write('<html><head><link href="{{ asset("assets/css/print.css") }}" rel="stylesheet" type="text/css" media="print"></head><body onload="window.print()">' + printContents + '</html>');
        // winPrint.document.close();
        // winPrint.focus();
        // setTimeout(winPrint.print(), 5);
        // winPrint.close(); 

        // var printBodyTable = document.getElementById(printArea).innerHTML;

        // var style = "<style>";
        // style = style + "@page{margin: 5mm 5mm 3mm 3mm;}";
        // style = style + "@media print { footer {position: fixed; margin-left: 0px; bottom: 0px; right: 0px; height: 20px;}";
        // style = style + "header {position: fixed;top: 0;text-align: center; height:100px;}}";
        // style = style + "table {width: 100%;page-break-inside:always;font-size:7px;table-layout: fixed;}";
        // style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;word-wrap: break-word;";
        // style = style + "padding: 2px 3px;text-align: center;}";
        // style = style + "</style>";

        // // CREATE A WINDOW OBJECT.
        // var win = window.open('', '', 'height=700,width=700');

        // win.document.write('<html><head>');
        // win.document.write('<title></title>');   // <title> FOR PDF HEADER.
        // win.document.write(style);          // ADD STYLE INSIDE THE HEAD TAG.
        // win.document.write('</head>');
        // win.document.write('<body>');
        // win.document.write(printBodyTable);         // THE TABLE CONTENTS INSIDE THE BODY TAG.
        // win.document.write('</body></html>');

        // win.document.close(); 	// CLOSE THE CURRENT WINDOW.

        // win.print();    // PRINT THE CONTENTS
    }

    // function downloadPDF(printArea) {
    //     // open the print dialog
    //     window.print();

    //     // wait for the print dialog to close
    //     setTimeout(function() {
    //         // create a new window to hold the PDF
    //         var originalContents = document.body.innerHTML;
    //         var pdfWindow = window.open(originalContents, 'PDF');
    //         // copy the content of the current page into the new window
    //         pdfWindow.document.write('<html><head><title>' + document.title + '</title><link href="{{ asset("assets/css/print.css") }}" rel="stylesheet" type="text/css" media="print"></head><body>');
    //         pdfWindow.document.write(document.getElementById(printArea).innerHTML);
    //         pdfWindow.document.write('</body></html>');

    //         // save the PDF
    //         pdfWindow.document.close();
    //         pdfWindow.print();
    //     }, 500);
    // }
      
  </script>
@endsection