@{
    ViewBag.Title = "MonthwiseSales";
}

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

<script>


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

    function ShowReport(result)
    {


        disable_datatable('Tblreport', 'buttonPlace');
        var ResponseEntity = "<thead><tr><th>Slno</th><th>Bill Series</th><th>Bill SlNo</th><th>Bill Date</th><th>Customer</th><th>Discount</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 slno = parseInt(i + 1);
            if (result[i].BillSlNo == '') {
                ResponseEntity += '<tr style=background-color:#8ee4f1><td>' + slno + '</td><td>' + result[i].BillSeriesID + '</td><td>' + result[i].BillSlNo + '</td><td>' + result[i].InvDate + '</td><td>' + result[i].CustName + '</td><td style=text-align:right>' + parseFloat(result[i].Discount || 0).toFixed(Decimal) + '</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 {
                ResponseEntity += '<tr><td>' + slno + '</td><td>' + result[i].BillSeriesID + '</td><td>' + result[i].BillSlNo + '</td><td>' + result[i].InvDate + '</td><td>' + result[i].CustName + '</td><td style=text-align:right>' + parseFloat(result[i].Discount || 0).toFixed(Decimal) + '</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></tr>';
            }
        }
        $('#Tblreport').html(ResponseEntity + '</tbody><tfoot><tr><th>Slno</th><th>Bill Series</th><th>Bill SlNo</th><th>Bill Date</th><th>Customer</th><th> </th><th> </th><th> </th><th> </th><th> </th></tr> </tfoot>');

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



    $(function () {

        $('#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'
            }
        });


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

            var data = {};
            data.InvDate = $('#dpDateFrom').val();
            data.DueDate = $('#dpDateTo').val();

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

</script>

<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="40%"></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">
                                <br /><hr />
                                <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>

                                <br /><br />
                            </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">Sales 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="dpDateFrom">From Date</label>
                        <input type="text" id="dpDateFrom" class="form-control">
                    </fieldset>
                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="dpDateTo">To Date</label>
                        <input type="text" id="dpDateTo" maxlength="100" class="form-control">
                    </fieldset>
                    <br />

                </div>
                <div class="modal-footer">

                    <button type="button" style="width:100px" id="btnGo" class="btn btn-outline-primary">Go</button>
                </div>
            </form>

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