@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>
    ::placeholder {
      color: blue;
    }
    input{
        width: 15px !important;
    }

</style>
<!-- <div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Amortization </span>
</div> -->
<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">
                                            HR Assistant List
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-3px;">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <button onclick="location.href='{{route('add_hr')}}'" class="search_btn travel_report_btn submit_btn_balance">Add Acount</button>
                                                            <button class="search_btn travel_report_btn submit_btn_balance" id="destroy">Delete</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table">
                                <table id="hr_table">
                                    <thead>
                                        <tr>
                                            <th>Employee ID</th>
                                            <th>Name</th>
                                            <th>Role</th>
                                            <th>Country</th>
                                            <th>Status</th>
                                            <th style="width: 100px;"><div style="display: flex;"><div class="align_checkbox"><input type="checkbox" id="select-all" value=""/></div><div class="margin_top_ten ml-2">Select All</div></div></th>
                                        </tr>
                                        <tr>
                                    </thead>
                                    <tbody class="manage_hr_data">  
                                    </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>
    var page = 1;
    var flag=false;
    var append_flag=false;
    $( document ).ready(function() {
    loadMoreData(page);
    });

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        page++;
        loadMoreData(page);
        }
    });

    function loadMoreData(page){
         $.ajax(
            {
                url: $('.base_url').val()+'api/org/managehr?page='+page,
                type: "GET",
                headers: {
                 'Authorization':localStorage.getItem("laravel_token")
                },
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('.manage_hr_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                flag=false;
                if(append_flag)
                {
                    $(".manage_hr_data").html(data.html);
                }
                else
                {
                    $(".manage_hr_data").append(data.html);
                }
                append_flag=false;
            })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
         alert('server not responding...');
        });
    }

    $('#select-all').click(function(event) {   
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;                        
            });
        } else {
            $(':checkbox').each(function() {
                this.checked = false;                       
            });
        }
    });

    $("#destroy").click(function(){
        var hrIDs = $("#hr_table input:checkbox:checked").map(function(){
          return $(this).val();
        }).get();

         $.ajax({
                url: $('.base_url').val()+'api/org/managehr',
                type: "DELETE",
                headers: {
                 'Authorization':localStorage.getItem("laravel_token")
                },
                data:{ids:hrIDs},
                success:function(response){
                if (response['error']) {
                    var html = '';
                    Object.keys(response['error']).map((index) => {
                        if (response['error'][index][0]) {
                            html = html + '<li>' + response['error'][index][0] + '</li>';
                        }
                    });
                    $('.error_message').css('display', 'block');
                    $('.error_message').removeClass('fade')
                    $('.error_message_text').html(html);
                    setInterval(function() {6
                        $('.error_message').css('display', 'none');
                        $('.error_message').addClass('fade');
                        $('.error_message_text').html("");
                    }, 10000);

                } else {
                    var class_name = '.success';
                    if (response['status'] == "failed") {
                        var class_name = '.error';
                    }
                    $(class_name + '_message').css('display', 'block');
                    $(class_name + '_message').removeClass('fade');
                    $(class_name + '_message_text').html(response['message']);
                    setInterval(function() {
                        $(class_name + '_message').css('display', 'none');
                        $(class_name + '_message').addClass('fade');
                        $(class_name + '_message_text').html("");
                    }, 10000);
                }
            }
        });
    });
</script>
@endsection