@{
    ViewBag.Title = "AreaSalesmanwiseSales";
}

<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 ShowReport(result) {
        disable_datatable('Tblreport', 'buttonPlace');
        var ResponseEntity = "<thead><tr><th>Sl#</th><th>Bill Series</th><th>Bill#</th><th>Date</th><th>Customer</th><th>Customer Details</th><th>Pay Type</th><th>Taxable Amount</th><th>Tax Amount</th><th>Amount</th><th>FC Amount</th></tr></thead><tbody>";
        for (var i = 0; i < result.length; i++) {
            var x = result[i].HFlag;
            var slno = parseInt(i + 1);
            if (x == "G") {
                ResponseEntity += '<tr style=background-color:#b0bec5><td>' + slno + '</td><td>' + result[i].BillSeries + '</td><td>' + result[i].BillSlNo + '</td><td>' + result[i].InvDate + '</td><td><b>' + result[i].CustName + '</b></td><td>' + result[i].CustAddress + '</td><td>' + result[i].PayType + '</td><td style=text-align:right>' + result[i].TaxableAmount + '</td><td style=text-align:right>' + result[i].TaxAmount + '</td><td style=text-align:right>' + result[i].Amount + '</td><td style=text-align:right>' + result[i].FCTaxAmount + '</td></tr>';
            }
            else if(x=="S")
            {
                ResponseEntity += '<tr style=background-color:#cfd8dc><td>' + slno + '</td><td>' + result[i].BillSeries + '</td><td>' + result[i].BillSlNo + '</td><td>' + result[i].InvDate + '</td><td><b>' + result[i].CustName + '</b></td><td>' + result[i].CustAddress + '</td><td>' + result[i].PayType + '</td><td style=text-align:right>' + result[i].TaxableAmount + '</td><td style=text-align:right>' + result[i].TaxAmount + '</td><td style=text-align:right>' + result[i].Amount + '</td><td style=text-align:right>' + result[i].FCTaxAmount + '</td></tr>';
            }
            else if (result[i].InvDate == 'Grand Total') {
                ResponseEntity += '<tr style=background-color:#cfd8dc><td>' + slno + '</td><td>' + result[i].BillSeries + '</td><td>' + result[i].BillSlNo + '</td><td><b>' + result[i].InvDate + '</b></td><td>' + result[i].CustName + '</td><td>' + result[i].CustAddress + '</td><td>' + result[i].PayType + '</td><td style=text-align:right><b>' + parseFloat(result[i].TaxableAmount || 0).toFixed(Decimal) + '</b></td><td style=text-align:right><b>' + parseFloat(result[i].TaxAmount || 0).toFixed(Decimal) + '</b></td><td style=text-align:right><b>' + parseFloat(result[i].Amount || 0).toFixed(Decimal) + '</b></td><td style=text-align:right><b>' + parseFloat(result[i].FCTaxAmount || 0).toFixed(Decimal) + '</b></td></tr>';
            }
            else  {
                ResponseEntity += '<tr ondblclick=gotoInvoNo(' + result[i].BillSlNo + "," + result[i].BillSeriesID + "," + result[i].DeptId + ')><td>' + slno + '</td><td>' + result[i].BillSeries + '</td><td>' + result[i].BillSlNo + '</td><td>' + result[i].InvDate + '</td><td>' + result[i].CustName + '</td><td>' + result[i].CustAddress + '</td><td>' + result[i].PayType + '</td><td style=text-align:right>' + parseFloat(result[i].TaxableAmount || 0).toFixed(Decimal) + '</td><td style=text-align:right>' + parseFloat(result[i].TaxAmount || 0).toFixed(Decimal) + '</td><td style=text-align:right>' + parseFloat(result[i].Amount || 0).toFixed(Decimal) + '</td><td style=text-align:right>' + parseFloat(result[i].FCTaxAmount || 0).toFixed(Decimal) + '</td><td style=display:none><input type="hidden" id="Dept_' + i + '" value=' + result[i].DeptId + '/></td><td style=display:none><input type="hidden" id="BillSeries_' + i + '" value=' + result[i].BillSeriesID + '/></td></tr>';
            }
        }

        $('#Tblreport').html(ResponseEntity + '</tbody><tfoot><tr><th>Sl#</th><th>Bill Series</th><th>Bill#</th><th>Date</th><th>Customer</th><th>Customer Details</th><th>Pay Type</th><th> </th><th> </th><th> </th><th> </th></tr> </tfoot>');
        var title = "Area/Salesmanwise Sales Report - from " + $("#dpDateFrom").val() + " to " + $("#dpDateTo").val() + "";
        datatableWithsearch('Tblreport', true, title, 'buttonPlace');
        $('#header').text(title);
    }

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

        var a = '#' + tablename + ' tfoot th'
        $(a).each(function () {
            var title = $(this).text();
            if (title != 'Edit' && title != 'Select' && title != 'Sl#' && title != 'O Balance' && title != ' ') {
                $(this).html('<input type="text" placeholder=" ' + 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:100%" />');
            }
            if (title == 'Bill Series') {
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100%" />');
            }
            if (title == 'Pay Type') {
                $(this).html('<input type="text" placeholder="' + title + '" style="width:100px" />');
            }
            if (title == 'Customer') {
                $(this).html('<input type="text" placeholder="' + title + '" style="width:400px" />');
            }
            if (title == 'Customer Details') {
                $(this).html('<input type="text" placeholder="' + title + '" style="width:550px" />');
            }
        });
        var table = null;
        if (download) {
            if (!title || !tableButtonContainerId) { console.log("download table need title and button container"); }


            table = $('#' + tablename).DataTable({
                //dom: 'Blfrtip',
                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");

        } 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 gotoInvoNo(InvoNo, BillSeriesId, DeptId) {
        if ((usermenu1.indexOf("M54") != -1)) {
            window.open('../inventory/SalesInvoice?slno=' + InvoNo + '&billseries=' + BillSeriesId + '&dept=' + DeptId);

        }
        else if ((usermenu1.indexOf("M227") != -1)) {
            window.open('../inventory/SalesInvoiceNew?slno=' + InvoNo + '&billseries=' + BillSeriesId + '&dept=' + DeptId);

        }
        else {
            warningshow('Invalid User Rights');
            return false;
        }
    }
    function warningshow(message, Id) {
        $('#popupmessage').text(message);
        $('#Warningpopup').show();
        $('#' + Id).focus();
        window.setTimeout(function () {
            $('#Warningpopup').hide();
        }, 3000);
    }

    function GetAreaGroupselect(id) {
        var data = {};
        data.AreaGrpId = 0;
        $.ajax({
            type: "POST",
            url: "../Master/AreaGroupGetandGets",
            data: data,
            success: function (result) {
                AreaGroupLoad(result.oList, id);
            }
        });

    }

    function AreaGroupLoad(result) {
        $("#AreaGroup").empty();
        $("#AreaGroup").append("<option value='0'>-All-</option>");
        for (var i = 0; i < result.length; i++) {
            $("#AreaGroup").append("<option value='" + result[i].AreaGrpId + "'>" + result[i].AreaName + "</option>");
        }
        SubAreaGets();
    }



    function SubAreaGets() {

        var data = {};
        data.AreaGrpId = $("#AreaGroup").val();

        if (data.AreaGrpId == 0) {
            data.Id = 0;
            $.ajax({
                type: "POST",
                url: "../Master/AreaGetandGets",
                data: data,
                success: function (result) {
                    SubAreaLoad(result.oList);
                }
            });
        }

        else {
            data.Id = 0;
            $.ajax({
                type: "POST",
                url: "../Master/SubAreaGetforArea",
                data: data,
                success: function (result) {
                    SubAreaLoad(result.oList);
                }
            });

        }

    }


    //function SubAreaLoad(result) {
    //    $("#placeofsupply").empty();
    //    $("#placeofsupply").append("<option value='0'>-All-</option>");
    //    for (var i = 0; i < result.length; i++) {
    //        $("#placeofsupply").append("<option value='" + result[i].AreaId + "'>" + result[i].AreaName + "</option>");
    //    }
    //}

    function GetSalesMan(id) {
        var data = {};
        data.Id = 0;
        $.ajax({
            type: "POST",
            url: "../Master/SalesmanGetandGets",
            data: data,
            success: function (result) {
                SalesManLoad(result.oList, id);
            }
        });
    }

    function SalesManLoad(result, a) {
        $("#cmbSalesMan").empty();
        $("#cmbSalesMan").append("<option value='0'>-All-</option>")
        for (var i = 0; i < result.length; i++) {
            $("#cmbSalesMan").append("<option value='" + result[i].Id + "'>" + result[i].FirstName + "</option>");
        }
        if (a == 0) {
            $('#cmbSalesMan').val(0);
        }
        else {
            $('#cmbSalesMan').val(a);
        }
    }

    $(function () {

        GetAreaGroupselect(0);
        GetSalesMan(0);
        $("#cmbSalesMan").focus();
        $('#dpDateFrom').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });


        $('#dpDateTo').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale:
            {
                format: 'DD/MM/YYYY'
            }
        });
        $('#cmbSalesMan').keypress(function (e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            if (key == 13) {
                $('#cmbPayType').focus();
                e.preventDefault();
            }
        });

        $('#cmbPayType').keypress(function (e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            if (key == 13) {
                $('#AreaGroup').focus();
                e.preventDefault();
            }
        });
        $('#AreaGroup').keypress(function (e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            if (key == 13) {
                $('#btnGo').focus();
                e.preventDefault();
            }
        });

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

            var data = {};
            data.InvDate = $('#dpDateFrom').val();
            data.DueDate = $('#dpDateTo').val();
            data.AreaId = 0;
            data.AreaGroupID = $('#AreaGroup').val();
            data.SalesManId = $('#cmbSalesMan').val();
            data.PayType = $('#cmbPayType').val();
            data.Userid = ERPUserId;


            $.ajax({
                type: "POST",
                url: "../Purchaseandsalesreports/AreaSalesmanwiseSalesGet",
                data: data,
                success: function (result) {
                    ShowReport(result);
                    $('#Loading').hide();
                    $('#divreport').show();
                    $('#popupdiv').hide();
                }
            });
        });
    });
</script>

<div class="myData" data-x="M65" />
<div id="Main">
   
    <div class="row">
        <div class="col-md-12">
            <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="34%"></td>
                                <td align="right"><button type="button" style="width:100px" onclick="$('#popupdiv').show(),$('#cmbSalesMan').focus();" 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:-1px;" />
                                <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:2%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h4 class="modal-title" id="myheader">Area/Salesmanwise Sales Report</h4>
                <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">
                    <div class="row">
                        <label style="font-weight:bold;margin-left:9.5%">From</label>
                        <div class="col-md-4">
                            <input type="text" id="dpDateFrom" class="form-control" autocomplete="off">
                        </div>


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

                    <div class="row" style="border-bottom:1px solid #cfd8dc;margin-top:4%;"></div>
                    <div class="row" style="margin-top:2%">
                        <label style="margin-top:2%;font-weight:bold;margin-left:2%">Salesman</label>
                        <div class="col-md-4" style="margin-top:2%">
                            <select id="cmbSalesMan" class="form-control" name="priority"></select>
                        </div>


                        <label style="margin-top:2%;font-weight:bold;margin-left:1%">PayType</label>
                        <div class="col-md-4" style="margin-top:2%">
                            <select id="cmbPayType" class="form-control" name="priority">
                                <option value="0">-All-</option>
                                <option value="1">Cash</option>
                                <option value="2">Credit</option>
                                <option value="3">Card</option>
                            </select>
                        </div>
                    </div>
                    <div class="row" style="margin-top:2%">
                        <label style="margin-top:2%;font-weight:bold;margin-left:10%">Area</label>
                        <div class="col-md-4" style="margin-top:2%">
                            <select id="AreaGroup" class="form-control" name="priority"></select>
                        </div>

                    </div>
                </div>

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

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