{% extends 'VGMWOBundle::layout.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/waitMe.css') }}" rel="stylesheet" media="screen">
    <link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
    <link href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css" rel="stylesheet" media="screen">
    <style>.dataTables_wrapper .ui-toolbar {padding: 0px !important;}.dataTables_filter {display: none;}div.DTTT_container {margin-left: 1em;}#workorders-list>tbody>tr{cursor: pointer;}
        table.dataTable thead th, table.dataTable thead td {padding: 5px;}table.dataTable tbody th, table.dataTable tbody td {padding: 5px;}
        table.dataTable thead .sorting {
            background-image: none;
        }
        table.dataTable thead .sorting_desc, table.dataTable thead .sorting_desc_disabled {
            background-image: url("{{ asset('bundles/vgmwo/images/sort_desc.png') }}");
            background-position: center bottom;
        }
        table.dataTable thead .sorting_asc, table.dataTable thead .sorting_asc_disabled {
            background-image: url("{{ asset('bundles/vgmwo/images/sort_asc.png') }}");
            background-position: center bottom;
        }
    </style>
{% endblock %}
{% block content%}
    <div id="invoices_list" class="container">
        <!--<div id="leyend" class="row" style="text-align: center">
            <label>Destination:</label>
            <span class="sale" style="padding: 2px 5px;">Sale</span>
            <span class="rent" style="padding: 2px 5px;">Rent</span>
            <span class="repair" style="padding: 2px 5px;">Repair</span>
            <span class="stock" style="padding: 2px 5px;">Stock</span>
            <span class="warranty" style="padding: 2px 5px;">Warranty</span>
            <span style="padding: 2px 5px;">Other</span>
        </div>-->
        <div class="row">
            <div class="pull-left" style="font-size: 3vmin;" id="invoices-title-add">
                <strong>Invoices</strong>
                <a style="display: inline-block; margin-left: 2vmin; color: #428bca; cursor: pointer;"
                   href="{{ path('invoices_new') }}"><span class="glyphicon glyphicon-plus"></span></a>
            </div>
            <div class="form-inline pull-right">
                <!--<div class="form-group">
                    <label class="sr-only" for="client-type-selection">Client</label>
                    <select id="client-type-selection" class="form-control" placeholder="Client type">
                        <option value="0">< All Clients ></option>
                        <option value="1">Internal</option>
                        <option value="2">External</option>
                    </select>
                </div>-->
                <div class="form-group">
                    <label class="sr-only" for="datatable-searchbox">Search</label>
                    <input id="datatable-searchbox" class="form-control" placeholder="Search"/>
                </div>
            </div>
            <div class="pull-right" style="padding: 0vw 0.5vw;" id="table-buttons-div"></div>
        </div>
        <div class="table-responsive row" style="padding-left: 0px; padding-right: 0px;">
            <table class="table table-hover fixed-header display table-int-grid" cellspacing="0" id="invoices-list">
                <thead>
                <tr style="background-color: #fff;">
                    <!-- ID column -->
                    <th>ID</th>
                    <!-- Created column -->
                    <th class="col-xs-1 col-sm-1">Number</th>
                    <!-- Work Order column -->
                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap;">QB date</th>
                    <!-- Stocks column -->
                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap;">Due date</th>
                    <!-- Stocks column -->
                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap;">Ship date</th>
                    <!-- Client column -->
                    <th class="col-xs-7  col-sm-7">Client</th>
                    <!-- Client column -->
                    <th class="col-xs-1 col-sm-1">Amount</th>
                </tr>
                </thead></table></div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js"></script>
    <script type="text/javascript">
        function get_invoices_list_url(){return '{{ path("get_invoices_list") }}';};
        var calcDataTableHeight = 0;
        var dt_config = {"processing": true,"loading": false,"scrollCollapse": true,
            "paging": false,
            "scrollY": function(){return ($(window).height() - $("nav.navbar-inverse.menu-bar").height()) -  120;},
            "responsive": true,"dom": 'Bfrtip',
            "buttons": [{extend:'print',text:"Print PreView",autoPrint:false,exportOptions:{columns:':visible'},
                customize:function(win){$(win.document.body).css( 'font-size', '10pt' );$(win.document.body).css( 'height', '95vh' );$(win.document.body).find( 'table' ).addClass( 'compact' ).css( 'font-size', 'inherit' );
                }},{extend:'print',text:"Print",exportOptions:{columns:':visible'},key:{key:80,ctrlKey: true},customize:function(win){$(win.document.body).css( 'font-size', '10pt' );$(win.document.body).css( 'height', '95vh' );
                $(win.document.body).find( 'table' ).addClass( 'compact' ).css( 'font-size', 'inherit' );}},
                {text: "Excel",key:{key:'e',ctrlKey: true},action: function(){
                    $.ajax({type:'post',async:true,dataType:'json',url: '{{ path("export_wol2excel") }}',
                        data:{svalue:$("#datatable-searchbox").val(), status: 1},
                        success: function(response){window.location.assign(response.url);},
                        error:function() {alert("Error");}});}}],
            "aaSorting": [[1,'desc']],
            "info": true,
            "ajax":{
                url: get_invoices_list_url(),
                type: "POST"/*,
                data:{client_type: function () { return $("#client-type-selection option:selected").val(); }}*/
            },
            "aoColumns": [{"bSortable": false, "visible": false, "searchable": false},
                {"sType" : "text", "bSortable": true, "visible": true},
                {"type" : "usdate", "bSortable": true, "visible": true},
                {"type" : "usdate", "bSortable": true, "visible": true},
                {"type" : "usdate", "bSortable": true, "visible": true},
                {"sType" : "text", "bSortable": true, "visible": true},
                {"sType" : "text", "bSortable": true, "visible": true}]/*,
            "rowCallback": function(nRow,aData,iDisplayIndex,iDisplayIndexFull){switch(aData[8]){
                case 'Rent':$(nRow).addClass('rent');break;
                case 'Repair':$(nRow).addClass('repair');break;
                case 'Warranty':$(nRow).addClass('warranty');break;
                case 'Sale':$(nRow).addClass('sale');break;
                case 'Stock':$(nRow).addClass('stock');break;}}*/
        };
        $(document).ready(function(){
            jQuery.extend(jQuery.fn.dataTableExt.oSort,{"usdate-pre":function(a){if(a==null||a==""){return 0;}
                var usDatea=a.replace(' ','').split('/');return (usDatea[2]+usDatea[0]+usDatea[1]) * 1;},
                "usdate-asc":function(a,b){return ((a<b)?-1:((a>b)?1:0));},
                "usdate-desc":function(a,b){return ((a<b)?1:((a>b)?-1:0));},
                "ot-number-asc":function(a,b){
                    a = a.replace(' ','').split('-');
                    a = (a.length > 1 ? (a[1].length == 1? parseFloat(a[0] + ".0" + a[1]) : parseFloat(a[0] + "." + a[1])) : parseFloat(a[0]));
                    b = b.replace(' ','').split('-');
                    b = (b.length > 1 ? (b[1].length == 1? parseFloat(b[0] + ".0" + b[1]) : parseFloat(b[0] + "." + b[1])) : parseFloat(b[0]));
                    return ((a<b)?-1:((a>b)?1:0));
                },
                "ot-number-desc":function(a,b){
                    a = a.replace(' ','').split('-');
                    a = (a.length > 1 ? (a[1].length == 1? parseFloat(a[0] + ".0" + a[1]) : parseFloat(a[0] + "." + a[1])) : parseFloat(a[0]));
                    b = b.replace(' ','').split('-');
                    b = (b.length > 1 ? (b[1].length == 1? parseFloat(b[0] + ".0" + b[1]) : parseFloat(b[0] + "." + b[1])) : parseFloat(b[0]));
                    return (parseInt(a) == parseInt(b) ? ((a<b)?-1:((a>b)?1:0)) : ((a<b)?1:((a>b)?-1:0)));
                },
                "text-asc":function(a,b){return ((a<b)?-1:((a>b)?1:0));},
                "text-desc":function(a,b){return ((a<b)?1:((a>b)?-1:0));}});

            var oTable = $('#invoices-list').DataTable(dt_config);
            oTable.buttons( 0, null ).container().appendTo($("#table-buttons-div"));
            $('#workorders-list tbody').on( 'click', 'tr', function () {var id = oTable.row($(this)).data()[0];show_invoice(id);});
            $("#datatable-searchbox").on("keyup",function(event){if(event.keyCode == 13 || this.value == "")oTable.search(this.value).draw();});
            //$("#client-type-selection").on("change",function(){oTable.ajax.reload();this.blur();});
            $(document).bind("keyup keydown", function(e){if(e.ctrlKey&&(e.keyCode==80||e.keyCode==69)){return false;}});
            $(window).bind('resize',function(){$(".dataTables_scrollBody").css('max-height',dt_config.scrollY()+'px');});
        });
        function show_invoice(id){var url = '{{ path("invoices_show", {'id': 'id_val'}) }}';url = url.replace("id_val", id);document.location = url;}
        //$('#large-picture').on('hidden.bs.modal', function (e) {viewModel.clear_large_image();});
    </script>
{% endblock %}