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

@extends('layouts.master')

@section('content')
<div class="content">
    <div class="row">
        <form action="{{ url('invoice/save') }}" enctype="multipart/form-data" method="POST" role="form">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    

        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Invoice</h3>
                </div>
                <div class="panel-body">

                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="code">Invoice Id</label>
                        <input type="text" class="form-control" id="code" name="code" disabled required value="{{ $code }}">
                        <input type="hidden" name="invoice_code" value="{{ $code }}">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Client</label>
                        <select class="form-control" name="client" placeholder="Client">
                            <option>Select A Client</option>
                            @foreach($client_list as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <!-- <div class="form-group">
                        <label for="client">Client</label>
                        <select name="client" id="client" class="form-control" required>
                            <option value="">Select Client</option>
                            @if($companies)
                            @foreach($companies as $row)
                            <option value="{{ $row->id }}">{{ $row->company }}</option>
                            @endforeach
                            @endif
                        </select>
                    </div> -->

                    <div class="form-group">
                        <label for="po_no">PO No</label>
                        <input type='text' name="po_no" id="po_no" class="form-control" placeholder="PO No">
                    </div>

                    <div class="form-group">
                        <label for="invoice_date">Invoice Date</label>
                        <input type='text' name="invoice_date" id="invoice_date" class="form-control dt" placeholder="Invoice Date">
                    </div>

                    <div class="form-group">
                        <label for="due_date">Due Date</label>
                        <input type='text' name="due_date" id="due_date" class="form-control dt" placeholder="Due Date">
                    </div>

                    <div class="form-group">
                        <label for="note">Note</label>
                        <textarea name="note" id="note" class="form-control" placeholder="Write a short note..."></textarea>
                    </div>

                    <div class="form-group">
                        <label for="currency">Currency</label>
                        <select name="currency" id="currency" class="form-control">
                            <option value="BDT">BDT</option>
                            <option value="USD">USD</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="attachment">Attachment</label>
                        <input type='file' name="attachment" id="attachment" class="form-control">
                    </div>

                    <div class="clearfix"></div>
                    

                </div>
            </div>
        </div>

        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Invoice Items</h3>
                </div>
                <div class="panel-body">
                
                    <table class="table table-bordered tbl-items">
                        <thead>
                            <tr>
                                <th>Service/Product</th>
                                <th>Particular</th>
                                <th>Payable Amount</th>
                                <th>Paid Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="service[]" id="service" class='form-control'>
                                        <option value="">Select Service</option>
                                        @if($services)
                                        @foreach($services as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name="particular[]" class="particular form-control" placeholder="Particulars">
                                </td>
                                <td>
                                    <input type='number' name="payable_amount[]" step='.1' min="0" value="0" max='1000000000000' class='form-control payable_amount'>
                                </td>
                                <td>
                                    <input type='number' name="paid_amount[]" min="0" step='.1' value="0" max='1000000000000' class='form-control paid_amount'>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                
                                </td>
                                <td>
                                <label for="tax">Tax (%)</label><br>
                                <input type='number' min='0' max='100' step='.1' value='0' name="tax" id="tax" class="form-control">
                                </td>
                                <td>
                                    <label for="vat">VAT (%)</label><br>
                                    <input type='number' min='0' max='100' step='.1' value='0' name="vat" id="vat" class="form-control">
                                </td>
                            </tr>

                            <tr>
                                <th colspan="2">Total</th>
                                <th class='text-right ttl-payable'>0</th>
                                <th class='text-right ttl-paid'>0</th>
                            </tr>
                        </tfoot>
                    </table>
                    <button type='button' id='btn_new_item' class='btn btn-xs' title='Add New Invoice Item'><i class="fa fa-plus"></i></button>

                    <button type='button' id='btn_remove_item' class='btn btn-xs' title='Rremove Last Invoice Item'><i class="fa fa-minus"></i></button>

                </div>

                <div class="panel-footer">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Create</button>
                    <a href="{{ url('invoice') }}" class="btn btn-default">
                    <i class="fa fa-times"></i>Cancel</a>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
@stop


@section('script')
<script type="text/javascript">
$(document).ready(function() {

    $('#btn_new_item').click(function(){

        var newFrm=$('.tbl-items tbody tr:last').clone();
        newFrm.find('input[type="text"]').val('');
        newFrm.find('input[type="number"]').val(0);
        newFrm.find('textarea').val('');
        newFrm.find('select').val('');

        $('.tbl-items tbody tr:last').after(newFrm);
    });

    $('#btn_remove_item').click(function(){
        var trCount=$('.tbl-items tbody tr').length;
        if(trCount>1){
            var conf=confirm('Are you sure to remove ??');
            if(conf){
            var newFrm=$('.tbl-items tbody tr:last').remove();
            }
        }
    });

    $('.dt').datepicker({
        dateFormat:'yy-mm-dd',
        changeMonth:true,
        changeYear:true
    });


    $('.table').on('change','.payable_amount',function(){

        var ttlPayable=getTotalPayable();
        $('.ttl-payable').text(ttlPayable);

    });

    $('.table').on('change','.paid_amount',function(){

        var ttlPaid=getTotalPaid();
        $('.ttl-paid').text(ttlPaid);

    });

    $('#tax').change(function(){

        var tax=Number($(this).val());

        var ttlPayable=getTotalPayable();

        if(typeof tax!='undefined' || tax!=0){
            ttlPayable=ttlPayable+((ttlPayable*tax)/100);
        }

        $('.ttl-payable').text(ttlPayable);

    });

    $('#vat').change(function(){

        var vat=Number($(this).val());

        var ttlPayable=getTotalPayable();

        if(typeof vat!='undefined' || vat!=0){
            ttlPayable=ttlPayable+((ttlPayable*vat)/100);
        }

        $('.ttl-payable').text(ttlPayable);

    });

});


function getTotalPayable()
{
    var ttl=0;
    $('.payable_amount').each(function(index, el) {
        var amnt=$(this).val();
        amnt=Number(amnt);
        if(typeof amnt!='undefined'){
            ttl+=amnt;
        }

    });

    return ttl;
}

function getTotalPaid()
{
    var ttl=0;
    $('.paid_amount').each(function(index, el) {
        var amnt=$(this).val();
        amnt=Number(amnt);
        if(typeof amnt!='undefined'){
            ttl+=amnt;
        }

    });

    return ttl;
}
</script>
@stop