@extends('layouts.main')
@section('title')
    Invoices
@stop
@section('contentinner')
    <div class="row-fluid">
        <div class="span12">

            <h4 class="widgettitle">Invoices</h4>

            <div class="msghead">
                <ul class="msghead_menu">
                    <li class="right btn-group">
                        <button class="btn" style="margin-right: 2px" id="miltipurpose_invoice"><span
                                    class="iconsweets-create"></span> GENERATE INVOICE
                        </button>
                    </li>
                </ul>
                <span class="clearall"></span>
            </div><!--msghead-->
            <br>
            <table class="table table-bordered table-condensed table-striped" id="dyntable">
                <colgroup>
                    <col class="con0" style="align: center; width: 4%"/>
                    <col class="con1"/>
                    <col class="con0"/>
                    <col class="con1"/>
                    <col class="con0"/>
                    <col class="con1"/>
                </colgroup>
                <thead>
                <tr>
                    <th class="head0 nosort"><input type="checkbox" class="checkall"/></th>
                    <th class="head0">INV NO.</th>
                    <th class="head1">Date</th>
                    <th class="head1">Description</th>
                    <th class="head1">Amount</th>
                    <th class="head0">Amount Paid</th>
                    <th class="head1">Balance</th>
                    <th class="head1">Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($invoices as $invoice)
                    <tr>
                        <td class="head0 nosort"><input type="checkbox" class="checkall"/></td>
                        <td class="head0">{{$invoice->invoice_id}}</td>
                        <td class="head1">{{$invoice->created_date}}</td>
                        <td class="head1">{{$invoice->description}}</td>
                        <td class="head1">{{$invoice->amount}}</td>
                        <td class="head0">{{$invoice->paid_amount}}</td>
                        <td class="head1">{{$invoice->amount-$invoice->paid_amount}}</td>
                        <td class="head1">
                            <a class="btn print"
                               href="{{ route('route.invoice.print',array( 'invoices'=>$invoice->invoice_id)) }}"
                               style="line-height: 8px">
                                <i class="icon-print"></i>
                            </a>
                            @if($invoice->amount > $invoice->paid_amount)
                                <a class="btn singlePayment" style="line-height: 8px">
                                    <i class="iconsweets-paypal"></i>
                                </a>
                            @endif
                            <input class="invoice_id" value="{{$invoice->invoice_id}}" type="hidden">

                            {{--<a class="btn" onclick="modelShow('editInvoice{{$invoice->invoice_id}}')"--}}
                            {{--style="line-height: 16px">--}}
                            {{--<i class="iconfa-pencil"></i>--}}
                            {{--</a>--}}
                            <a class="btn deleterow_c" style="line-height: 8px">
                                <i class="icon-trash"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1"
         id="clientTripInvoicing">
        <!-- Modal content-->
        {!! Form::open(array('route' => 'route.destination.invoice.multipurpose', 'class' => 'stdform','method'=>'post')) !!}
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>GENERATE CLIENT INVOICE</h4>
        </div>
        <div class="modal-body">
            <div id="billing_details">

            </div><!--#tabs-->
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Submit Button</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        </form>
    </div>

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1"
         id="clientBilling">
        <!-- Modal content-->
        {!! Form::open(array('route' => 'invoice.payments', 'class' => 'stdform','method'=>'post')) !!}
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4> INVOICE PAYMENTS</h4>
        </div>
        <div class="modal-body">
            <div class="row-fluid">
                <div id="payment_body_details">

                </div><!--#tabs-->

            </div><!--row-fluid-->
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Pay Invoice</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery('.singlePayment').click(function () {
            var inv_id = jQuery(this).parent().find('.invoice_id');
            var invoiceId = [];
            invoiceId.push(inv_id.val());
            invoicePayment(invoiceId)

        });

        function invoicePayment(invoiceId) {

            jQuery.ajax({
                type: "get",
                url: "{{route('create.invoice.pay')}}",
                data: {invoice_id: invoiceId},
                success: function (data) {

                    jQuery('#payment_body_details').empty().append(data);
                    jQuery('#clientBilling').appendTo("body").modal('toggle');

                    function balance_calculation() {
                        var amount_paid = jQuery("#amount_paid").val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                        var payable = jQuery('#payable').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');

                        var balance = payable - amount_paid;
                        jQuery('#balance').val(balance.toLocaleString());

                    }

                    balance_calculation();
                    jQuery(".datepicker").datepicker({
                        format: 'dd/mm/yyyy',
                        startDate: '-3d',
                        autoclose: true
                    }).on('changeDate', function (ev) {
                        jQuery(this).datepicker('hide');
                    });

                    jQuery("#amount_paid").keyup(function () {
                        jQuery('#balance').val(balance.toLocaleString());
                        var amount_paid = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                        var payable = jQuery('#payable').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');

                        var balance = payable - amount_paid;
                        jQuery('#balance').val(balance.toLocaleString());

                    });
                }
            })
        }

        jQuery('#miltipurpose_invoice').click(function () {
            jQuery.ajax({
                type: "get",
                url: "{{route('route.invoices.create')}}",
                data: {
                    invoice_type: 'MULTIPURPOSE'
                },
                success: function (data) {
                    jQuery('#billing_details').empty().append(data);
                    jQuery('#clientTripInvoicing').appendTo("body").modal('toggle');

                    getDriver();
                    jQuery('#vehicle_id_').change(function () {
                        getDriver(jQuery(this).val());
                    });

                    function getDriver(vehicle_id) {
                        jQuery.ajax({
                            type: "GET",
                            url: "{{route('vehicle.driver')}}",
                            data: {
                                vehicle_id: vehicle_id
                            },
                            success: function (data) {
                                if (data.error !== null && typeof data.error === 'object') {
                                    alert(1);
                                }
                                jQuery('#driver_drop_domn_generator').empty().append(data);
                            },
                            error: function (data) {
                            }
                        });
                    }
                }
            })
        });
    </script>
@stop