@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>
    ::placeholder {
        color: #3080EA !important;
        opacity: 1 !important;
        font-size: 11px Roboto;
    }
    .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;
    }
    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 99px !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;
    }
    table:first-child td:first-child ,table:first-child th:first-child {
        padding-left: 10px !important;
    }
    .sortTable,td{
        /*white-space: nowrap;*/
    }
    .dropdown-menu {
        max-height: 300px !important;
        overflow: auto !important;
    }
</style>
<div class="breadcrum">
    HR Services / Attendance & Leave / Analytics / <span class="text-primary">Leave Balance 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_balance">PDF</a>
                <span class="travel_report_download">/</span> -->
                <a href="" data-key="csv" class="excel_balance">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">
                                            Leave Balance Report
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-3px;">
                                            <tbody>
                                                <tr>
                                                   <!--  <td>
                                                        <div class="main_dropdown_div padding_four_right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width">
                                                                <option value="">Global Market</option>
                                                                <option value="Department">Option 2</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width">
                                                                <option value="">Cluster</option>
                                                                <option value="Department">Option 2</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width" defaultValue={this.state.searchBy?this.state.searchBy: 'Search By' } onChange={this.changeSearch}>
                                                                <option value="">Sub Cluster</option>
                                                                <option value="Department">Option 2</option>
                                                            </select>
                                                        </div>
                                                    </td>-->
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties country_select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span style="
                                                                display: inline-block;
                                                                width: 73%;
                                                                margin-left: 0px !important;
                                                                text-overflow: ellipsis;
                                                                white-space: nowrap;
                                                                overflow: hidden;
                                                            ">Countries</span>
                                                            <span style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                                                  <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                                                </svg>
                                                            </span>
                                                          </button>
                                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                             @if(is_array($countries))
                                                                    @foreach ($countries as $key=>$value)
                                                                        @php
                                                                            $value=(object)$value;
                                                                        @endphp
                                                                        <a class="dropdown-item dropdown_option_custom" key-value="{{$value->id}}">{{$value->name}}</a>
                                                                     @endforeach
                                                                @endif
                                                          </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                         <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties department_select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span style="
                                                                display: inline-block;
                                                                width: 73%;
                                                                margin-left: 0px !important;
                                                                text-overflow: ellipsis;
                                                                white-space: nowrap;
                                                                overflow: hidden;
                                                            ">All Departments</span>
                                                            <span style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                                                  <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                                                </svg>
                                                            </span>
                                                          </button>
                                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                          <a class="dropdown-item dropdown_option_custom department_select" key-value="{{$department_id}}">All Departments</a>
                                                             @if(is_array($departments))
                                                                    @foreach ($departments as $key=>$value)
                                                                        @php
                                                                            $value=(object)$value;
                                                                            $id=$value->id;
                                                                            if($value->type == 'sub_department')
                                                                            {
                                                                                $id=$id.'_sub';
                                                                            }
                                                                        @endphp
                                                                        <a class="dropdown-item dropdown_option_custom department_select" key-value="{{$id}}">{{$value->department_name}}</a>
                                                                     @endforeach
                                                                @endif
                                                          </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties employee_select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span style="
                                                                display: inline-block;
                                                                width: 73%;
                                                                margin-left: 0px !important;
                                                                text-overflow: ellipsis;
                                                                white-space: nowrap;
                                                                overflow: hidden;
                                                            ">Employee</span>
                                                            <span style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                                                  <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                                                </svg>
                                                            </span>
                                                          </button>
                                                          <div class="dropdown-menu dependent" aria-labelledby="dropdownMenuButton">
                                                          <a class="dropdown-item dropdown_option_custom" key-value="">All Employees</a>
                                                             @if(is_array($employees))
                                                                    @foreach ($employees as $key=>$value)
                                                                        @php
                                                                            $value=(object)$value;
                                                                        @endphp
                                                                        <a class="dropdown-item dropdown_option_custom" key-value="{{$value->id}}">{{$value->name}}</a>
                                                                     @endforeach
                                                                @endif
                                                          </div>
                                                        </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" 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" onclick="this.focus();" readonly="readonly"/>
                                                        </div>
                                                        </div>
                                                    </td> -->
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties fiscal_year_select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span style="
                                                                display: inline-block;
                                                                width: 73%;
                                                                margin-left: 0px !important;
                                                                text-overflow: ellipsis;
                                                                white-space: nowrap;
                                                                overflow: hidden;
                                                            ">Fiscal Year</span>
                                                            <span style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                                                  <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                                                </svg>
                                                            </span>
                                                          </button>
                                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" >
                                                             @if(is_array($fiscal_years))
                                                                    @foreach ($fiscal_years as $key=>$value)
                                                                        @php
                                                                            $value=(object)$value;
                                                                        @endphp
                                                                        <a class="dropdown-item dropdown_option_custom" key-value="{{$value->mini}}-{{$value->maxi}}">{{$value->mini}}-{{$value->maxi}}</a>
                                                                     @endforeach
                                                                @endif
                                                          </div>
                                                        </div>
                                                       <!--  <div class="main_dropdown_div padding_four_right">
                                                            <select class="table_dropdown common_dropdown_properties" name="" id="fiscal_year_select">
                                                                <option value="" selected>All</option>
                                                                @foreach($fiscal_years as $value)
                                                                    @php $value = (object)$value; @endphp
                                                                    <option value="{{$value->mini}}-{{$value->maxi}}">{{$value->mini}}-{{$value->maxi}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div> -->
                                                    </td>
                                                    <td>
                                                       <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties find_by" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span style="
                                                                display: inline-block;
                                                                width: 73%;
                                                                margin-left: 0px !important;
                                                                text-overflow: ellipsis;
                                                                white-space: nowrap;
                                                                overflow: hidden;
                                                            ">Search By</span>
                                                            <span style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                                                  <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                                                </svg>
                                                            </span>
                                                          </button>
                                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item dropdown_option_custom" key-value="emp_code">Employee Code</a>
                                                                <a class="dropdown-item dropdown_option_custom" key-value="emp_name">Employee Name</a>
                                                          </div>
                                                        </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_balance">Search</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table">
                                <table>
                                    <thead>
                                        <tr>
                                            @foreach($data['header'] as $key=>$value)
                                                <th class="sortTable ">
                                                    {{$value}}
                                                    <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                                </th>
                                            @endforeach()
                                        </tr>
                                        <!-- <tr> -->
                                    </thead>
                                    <tbody id="leave_balance_data">
                                        @php
                                            $data=$data['data'];
                                            $data = (object)$data;
                                        @endphp
                                        @if(count($data->data) > 0)
                                        @foreach($data->data as $key=>$value)
                                        @php 
                                            $value = (object)$value; 
                                            unset($value->attendance_record);
                                            unset($value->emp_id);
                                            unset($value->fdate);
                                        @endphp
                                        <tr>
                                            @foreach($value as $index)
                                                <td>{{$index}}</td>
                                            @endforeach()
                                        </tr>
                                        @endforeach()
                                        @else
                                            <tr>
                                                <td colspan="12" 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>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script src="{{ URL::asset('assets/js/calendar.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
<script>
    // $('.dateselect').datepicker({
    //     format: 'mm-dd-yyyy',
    // }).on('changeDate', function(e) {
    //     $('.datepicker').hide();
    // });
    endDate = new Date();
    endDate.setDate(endDate.getDate() + 2);
    $('.start_date').datepicker({
        format: 'dd-MM-yyyy',
        endDate: endDate
    }).on('changeDate', function(e) {
        $('.end_date').val('');
        $(".end_date").datepicker("destroy");
        var newdate = $('.start_date').val();
        $('.datepicker').hide();
        $('.end_date').datepicker({
            format: 'dd-MM-yyyy',
            startDate: newdate,
            endDate: endDate
        }).on('changeDate', function(e) {
            $('.datepicker').hide();
        });
    });
    var department_id=null;
    var employee_id=null;
    var country_id=null;
    var sDate=null;
    var eDate=null;
    var find_by=null;
    var keyword=null;
    var page = 1;
    var flag=false;
    var load_table = true;
    var fiscal_year = null;
    $('body').on('click', '.excel_balance', function(e) {
        e.preventDefault();
        sDate=$('.start_date').val();
        eDate=$('.end_date').val();
        keyword = $("#keyword").val();
        find_by = $(".find_by").val();
        if($('.department_select').val())
        {
            department_id=$('.department_select').val();
        }
        department_id=department_id;
        employee_id=$('.employee_select').val();
        country_id=$('.country_select').val();
        find_by=$('.find_by').val();
        $( ".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/balance/download',
            type: "POST",
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data:{department_id:department_id,employee_id:employee_id,country_id:country_id,find_by:find_by,keyword:keyword,sDate:sDate,eDate:eDate,type:type},
            success:function(data){
                removeLoader();
                var fileName='../../../../../../uploads/balance.'+type;
                var filenamedownload = document.getElementsByClassName("header_left")[0].innerText + '.';
                download(fileName,filenamedownload+type);
            },
       });

    });
    $('body').on('click', '.submit_btn_balance', function() {
        fiscal_year=$('.fiscal_year_select').val();
        keyword = $("#keyword").val();
        find_by = $(".find_by").val();
        if($('.department_select').val())
        {
            department_id=$('.department_select').val();
        }
        department_id=department_id;
        employee_id=$('.employee_select').val();
        country_id=$('.country_select').val();
        find_by=$('.find_by').val();
        page = 1;
        flag=true;
        loadMoreData();
    });
    $('.table tbody').scroll(function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
            load_table = false;
            page++;
            loadMoreData(page);
        }
    });
    // $(window).scroll(function() {
    //     if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    //         skip=skip+20;
    //         loadMoreData();
    //     }
    // });
    function loadMoreData(page){
        load_table = false;
        $.ajax(
            {
                url: $('.base_url').val()+'api/leave/report/balance?page='+page,
                type: "POST",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                data:{department_id:department_id,employee_id:employee_id,country_id:country_id,find_by:find_by,keyword:keyword,fiscal_year:fiscal_year, page:page,data_type:'balance'},
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('#leave_balance_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                if(page==2 || page>2){
                    var data_flag = true;
                }
                flag=false;
                if(data.html == "" && !data_flag){
                    if (!$(".no_record").is(":visible")) {
                        $("#leave_balance_data").append('<tr><td colspan="12" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td></tr>');
                        return;
                    }
                }
                $("#leave_balance_data").append(data.html);
                load_table = true;
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                load_table = true;
                alert('server not responding...');
            });
    }
    var employees = null;
    $('body').on('click', '.department_select', function(){
        var department_selected = $(this).val();
        let department_flag=false;
        department_flag=department_selected.indexOf(',') > -1;
        if(!department_flag)
        {
            department_selected=parseInt(department_selected);
        }
        var option = '<a class="dropdown-item dropdown_option_custom">Employee</a>';
        for (var i =0 ; i < employees.length; i++) {
            if(department_selected == employees[i]['sub_department_id'] || department_selected == employees[i]['department_id'] || department_selected == '' || (department_flag)){
                option += '<a class="dropdown-item dropdown_option_custom" key-value="'+employees[i]['id']+'">'+employees[i]['name']+'</a>';
            }
        }
        $(".dependent").empty().append(option);
    });
    $(".dropdown-menu a").click(function(){
        setTimeout(function(){
            $(".dropdown button span:nth-child(2)").css("position", "absolute");
        }, 100)
    });
</script>
@endsection