@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>
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !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;
    }
    /*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;
    }
     table:first-child td:first-child ,table:first-child th:first-child {
        padding-left: 10px !important;
    }
     b{
        font-weight: unset;  important;
    }
</style>
<div class="breadcrum">
    HR Services / Expense / <span class="text-primary">Expense Applications</span>
</div>
@php
if(!empty($data)){
    $data=(object)$data[0];
    $data->data=(object)$data->data;
} 
else{
    $data = [];
}

@endphp
<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">
                                            Expense List
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-3px;">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties status" 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;
                                                            ">Status</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="-1">All</a>
                                                                <a class="dropdown-item dropdown_option_custom" key-value="1">Pending</a>
                                                                <a class="dropdown-item dropdown_option_custom" key-value="2">Approved</a>
                                                                <a class="dropdown-item dropdown_option_custom" key-value="3">Disapproved</a>
                                                          </div>
                                                        </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;
                                                            ">Employee Type</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_expense">Search</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table" id="sorting_table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="sortTable" style="width: 7%;">
                                                Employee ID
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" style="width: 14%;">
                                                Name
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" style="width: 10%;">
                                                Application Date
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" style="width: 8%;">
                                                Expense Month
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" style="width: 10%;">
                                                Expense Type
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th style="width: 5%;" class="sortTable right-text">
                                                Amount
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th style="width: 8%;" class="sortTable approved">
                                                LM Status
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th style="width: 8%;" class="sortTable approved">
                                                HR Status
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                        </tr>
                                        <tr>
                                    </thead>
                                    <tbody id="expense_data">
                                        @if(isset($data->total) && $data->total != 0)
                                        @foreach ($data->data as $key=>$app)
                                        @php $app=(object)$app; @endphp
                                        <tr>
                                            <td>{{$app->empcod}}</td>
                                            <td><a href="{{ url('expense/cr_expense_edit?id=').$app->id }}" title="View Expense Application">{{$app->name}}</a></td>
                                            <td class="sort_date">{{ dateFromat($app->added_on) }}</td>
                                            <td class="sort_date">{{ dateFromat($app->exp_date) }}</td>
                                            <td class="right-text">{{$app->type}}</td>
                                            <td>{{$app->symbol}}&nbsp;<b>
                                                @if ($app->tar_adv_amt)
                                                    {{ number_format($app->tar_adv_amt - $app->tamount, 2) }}
                                                @else
                                                    {{ number_format($app->tamount, 2) }}
                                                @endif</b>
                                            </td>
                                            <td>
                                                @if ($app->lm_status == 1)
                                                    <span style="color:#ffa922">Pending</span>
                                                @elseif ($app->lm_status == 2)
                                                    <span style="color:#1BC167">Approved</span>
                                                @elseif ($app->lm_status == 3)
                                                    <span style="color:#f35e46">Disapproved<sup style="color:red;cursor:help" title="Not approved, mileage details not attached">Cm</sup></span>
                                                @endif
                                            </td>
                                            <td class="approved">
                                                @if ($app->hr_status == 1)
                                                    <span style="color:#ffa922">Pending</span>
                                                @elseif ($app->hr_status == 2)
                                                    <span style="color:#1BC167">Approved</span>
                                                @elseif ($app->hr_status == 3)
                                                    <span style="color:#f35e46">Disapproved<sup style="color:red;cursor:help" title="Not approved, mileage details not attached">Cm</sup></span>
                                                @endif
                                            </td>
                                        </tr> 
                                        @endforeach
                                        @else
                                            <tr>
                                                <td colspan="8" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td>
                                            </tr>
                                        @endif
                                        <!-- <Waypoint onEnter={this.callAnotherData} /> -->
                                    </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>
    var response_message = "";
    if(response_message)
    {
        var response_type = "";
        if(response_type == "pass" && response_message != '')
        {
            $('.success_message').show();
            $('.success_message_text').html(response_message);
            setInterval(function () {$('.success_message').hide()}, 3000);
        }
    }
    var status=null;
    var find_by=null;
    var keyword=null;
    var page = 1;
    var flag=false;
    var load_table = true;
    $('body').on('click', '.submit_btn_expense', function() {
        status = $('.status').val();
        find_by = $('.find_by').val();
        keyword = $('#keyword').val();
        find_by = $(".find_by").val();
        flag = true;
        page = 1;
        loadMoreData();
    });
    // $('.table tbody').scroll(function() {
    //     if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
    //         load_table = false;
    //         page++;
    //         loadMoreData();
    //     }
    // });
    const tbl = document.querySelector(".table tbody");
    function handleScroll(event) {
        var scrollHeight = tbl.scrollHeight;
        var clientHeight = tbl.clientHeight;
        var scrollTop = tbl.scrollTop;
        var scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
                if (scrollPercentage > 95 && load_table) {
                    load_table = false;
                    page++;
                    loadMoreData();
                }
    }
    tbl.addEventListener("scroll", handleScroll);
    function loadMoreData(){
        $.ajax(
            {
                url: $('.base_url').val()+'api/expense/reports',
                type: "POST",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                data:{"application_status":status,find_by:find_by,keyword:keyword,page:page,type:'list'},
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('#expense_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                flag=false;
                if(data.html == ""){
                    if (!$(".no_record").is(":visible")) {
                        $("#expense_data").append('<tr><td colspan="8" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td></tr>');
                        return;
                    }
                }
                $("#expense_data").append(data.html);
                load_table = true;
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                load_table = true;
                alert('server not responding...');
            });
    }
</script>
@endsection