@{
    ViewBag.Title = "PackingHistoryReport";
}

<script type="text/javascript" src="../Projectscript/Common.js"></script>

<style type="text/css">
      .form-control {
        font-weight: bold;
    }
</style>
 
<script>


    function popuprefresh() {
        $('#popupdiv').hide();
    }

    function ShowReportSummary(result)
    {
        disable_datatable('Tblreport', 'buttonPlace');
        var ResponseEntity = "<thead><tr><th width=3px>Sl#</th><th width=20px>Dept.Code</th><th width=20px>Delivery#</th><th width=50px>Bill#</th><th width=50px>Date</th><th width=1000px>Customer</th><th width=20px>Salesman</th><th width=20px>Invoice Qty.</th><th width=20px>Issued Qty.</th><th width=20px>Balance</th></tr></thead><tbody>";
        for (var i = 0; i < result.length; i++) {
            var slno = parseInt(i + 1);

            var BS = result[i].BillSeries;
            var BN = result[i].InvoiceNo;
            var BSN = '';
            if (BS != '' && result[i].Salesman!='') {
                BSN = BS + ' - ' + BN;
            }
            else
            {
                BSN = BN;
            }
           
            if (result[i].Department=='Grand Total')
            {
                ResponseEntity += '<tr  style=background-color:#cfd8dc><td>' + slno + '</td><td><b>' + result[i].Department + '</b></td><td>' + result[i].DeliveryNo + '</td><td></td><td >' + result[i].InvDate + '</td><td>' + result[i].Customer + '</td><td>' + result[i].Salesman + '</td><td style="text-align:center"><b>' + result[i].InvQty + '</b></td><td style="text-align:center"><b>' + result[i].IssuedQty + '</b></td><td style="text-align:center"><b>' + parseInt(result[i].Balance || 0) + '</b></td></tr>';
            }
            else
            {
                ResponseEntity += '<tr ondblclick=gotoreport(' + result[i].DeliveryNo + "," + result[i].BillSeriesId + "," + result[i].InvoiceNo + "," + result[i].DeptId + "," + result[i].SalesDeptId + ')><td>' + slno + '</td><td>' + result[i].Department + '</td><td>' + result[i].DeliveryNo + '</td><td>' + BSN + '</td><td>' + result[i].InvDate + '</td><td>' + result[i].Customer + '</td><td>' + result[i].Salesman + '</td><td style="text-align:center">' + result[i].InvQty + '</td><td style="text-align:center">' + result[i].IssuedQty + '</td><td style="text-align:center">' + parseInt(result[i].Balance || 0) + '</td></tr>';
            }
            
        }
        $('#Tblreport').html(ResponseEntity + '</tbody><tfoot><tr><th>Sl#</th><th>Dept.Code</th><th>Delivery#</th><th>Bill#</th><th>Date</th><th>Customer</th><th>Salesman</th><th> </th><th> </th><th> </th></tr> </tfoot>');

        var title = "Scanning Report - from " + $("#DateFrom").val() + " to " + $("#DateTo").val() + "";
        datatableWithsearch('Tblreport', true, title, 'buttonPlace');
        $('#header').text(title);
    }

  

    function ShowReportDetailed(result) {
        disable_datatable('Tblreport', 'buttonPlace');
        var ResponseEntity = "<thead><tr><th width=3px>Sl#</th><th width=20px>Delivery#</th><th width=200px>Item Code</th><th width=1000px>Item Name</th><th width=100px>Location</th><th width=50px>Invoice Qty.</th><th width=50px>Issued Qty.</th><th width=50px>Balance</th></tr></thead><tbody>";
        for (var i = 0; i < result.length; i++) {
            var slno = parseInt(i + 1);

          if (result[i].ItemCode == '' && result[i].ItemName != 'Grand Total') {
              ResponseEntity += '<tr  style=background-color:#cfd8dc><td>' + slno + '</td><td><b>' + result[i].DeliveryNo + '</b></td><td>' + result[i].ItemCode + '</td><td><b>' + result[i].ItemName + '</b></td><td></td><td style="text-align:center"><b>' + parseInt(result[i].InvQty || 0) + '</b></td><td style="text-align:center"><b>' + parseInt(result[i].IssuedQty || 0) + '</b></td><td style="text-align:center"><b>' + parseInt(result[i].Balance || 0) + '</b></td></tr>';
            }
          else if (result[i].Location == 'grp')
            {
              ResponseEntity += '<tr><td>' + slno + '</td><td>' + result[i].DeliveryNo + '</td><td>' + result[i].ItemCode + '</td><td>' + result[i].ItemName + '</td><td></td><td style="text-align:center">' + parseInt(result[i].InvQty || 0) + '</td><td style="text-align:center">' + parseInt(result[i].IssuedQty || 0) + '</td><td style="text-align:center">' + parseInt(result[i].Balance || 0) + '</td></tr>';
            }
         
            else if (result[i].ItemName == 'Grand Total')
            {
                ResponseEntity += '<tr  style=background-color:#cfd8dc><td>' + slno + '</td><td>' + result[i].DeliveryNo + '</td><td>' + result[i].ItemCode + '</td><td><b>' + result[i].ItemName + '</b></td><td></td><td style="text-align:center"><b>' + parseInt(result[i].InvQty || 0) + '</b></td><td style="text-align:center"><b>' + parseInt(result[i].IssuedQty || 0) + '</b></td><td style="text-align:center"><b>' + parseInt(result[i].Balance || 0) + '</b></td></tr>';
            }
           
            else
            {
                ResponseEntity += '<tr ondblclick=gotoreport(' + result[i].DeliveryNo + "," + result[i].BillSeriesId + "," + result[i].InvoiceNo + "," + result[i].DeptId + "," + result[i].SalesDeptId + ')><td>' + slno + '</td><td>' + result[i].DeliveryNo + '</td><td>' + result[i].ItemCode + '</td><td>' + result[i].ItemName + '</td><td>' + result[i].Location + '</td><td style="text-align:center">' + parseInt(result[i].InvQty || 0) + '</td><td style="text-align:center">' + parseInt(result[i].IssuedQty || 0) + '</td><td style="text-align:center">' + parseInt(result[i].Balance || 0) + '</td></tr>';
            }
        }
        $('#Tblreport').html(ResponseEntity + '</tbody><tfoot><tr><th>Sl#</th><th>Delivery#</th><th>Item Code</th><th>Item Name</th><th>Location</th><th> </th><th> </th><th> </th></tr> </tfoot>');

        var title = "Scanning Report - from " + $("#DateFrom").val() + " to " + $("#DateTo").val() + "";
        datatableWithsearch('Tblreport', true, title, 'buttonPlace');
        $('#header').text(title);
    }

    function gotoreport(DeliveryNo, BillSeriesId, InvoiceNo, DeptId, SalesDeptId) {

        window.open('../inventory/PackingHistory?DelNo=' + DeliveryNo + '&billseriesId=' + BillSeriesId + '&invno=' + InvoiceNo + '&dept=' + DeptId + '&salesdept=' + SalesDeptId);

    }

    function datatableWithsearch(tablename, download, title, tableButtonContainerId) {

        var a = '#' + tablename + ' tfoot th'
        $(a).each(function () {
            var title = $(this).text();
            if (title != 'Edit' && title != 'Select' && title != 'Slno' && title != 'Sl#' && title != 'Credit Limit' && title != 'Due Days' &&  title != ' ')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width=100%" />');
            if (title == 'Date')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Bill#')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:80px" />');
            if (title == 'Delivery#')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Dept.Code')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');          
            if (title == 'Item Code')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Item Name')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            if (title == 'Location')
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
           
        });
        var table = null;
        if (download) {
            if (!title || !tableButtonContainerId) { console.log("download table need title and button container"); }


            table = $('#' + tablename).DataTable({
                // dom: 'Bfrtip',
                dom: "<'row'<'col-sm-1'l><'col-sm-11'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-1'i><'col-sm-11'p>>",
                buttons: []

            });
            new $.fn.dataTable.Buttons(table, {
                buttons: [
                {
                    extend: 'collection',
                    text: 'Export',
                    className: 'excelexport',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            title: title,
                            messageTop: 'EUMI ERP',
                            exportOptions: { columns: ":visible" }
                        },
                        {
                            extend: 'pdfHtml5',
                            title: title,
                            messageTop: 'EUMI ERP',
                            exportOptions: { columns: ":visible" }
                        },
                        {
                            extend: 'print',
                            title: title,
                            messageTop: 'EUMI ERP',
                            exportOptions: { columns: ":visible" }
                        }
                    ]
                },
                'colvis'
                ]
            });
            table.buttons(0, null).container().appendTo($("#" + tableButtonContainerId));
            $("#" + tableButtonContainerId).find(".buttons-collection").addClass("btn-outline-primary mx-1").css("border-radius", "4px");
            //$("#" + tableButtonContainerId).off("click.emButtonEvent").on("click.emButtonEvent", "[data-em-col]", function () {
            //    var column = table.column($(this).attr('data-em-col'));
            //    console.log($(this).attr('data-em-col'));
            //    console.log(column);
            //    column.visible($(this).prop("checked"));
            //});
        } else {
            table = $('#' + tablename).DataTable();
        }
        table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();

                }
            });
        });
        if (ExcelExport == 0) {
            $('.excelexport').hide();
        }
    }

    function disable_datatable(tablename, tableButtonContainerId) {
        $('#Warningpopup').fadeOut();
        if ($.fn.DataTable.isDataTable('#' + tablename)) {
            var table = $('#' + tablename).DataTable();
            table.destroy();
            if (tableButtonContainerId) { $("#" + tableButtonContainerId).empty(); }
            return;
        }
    }

    $(function () {

        $('#DateFrom').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });


        $('#DateTo').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });


        $("#btnGo").click(function (e) {
            $('#Loading').show();

            var data = {};
            data.FromDate = $('#DateFrom').val();
            data.ToDate = $('#DateTo').val();

            $.ajax({
                type: "POST",
                url: "../Purchaseandsalesreports/PackingHistoryReport",
                data: data,
                success: function (result) {
                    ShowReportSummary(result);
                    $('#tdsummary').prop('checked', true)
                    $('#Loading').hide();
                    $('#divreport').show();
                    $('#tdsummarypopup').show();
                    $('#tddetailpopup').show();
                    $('#popupdiv').hide();
                    
                }
            });
        });
       
    });

    function Detail() {
        var data = {};
        data.FromDate = $('#DateFrom').val();
        data.ToDate = $('#DateTo').val();

        $.ajax({
            type: "POST",
            url: "../Purchaseandsalesreports/PackingHistoryDetailedReport",
            data: data,
            success: function (result) {
                ShowReportDetailed(result);
                $('#Loading').hide();
                $('#divreport').show();
                $('#tdsummarypopup').show();
                $('#tddetailpopup').show();
                $('#popupdiv').hide();

            }
        });
    }
    function summary() {

        var data = {};
        data.FromDate = $('#DateFrom').val();
        data.ToDate = $('#DateTo').val();

        $.ajax({
            type: "POST",
            url: "../Purchaseandsalesreports/PackingHistoryReport",
            data: data,
            success: function (result) {
                ShowReportSummary(result);
                $('#Loading').hide();
                $('#divreport').show();
                $('#tdsummarypopup').show();
                $('#tddetailpopup').show();
                $('#popupdiv').hide();
            }
        });
    }

</script>


<div class="myData" data-x="M229" />
<div id="Main">
    <div class="row">
        <div class="col-md-11" style="margin-left:4%;">
            <div class="card">
                <div class="card-header" style="border-bottom:1px solid #e6e6e6">

                    <div>
                        <table width="100%">
                            <tr>
                                <td><h4 id="header"></h4></td>
                                <td width="15%"></td>
                                <td style="display:none" id="tdsummarypopup">
                                    <div style="display:none" class="d-inline-block custom-control custom-radio mr-1">
                                        <input type="radio" name="ab" class="custom-control-input" id="tdsummary" checked="" value="normal" onclick="summary()">
                                        <label class="custom-control-label" for="tdsummary">Summary </label>
                                    </div>
                                </td>
                                <td style="display:none" id="tddetailpopup">
                                    <div class="d-inline-block custom-control custom-radio mr-1">
                                        <input type="radio" name="ab" class="custom-control-input" id="tddetail" value="normal" onclick="Detail()">
                                        <label class="custom-control-label" for="tddetail">Detailed </label>
                                    </div>
                                </td>
                                <td align="right"><button type="button" style="width:100px" onclick="$('#popupdiv').show()" id="btnback" class="btn btn-outline-primary">Back</button></td>
                                <td align="right">
                                    <div class="btn-group" id="buttonPlace">
                                        <div align="right">
                                            <div class="heading-elements">
                                                <div class="btn-group" id="buttonPlace">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>


                        <div align="right">

                            <div class="heading-elements">
                                <hr style="margin-top:2px;" />
                                <div id="divreport" style="overflow:auto;display:none">
                                    <table id="Tblreport" class="table table-striped table-bordered base-style dataTable"></table><br />
                                </div>
                                <div style="display:none">
                                    <table id="Tblreportprint"></table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>




<div id="popupdiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none1;height:200%">
    <div class="modal-dialog" role="document" style="top:5%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h3 class="modal-title" id="myheader">Scanning Report</h3>
                <button type="button" class="close" onclick="popuprefresh()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="monthpopup" style="display:none1">
                @*<div class="modal-body">
                    <fieldset class="form-group floating-label-form-group">
                        <label for="DateFrom">From Date</label>
                        <input type="text" id="DateFrom" class="form-control">
                    </fieldset>
                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="DateTo">To Date</label>
                        <input type="text" id="DateTo" maxlength="100" class="form-control">
                    </fieldset>
                    <br />

                </div>*@
                <div class="modal-body">
                    <div class="row">
                        <label style="font-weight:bold;margin-left:10%">From</label>
                        <div class="col-md-4">
                            <input type="text" id="DateFrom" class="form-control" autocomplete="off">
                        </div>


                        <label style="font-weight:bold;margin-left:-1%">To</label>
                        <div class="col-md-4">
                            <input type="text" id="DateTo" class="form-control" autocomplete="off">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" style="width:100px;margin-right:40%" id="btnGo" class="btn btn-primary">Apply</button>
                </div>
            </form>

        </div>
    </div>
</div>