{{View::make('layout.header')}}

<style>
   

    .select-filter{
        font-size: 1rem !important;
        width: 150px;
    }

    .select-filter:focus{
        border-color: #d8d6de !important;
    }

    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
        display : none;
    }
    
    table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {
    padding-right: 8px;
    }
    .flatpickr-calendar {
        width:100%;
        box-shadow: unset;
    }
    #barcontent1 .col-md-3{
        padding-right: 4%;
    }
    .applyleaveright{
        margin-bottom:7px;
    }
</style>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script> 
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">E-Leave</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setup')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Compulsory Leave</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
               

            </div>
            <div class="content-body">
                <section id="dashboard-ecommerce">
                    <div class="row match-height">
                        
                        <div class="col-xl-12 col-md-12 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        <h4 class="card-title">Compulsory Leave</h4>
                                    </div>
                                </div>
                                <div class="card-body" style="padding-top:0px">
                                    <div class="row" id="leave" >
                                        
                                        <article class="col-sm-12 col-md-12 col-lg-6">
                                            <div class="left2c">
                                                <ul class="leave" style="list-style:none; padding:0px">
                                                    <li class="applyleaveleft">Leave Type &nbsp;:&nbsp;</li>
                                                    <li class="applyleaveright">
                                                        <select class="form-control" id="leavetype" name="leavetype">
                                                            @foreach($leaveTypes as $type)
                                                                <option value="{{ $type->type }}" {{request()->get('type') && request()->get('type') == $type->name ? 'selected' : '' }}>{{ $type->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </li>
                                                    <li class="applyleaveleft">Half Day / Full Day &nbsp;:&nbsp;</li>
                                                    <li class="applyleaveright">
                                                        <div>
                                                            <input type="radio" name="half_full" id="half_full" class="tcal" value="1" onclick="print_list();"/>Half Day&nbsp;&nbsp;&nbsp;&nbsp;
                                                            <input type="radio" name="half_full" id="half_full" class="tcal" value="0" checked="checked" onclick="print_list_hide();"/>Full Day
                                                        </div>
                                                    </li>
                                                    <span id="print"></span>
                                                        <li class="applyleaveleft">Leave Start Date &nbsp;:<span class="red">*</span>&nbsp;</li>

                                                        <li class="applyleaveright"><div><input type="text" name="lstartdate" id="lstartdate" class="form-control flatpickr-basic"  placeholder="DD-MM-YYYY" data-dateformat="dd-mm-yy" /></div></li>

                                                        <span id="dntprint"><li class="applyleaveleft">Leave End Date &nbsp;:&nbsp;</li>

                                                        <li class="applyleaveright"><div><input type="text" name="lenddate" id="lenddate" class="form-control flatpickr-basic"  placeholder="DD-MM-YYYY" data-dateformat="dd-mm-yy" /></div></li></span>

                                                        

                                                        <li class="applyleaveleft">Total Leave Days &nbsp;:&nbsp;</li>

                                                        <li class="applyleaveright"><input type="text" name="totalldays" value=""  class="inptxt form-control" id="totalldays" readonly onfocus="calculatedys();"/></li>

                                                        <li class="applyleaveleft">Reason &nbsp;:<span class="red">*</span>&nbsp;</li>

                                                        <li class="applyleaveright"><textarea name="reason" id="reason" class="inptxt form-control" style="height:66px" onkeypress=" return check_length(this, document.getElementById('count_number_words'), document.getElementById('show_remaining_words'));"></textarea>

                                                        

                                                        <div style="display:none">

                                                            <font color="black">Word count:</font>

                                                            <font color="red"><span id="count_number_words">0</span></font><br>

                                                            <font color="black">Words remaining: </font>

                                                            <font color="red"><span id="show_remaining_words">50</span></font> 

                                                        </div>
                                                    </li>

                                                </ul>
                                                
                                            </div>

                                        </article>
                                        <article class="col-sm-12 col-md-12 col-lg-6">
                                                    <div class="right2c">

                                                    <ul class="leave" style="list-style:none; padding:0px">

                                                        <li class="applyleaveleft">Select Branch &nbsp;:&nbsp;</li>

                                                        <li class="applyleaveright">

                                                            <select class="form-control" name="branch" id="branch"  onchange="empselect();"></select></li>

                                                        <li class="applyleaveleft">Select Department &nbsp;:&nbsp;</li>

                                                        <li class="applyleaveright">

                                                            <select class="form-control" name="department" id="department"  onchange="empselect();"></select></li>

                                                        <li class="applyleaveleft">Select Category &nbsp;:&nbsp;</li>

                                                        <li class="applyleaveright">

                                                            <select class="form-control" name="category" id="category"  onchange="empselect();"></select></li>

                                                    </ul>

                                                    <div class="addremove">
                                                        <div class="table-responsive table-list">
                                                            <table border="0" cellpadding="3" id="list_emp" cellspacing="0"></table>
                                                        </div>
                                                    </div>

                                                    <ul class="leave" style="list-style:none; padding:0px">

                                                        <li class="applyleaveright" style="margin-top:10px"><span id="message"></span></li>

                                                        <li class="applyleaveright" style="margin-top:10px">

                                                            <input type="button" value="Apply" class="btn btn-info" onclick="apply_Leave()"/>

                                                            <input onclick="clear_form('#leave')" class="btn btn-danger" type="button" value="Cancel"/></li>

                                                    </ul></div>
                                        </article>
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="card ">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        <h4 class="card-title">Compulsory Leave List</h4>
                                    </div>
                                    <div class="btn-group">
                                        
                                        <div class="">
                                            <button onclick="more_filter()" class="btn btn-primary waves-effect waves-float waves-light" style="">Filter</button>
                                        </div>&nbsp;
                                                                            </div>
                                </div>
                                <div class="card activity filter-container" style="margin: 0px 15px; background-color:#e6e5e5; padding:10px 20px 20px 20px; display:none !important;" id="empleavetoday">
                                    <div class="row">
                                        <div class="col-md-12" style="padding:0px;">
                                            <button id="spanclose" onclick="more_filter()" style="float:right;border:0px;background-color:transparent;color:white;padding: 3px 8px 5px;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x cursor-pointer font-large-1" data-repeater-delete=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-3 filter-form-group mb-1">
                                                Category &nbsp;:<span class="red">*</span>&nbsp;
                                                <select class="select form-control" id="category_id1" name="category_id1">
                                                    <option value="">All</option>
                                                    @foreach($categories as $cat)
                                                        <option value="{{ $cat->id }}" {{request()->get('category_id') && request()->get('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Department &nbsp;:<span class="red">*</span>&nbsp;
                                            <select class="select form-control" id="department_id1" name="department_id1">
                                                            <option value="">All</option>
                                                            @foreach($departments as $dept)
                                                            <option value="{{ $dept->id }}" {{request()->get('department_id') && request()->get('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                                                            @endforeach

                                                            </select>
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Branch &nbsp;:<span class="red">*</span>&nbsp;
                                            <select class="select form-control" id="branch_id1" name="branch_id1">
                                                <option value="">All</option>
                                                
                                                @foreach($branches as $branch)
                                                    <option value="{{ $branch->id }}" {{request()->get('branch_id') && request()->get('branch_id') == $dept->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                        <div class="col-sm-3 filter-form-group mb-1">
                                            Employee Name &nbsp;:
                                            <input type="text" name="name1" id="name1" placeholder="Enter Name" class="tcal form-control datepicker" data-dateformat="dd-mm-yy">
                                        </div>
                                        
                                        <div class="col-sm-6 filter-form-group" style="">
                                            <input type="button" value="Apply" onclick="search();" class="filter-apply btn btn-info" />
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card-body" style="padding-top:0px;">
                                    <div class="table-responsive" style="overflow-x: unset !important;">
                                    <div class="table-responsive" style="overflow-x: unset !important;">
                                        <table class="table table-striped" id="reporttable" style=" font-size:12px;">
                                            <thead>
                                                <tr>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Emp No.</th>
                                                    <th style="text-transform: capitalize; border: none;" width="20%">Name</th>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Department</th>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Branch</th>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Category</th>
                                                   <th style="text-transform: capitalize; border: none;" width="10%">Date</th>
                                                    <th style="text-transform: capitalize;white-space: nowrap; border: none;" width="5%">Days</th>
                                                    <th style="text-transform: capitalize; border: none;" width="20%">Reason</th>
                                                    <th style="text-transform: capitalize; border: none;" width="5%">Edit</th>
                                                    <th style="text-transform:capitalize; text-align:center;white-space: nowrap; border: none;" width="2%"><input type="checkbox" id="checkAll" ></th>

                                                 </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>

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



                            </div>
                        </div>

                    </div>
                </section>
                <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">
                            
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure want delete the compulsory leave(s)?</h5>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-danger reject-btn">OK</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- END: Content-->
    {{View::make('layout.footer')}}
    @include('inc.compulsoryleave-modal')
<script>
    var frmtime = "";

    var totime = "";

    var maxwords = 30; 
    var x = document.getElementById("empleavetoday");
    x.style.display = "none";


    function more_filter() {
    var x = document.getElementById("empleavetoday");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
    function update(){
        $.ajax({
            type:'get',
            data: {
                
                leave_id: $("#leave_id").val(),
                id: $("#compulsoryleave_id").val(),
                employee_id:$("#e_id").val(),
                type:$("#type").val(),
                is_half_day:$("#is_half_day").val(),
                status:$("#status").val(),
                start_date: $("#start_date").val().split("-").reverse().join("-"),
                end_date: $("#end_date").val().split("-").reverse().join("-"),
                no_days: $("#no_days").val(),
                reason: $("#reason1").val(),
                
            },
            url:'{{ route('editCompulsoryLeave')}}',
                success:function(data) {
                    window.location.reload();
                }

            });

    }

    $(document).on('click', '.reject-btn', function() {
        var count = $('input[name="inlineRadioOptions"]:checked').length;
            
            $.each($('input[name="inlineRadioOptions"]:checked'), function(){
                var str =$(this).val();
                var url = '{{route('deleteCompulsoryLeave')}}';
                    $.ajax({
                        url:url,
                        type:'POST',
                        data:{
                            '_token' : "{{ csrf_token() }}",
                            'id' : str,
                        },
                        success:function(e){
                        
                        },
                        error:function(w){
                        }
                    });
              });
           
            window.location.reload();
    });
   

    function apply_Leave(){	


        if(validate()){
            
            var options = document.getElementById("target").options;
            var rad = $('input[name=half_full]:checked').val();
            for(var i = 0; i < options.length; i++){

                $.ajax({
                    url:'{{route('addCompulsoryLeave')}}',
                    type:'get',
                    data:{
                        '_token' : "{{ csrf_token() }}",
                        employee_id: options[i].value,
                        type: $("#leavetype").val(),
                        is_half_day: $("input[name = half_full]:checked").val(),
                        half_day_type:$("#half_day_type").val(),
                        start_time: frmtime,
                        end_time: totime,
                        start_date: $("#lstartdate").val(),
                        end_date: $("#lenddate").val(),
                        no_days: $("#totalldays").val(),
                        reason: $("#reason").val(),
                    },
                    success:function(data){
                        var resObj = data;
                        var messege = resObj.result;
                        if(messege ==  true){
                            showMessage("Leave added successfully");
                            clear_form('#leave');
                            showList();

                        }	
                        else if(messege == false)
                        {
                            showMessage("Already added");
                            clear_form('#leave');
                                    
                        }
                        else
                            showError("Error Occured");
                    
                    },
                    error:function(w){
                    }
                });

            }

        }
    }

    function validate(){

        var vlstartdate = $("#lstartdate").val();
        var vreason = $("#reason").val();
        if(vlstartdate == ""){
            displayred();
            return false;
        }
        else if(vreason == ""){
            displayred();
            return false;
        }
        else{
            return true;
        }
    }

    function displayred(){
        $(".red").css("display", "inline");
    }
     
    function showMessage(message){
        $("#message").html("<span style='color:green;'>" + message + "</span>");
    }
    function showError(message){
        $("#message").html("<span style='color:red;'>" + message + "</span>");
    }
    function calculatedays(){	

        var rad = $('input[name=half_full]:checked').val();
        if(rad == "1")
            $("#totalldays").val("0.5");
        else{
            $.ajax({
                type:'get',
                data: {
                    
                    username: $("#emplylist").val(),
                    half_day_type:$("#half_day_type").val(),
                    is_half_day: $("input[name = half_full]:checked").val(),

                    start_date: $("#lstartdate").val(),

                    end_date: $("#lenddate").val(),
                    
                },
                url:'{{ route('getLeaveDaysCount')}}',
                    success:function(data) {
                        var resObj = data;
                        var html;	

                        $("#totalldays").val(resObj.no_leave_days);
                    }

            });

        }	

    }

    function calculatedys(){

        var rad = $('input[name=half_full]:checked').val();

        if(rad == "1")

            $("#totalldays").val("0.5");

        else{	

            var date1 = document.getElementById("lstartdate").value;

            var date2 = document.getElementById("lenddate").value;   

            var date1 = date1.split("-");

            

            var year = date1[0]; var month = date1[1]; var day =  date1[2]; 

            date1=new Date(year, month - 1, day) 

            var date2 = date2.split("-");

            year = date2[0];  month = date2[1];  day =  date2[2]; 

            //alert(date2);
            date2=new Date(year, month - 1 , day) //Month is 0-11 in JavaScript

            

            var diff = days_between(date1,date2);

            document.getElementById("totalldays").value = diff + 1;

        }	

    }

    function days_between(date1, date2) {

        var ONE_DAY = 1000 * 60 * 60 * 24
        var date1_ms = date1.getTime()
        var date2_ms = date2.getTime()

        var difference_ms = Math.abs(date1_ms - date2_ms)

        return Math.round(difference_ms/ONE_DAY)

    }

    function print_list(){

        var html = "";

        $("#dntprint").hide();

        html += '<li class="applyleaveleft">Half Day Type &nbsp;:&nbsp;</li>';

        html += '<li class="applyleaveright"><select name="half_day_type" id="half_day_type" class="select form-control"><option value="first">First Half</option><option value="second">Second Half</option></select></li>';

        html += '<div style="display:flex"><div style="width:50%; margin:2px;"><li class="applyleaveleft">From Time &nbsp;:&nbsp;</li>';

        html +=	'<li class="applyleaveright"><div class="frm"><input type="text" name="time" class="form-control" value="" id="frmtime" style=""/>';

        html += '</div><div><input type="radio" name="fampm" class="" value="fam" id="fam" onclick="timefrm();" />AM&nbsp;&nbsp;';

        html += '<input type="radio" name="fampm" class="" value="fpm" id="fpm" onclick="timefrm();" />PM';

        html += '</div></li></div>';

        html += '<div style="width:50%; margin:2px;"><li class="applyleaveleft">To Time&nbsp;:&nbsp;</li>';

        html +=	'<li class="applyleaveright"><div class="frm"><input type="text" name="time" class="form-control" value="" id="ttime" style=""/>';

        html += '</div><div><input type="radio" name="tampm" class="" value="tam" id="tam" onclick="timeto();"/>AM&nbsp;&nbsp;';

        html += '<input type="radio" name="tampm" class="" value="tpm" id="tpm" onclick="timeto();"/>PM';

        html += '</div></li></div></div>';

        $("#print").html(html);

        $("#print").show();

    }



    function timefrm(){

        if(document.getElementById('fam').checked) {

            frmtime =$("#frmtime").val();

        }else if(document.getElementById('fpm').checked) {

            frmtime =$("#frmtime").val();

            frmtime=parseInt(frmtime)+12;

        }

    }

    function timeto(){

        if(document.getElementById('tam').checked) {

            totime =$("#ttime").val();

        }else if(document.getElementById('tpm').checked) {

            totime =$("#ttime").val();

            totime=parseInt(totime)+12;

        }

    }



    function print_list_hide(){

        $("#print").hide();

        $("#dntprint").show();

    }

    function clear_form(ele) {

        $(ele).find(':input').each(function(){

            switch(this.type) {

                case 'password':

                case 'select-multiple':

                case 'select-one':

                case 'text':

                case 'textarea':

                    $(this).val('');

                    break;

                case 'checkbox':

                case 'radio':

                    this.checked = false;

            }

        });

    }

    function check_length(obj, cnt, rem){  

        var ary = obj.value.split(" ");  

        var len = ary.length;  

        cnt.innerHTML = len;  

        rem.innerHTML = maxwords - len;  

        if (len > maxwords) {  

            alert("Message in '" + obj.name + "' section is limited to " + maxwords + " words.");  

            ary = ary.slice(0,maxwords-1);  

            obj.value = ary.join(" ");  

            cnt.innerHTML = maxwords;  

            rem.innerHTML = 0;  

            return false;  

        }  

        return true;  

    }  

    function redirect(){

        window.location.reload();

    }

    $("#emplevsearch").click(function(){

        $("#empleavetoday").css('display','block');

        $("#spanclose").css('display','block');

    });

    $("#spanclose").click(function(){

        $("#empleavetoday").css('display','none');

        $("#spanclose").css('display','none');

    });

    $(".apply").click(function(){

        $("#empleavetoday").css('display','none');

        $("#spanclose").css('display','none');

    });

    $(".edc").click(function() {

        $("#ed_list").slideUp('slow');

    });

    $(".ed1").click(function(event) {

        $('#ed_list1').css({position:"absolute",'left':300,'top':event.pageY}).slideDown('slow');

    });

    $(".edc1").click(function() {

        $("#ed_list1").slideUp('slow');

        
    });

    function sureTransfer(from, to, all) {
        if ( from.getElementsByTagName && to.appendChild ) {
            while ( getCount(from, !all) > 0 ) {
                transfer(from, to, all);
            }
        }
    }
    function getCount(target, isSelected) {
        var options = target.getElementsByTagName("option");
        if ( !isSelected ) {
            return options.length;
        }
        var count = 0;
        for ( i = 0; i < options.length; i++ ) {
            if ( isSelected && options[i].selected ) {
                count++;
            }
        }
        return count;
    }
    function transfer(from, to, all) {
        if ( from.getElementsByTagName && to.appendChild ) {
            var options = from.getElementsByTagName("option");
            for ( i = 0; i < options.length; i++ ) {
                if ( all ) {
                    to.appendChild(options[i]);
                } else {
                    if ( options[i].selected ) {
                        to.appendChild(options[i]);
                    }
                }
            }
        }
    }


</script>

<script>
    var currentMonth = (new Date).getMonth();
    var pageStart = 0;
    var noPages = 1;
    var currentPage = 1;
    var sdat;
    var leaveno;
    var empno;
    var resObj;
    var leaveNameArray = new Array();

    $(document).ready(function(){
        $(document).mousemove(function(e){
            top_pos = e.pageY;
            top_pos = top_pos-150;
        }); 
        getLeaveName();
        $('#reporttable').DataTable({
                "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
                "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": true,
		        "ajax": "{!! route('getCompulsoryLeaveList') !!}",

                "columns": [


                    { data: 'employee_no', name: 'employee_no' },
                    { data: 'name', name: 'name' },
                    { data: 'department', name: 'department' },
                    { data: 'branch', name: 'branch' },
                    { data: 'category', name: 'category' },
                    { data: 'start_date', name: 'start_date',
                        "render": function (data,type,row,meta){
                            var ldate =  row.start_date.split("-").reverse().join("-");
                   
                        return ldate;
                    } },
                    { data: 'no_days', name: 'no_days' },
                    { data: 'reason', name: 'reason' },
                    { "render": function (data,type,row,meta){
                        var edit = '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.id+'" style="color:#3192F4;"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><circle cx="12" cy="12" r="3"></circle><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg></a>&nbsp;';
                        
                        return edit;
                   } },
                    { "render": function (data,type,row,meta){
                        
                        var dlt = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.id+'"/>';
                          
                        return dlt;
                   } },
                   



                ],

                "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
                'columnDefs': [{
                    "targets": [9],
                    "orderable": false
                }],
                'rowCallback': function(row, data, index){
                    $(row).find('td:eq(6)').css('text-align', "center");
                    $(row).find('td:eq(8)').css('text-align', "center");
                    $(row).find('td:eq(9)').css('text-align', "center");

                }


		});
    });

    function search(){
        var branch = document.getElementById("branch_id1").value;
        var department = document.getElementById("department_id1").value;
        var category = document.getElementById("category_id1").value;
        var name = document.getElementById("name1").value;
        
        var string_url = "getCompulsoryLeaveList?branch_id="+ branch +"&department_id="+ department +"&category_id="+ category+"&name="+name;

        $('#reporttable').DataTable({
            "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": string_url,

            "columns": [


                    { data: 'employee_no', name: 'employee_no' },
                    { data: 'name', name: 'name' },
                    { data: 'department', name: 'department' },
                    { data: 'branch', name: 'branch' },
                    { data: 'category', name: 'category' },
                    { data: 'start_date', name: 'start_date',
                        "render": function (data,type,row,meta){
                            var ldate =  row.start_date.split("-").reverse().join("-");
                   
                        return ldate;
                    } },
                    { data: 'no_days', name: 'no_days' },
                    { data: 'reason', name: 'reason' },
                    { "render": function (data,type,row,meta){
                        var edit = '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.id+'" style="color:#3192F4;"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><circle cx="12" cy="12" r="3"></circle><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg></a>&nbsp;';
                        
                        return edit;
                   } },
                    { "render": function (data,type,row,meta){
                        
                        var dlt = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.id+'"/>';
                          
                        return dlt;
                   } },
                   



                ],

                "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
                'columnDefs': [{
                    "targets": [9],
                    "orderable": false
                }],
                'rowCallback': function(row, data, index){
                    $(row).find('td:eq(6)').css('text-align', "center");
                    $(row).find('td:eq(8)').css('text-align', "center");
                    $(row).find('td:eq(9)').css('text-align', "center");

                }


        });
    }
    function getLeaveName(){
        $.ajax({
            type:'get',
            url:'{{ route('getLeaveName')}}',
            success:function(data) {
                var options = '';
                for(var i = 0; i < data.length; i++)
                {
                    leaveNameArray[data[i]['type']] = data[i]['name'];
                    options +='<option value="'+data[i]['type']+'">'+data[i]['name']+'</option>';
                }
                $("#leavetype").html(options);
                $("#leaveetype").html(options); 
                getuser();
            }

        });
    }
    function getuser(){
        $.ajax({
            type:'get',
            url:'{{ route('getAllUsers')}}',
            success:function(resObj) {
                var html = "";		
                html += '<tr><td><select id="source" name="source" class="select form-control" style="height:155px;width:100%; overflow:scroll;padding-right:5px;" multiple>';
                for(var i = 0; i < resObj.length; i++){
                    html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';
                }
                html += '</select></td><td>';
                html += '<input type="button" class="add btn btn-success" id="src2TargetAll" name="src2TargetAll" style="margin-bottom: 3px; width:100%;" value="Add >>"/><br/>';
                html += '<input type="button" class="add btn btn-success" id="src2Target" style="margin-bottom: 3px; width:100%;" name="src2Target" value="Add >"/><br/>';
                html += '<input type="button" style="margin-bottom: 3px; width:100%;" class="remove btn btn-danger" id="target2Src" name="target2Src" value="< Remove"/><br/>';
                html += '<input type="button" class="remove btn btn-danger" style="width:100%;" id="target2SrcAll" name="target2SrcAll" value="<< Remove"/><br/>';
                html += '</td><td> <select id="target" name="target" class="select form-control" style="height:155px;width:100%; overflow:scroll; padding-right:5px;" multiple></select></td></tr>';			
                $("#list_emp").html(html);
                selempsec();
                getDepartment();
            }

        });	
    }
    function selempsec() {
        document.getElementById("src2TargetAll").onclick = function() {
            sureTransfer(document.getElementById("source"), document.getElementById("target"), true);
        };
        document.getElementById("src2Target").onclick = function() {
            sureTransfer(document.getElementById("source"), document.getElementById("target"), false);
        };
        document.getElementById("target2SrcAll").onclick = function() {
            sureTransfer(document.getElementById("target"), document.getElementById("source"), true);
        };
        document.getElementById("target2Src").onclick = function() {
            sureTransfer(document.getElementById("target"), document.getElementById("source"), false);
        };
    }	
    
    function getDepartment(){
        $.ajax({
            type:'get',
            url:'{{ route('getdepartmentList')}}',
            success:function(resObj) {
                var html1 = "";
                html1 += '<option value="">Click to Choose one</option>';
                for(var i = 0; i < resObj.length; i++){
                    html1 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                }
                $("#department").html(html1);
                $("#edepartment").html(html1);
                getCategory();
            }

        });	
    }
    function getCategory(){
        $.ajax({
            type:'get',
            url:'{{ route('getcategoryList')}}',
            success:function(resObj) {
                var html2 = "";
                html2 += '<option value="">Click to Choose one</option>';
                for(var i = 0; i < resObj.length; i++){
                    html2 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                }
                $("#category").html(html2);
                $("#ecategory").html(html2);
                getBranch();
            }

        });	
    }
    function getBranch(){	
        $.ajax({
            type:'get',
            url:'{{ route('getbranchList')}}',
            success:function(resObj) {
                var html3 = "";
                html3 += '<option value="">Click to Choose one</option>';
                for(var i = 0; i < resObj.length; i++){
                    html3 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                }
                $("#branch").html(html3);
                $("#ebranch").html(html3);
                showList();
            }

        });	
    }

    function showList(){   
        search();
    }

    function empselect(){
        $.ajax({
            type:'get',
            url:'{{ route('getGroupedUsers')}}',
            data:{
                department_id:$("#department").val(),
                branch_id:$("#branch").val(),
                categoryId:$("#category").val(),
            },
            success:function(resObj) {
                var html = "";
                for(var i = 0; i < resObj.length; i++)
                    html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';
                $("#source").html(html);
            }

        });	
    }

</script>
<script>

     
    $("#checkAll").click(function(){
            $('.reject-visible-btn').attr('disabled', false);
            $('input:checkbox').not(this).not(":disabled").prop('checked', this.checked);
    });

    $(document).on('click', 'input[name="inlineRadioOptions"]', function() {
            $('.reject-visible-btn').attr('disabled', false);
        });

</script>