@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
@section('content')
<style>
    .datepicker {
        left: 40% !important;
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }

    ::placeholder {
      color: blue;
    }
</style>
<section class="expense">
    <div class="row">
        <div class="container-fluid">
            <div class="expense_header">
                <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">
                                            History 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="main_dropdown_div padding-right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width">
                                                                <option value="">Country</option>
                                                                <option value="Department">Option 2</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                         departments -->
                                                       <td>
                                                        <div class="main_dropdown_div padding_four_right">
                                                            <select class="table_dropdown common_dropdown_properties department_select">
                                                                <option value="">All Departments</option>
                                                                @foreach($departments as $key =>$value)
                                                                    <option value="{{$value->id}}">{{$value->department_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"/>
                                                        </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"/>
                                                        </div>
                                                        </div>
                                                    </td>
                                                    <!-- <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <select class="table_dropdown common_dropdown_properties dropdown_width">
                                                                <option value="">Emp Code</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="">Emp Name</option>
                                                                <option value="Department">Option 2</option>
                                                            </select>
                                                        </div>
                                                    </td> -->
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <button class="search_btn travel_report_btn submit_btn_expense">Search</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>Emp Code</th>
                                            <th>Name</th>
                                            <th>Application Date</th>
                                            <th>Leave Type</th>
                                            <th>From</th>
                                            <th>To</th>
                                            <th>Total Days</th>
                                            <th>Status</th>
                                        </tr>
                                        <tr>
                                    </thead>
                                    <tbody id="leave_history_data">
                                        @foreach($data->data as $key=>$value)
                                        <tr>
                                            <td>{{$value->empcode}}</td>
                                            <td>{{$value->name}}</td>
                                            <td>{{$value->emp_date}}</td>
                                            <td>{{$value->leave_title}}</td>
                                            <td>{{$value->fdate}}</td>
                                            <td>{{$value->tdate}}</td>
                                            <td>{{$value->nod}}</td>
                                            <td>{{$value->status}}</td>
                                        </tr>
                                        @endforeach()
                                    </tbody>
                                </table>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </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>
    $('.dateselect').datepicker({
        format: 'mm-dd-yyyy',
    }).on('changeDate', function(e) {
        console.log($('.datepicker').hide());
    });
    var department_id=null;
    var sDate=null;
    var eDate=null;
    var page = 1;
    var flag=false;
    $('body').on('click', '.submit_btn_expense', function() {
        sDate=$('.start_date').val();
        eDate=$('.start_date').val();
        if(eDate || sDate)
        {
             page = 1; 
        }
        flag=true;
        loadMoreData(page);
    });

    $('body').on('click', '.department_select', function() {
        department_id=$(this).find(":selected").val();
        if(department_id)
        {
            page = 1; 
        }
    });
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            page++;
            loadMoreData(page);
        }
    });
    function loadMoreData(page){
        $.ajax(
            {
                url: $('.base_url').val()+'api/leave/report/history?page='+page,
                type: "POST",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                data:{department_id:department_id,sDate:sDate,eDate:eDate},
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('#leave_history_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                flag=false;
                if(data.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                $("#leave_history_data").append(data.html);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                alert('server not responding...');
            });
    }
</script>
@endsection