@extends('layouts.main')
@section('title')
    Invoices
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('clients.index')}}">Clients</a> <span class="divider">/</span></li>
        <li class="active">All Invoices</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" onclick="openAdvancedSearch()" style="margin-right: 2px">
            <span class="icon-search"></span> &nbsp; FILTER & <span class="icon-print"></span> PRINT
        </button>
        <button class="btn" style="margin-right: 2px" id="miltipurpose_invoice"><span
                    class="iconsweets-create"></span> GENERATE INVOICE
        </button>
    </li>
@stop
@section('contentinner')

    <div class="row-fluid">
        <div class="span12">
            <div id="advanced_search" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeAdvancedSearch()">&times;</a>

                <div style="margin-bottom: 8px">
                    <form target="_blank" class="form-inline form-filter" method="get">

                        <label class="control-label" for="Category">Invoice NO.</label>
                        {{--<span class="field">--}}
                        <select name="select" width="200px" id="invoice_ids" multiple>
                            <option value="">ALL</option>
                            @foreach($invoices as $invoice)
                                <option value="{{$invoice->id}}">{{$invoice->id}}</option>
                            @endforeach
                        </select>
                        <label class="control-label" for="Category">Date From</label>
                        <input type="text" name="date_from" id="start_date" class="input-large datepicker" value="">
                        <label class="control-label" for="Category">Date to</label>
                        <input type="text" name="date_to" id="end_date" class="input-large datepicker">
                        {{--<label class="control-label" for="Category">Status</label>--}}
                        {{--<select name="select" width="200px" id="status">--}}
                            {{--<option value="">ALL</option>--}}
                            {{--<option value="PAID">ALL PAID</option>--}}
                            {{--<option value="FULL_PAID">FULL PAID</option>--}}
                            {{--<option value="PARTIAL_PAID">PARTIAL PAID</option>--}}
                            {{--<option value="NOT_PAID">NOT PAID</option>--}}
                        {{--</select>--}}
                        <button class="btn" style="" id="search-form">FILTER</button>
                        <button class="btn" style="" id="export_to_excel"><span class="iconsweets-excel"></span> EXCEL</button>
                    </form>
                </div>
            </div>

            <table class="table table-bordered table-striped table-condensed logistics_table" id="clients-invoices-list">
                <thead>
                {{--<tr>--}}
                    {{--<td></td>--}}
                    {{--<td colspan="10"></td>--}}
                    {{--<td colspan="6"></td>--}}
                {{--</tr>--}}
                <tr>
                    <th class="nosort" style="width: 20px"><input type="checkbox" class="checkall"/></th>
                    <th style="width: 90px">Date.</th>
                    <th>Inv. NO.</th>
                    <th>Invoice Amount</th>
                    <th>TRANSIT LOSS</th>
                    <th>ALLOWABLE LOSS</th>
                    <th>NET LOSS</th>
                    <th>LOSS RATE</th>
                    <th>LOSS RATE</th>
                    <th>RECEIVABLE</th>
                    <th>ACTION</th>

                </tr>
                </thead>
            </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">GENERATE</button>
                    <button type="reset" class="btn" data-dismiss="modal">Close</button>
                    <button id="invoice_item_add_button" class="btn-mini">Add Debit</button>
                    <button id="invoice_other_transactions_add_button" class="btn-mini">Add Credit</button>
                </div>
            </div>
        </div>
        </form>
    </div>

    <table style="display: none">
        <tbody id="invoice_item_add">
        <tr>
            <td>
                <select name="cr_account_id[]" data-placeholder="Credited Account" class="cr_account_id" required>
                    @foreach($debit_account_groups as $debit_account_group)
                        <optgroup label="{{$debit_account_group->name}}">
                            @foreach($debit_account_group->accounts as $account)
                                <option class="account-select"
                                        value="{{$account->id}}"> {{$account->name}} </option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </td>
            <td>
                <span class="description_span"></span>
            </td>
            <td><input type="text" name="amount[]" class="amount" style="text-align: right"></td>
            <td>
                <select name="vat[]" style="width: 80px">
                    <option value="NOT_APPLICABLE">N/A</option>
                    <option value="VAT_INC">VAT INC</option>
                    <option value="VAT_EX">VAT EX</option>
                </select>
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
    <table style="display: none">
        <tbody id="more_included_transactions_items">
        <tr>
            <td>
                <select name="cr_account_id[]" data-placeholder="Credited Account" class="cr_account_id" required>
                    @foreach($credit_account_groups as $credit_account_group)
                        <optgroup label="{{$credit_account_group->name}}">
                            @foreach($credit_account_group->accounts as $account)
                                <option class="account-select"
                                        value="{{$account->id}}"> {{$account->name}} </option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </td>
            <td>
                <span class="description_span"></span>
            </td>
            <td><input type="text" name="amount[]" class="amount" style="text-align: right"></td>
            <td>
                <select name="vat[]" style="width: 80px">
                    <option value="NOT_APPLICABLE">N/A</option>
                    <option value="VAT_INC">VAT INC</option>
                    <option value="VAT_EX">VAT EX</option>
                </select>
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
    <script>
        jQuery('#invoice_ids').select2();
        jQuery("#start_date").datepicker({format: 'dd-mm-yyyy'});
        jQuery("#end_date").datepicker({format: 'dd-mm-yyyy'}).bind("change", function () {
            var minValue = jQuery(this).val();
            minValue = jQuery.datepicker.parseDate("dd-mm-yyyy", minValue);
            minValue.setDate(minValue.getDate() + 1);
            jQuery("#start_date").datepicker("option", "minDate", minValue);
        });
        jQuery('#miltipurpose_invoice').click(function () {
            jQuery.ajax({
                type: "get",
                url: "#",
                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) {
                            }
                        });
                    }
                }
            })
        });

        jQuery('#invoice_item_add_button').on('click', function (e) {
            e.preventDefault();
            var invoice_item = jQuery('#invoice_item_add').html();
            jQuery('#invoice_item_body').append(invoice_item);
            invoiceDetails();
            getOptions();
        });

        jQuery('#invoice_other_transactions_add_button').on('click', function (e) {
            e.preventDefault();
            var invoice_item = jQuery('#more_included_transactions_items').html();
            jQuery('#more_included_transactions').append(invoice_item);
        });

        var oTable = jQuery('#clients-invoices-list').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading Clients Invoices Records...",
                "sZeroRecords": "No Clients Invoices records to display.",
                "sProcessing": "Please wait - loading records...",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('invoices.data-table.index')}}',
                data: function (d) {
                    d.start_date = jQuery('#start_date').val();
                    d.end_date = jQuery('#end_date').val();
                    d.invoice_ids = jQuery('#invoice_ids').val();
                    d.status = jQuery('#status').val();
                }
            },
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {data: 'checkbox'},
                {"class": "link", data: 'invoice_date'},
                {"class": "link", data: 'invoice_number'},
                {"class": "link", data: 'amount'},
                {"class": "link", data: 'transit_loss'},
                {"class": "link", data: 'allowable_loss'},
                {"class": "link", data: 'net_loss'},
                {"class": "link", data: 'loss_rate'},
                {"class": "link", data: 'total_loss'},
                {"class": "link", data: 'invoice_receivable'},
                {"class": "link", data: 'action'}
            ],
            "fnDrawCallback": function () {
                jQuery('.singlePayment').click(function () {
                    var inv_id = jQuery(this).parents('tr').find('.invoice_id');
                    var invoiceId = [];
                    invoiceId.push(inv_id.val());
                    invoicePayment(invoiceId)
                });

                jQuery('.deleterow_c').click(function () {
                    var tr_p = jQuery(this).parents('tr');
                    var invoice_id = tr_p.find('.invoice_id').val();
                    jConfirm('You are about to Delete Invoice?', 'Confirmation Dialog', function (r) {
                        if (r) {
                            jQuery.ajax({
                                type: "GET",
                                cache: false,
                                url: "#",
                                data: {
                                    invoice_id: invoice_id
                                },
                                success: function (data) {
                                    if (data == 'DONE') {
                                        jQuery.jGrowl("INVOICE DELETED SUCCESSFUL!", {header: 'Important'});
                                        jQuery('#clients-invoices-list').dataTable().fnFilter(this);
                                    } else {
                                        jAlert("FAIL TO DELETE INVOICE", 'DELETE DIALOG');
                                    }
                                },
                                error: function (data) {

                                }
                            });
                        }
                    });
                    return false;
                });
                jQuery('.client_invoice_print_preview').click(function (e) {
                    var tr_p = jQuery(this).parents('tr');
                    var invoice_id = tr_p.find('.invoice_id').val();
                    e.preventDefault();
                    var client_invoice_print_preview_url = jQuery(this).attr('href');
                    jQuery.ajax({
                        type: "GET",
                        cache: false,
                        url: client_invoice_print_preview_url,
                        data: {
                            invoice_id: invoice_id
                        },
                        success: function (data) {
                            jQuery('#client_invoice_print_preview_body').empty().append(data);
                            jQuery('#client_invoice_print_preview_modal').appendTo("body").modal('toggle');
                        },
                        error: function (data) {

                        }
                    });
                    return false;
                });
            },
            "bStateSave": true
        });

        jQuery('#search-form').on('click', function (e) {
            searchTable(e);
        });
        function searchTable(e) {
            oTable.draw();
            e.preventDefault();
        }

        jQuery('#export_to_excel').on('click', function (e) {
            e.preventDefault();
            excelExport();
        });
        jQuery(document).jkey('alt+e', function () {
            excelExport();
        });
        function excelExport() {
            var export_to_excel_url_without_parameters = "{{ route('clients.invoices.excel', [":start_date",":end_date"]) }}";
            var export_to_excel_url = export_to_excel_url_without_parameters.replace(':start_date', encodeURIComponent(jQuery('#start_date').val()));
            export_to_excel_url = export_to_excel_url.replace(':end_date', encodeURIComponent(jQuery('#end_date').val()));
            window.open(export_to_excel_url, '_blank');
        }
//        jQuery(window).resize(function () {
//            var oSettings = oTable.fnSettings();
//            oSettings.oScroll.sY = calcDataTableHeight();
//            oTable.fnDraw();
//        });
//
//        jQuery('#search-form').on('click', function (e) {
//            searchTable(e);
//        });
//
//        function searchTable(e) {
//            oTable.draw();
//            e.preventDefault();
//        }

        function openAdvancedSearch() {
            if (jQuery("#advanced_search").width() == 230) {
                jQuery("#advanced_search").css({
                    "width": 0,
                    'padding-left': 0
                });
            } else {
                jQuery("#advanced_search").css({
                    "width": 230,
                    'padding-left': 30
                });
            }
        }
        /* Set the width of the side navigation to 0 */
        function closeNav() {
            jQuery("#mySidenav").css({
                "width": 0,
                'padding-left': 0
            });
        }
        function closeAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 0,
                'padding-left': 0
            });
        }
    </script>
@stop