@{
    ViewBag.Title = "OfferManagement";
}
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/tables/jsgrid/jsgrid-theme.min.css">
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/tables/jsgrid/jsgrid.min.css">
<script type="text/javascript" src="../Projectscript/MonthlyPayroll.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>

<style>
     .modal-xl {
        max-width: 100%;
        margin-left: 4%;
        /*margin-right: 3%;*/
    }
     .modal-xlx {
        max-width: 90%;
        margin-left: 10%;
        margin-right: 3%;
    }
     
     .L{
         color:red;
         text-align:center;
     }
     .P{
         color:green;
         text-align:center;
     }
     .H{
         color:blue;
         text-align:center;
     }
     .nospace{
         white-space: nowrap;
         text-align:center;
      }
</style>

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

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header NewHeaderColor" style="margin-top:3px;">
                    <h4 class="card-title mb-0" style="font-weight:bold;">Monthly Payroll</h4>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div style="height:15px;margin-top:-20px;"></div>
                                <form action="#">
                                    <div class="form-body" style="margin-left:-22px;margin-right:-30px;">
                                        <hr style="margin-top:.2px;width:101.6%;margin-left:-2%" />
                                        <div class="row">
                                            <div class="col-md-12" style="margin-top:-21px;">
                                                <br />
                                                <div class="form-group" style="margin-left:11px;">
                                                    <div class="row">
                                                        <div class="NewbgLighColor" style="Width:100%;margin-top:-25px;margin-bottom:12px;width:98.6%;height:80px">

                                                            <div class="row" style="margin-top:1%">
                                                                <div class="col-md-1"></div>
                                                              
                                                                    <div class="col-md-1 text-right">
                                                                        <label style="font-weight:bold">Month</label>
                                                                    </div>
                                                                    <div class="col-md-2">
                                                                        <select type="text" id="Month" onchange="GetAllDate()" class="form-control">
                                                                            <option value="01">January</option>
                                                                            <option value="02">February</option>
                                                                            <option value="03">March</option>
                                                                            <option value="04">April</option>
                                                                            <option value="05">May</option>
                                                                            <option value="06">June</option>
                                                                            <option value="07">July</option>
                                                                            <option value="08">August</option>
                                                                            <option value="09">September</option>
                                                                            <option value="10">October</option>
                                                                            <option value="11">November</option>
                                                                            <option value="12">December</option>
                                                                        </select>
                                                                    </div>
                                                                <div class="col-md-1 text-right">
                                                                    <label style="font-weight:bold">From</label>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <input id="FromDate" class="form-control" style="background-color:white;width:60%" disabled>
                                                                </div>
                                                                <div class="col-md-1 text-right" style="margin-left:-12%">
                                                                    <label style="font-weight:bold">To</label>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <input id="ToDate" class="form-control" style="background-color:white;width:60%" disabled>
                                                                </div>
                                                                    @*<div class="col-md-2">
                <label style="font-weight:bold">Total Working Days</label>
            </div>
            <div class="col-md-2">
                <input type="text" id="WorkingDays"  class="form-control"/>
            </div>
            <div class="col-md-2">
                <label style="font-weight:bold">Allowed Leaves</label>
            </div>
            <div class="col-md-2">
                <input type="text" style="width:95%" id="AllowedLeaves" class="form-control" />
            </div>*@
                                                                    <div class="col-md-2">
                                                                        <button type="button" onclick="MonthlyPayroll()" id="btnAdd" class="btn btn-primary btn-min-width mr-1 mb-1">Apply <i class="fa fa-check-square-o"></i></button>
                                                                    </div>
                                                                </div>
                                                            <div class="row" style="margin-left:0.1%;margin-top:1%">
                                                                @*<div class="col-md-4"></div>
                                                                    <div class="col-md-2">
                                                                        <label style="font-weight:bold">Total Day Off</label>
                                                                    </div>
                                                                    <div class="col-md-2">
                                                                        <input type="text" id="TotalDayOff" class="form-control" />
                                                                    </div>*@

                                                            </div>

                                                        </div>

                                                    </div>
                                                </div>
                                                <hr style="margin-top:-34.5px;width:102.3%;margin-left:-2.8%" /><br />

                                                <div class="modal-body" style="margin-top:-3%">
                                                    <div class="table-responsive">
                                                        <div style="overflow:auto;height:536px">
                                                            <table id="Tblreport" class="table table-striped table-bordered base-style dataTable"></table><br />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="modal-footer text-right">
                                            <button type="button" style="width:100px" id="btnsubmit" class="btn btn-primary btn-min-width mr-1 mb-1"><u>S</u>ave <i class="fa fa-check-square-o"></i></button>
                                            <button type="button" style="width:100px" id="btnnew" onclick="formrefresh()" class="btn btn-primary btn-min-width mr-1 mb-1">New<i class="ft-refresh-cw position-right"></i></button>
                                            <button  type="button" id="btnSalary" onclick="ShowSalaryDetails()" class="btn btn-primary btn-min-width mr-1 mb-1">Monthly Salary Process<i class="ft-list"></i></button>
                                        </div>

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

<div id="MonthlyPayrollDetails" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="OtherCostheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none">
    <div class="modal-dialog modal-xl" role="document" style="top:2%;">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h4 class="modal-title" id="MRheader"></h4>
                <h4 style="margin-left:30%" class="modal-title" id="Dheader"></h4>
                <button type="button" class="close" onclick="$('#MonthlyPayrollDetails').hide()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="MPSub" style="display:none;">
                <div class="modal-body">
                    <div class="table-responsive">
                       
                        <div class="overflow-auto" style="height:300px;overflow:scroll;width:100%;overflow:auto;">
                            <table id="tblMPD" class="table table-striped table-bordered zero-configuration dataTable"></table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-outline-secondary" data-dismiss="modal" value="Add">
                    <input type="button" class="btn btn-outline-secondary" onclick="$('#MonthlyPayrollDetails').hide()" data-dismiss="modal" value="Back">
                </div>
            </form>
        </div>
    </div>

</div>

<div id="MonthlySalaryDetails" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="OtherCostheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none">
    <div class="modal-dialog modal-xlx" role="document" style="top:2%;">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h4 class="modal-title" id="MSheader">Salary Details</h4>
                <button type="button" class="close" onclick="$('#MonthlySalaryDetails').hide()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="MSSub" style="display:none;">
                <div class="modal-body">
                    <div class="table-responsive">

                        <div class="overflow-auto" style="height:450px;overflow:scroll;width:100%;overflow:auto;">
                            <table id="tblMSD" class="table table-striped table-bordered zero-configuration dataTable"></table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-outline-primary" id="btnSalarySave"  data-dismiss="modal" value="Save">
                    <input type="button" class="btn btn-outline-secondary" onclick="$('#MonthlySalaryDetails').hide()" data-dismiss="modal" value="Back">
                </div>
            </form>
        </div>
    </div>

</div>

<div style="display:none">
    <input type="text" id="FromDate" class="form-control" />
    <input type="text" id="ToDate" class="form-control" />
    <input type="text" id="NewDate" class="form-control" />
    <input type="text" id="SerialNo" class="form-control" />
</div>
<script>
    $("#ItemCode").autocomplete({
        delay: 0,
        minLength: 0,
        source: function (request, response) {
            var data = {};
            data.ItemCode = $("#ItemCode").val();
            data.LocId = UserLocationId;
            data.DeptId = ERPDeptId;
            $.ajax({
                url: '../SalesInvoice/ProductSearchSales',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (item) {
                        return ({
                            ColCount: '+2',
                            label: item.ItemCode,
                            label1: item.Description,
                            Description: item.Description,
                            ProductId: item.ItemId,
                            Product: item.ItemCode,
                            headers: ["Material Code", "Material Description"]
                        })
                    }));
                }
            })
        },

        autoFocus: true,
        select: function (event, ui) {
            $('#ItemCode').val(ui.item.Product);
            $('#ItemId').val(ui.item.ProductId);
            $('#ItemDescription').val(ui.item.Description);
            $("#Supplier").focus();
        },
    });

    $("#Supplier").autocomplete({
        delay: 0,
        minLength: 0,
        source: function (request, response) {
            var data = {};
            data.CustName = $("#Supplier").val();
            data.CustType = 'S';

            $.ajax({
                url: '../Master/CustomerOrSupplierSearch',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (item) {
                        return ({
                            ColCount: '+2',
                            label: item.CustName,
                            label1: item.CustAccount,
                            CustId: item.CustId,
                            CustName: item.CustName,
                            CustAccount: item.CustAccount,
                            headers: ["Supplier Name", "Account Code"]
                        })
                    }));
                }

            })

        },
        autoFocus: true,
        select: function (event, ui) {
            $('#SupplierId').val(ui.item.CustId);
            $('#Supplier').val(ui.item.CustAccount);
            $('#SupplierName').val(ui.item.CustName);
            $("#Group").focus();
        },
    });
</script>