uparrow/resources/views/admin/invoice/show.blade.php

<div class="modal-content" style='width:60%;margin:0 auto !important'>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Invoice &nbsp;&nbsp;&nbsp;
        <a href=""><i class="fa fa-print"></i></a> &nbsp;&nbsp;&nbsp;
        <a href="" data-inv_id='{{ $invoice->id }}' id='btn_email'><i class="fa fa-envelope-o"></i></a>&nbsp;&nbsp;&nbsp;

        @if($invoice->status==0)
        <span class='label label-danger'>Due</span>
        @elseif($invoice->status==1)
        <span class='label label-success'>Paid</span>
        @endif
        </h4>
    </div>
    <div class="modal-body">
        <style>
            .invoice-box{
                max-width:100%;
                margin:auto;
                padding:30px;
                border:1px solid #eee;
                font-size:16px;
                line-height:24px;
                font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
                color:#555;
            }
            
            .invoice-box table{
                width:100%;
                line-height:inherit;
                text-align:left;
            }
            
            .invoice-box table td{
                padding:5px;
                vertical-align:top;
            }
            
            .invoice-box table tr td:nth-child(2){
                text-align:left;
            }
            
            .invoice-box table tr.top table td{
                padding-bottom:20px;
            }
            
            .invoice-box table tr.top table td.title{
                font-size:18px;
                line-height:18px;
                color:#333;
            }
            
            .invoice-box table tr.information table td{
                padding-bottom:40px;
            }
            
            .invoice-box table tr.heading td{
                background:#eee;
                border-bottom:1px solid #ddd;
                font-weight:bold;
            }
            
            .invoice-box table tr.details td{
                padding-bottom:20px;
            }
            
            .invoice-box table tr.item td{
                border-bottom:1px solid #eee;
            }
            
            .invoice-box table tr.item.last td{
                border-bottom:none;
            }
            
            .invoice-box table tr.total td:nth-child(2){
                border-top:2px solid #eee;
                font-weight:bold;
            }
            
            @media only screen and (max-width: 600px) {
                .invoice-box table tr.top table td{
                    width:100%;
                    display:block;
                    text-align:center;
                }
                
                .invoice-box table tr.information table td{
                    width:100%;
                    display:block;
                    text-align:center;
                }
            }
        </style>
        <div class="invoice-box">
            <table cellpadding="0" cellspacing="0">
                <tr class="top">
                    <td colspan="4">
                        <table width="100%">
                            <tr>
                                <td class="">
                                    Invoice No#: {{ $invoice->invoice_code }}<br>
                                    Created: {{ date('d F, Y',strtotime($invoice->invoice_date)) }}<br>
                                    Due: {{ date('d F, Y',strtotime($invoice->due_date)) }} <br>
                                    PO No : {{ $invoice->po_no }}
                                </td>
                                
                                <td>
                                   
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                
                <tr class="information">
                    <td colspan="4">
                        <table width="100%">
                            <tr>
                                <td width="50">
                                    <h4>From</h4>
                                    <!-- <img src="http://revinr.com/logo.png" style=""> -->
                                   UpArrow Digital<br>
                                    House 37, Road 03<br>
                                    Sector 09, Dhaka 1230
                                </td>
                                
                                <td width="50">
                                    <h4>To</h4>
                                    {{ $invoice->client?$invoice->client->name:'' }}<br>
                                    {{ $invoice->client?$invoice->client->address:'' }}
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                
        
                <tr class="heading">
                    <td style='width:20px;'>Sl.</td>
                    <td class='text-left'>
                        Service
                    </td>

                    <td>Particulars</td>
                    
                    <td class='text-right'>
                        Price ({{ $invoice->currency }})
                    </td>
                </tr>
                
                @if($invoice->items)
                <?php $indx=1; ?>
                @foreach($invoice->items as $row)
                <tr class="item">
                    <td style='width: 20px;'>{{ $indx }}</td>
                    <td class='text-left'>
                        {{ $row->service?$row->service->name:'' }}
                    </td>

                    <td>{{ $row->particular }}</td>
                    
                    <td class="text-right">
                         {{ $row->payable_amount }}
                    </td>
                </tr>

                <?php $indx++; ?>
                @endforeach
                @endif
                
                <tr class="total">
                    <?php 
                        $total=$invoice->items?$invoice->items->sum('payable_amount'):0;;
                        $total1=$invoice->items?$invoice->items->sum('payable_amount'):0;
                        $total2=$invoice->items?$invoice->items->sum('payable_amount'):0;

                        $total_vat=($total1*$invoice->vat)/100;
                        $total_tax=($total2*$invoice->tax)/100;
                    ?>
                    <td colspan="2">Vat ({{ $invoice->vat }}%)</td>
                    
                    <td colspan="2" style='text-align: right;'>
                        {{ $total_vat }}
                    </td>
                </tr>
                <tr class="total">
                    <td colspan="2">Tax ({{ $invoice->tax }}%)</td>
                    
                    <td colspan="2" style='text-align: right;'>
                       {{ $total_tax }}
                    </td>
                </tr>
                <tr class="total">
                    <td colspan="2"></td>
                    
                    <td colspan="2" style='text-align: right;'>
                    <?php 

                    $total=$total+$total_vat+$total_tax;

                    ?>

                       Total: {{ $total }}
                    </td>
                </tr>
                @if(!empty($invoice->notes))
                <tr>
                    <td colspan="4">
                        <br><br>
                       Notes: {{ $invoice->notes }}
                    </td>
                </tr>
                @endif
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#btn_email').click(function(e){
        e.preventDefault();
        var inv_id=$(this).data('inv_id');
        $.ajax({
            url: '{{ url('invoice/invoice_created_email') }}/'+inv_id,
            type: 'GET'
        })
        .done(function(res) {
            alert('Email sent successfully !')
        });
        

    });
});
</script>