

<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .semi-bold{font-weight:bold !important}
    #tableWithSearch tbody >tr>td>span.Arrow{
        cursor:pointer;   
    }
    #tableWithSearch tbody > tr > .PRICE{
        text-indent:8px;
    }
    #tableWithSearch tbody >tr>td>span.Arrow:before{
        content: "\f054";
        display: inline-block;
        margin-right: 8px;
        font-family: 'FontAwesome';
        -webkit-transition: all 0.12s linear;
        transition: all 0.12s linear;
    }
    #tableWithSearch tbody >tr.shown>td>span.Arrow:before {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .VendorTable{
        width: 80% !important;
        margin: 0 auto;
        border: 1px solid rgb(200, 200, 200);

    }
    .VendorTable th{
        border: 1px solid rgb(200, 200, 200) !important;
    }
    .VendorTable tbody tr:last-child > td{
        border-bottom: 1px solid rgb(200, 200, 200) !important;
    }
    .VendorTable td,.VendorTable th{
        font-size:11px !important;
    }
    .TableLoader{
        text-align:center;
        width: 50%;
        margin: 0 auto;
    }
    .ValSpan {
        opacity:0;
    }
    #tableWithSearch_filter{
        visibility: hidden
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"></div>

            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <table class="table table-bordered table-detailed" id="tableWithSearch">
                <thead>
                    <tr>
                        <th class="v-align-middle text-center " style="width:10% !important;">#</th>
                        <th class="v-align-middle" style="width:40% !important;"><?php print CommonLanguage::getMessage('Name');?></th>
                        <th class="v-align-middle text-center" style="width:8% !important;"><?php print CommonLanguage::getMessage('quantity');?></th>
                        <th class="v-align-middle text-center" style="width:8% !important;"><?php print CommonLanguage::getMessage('Price');?></th>
                        <th class="v-align-middle text-center" style="width:12% !important;"><?php print CommonLanguage::getMessage('Reorder_Point');?></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>






<script>
    var VendorLang = <?php echo json_encode(CommonLanguage::getMessage('vendor'));?>,
        DateLang = <?php echo json_encode(CommonLanguage::getMessage('Date'));?>,
            QuantityLang = <?php echo json_encode(CommonLanguage::getMessage('quantity'));?>,
                title = <?php echo json_encode(CommonLanguage::getMessage('reorder_level')) ?>,
                    UnitPriceLang = <?php echo json_encode(CommonLanguage::getMessage('unit_price'));?>;
                    $(function(){

                        var table = $('#tableWithSearch');

                        RebuildDataTable(title,[0,1,2,3,4],'InventoryAjax/reorderStockRequest',1);

                        var VendorTableTemplate = '<table class="table table-hover VendorTable">'+
                            '<thead>'+
                            '    <tr>'+
                            '        <th style="width:35%">'+VendorLang+'</th>'+
                            '        <th style="width:15%">'+DateLang+'</th>'+
                            '        <th style="width:15%">'+QuantityLang+'</th>'+
                            '        <th style="width:15%">'+UnitPriceLang+'</th>'+
                            '    </tr>'+
                            '</thead>'+
                            '<tbody>'+
                            '<tr class="odd"><td valign="top" colspan="6" class="dataTables_empty">No data available in table</td></tr>'+
                            '</tbody>'+
                            '</table>';
                        var LoadingTableTemplate = '<div class="TableLoader"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress"/></div>';


                        $('#tableWithSearch tbody').on('click', ' td span.Arrow', function(){
                            if($(this).parent().hasClass('shown') && $(this).parent().next().hasClass('row-details')){
                                $(this).parent().removeClass('shown');
                                $(this).parent().next().remove();
                                return;
                            }
                            var tr = $(this).closest('tr');
                            var row = table.DataTable().row(tr);
                            $(this).parents('tbody').find('.shown').removeClass('shown');
                            $(this).parents('tbody').find('.row-details').remove();
                            row.child(LoadingTableTemplate).show();
                            tr.addClass('shown');
                            tr.next().addClass('row-details');

                            $.ajax({
                                url: 'InventoryAjax/reorderStockAjax',
                                dataType: 'json',
                                data:{Product_ID:tr.find('.Arrow').attr("data-id")},
                                complete: function(data,vv){
                                    var TheTable = $(VendorTableTemplate),results = data.responseJSON;
                                    if(results.length > 0){
                                        $("tbody",TheTable).empty()
                                        for (var x=0;x<results.length;x++){
                                            var TR = "<tr>" + 
                                                "<td>"+results[x].Supplier_Name+"</td>" +
                                                "<td>"+results[x].Purchase_Date+"</td>" +
                                                "<td>"+results[x].Item_Quantity+"</td>" +
                                                "<td>"+results[x].Default_Currency_Symbol + " " + FixNumber(results[x].Default_Currency_Price)+"</td>" +
                                                "</tr>";
                                            $("tbody",TheTable).append(TR);
                                        }
                                        TheTable.dataTable().removeClass("no-footer")
                                    }





                                    $(".TableLoader",tr.next()).replaceWith(TheTable);


                                }
                            })







                        });

                    })


    // to remove many digits after the period
    $(function(){$(".ValSpan").each(function(){$(this).html(AddCommas(parseFloat($.trim($(this).text())).toFixed(3))).animate({opacity:1})})})


</script>


