@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
@section('content')
<style>
    .modal_tbl table tbody tr, .modal_tbl table thead tr{
        width: 667px !important;
    }
    .modal-content {
        width: 670px !important;
        margin-left: 70px !important;
    }
    .content{
        width: 1228px !important;
        margin-left: 1px !important;
        margin-top: -1px !important;
    }
    .modal-body{
        padding: 0px !important;
    }
    .search_btn {
        margin-right: -8px;
        margin-left: 3px;
    }
    .table_dropdown {
        margin-left: 4px;
    }
    .datepicker {
        left: 40% !important;
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }
    ::placeholder {
      color: blue;
    }
    input[type='checkbox']
    {
        width: 13px;
        height: 13px;
        margin-top: -3px;
    }
    .bg-bottom {
        background: #CCC;
    }
    .text-center {
        text-align: center !important;
    }
    .expense_table form table {
        margin-left: 0px;
    }
    .deduct-al-btn{
        width: 123px;
        margin-right: -1px !important;
    }
    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 119px !important;
        padding: 7px 15px;
    }
    .table table tr {
        display: table;
        width: 1208px !important;
        box-sizing: border-box;
    }
    .table table thead {
        display: table;
        width: 100%;
    }
    .table table tbody {
        display: block;
        max-height: 550px;
        overflow-y: auto;
        width: 1208px;
        overflow-x: hidden !important;
    }
</style>
<div class="breadcrum">
    HR Services / Attendance & Leave / Analytics / <span class="text-primary">LWOP Report</span>
</div>
<section class="expense">
    <div class="row">
        <div class="col-md-12">
            <div class="float-right">
                <span class="travel_report_download font_weight_bold">[&nbsp;Download</span>
                <!-- <a href="#" data-key="pdf" class="travel_report_download excel_lwop">PDF</a>
                <span class="travel_report_download">/</span> -->
                <a href="" data-key="csv" class="excel_lwop">XLS</a>
                <span class="travel_report_download font_weight_bold">&nbsp;]</span>
            </div>
        </div>
        <div class="container-fluid">
            <div class="expense_header reason_box_width margin_left_one">
                <div class="expense_table">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="expense_table_hader">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="header_left">
                                            LWOP Report
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-3px;">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="main_dropdown_div">
                                                            <button class="search_btn align_search_btn deduct-al-btn">Deduct Annual Leaves</button>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width department_select">
                                                                <option value="">Department</option>
                                                                @foreach($departments as $key =>$value)
                                                                    @php $value = (object)$value; @endphp
                                                                    <option value="{{$value->id}}">{{$value->department_name}}</option>
                                                                @endforeach()
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width employee_select">
                                                                <option value="">Employee</option>
                                                                @foreach($employees as $key =>$value)
                                                                    @php $value = (object)$value; @endphp
                                                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                                                @endforeach()
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <input type="text" class="start_date table_dropdown common_dropdown_properties dateselect datepicker_size" placeholder="From Date" value="{{date('Y-m-25', strtotime('-1 month'))}}" onclick="this.focus();" readonly="readonly"/>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <input type="text" class="end_date table_dropdown common_dropdown_properties dateselect datepicker_size" placeholder="To Date" value="{{date('Y-m-d')}}" onclick="this.focus();" readonly="readonly"/>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <select name="find_by" id="find_by" class="table_dropdown common_dropdown_properties dropdown_width">
                                                                <option value="">Quick Search</option>
                                                                <option value="emp_code" selected>Employee Code</option>
                                                                <option value="emp_name">Employee Name</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <input type="text" id="keyword" class="table_dropdown common_dropdown_properties datepicker_size" />
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div">
                                                            <button class="search_btn align_search_btn submit_btn_filter">Search</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table lwop_table">
                                <form action="" method="POST" id="deduct-al-form" style="margin-bottom: 0px;">
                                    @csrf
                                    <input type="hidden" name="start_date" value="{{date('Y-m-25', strtotime('-1 month'))}}">
                                    <input type="hidden" name="end_date" value="{{date('Y-m-d')}}">
                                    <input type="hidden" name="temp_deduct" value="1">
                                <table>
                                    <thead>
                                        <tr>
                                            <th><div class="margin_left_thirteen">Emp Code</th>
                                            <th>Name</th>
                                            <th>After 30 Min.</th>
                                            <th style="width: 13%;">3 cons After 10 Min.</th>
                                            <th style="width: 2%;">LWOP</th>
                                            <th>Absent</th>
                                            <th>Total LWOP</th>
                                            <th>AL Balance</th>
                                            <th>AL Deduction</th>
                                        </tr>
                                    </thead>
                                    <tbody id="lwop_data">
                                        @if(count($data) > 0)
                                        @foreach ($data as $dat )
                                        @php $dat = (object)$dat; @endphp
                                        <input type="hidden" name="emp_id[]" value="{{$dat->emp_id}}">
                                        <input type="hidden" name="al_balance[]" value="{{$dat->emp_annual_leaves_for_calc}}">
                                        <input type="hidden" name="total_lwop[]"
                                               value="{{$dat->count_after_930+$dat->count_after_930_dis+$dat->count_absent+$dat->count_absent_dis+$dat->count_dates_consecutive}}">
                                        <input type="hidden" name="dates_after_nine_ten[]" value="{{$dat->dates_after_930}}">
                                        <input type="hidden" name="dates_absent[]" value="{{$dat->absent_dates}}">
                                        <input type="hidden" name="dates_consecutive[]" value="{{$dat->dates_consecutive}}">
                                        <input type="hidden" name="salary_deduction[]" value="{{$dat->salary_deduction}}">
                                        <input type="hidden" name="al_deduction[]" value="{{$dat->emp_annual_leaves_deduction}}">
                                        <input type="hidden" class="exclude_emp_930" name="exclude_emp_930">
                                        <input type="hidden" class="exclude_emp_consecutive" name="exclude_emp_consecutive">
                                        <input type="hidden" class="exclude_emp_absent" name="exclude_emp_absent">
                                        <tr>
                                            <td><div class="margin_left_twelve">{{$dat->emp_code}}</div></td>
                                            <td> <input type="checkbox" name="exclude_emp_id[]" value="{{$dat->emp_id}}" class="margin_right_five">{{$dat->emp_name}}</td>
                                            <td>
                                                @if (($dat->count_after_930 + $dat->count_after_930_dis) > 0)
                                                    <a href="javascript:;" class="pop-btn" emp-name="{{$dat->emp_name}}"
                                                    function = "removeAfter930({{$dat->emp_id}})"
                                                       data-title="After 9:30 am"
                                                       dates-leaves="{{$dat->date_time_after_930}}"
                                                       dates-dis="{{$dat->dates_after_930_dis}}">
                                                        {{$dat->count_after_930 + $dat->count_after_930_dis}}
                                                    </a>
                                                @else 0 @endif
                                            </td>
                                            <td>
                                                @if (($dat->count_dates_consecutive) > 0)
                                                    <a href="javascript:;" class="pop-btn" emp-name="{{$dat->emp_name}}"
                                                    function = "removeConsecutive({{$dat->emp_id}})"
                                                       data-title="Consecutive late after 9:10 am"
                                                       dates-leaves="{{$dat->dates_consecutive}}"
                                                       dates-dis="">
                                                        {{$dat->count_dates_consecutive}}
                                                    </a>
                                                @else 0 @endif
                                            </td>
                                            <td>
                                                @if (($dat->count_lwop) > 0)
                                                    <a href="javascript:;" class="pop-btn" emp-name="{{$dat->emp_name}}"
                                                       data-title="Leave Without Pay"
                                                       dates-leaves=""
                                                       dates-dis=""
                                                       dates-lwop="{{$dat->dates_lwop}}">
                                                        {{$dat->count_lwop}}
                                                    </a>
                                                @else 0 @endif
                                            </td>
                                            <td class="absent">
                                                @if (($dat->count_absent + $dat->count_absent_dis) > 0)
                                                    <a href="javascript:;" class="pop-btn" emp-name="{{$dat->emp_name}}"
                                                        emp-id = "{{$dat->emp_id}}"
                                                        function = "removeAbsent({{$dat->emp_id}})"
                                                       data-title="Leave / Absent"
                                                       dates-leaves="{{$dat->format_absent_dates}}"
                                                       dates-dis="{{$dat->absent_dates_dis}}"
                                                       >
                                                        {{$dat->count_absent + $dat->count_absent_dis}}
                                                    </a>
                                                @else 0 @endif
                                            </td>
                                            <td class="total_lwop">{{$dat->count_after_930 + $dat->count_after_930_dis + $dat->count_absent + $dat->count_absent_dis + $dat->count_dates_consecutive + $dat->count_lwop}}</td>
                                            <td>{{$dat->emp_annual_leaves}}</td>
                                            <td>
                                                <strong>
                                                    @if ($dat->emp_annual_leaves_deduction < 0)
                                                        {{$dat->emp_annual_leaves_deduction}}
                                                    @endif
                                                </strong>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @else
                                            <tr>
                                                <td colspan="9" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                                </form>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelinfoModal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal_content">
                <div class="modal-header">
                    <span class="modal-title modal_title w-100" id="myModalLabelinfoModal"></span>
                    <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="padding-top: 5px;">
                        <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
                    </a>
                </div>
                <div class="modal-body modal_body" style="width: 700px !important;">
                    <div class="table content info_tbl">
                    </div>
                </div>
                <div class="modal-footer amortization_modal">
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    // $('.dateselect').datepicker({
    //     format: 'yyyy-mm-dd',
    // }).on('changeDate', function(e) {
    //     $('.datepicker').hide();
    // });
    endDate = new Date();
    endDate.setDate(endDate.getDate() + 2);
    $('.start_date').datepicker({
        format: 'yyyy-mm-dd',
        endDate: endDate
    }).on('changeDate', function(e) {
        $('.end_date').val('');
        $(".end_date").datepicker("destroy");
        var newdate = $('.start_date').val();
        $('.datepicker').hide();
        $('.end_date').datepicker({
            format: 'yyyy-mm-dd',
            startDate: newdate,
            endDate: endDate
        }).on('changeDate', function(e) {
            $('.datepicker').hide();
        });
    });
    var department_id=null;
    var employee_id=null;
    var sDate=null;
    var eDate=null;
    var find_by=null;
    var keyword=null;
    var skip = 0;
    var flag=false;
    var load_table = true;
    $(document).on('click', '.deduct-al-btn', function () {
        if(confirm('Are you sure you want to deduct Annual Leaves?')){
            $('#deduct-al-form').submit();
        };
    });
    $('body').on('click', '.excel_lwop', function(e) {
        e.preventDefault();
        $( ".loader-wrapper" ).html('<div id="loader-body1" class="loading" ><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div></div>');
        $( ".loader-wrapper" ).show();
        var type=$(this).attr('data-key');
        $.ajax({
            url: $('.base_url').val()+'api/leave/report/lwop/download',
            type: "POST",
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data:{department_id:department_id,employee_id:employee_id,sDate:sDate,eDate:eDate,find_by:find_by,keyword:keyword,type:type},
            success:function(data){
                removeLoader();
                var fileName='../../../../../../uploads/lwop.'+type;
                download(fileName,'lwop.'+type);
            },
       });

    });
    $('body').on('click', '.submit_btn_filter', function() {
        sDate = $('.start_date').val();
        eDate = $('.end_date').val();
        keyword = $('#keyword').val();
        find_by = $("#find_by").val();
        department_id=$('.department_select').val();
        employee_id=$('.employee_select').val();
        find_by=$('#find_by').val();
        flag = true;
        skip = 0;
        load_table = false;
        loadMoreData();
    });
    $('.lwop_table tbody').scroll(function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
            load_table = false;
            skip=skip+20;
           // loadMoreData();
        }
    });
    // $(window).scroll(function() {
    //     if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    //         skip=skip+20;
    //         loadMoreData();
    //     }
    // });
    function loadMoreData(){
        $.ajax({
            url: $('.base_url').val()+'api/leave/report/lwop',
            type: "POST",
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data:{department_id:department_id,employee_id:employee_id,sDate:sDate,eDate:eDate,find_by:find_by,keyword:keyword,skip:skip},
            beforeSend: function()
            {
                if(flag)
                {
                    $('#lwop_data').empty();
                }
            }
        })
        .done(function(data)
        {
            flag=false;
            if(data.html == ""){
                if (!$(".no_record").is(":visible")) {
                    $("#lwop_data").append('<tr><td colspan="9" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td></tr>');
                    return;
                }
            }
            var documentFragment = parseHTML(data.html);
            $("#lwop_data").append(documentFragment);
            load_table = true;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
            load_table = true;
            alert('server not responding...');
        });
    }
    function parseHTML(html) {
        var t = document.createElement('template');
        t.innerHTML = html;
        return t.content;
    }

    $(document).on('click', '.pop-btn', function () {
        var title = $(this).attr('emp-name') + ' ( ' + $(this).attr('data-title') + ' )';
        var empid = $(this).attr('emp-id');
        var functionName = $(this).attr('function');
        var html = '<div class="modal_tbl"><table style="width: 667px !important;"><thead><tr><th><span style="margin-left:8px !important;"></span></th><th>Date</th><th>Reason</th></tr></thead></thead><tbody style="max-height: 350px; width: 667px;">';
        var count = 0;
        var align = '';

        if ($(this).attr('dates-leaves') != "") {
            var dates_after_time = $(this).attr('dates-leaves').split(',');
            $.each(dates_after_time, function (index, value) {
                count++;
                if (value.indexOf('~') > -1) {
                    var cons = value.split('~');
                    $.each(cons, function (index, value) {
                        align += value + '<br/>';
                    });
                    html += '<tr><td><span style="margin-left:8px;">' + count + '</span></td><td><input type="checkbox" onClick="'+functionName+'" name="exclude_emp_absent[]" value="'+value+' " class="margin_right_five absent_checkbox">' + align + '</td><td>Leave not applied.</td></tr>';
                    align = '';
                } else {
                    html += '<tr><td><span style="margin-left:7px;">' + count + '</span></td><td>  <input type="checkbox" onClick="'+functionName+'" name="exclude_emp_absent[]" value="'+value+' " class="margin_right_five absent_checkbox">' + value + '</td><td>Leave not applied.</td></tr>';
                }
            });
        }

        if ($(this).attr('dates-dis') != "") {
            var dates_dis = $(this).attr('dates-dis').split(',');
            $.each(dates_dis, function (index, value) {
                count++;
                html += '<tr><td class="text-center"><strong>' + count + '</strong></td><td>' + value + '</td><td>Leave disapproved by LM.</td></tr>';
            });
        }

        if ($(this).attr('dates-lwop') != "") {
            var dates_lwop = $(this).attr('dates-lwop');
            if (dates_lwop)
            {
                dates_lwop=dates_lwop.split(',');
                $.each(dates_lwop, function (index, value) {
                    count++;
                    html += '<tr><td class="text-center"><strong>' + count + '</strong></td><td>' + value + '</td><td>Leave Without Pay</td></tr>';
                });
            }
        }
        html += '</tbody></table></div>';
        $('#myModalLabelinfoModal').html('<b>'+title+'</b>');
        $('.info_tbl').html(html);
        $('#infoModal').modal('show');
    });
    var employeeAbsent={};
    function removeAbsent(emp_id) {
        var absentSelected = [];
        $('input:checked').each(function() {
            let string=$(this).val();
            string=string.replace(/ /g, '');
            absentSelected.push(string);
        });
        emp_id=emp_id.toString();
        employeeAbsent[emp_id]=absentSelected;
        $('.exclude_emp_absent').val(JSON.stringify(employeeAbsent))   
    }

    var employee930={};
    function removeAfter930 (emp_id) {
        var _930Selected = [];
        $('input:checked').each(function() {
            let string=$(this).val();
            string=string.replace(/ /g, '');
            _930Selected.push(string);
        });
        emp_id=emp_id.toString();
        employee930[emp_id]=_930Selected;
        $('.exclude_emp_930').val(JSON.stringify(employee930))   
    }

    var employeeConsecutive={};
    function removeConsecutive (emp_id) {
        var consecutiveSelected = [];
        $('input:checked').each(function() {
            let string=$(this).val();
            string=string.replace(/ /g, '');
            consecutiveSelected.push(string);
        });
        emp_id=emp_id.toString();
        employeeConsecutive[emp_id]=consecutiveSelected;
        console.log(employeeConsecutive);
        $('.exclude_emp_consecutive').val(JSON.stringify(employeeConsecutive))   
    }

    // $(".absent_checkbox:checked").each(function(){
        
    //     console.log($(this).val());
    //      });
    
    var employees = null;
    $('body').on('change', '.department_select', function(){
        var department_selected = $(this).val();console.log(department_selected);
        var option = '<option value="">Employee</option>';
        for (var i =0 ; i < employees.length; i++) {
            if(department_selected == employees[i]['department_id'] || department_selected == ''){
                option += '<option value="'+employees[i]['id']+'">'+employees[i]['name']+'</option>';
            }
        }
        $(".employee_select").empty().append(option);
    });
</script>
@endsection