@{
    ViewBag.Title = "LeaveApplication";
}

@*<script type="text/javascript" src="../Projectscript/Employee.js"></script>*@
<script type="text/javascript" src="../Projectscript/PayRoll_LeaveApplication.js"></script>
<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script src="/Scripts/Autocomplete/jquery-ui.js"></script>



@*<script type="text/javascript" src="~/Scripts/EumiDataTable/eumi-datatable.js"></script>
    <script src="~/Scripts/Autocomplete/jquery-ui.js"></script>
    <script type="text/javascript">*@




<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">
<style>
    #customView {
        border: 1px solid #CCD6E6;
    }
</style>



<style>
    #itemtable {
        table-layout: fixed;
        width: 100%;
        height: 480px;
        border-bottom: 1px solid #c5cdd3;
    }

    #CELL1 {
        border-right: 1px solid #c5cdd3;
        width: 40%;
        border-bottom: none;
    }

    #CELL2 {
        border-right: 1px solid #c5cdd3;
        width: 30%;
    }
</style>





@*//function getdate(dtt) {
    //    var Dt = CurDate;
    //    var someDate = new Date(Dt.slice(6, 10) + '-' + Dt.slice(3, 5) + '-' + Dt.slice(0, 2));
    //    var month = +someDate.getMonth() + 1;
    //    var day = someDate.getDate();
    //    if (day < 10) {
    //        day = '0' + day;
    //    }
    //    if (month < 10) {
    //        month = '0' + month;
    //    }
    //    newdate = someDate.getFullYear() + "-" + month + "-" + day;
    //    var Dt1 = dtt;
    //    var someDate1 = new Date(Dt1.slice(6, 10) + '-' + Dt1.slice(3, 5) + '-' + Dt1.slice(0, 2));
    //    var month1 = +someDate1.getMonth() + 1;
    //    var day1 = someDate1.getDate();
    //    if (day1 < 10) {
    //        day1 = '0' + day1;
    //    }
    //    if (month1 < 10) {
    //        month1 = '0' + month1;
    //    }
    //    newdate1 = someDate1.getFullYear() + "-" + month1 + "-" + day1;
    //    var start = new Date(newdate)
    //    var end = new Date(newdate1)
    //    var days = (start - end) / (1000 * 60 * 60 * 24);
    //    return Math.round(days);
    //}*@







<div class="myData" data-x="M181" />



<div id="Entry">

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header NewHeaderColor" style="border-bottom:1px solid #e6e6e6">
                    <h4 class="card-title mb-0">Leave Request</h4>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <form action="#">
                                    <div class="form-body NewbgLighColor" style="margin-left:-23px;margin-bottom:-21px;">
                                        <table id="itemtable" style="margin-top:1%;">
                                            <tr>
                                                <td id="CELL1" valign="top">
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                <div class="card-content collapse show">


                                                                    @*------------------------EMPLOYEE CODE--------------------------*@



                                                                    @*<div class="row">
                                                                            <div class="col-md-12">f
                                                                                <div class="form-group row">
                                                                                    <label class="col-md-3 label-control" for="userinput2" style="margin-left:20px; ">Code<span class="danger">*</span></label>
                                                                                    <div class="col-md-8 ">
                                                                                        @*<select id="DesignationId" class="form-control" style="width:400px;" autocomplete="on"></select>
                                                                                        <input type="text" id="bcode" class="form-control" onkeyup="changetoupper(this.id),CodeName()" style="width:400px;margin-left:-3px" autocomplete="on">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>*@
                                                                    @*------------------------$$$$$$$$$--------------------------*@




                                                                    @*------------------------EMPLOYEE NAME--------------------------*@



                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row">
                                                                                <label class="col-md-3 label-control" for="userinput2" style="margin-left:20px;">Name<span class="danger">*</span></label>
                                                                                <div class="col-md-8 ">
                                                                                    @*<select id="" class="form-control" style="width:400px;" autocomplete="on"></select>*@
                                                                                    <input type="text" id="bname" onkeyup="changetoupper(this.id)" class="form-control" style="width:400px;margin-left:-4px" autocomplete="on">
                                                                                    <input type="hidden" id="hiddencode" />
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row">
                                                                                <label class="col-md-3 label-control" for="userinput2" style="margin-left:20px;" @*margin-bottom:200px*@>Designation</label>
                                                                                <div class="col-md-8 ">
                                                                                    <input type="text" id="DesignationId" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px;margin-left:-4px">
                                                                                    @*<select id="DesignationId" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px;margin-left:-3px" @*margin-bottom:200px"></select>*@
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-12">
                                                                        <div class="form-group row" @*style="margin-top:-210px"*@>
                                                                            <label class="col-md-3 label-control" for="userinput2" style="margin-left:6px; ">Department</label>
                                                                            <div class="col-md-8 ">
                                                                                <input type="text" id="DepartmentId" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px">
                                                                                @*<select id="DepartmentId" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px" @*;margin-bottom:200px></select>*@
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-12">
                                                                        <div class="form-group row" @*style="margin-bottom:-212px"*@>
                                                                            <label class="col-md-3 label-control" for="userinput2" style="margin-left:6px; ">Date of Joining</label>
                                                                            <div class="col-md-8 ">
                                                                                <input type="text" id="DateofJoin" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px">
                                                                                @*<input type="text" id="" onkeyup="changetoupper(this.id)" class="form-control"  autocomplete="on">*@
                                                                            </div>
                                                                        </div>
                                                                    </div>


                                                                    @*------------------------$$$$$$$$$$--------------------------*@


                                                                    @*------------------------MOBILE--------------------------*@




                                                                    <div class="col-md-12">
                                                                        <div class="form-group row" @*style="margin-bottom:-212px"*@>
                                                                            <label class="col-md-3 label-control" for="userinput2" style="margin-left:6px; ">Mobile</label>
                                                                            <div class="col-md-8 ">
                                                                                <input type="text" id="Mobile" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px;">
                                                                                @*<input type="text" id="" onkeyup="changetoupper(this.id)" class="form-control"  autocomplete="on">*@
                                                                            </div>
                                                                        </div>
                                                                    </div>


                                                                    @*------------------------$$$$$$$$$$--------------------------*@


                                                                    @*------------------------EMAIL--------------------------*@




                                                                    <div class="col-md-12">
                                                                        <div class="form-group row" @*style="margin-bottom:-212px"*@>
                                                                            <label class="col-md-3 label-control" for="userinput2" style="margin-left:6px; ">Email</label>
                                                                            <div class="col-md-8 ">
                                                                                <input type="text" id="Email" class="form-control" onkeyup="changetoupper(this.id)" style="width:400px;">
                                                                                @*<input type="text" id="" onkeyup="changetoupper(this.id)" class="form-control"  autocomplete="on">*@
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @*------------------------$$$$$$$$$$--------------------------*@





                                                                    @*</div></td><td width="10%"></td></tr></table>

                                                                        </td>*@
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>



                                                @*-------------------------$$$$$$$$$$--------------------------*@


                                                <td id="CELL2" valign="top">
                                                    <table style="border-bottom:none">
                                                        <tr>
                                                            <td>
                                                                <div class="card-content collapse show">

                                                                    @*-------------------DATE--------------------*@

                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:5px">
                                                                                <label class="col-md-6 label-control" @*style="margin-left:20px"*@>Date</label>
                                                                                <div class="col-md-6">
                                                                                    <input type="text" style="width:170px;margin-left:5px" class="form-control" id="todaysdate" autocomplete="off" disabled>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @*-------------------------$$$$$$$$$$--------------------------*@




                                                                    @*-------------------TYPE OF LEAVE--------------------*@
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:5px">
                                                                                <label class="col-md-6 label-control" for="userinput1" @*style="margin-left:6px;"*@>Leave Type<span class="danger">*</span></label>
                                                                                <div class="col-md-6">
                                                                                    <select id="leavetype" @*name="leavetype"*@ class="form-control" style="width:170px;margin-left:5px">
                                                                                        <option value="0">--Select--</option>
                                                                                        <option value="Medical">Medical</option>
                                                                                        <option value="Casual">Casual</option>
                                                                                        <option value="Annual">Annual</option>
                                                                                        <option value="Long">Long Leave</option>
                                                                                        <option value="Other">Other</option>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @*-------------------------$$$$$$$$$$--------------------------*@


                                                                    @*--------------------LEAVES FROM-----------------------*@

                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:5px">
                                                                                <label class="col-md-6 label-control" @*style="margin-left:20px"*@>Leave From<span class="danger">*</span></label>
                                                                                <div class="col-md-6">
                                                                                    <input type="text" style="width:170px;margin-left:5px" class="form-control" id="leavefrom" onchange="calcleavedays()" autocomplete="off">@*placeholder="--select--"*@
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @*-------------------------$$$$$$$$$$--------------------------*@





                                                                    @*---------------------LEAVES UPTO-------------------------*@
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:5px;">
                                                                                <label class="col-md-6 label-control" style="margin-bottom:30px">Leave Upto<span class="danger">*</span></label>
                                                                                <div class="col-md-6">
                                                                                    <input type="text" style="width:170px;margin-left:5px" class="form-control" id="leavesupto" onchange="calcleavedays()" autocomplete="off"> @*placeholder="--select--"*@  @*Getdayss()*@
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    @*-------------------------$$$$$$$$$$--------------------------*@






                                                                    @*----------------CALCULATION OF NUMBER OF DAYS--------------------*@

                                                                    <div class="row">
                                                                        <div class="col-md-8">
                                                                            <div class="form-group row">
                                                                                @*<button type="button" id="ndlid" style="margin-right:10px;margin-left:30px" onclick="calcleavedays()">Days Leave</button>*@
                                                                                <div class="col-md-6">
                                                                                    <input type="text" style="width:170px;margin-left:230px;margin-top:-20px" class="form-control" @*onclick="calcleavedays()"*@ id="txtdays" @*autocomplete="off"*@ placeholder="Days Leave" autocomplete="off" disabled>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>



                                                                    @*-------------------------$$$$$$$$$$--------------------------*@


                                                                    <button type="button" style="width:170px;margin-left:230px;margin-bottom:15px;display:none;" class="btn btn-outline-primary " onclick="window.open('../master/Employee')" id="detailsbtn">More Details</button>





                                                                    @*<button type="button" style="width:170px;margin-left:230px;"@*margin-bottom:-20px id="detailsbtn" class="btn-default"  onclick="apply()">More Details</button>*@
                                                                    @*<div class="input-group-append" id="addVisa">*@
                                                                    @*</div>*@





                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>




                                                @*</div>
                                                    </table>*@

                                                @*--------------------------------------------------------------*@
                                                <td id="CELL3" valign="top">
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                <div class="card-content collapse show">





                                                                    <div class="col-12 col-md-9 col-lg-9">
                                                                        @*<div class="card">
                                                                            <div class="card-header text-center" style="margin-left:90px">*@

                                                                        <img id="img1" src="../app-assets/img/portrait/small/avatar-s-12.png" style="margin-left:150px" alt="Brek" width="150" class="rounded-circle gradient-mint" onerror="this.onerror=null; this.src='../app-assets/img/portrait/small/avatar-s-12.png';">
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="card-block text-center">

                                                                            @*<h4 class="card-title">Photo</h4>*@
                                                                            @*<input type="file" id="file" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2">*@

                                                                        </div>
                                                                    </div>



                                                                    @*----------------ANNUAL LEAVES, LEAVES TAKEN, AVAILABLE LEAVES(BOTTOM COLOUMNS)--------------------*@
                                                                    <br />
                                                                    <br />
                                                                    <br />
                                                                    <br />
                                                                    <div class="row" style="display:none">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:72px;margin-top:-50px;">
                                                                                <label class="col-md-6 label-control">Annual Leaves</label>
                                                                                <div class="col-md-6">
                                                                                    @*<input type="text" id="annualleave" style="width:55px;margin-left:5px" @*style="width:55px;margin-top:-5px;margin-left:-50px" class="form-control" onkeyup="changetoupper(this.id),CodeName()" autocomplete="off" disabled />*@
                                                                                    <label class="col-md-6 label-control" id="annualleave" style="margin-left:90px;" disabled></label>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row"style="display:none">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:72px;">
                                                                                <label class="col-md-6 label-control">Leaves Taken</label>
                                                                                <div class="col-md-6">
                                                                                    @*<input type="text" id="leavetaken" style="width:55px;margin-left:5px" @*style="width:55px;margin-top:-5px;margin-left:-60px" onkeyup="changetoupper(this.id)" class="form-control" autocomplete="off" disabled />*@
                                                                                    <label class="col-md-6 label-control" id="leavetaken" style="margin-left:90px" disabled></label>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="row"style="display:none">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group row" style="margin-left:72px;">
                                                                                <label class="col-md-6 label-control">Available Leaves</label>
                                                                                <div class="col-md-6">
                                                                                    @*<input type="text" id="availableleave" style="width:55px;margin-left:5px" @*style="width:55px;margin-top:-57px;margin-left:600px" class="form-control" onkeyup="changetoupper(this.id),CodeName()" autocomplete="off" disabled />*@
                                                                                    <label class="col-md-6 label-control" id="availableleave" style="margin-left:90px" disabled></label>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                    </table>
                                                    <br />
                                                    <br>
                                                    <br>

                                        </table>
                                    </div>



                                    <div class="form-actions">
                                        <div class="text-right">
                                            <button type="button" style="width:100px;margin-bottom:100px;" id="applybtn" class="btn btn-primary" @*btn-min-width mr-1 mb-1*@>Apply<i class="fa fa-check-square-o"></i></button>

                                            @*<a style="width:100px;display:none;" id="btnlist2"  class="btn btn-primary btn-min-width mr-1 mb-1"> List <i class="ft-align-justify"></i></a>*@
                                            <button type="button" style="width:100px;margin-bottom:100px;" id="cancelbtn" class="btn btn-primary" onclick="formrefresh()" @*btn-min-width mr-1 mb-1*@>Cancel<i class="fa fa-check-square-o"></i></button>
                                        </div>
                                    </div>
                                </form>

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

</div>




<script>





                        $(document).ready(function () {
                            $('#dayofjoin,#todaysdate,#leavefrom,#leavesupto').daterangepicker({
                                minDate: minDate,
                                singleDatePicker:true,
                                showDropdowns: true,
                                locale: {
                                    format: 'DD/MM/YYYY'
                                }
                            });

                        });


                        function convertDate(str) {
                            var parts = str.split("/");
                            return new Date(parts[1] + "/" + parts[0] + "/" + parts[2]);
                        }

                        function calcleavedays() {
                            var str1 = $("#leavefrom").val();
                            var str2 = $("#leavesupto").val();
                            var date1 = convertDate(str1);
                            var date2 = convertDate(str2);
                            var diff = (date2 - date1) / (1000 * 60 * 60 * 24);

                            if (diff >= 0)
                            {
                                $('#txtdays').val(diff+1);
                            }
                            else if (diff < 0)
                            {
                                warningshow('Wrong date selection', '');
                                $("#leavefrom").focus();
                                
                            }
                           
                            // alert(diff);
                           
                        }














                            //$("#leavefrom").datepicker({
                            //    minDate: 0,
                            //    maxDate: '+5Y+6M',                               
                            //    onSelect: function (dateStr) {
                            //        var min = $(this).datepicker('getDate'); // Get selected date
                            //        $("#TextBox2").datepicker('option', 'minDate', min || '+5Y+6M'); // Set other min, default to today
                                  
                            //        var start = $("#leavefrom").datepicker("getDate");
                            //        var end = $("#leavesupto").datepicker("getDate");
                            //        var days = (end - start) / (1000 * 60 * 60 * 24);
                            //        $('#txtdays').val(days);

                            //    }
                            //});

                            //$("#leavesupto").datepicker({
                            //    minDate: '0',
                            //    maxDate: '+5Y+6M',
                            //    onSelect: function (dateStr) {
                            //        var max = $(this).datepicker('getDate'); // Get selected date
                            //        $('#datepicker').datepicker('option', 'maxDate', max || '+5Y+6M'); // Set other max, default to +18 months
                            //        var start = $("#leavefrom").datepicker("getDate");
                            //        var end = $("#leavesupto").datepicker("getDate");
                            //        var days = (end - start) / (1000 * 60 * 60 * 24);
                            //        $('#txtdays').val(days);

                            //    }
                            //});




                        
                       



                        $("#bname").autocomplete({
                            source: function (request, response) {
                                var data = {};
                                data.EmpName = $("#bname").val();

                                $.ajax({
                                    url: '../../PayRoll_LeaveApply/employeesearch',
                                    type: "POST",
                                    data: data,
                                    dataType: "json",
                                    success: function (data) {
                                        response($.map(data, function (item) {
                                            return ({
                                                ColCount: '2',
                                                label: item.EmpName,
                                                label1: item.EmpCode,
                                                EmpCode: item.EmpCode,
                                                Name: item.EmpName,
                                                EmpId:item.EmpId,
                                                DeSigId: item.Designation,
                                                DepartmentId: item.Department,
                                                DateofJoin: item.DateofJoin,
                                                Mobile: item.Mobile,
                                                Email: item.Email,
                                                leavetaken: item.leavetaken,
                                                headers: ["Name", "Employee Code"]
                                            })
                                        }));
                                    }
                                })
                            },
                            autoFocus: true,
                            select: function (event, ui) {
                                $('#hiddencode').val(ui.item.EmpId);
                                $('#bname').val(ui.item.Name);
                                $('#DesignationId').val(ui.item.DeSigId);
                                $('#DepartmentId').val(ui.item.DepartmentId);
                                $('#DateofJoin').val(ui.item.DateofJoin);
                                $('#Mobile').val(ui.item.Mobile);
                                $('#Email').val(ui.item.Email);
                                $('#leavetaken').val(ui.item.leavetaken);
                               

                                var a = 30;
                                $('#annualleave').text(a);

                               $('#leavetaken').text(ui.item.leavetaken);
                               var b = $('#leavetaken').val();

                                $('#availableleave').text(a-b);

                                $('#img1').attr('src', "../ProjectImages/Employee/" + ui.item.EmpId + ".png");
                              
                                getemployeedetails(ui.item.EmpId);
                            },
                        });

                        function getemployeedetails(id)
                        {
                            var data = {};
                            data.EmpId = id;
                            $.ajax({
                                type: "POST",
                                url: "../Master/EmployeeGetandGets",
                                data: data,
                                success: function (result) {
                                    var r = result;
                                    $('#DesignationId').val(result.oList[0].DesignationCode)                                   
                                    $('#DepartmentId').val(result.oList[0].DepartmentName)
                                    $('#DateofJoin').val(result.oList[0].DateofJoin)
                                    $('#Mobile').val(result.oList[0].Mobile)
                                    $('#Email').val(result.oList[0].Email)

                                    $('#DesignationId').prop('disabled', true)
                                    $('#DepartmentId').prop('disabled', true)
                                    $('#DateofJoin').prop('disabled', true)
                                    $('#Mobile').prop('disabled', true)
                                    $('#Email').prop('disabled', true)
                                }
                            });
                        }


</script>
@*-------------------------$$$$$$$$$$--------------------------*@