@{
    ViewBag.Title = "ProjectJobReport";
}

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



<style>
    .form-control {
        font-weight: bold;
    }

    #btnsubmit:hover {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    #btnback:hover {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    #btnprint:hover {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>

<script>

    function popuprefresh() {
        $('#popupdiv').hide();
    }
    function Showreport(result) {
        disable_datatable('Tblreport', 'buttonPlace');
        var responseText = "<thead><tr><th>Sl#</th><th>Job Code</th><th>Job Description</th><th>Customer</th><th>Start Date</th><th>End Date</th><th>LPO#</th><th>Est. Amount</th><th>Salesman</th><th>Status</th><th>Invoice#</th><th>Invoice Date</th></tr></thead><tbody>";
        for (var i = 0; i < result.length; i++) {
            var slno = parseInt(i + 1);
            if (result[i].BOQSlNo == 0) {
                var BOQSlNos = '';
            }
            else
            {
                var BOQSlNos = result[i].BOQSlNo;
            }
            if (result[i].BOQDate == 0) {
                var BOQDates = '';
            }
            else {
                var BOQDates = result[i].BOQSlNo;
            }
            //alert(result[i].JobCode)
            if (result[i].JobCode == 'Grand Total') {
                responseText += '<tr style=background-color:#cfd8dc;font-weight:bold><td align="center">' + slno + '</td><td>' + result[i].JobCode + '</td><td>' + result[i].Description + '</td><td>' + result[i].CustName + '</td><td>' + result[i].StartDate + '</td><td>' + result[i].EndDate + '</td><td>' + result[i].LPO + '</td><td align="right" style="font-weight:bold">' + parseFloat(result[i].EstAmount).toFixed(Decimal) + '</td><td>' + result[i].FirstName + '</td><td>' + result[i].Status + '</td><td>' + BOQSlNos + '</td><td>' + BOQDates + '</td></tr>';
            }
            else {
                responseText += '<tr ><td align="center">' + slno + '</td><td>' + result[i].JobCode + '</td><td>' + result[i].Description + '</td><td>' + result[i].CustName + '</td><td>' + result[i].StartDate + '</td><td>' + result[i].EndDate + '</td><td>' + result[i].LPO + '</td><td align="right">' + parseFloat(result[i].EstAmount).toFixed(Decimal) + '</td><td>' + result[i].FirstName + '</td><td>' + result[i].Status + '</td><td>' + BOQSlNos + '</td><td>' + BOQDates + '</td></tr>';

            }
        }
        $('#Tblreport').html(responseText + '</tbody><tfoot><tr><th>Sl#</th><th>Job Code</th><th>Job Description</th><th>Customer</th><th>Start Date</th><th>End Date</th><th>LPO#</th><th>Est. Amount</th><th>Salesman</th><th>Status</th><th>Invoice#</th><th>Invoice Date</th></tr> </tfoot>');
        $('#Tblreportprint').html(responseText + '</tbody>');
        var title = "Project Job Report - from " + $("#DateFrom").val() + " to " + $("#DateTo").val() + "";
        datatableWithsearch('Tblreport', true, title, 'buttonPlace');

        $('#header').text(title);
    }













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



        $("#btnsubmit").click(function (e) {

            if ($('#DateFrom').val() == '')
            {
                alert('Please Select From Date');
                $('#DateFrom').focus();

            }
            else if ($('#DateTo').val() == '') {
                alert('Please Select To Date');
                $('#DateTo').focus();

            }
            else {
                $('#Loading').show();
                var Condition = ''
                var FromDate = $('#DateFrom').val();
                var ToDate = $('#DateTo').val();
                Condition = 'CONVERT(datetime,CurrDate,103) >= CONVERT(datetime,' + "'" + FromDate + "'" + ',103) and CONVERT(datetime,CurrDate,103) <= CONVERT(datetime,' + "'" + ToDate + "'" + ',103)'
                var data = {};
                data.Condition = Condition;
                $.ajax({
                    type: "POST",
                    url: "../ProjectandJob/Rpt_GetProjectList",
                    data: data,
                    success: function (result) {
                        Showreport(result);
                        $('#Loading').hide();
                        $('#divreport').show();
                        $('#popupdiv').hide();

                    }
                });
            }


        });

    });

    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 != 'Credit Limit' && title != 'Due Days' && title != 'O Balance' && title != ' ')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width=100%" />');
            
            if (title == 'Est. Amount')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width:130px;" />');
            if (title == 'Start Date' || title == 'End Date' || title == 'Invoice#' || title == 'Invoice Date' || title == 'Status')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width:100%;" />');
            if (title == 'Job Code' || title == 'Job Description' || title == 'Customer' || title == 'Salesman')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width:200px" />');
            if (title == 'LPO#')
                $(this).html('<input type="text" placeholder="Search ' + title + '" style="width:100%" />');
 

        });
        var table = null;
        if (download) {
            if (!title || !tableButtonContainerId) {
                //console.log("download table need title and button container");
            }

            // AddColumnSelectionButton(tableButtonContainerId, tablename)

            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");

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

</script>

<div class="myData" data-x="M295" />
<div id="Entry">

    <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="35%"></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:.1%;" />
                                <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:10%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h3 class="modal-title" id="myheader">Project Job 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">
                    <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="btnsubmit" class="btn btn-primary">Go</button>
                </div>
            </form>

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