@extends('layouts.main')
@section('title')
    Contra Vouchers
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Cash Books</a> <span class="divider">/</span></li>
        <li class="active">Contra Vouchers</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" style="margin-right: 2px" onclick="createOrEdit('{{route('contra_vouchers.create')}}')"><span
                    class="iconsweets-create"></span> CREATE CONTRA
        </button>
    </li>
@stop
@section('contentinner')
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered logistics_table" id="contra-vouchers-list-1">
                <thead>
                <tr>
                    <th style="width: 3%"><input type="checkbox" class="checkall"/></th>
                    <th style="width: 3%">MORE</th>
                    <th style="width: 5%">CON#</th>
                    <th style="width: 90px">Date.</th>
                    <th>Account(Dr)</th>
                    <th>Debtor Acc</th>
                    <th>Reference</th>
                    <th>Amount</th>
                    <th>Remarks</th>
                    <th style="width: 30px">Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>

        jQuery('.receive_payment_date').datepicker();
        jQuery('.searchable_select').select2();

        var mainDataTable = jQuery('#contra-vouchers-list-1').on('error.dt', function (e, settings, techNote, message) {
                    console.log('An error has been reported by DataTables: ', message);
                    $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
                    stopSpinner();
                })
                .DataTable({
                    "oLanguage": {
                        "sLoadingRecords": startSpinner(),
                        "sZeroRecords": "No Contra Vouchers to Display.",
                        "sInfoEmpty": "No entries to display."
                    },
                    ajax: {
                        url: '{{route('vouchers.data-table.contra')}}',
                        data: function (d) {
                        }
                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    scrollCollapse: true,
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    "aoColumnDefs": [{
                        "aTargets": [7],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    } ],
                    "columns": [
                        // {"orderable": false, "data": null, "defaultContent": ""},
                        {data: 'checkbox'},
                        {
                            "class": "details-control",
                            "orderable": false,
                            "data": null,
                            "defaultContent": ""
                        },
                        {"class": "link", data: 'id'},
                        {"class": "link", data: 'date'},
                        {"class": "link number", data: 'debit_account'},
                        {"class": "link number", data: 'credit_account'},
                        {"class": "link number", data: 'reference'},
                        {"class": "link", data: 'amount'},
                        {"class": "link", data: 'remarks'},
                        {data: 'action'}
                    ],
                    "bStateSave": true
                });

        mainDataTable.on('order.dt search.dt', function () {
            mainDataTable.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();

//Needed when Edit
//        jQuery('.searchable_select').select2();
//        jQuery('.receive_payment_date').datepicker();
//        numberFormat();
    </script>
@stop