<!--
< ?php
//if($permissions->hasPermission('addStockCard')){
//include("Views/Stock/addStockCard.php");
//}
?>
-->
<style>
    .table thead tr >th{
        background-color: #4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }
    .panel.panel-default{
        border:1px solid #4c0870;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .form-horizontal .form-group {
        border-bottom: 1px solid #4c0870;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
        color:#fff !important;
        border-radius: 50%;
        background: #ed9421!important;
        border-color: #4c0870
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
        color:#fff !important;
    }


</style>
<script>
    function AddCommas(val) {
        val = parseFloat(val.toString()).toString();
        while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
        }
        return val.replace(/\.0$|\.00$/, "") || "0";
    }
    function FixNumber(val) {
        return AddCommas(parseFloat(val + "").toFixed(2));
    }
</script>
<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div id="ExpirySuccess" class="hidden"></div>
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('Stock_Card'); ?></div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="hidden">
                    <select required name="Material_Category_ID"  id="Material_Category_ID" class="full-width Material_Category_ID" data-init-plugin="select2">
                        <?php foreach ($all_categories as $Cat): ?>
                            <option value="<?php echo $Cat['Material_Category_ID']; ?>"><?php echo $Cat['Material_Category_Name']; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <br>
                <br>

                <select id="Product_ID" name="Product_ID" class="full-width Product_ID" data-init-plugin="select2">
                </select>

                <br>
                <br>

                <select id ="TypeTrans" class="full-width Transaction" data-init-plugin="select2" >
                    <option value="0"><?php print CommonLanguage::getMessage('All'); ?></option>
                    <?php foreach ($Trans_Type as $Type): ?>
                        <option value="<?php echo $Type['Transaction_Type_ID'] ?>"><?php echo $Type['Transaction_Type'] ?></option>
                    <?php endforeach; ?>
                </select>

                <br>
                <br>

                <div class="input-daterange input-group" id="datepicker-range" style="width:100%">
                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" >
                </div>

            </div>




            <div class="col-md-4">
                <img src="" class="Profile m-l-95"  style="width:50%;">

            </div>
            <div class="col-md-4">
                <h5> <?php print CommonLanguage::getMessage('Product'); ?> : <span class="product"></span></h5>

                <h5> <?php print CommonLanguage::getMessage('Stock_Quantity'); ?> : <span class="qunatity"></span></h5>


                <h5> <?php print CommonLanguage::getMessage('Total_Quantity'); ?> : <span class="stock"></span></h5>
                <h5> <?php print CommonLanguage::getMessage('Balance'); ?> : <span class="CurrencySymbol"><?php echo $Currency_Symbol; ?></span><span class="Cost"> </span></h5>

            </div>
            <br>
            <hr>
            <div class="col-md-12">
                <div class="box-body no-padding">
                    <table class="table table-hover table-bordered" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Transaction_Date') ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Transaction_Type') ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Cost') ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Quantity') ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Balance') ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Depot') ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Employee') ?></th>
                                <!--<th class="text-center"><?php // print CommonLanguage::getMessage('Action') ?></th>-->
                            </tr>
                        </thead>
                        <tbody id="transactions">

                        </tbody>
                    </table>
                </div>
<!--                < ?php echo Forms::FloatingAddButton('4c0870', '#add_StockCard', CommonLanguage::getMessage('Add')); ?>-->
            </div>
        </div>
    </div>
</div>
<script>

    var year = <?php echo json_encode($year) ?>,
            currencySymbol = <?php echo json_encode($Currency_Symbol) ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Edit = <?php echo json_encode(CommonLanguage::getMessage('Edit')); ?>,
            loader = '<div id="IsBusy" style="position:absolute;left:0;right:0;top:-230px;height:100%;background:rgba(255,255,255,0.9);opacity:1"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>';
    $(document).ready(function () {
     
        $("#Material_Category_ID").on("change", function () {
            var Type = $(this).data("TypeListTarget"),
                    Catolder = $("#s2id_" + $(this).attr("id"));
            $("#s2id_Product_ID").append("<div class='LoadingCities' style='position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(180,180,180,0.5);text-align:center'><img style='height:25px;margin-top:5px;' src='img/demo/progress.svg' /></div>")
            Catolder.append("<div class='LoadingCities' style='position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(180,180,180,0.5);text-align:center'></div>")
            $.ajax({
                url: "StockAjax/StockDashboardAjax",
                dataType: "json",
                data: {Material_Category_ID: $(this).val()},
                complete: function (v, vv) {
                    $("#Product_ID").select2("destroy").empty()
                    if (vv == "success") {
                        var ToBeAdded = "";
                        for (var x = 0; x < v.responseJSON.length; x++) {
                            ToBeAdded += "<option value='" + v.responseJSON[x]["ID"] + "'>" + v.responseJSON[x]["Code"] + "-" + v.responseJSON[x]["Name"] + "</option>"
                        }
                        $("#Product_ID").html(ToBeAdded);
                    }
                    $("#Product_ID").select2();
                    $(">.LoadingCities", Catolder).remove()
                       CallAjaxFunction()
                }
            })
        }).data("MyModuleListTarget", "#Module_ID").trigger("change")


//        $("body").addClass("NoSearch")
//        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        $("input[name=From_To_Date]").daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            startDate: year + '-01-01',
            endDate: year + '-12-31'
        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                    window.endDate = end.format("YYYY-MM-DD")
        });
        $('.Material_Category_ID,.Product_ID,#TypeTrans,#From_To_Date').on("change", function () {
            setTimeout(function () {
                CallAjaxFunction()
            }, 800)
            load()

        })

 

    })






    function CallAjaxFunction() {
        alert()
        var CurrentData = {
            From_Date: window.startDate ? window.startDate : year + '-01-01',
            To_Date: window.endDate ? window.endDate : year + '-12-31',
            Category_ID: 0,
            Product_ID: $("select.Product_ID").val(),
            Type: $("#TypeTrans").val()
        }


        $('#tableWithSearch').DataTable().destroy();
        $("#tableWithSearch tbody").empty();
        $.ajax({
            url: "StockAjax/StockCardAjax",
            method: "POST",
            data: CurrentData,
            dataType: 'json',
            complete: function (v1, v2) {
                if (v2 == "success") {
                    var img = v1.responseJSON[1],
                            Data = v1.responseJSON[0],
                            l = (Object.keys(Data).length);
//                        console.log(Data)
                    $('.Profile').attr("src", img);
                    for (var i = 0; i < l - 2; i++) {
//                                            console.log(FixNumber(Data['General']['Total_Quantity']))

                        $(".product").empty().html(Data[0]['CODE'] + ' - ' + Data[0]['NAME']);
                        $(".qunatity").empty().html(FixNumber(Data[0]['Total_Quantity']));
                        $(".stock").empty().html(FixNumber(Data['Amount_Per_Stock']));
                        $(".Cost").empty().html(' ' + FixNumber(Data['Cost']));


                        var TR = $('<tr data-id=' + Data[i]['Transaction_ID'] + '><td class="text-center">' + Data[i]['Transaction_Date'] + '</td>' +
                                '<td class="text-center">' + Data[i]['Transaction_Type'] + '</td>' +
                                '<td class="text-center">' + FixNumber(Data[i]['Unit_Cost']) + ' ' + Data[i]['Currency_Symbol'] + '</td>' +
                                '<td class="text-center">' + Data[i]['Cur_Quantity'] + '</td>' +
                                '<td class="text-center">' + FixNumber(Data[i]['Balance']) + ' ' + currencySymbol + '</td>' +
                                '<td class="text-center">' + Data[i]['Depot_Name'] + '</td>' +
                                '<td class="text-center">' + Data[i]['Employee_Name'] + '</td>' +
//                                '<td class="text-center "><span class="ExpiryDate">' + Data[i]['Expiry_Date'] + '</span></td>' +
//                                '<td class="text-center"><button class="text-center btn bg-complete-darker" style ="color:#FFF" id="editTrans">' + Edit + '</button></td>' +
                                '</tr>');
                        $("#tableWithSearch").append(TR)
                    }
                    $('#tableWithSearch').DataTable()
//                    RebuildTable()
                    ReloadScroll()

                }
            }
        })
    }

    function load() {
        $("#tableWithSearch").append(loader);
        setTimeout(function () {
            $("#IsBusy").remove();
        }, 800)
    }




</script>
