@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>

.resizeable_tbl th:nth-child(8){
    text-align: right;
}
.resizeable_tbl td:nth-child(8){
    text-align: right;
}


    .table tr th, .table tr td {
    width: unset;
    padding: 7px 15px;
}
tfoot tr th{
    font-weight: normal;
    font-size: 11px;
    color: #343434;
}

        .sticky-header,
        .sticky-footer {
            position: sticky !important;
            top: 0;
            /*background-color: blue !important;*/
            /*color: #fff;*/
            z-index: 1; /* Ensure it's above the scrollable content */
        }
/*        body {
            font-family: Arial, sans-serif;
            font-size: 10pt;
            margin: 0;
        }*/
/* commented */
/*        .table-container {
            max-height: 200px;
            overflow-y: auto;
        }*/

        .resizeable_tbl {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 20px;
            table-layout: fixed;
        }

/*        .resizeable_tbl, .table_heading, .table_data {
            border-bottom: 1px solid #ddd;
        }*/

        .table_heading, .table_data {
            padding: 8px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        .table_heading {
  /*          background-color: #006;
            color: #fff;*/
            position: relative !important;
            text-align: left; /* Set the heading to left-align */
            background-color: white;
        }

/*        .table_data:nth-child(2) {
            text-align: right;
        }*/

/*        .table_heading:nth-child(2),
        .table_data:nth-child(2) {
            text-align: right;
        }*/

        .ui-resizable-handle {
height: 50%;

            /*background-color: #aaa;*/
            /*border: 1px solid #ddd;*/
            border-right: 1px solid #80808069;
            cursor: ew-resize;
            /*height: 100%;*/
            position: absolute !important;
            top: 7;
            width: 7px !important;
            z-index: 1000;
            right: 0;
        }

/*        .second_col {
            padding-right: 100px;
        }*/

        .table_footer .table_heading {
            /*background-color: #006;*/
            /*color: #fff;*/
            position: relative !important;
            text-align: left;
        }

        .sticky-footer .table_heading {
            position: sticky !important;
            bottom: 0;
        }

.table {
    display: block; /* Add display: block to the parent container */
    max-height: 550px;
    overflow-y: auto;
    width: 1208px;
    overflow-x: hidden !important;
}





    .search_btn {
        margin-right: -8px;
        margin-left: 3px;
    }
    .table_dropdown {
        margin-left: 4px;
    }
    .datepicker {
        left: 53% !important;
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }
    ::placeholder {
        color: #343434;
        opacity: 1;
    }
    b{
        font-weight: unset;  important;
    }
    tfoot {
        position: sticky;
        bottom: 0;
        background-color: #fff;
        z-index: 1;
    }


</style>
<div class="breadcrum">
    HR Services / Expenses / <span class="text-primary">Expense Applications</span>
</div>
@php
if(!empty($data)){
    $total_amount = $data[2];
    $system_policies_flag = $data[1];
    $data=(object)$data[0];
    $data->data=(object)$data->data;

}
else{
    $data = [];
    $total_amount = $data[2]??0;
    $system_policies_flag = $data[1]??null;
}
@endphp
<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 style="color: #3080EA; font-weight: bold;" href="#" data-key="pdf" class="travel_report_download excel_expense">PDF</a>
                <span class="travel_report_download">/</span>
                <a style="color: #3080EA; font-weight: bold;" href="" data-key="csv" class="excel_expense" >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">
                                            Expense Applications Status Report
                                        </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 countries_select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span class="dd_before_slc_color" 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 status_select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span class="dd_before_slc_color" 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="">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>
                                                                    <a class="dropdown-item dropdown_option_custom" key-value="4">Resubmit</a>
                                                            </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" value="{{reports_month()['start']}}"/>
                                                        </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="{{reports_month()['end'] }}"/>
                                                        </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 id="data_table" class="data_table">
                                    <thead>
                                        <tr>
                                            <th class="sortTable">
                                                Sr No.
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Emp Code
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Name
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Region
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Application Date
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Expense Month
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Expense Type
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Amount
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            @if($system_policies_flag)
                                            <th class="sortTable soorting">
                                                Cost Center
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            @endif
                                            <th class="sortTable soorting">
                                                Approval Date
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable soorting">
                                                Application 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 =>$value)
                                        @php
                                            $value=(object)$value;
                                        @endphp
                                        @if(isset($value->empcod))
                                        <tr>
                                            @php
                                                $exp_date='';
                                                if(isset($value->exp_date)) {
                                                    $exp_date=dateFromat($value->exp_date);
                                                }
                                                $application_status='Approved';
                                                if($value->hr_status == 1)
                                                {
                                                    $application_status='Pending';
                                                }
                                                if($value->lm_status == 3 ||  $value->hr_status == 3)
                                                {
                                                    $application_status='Disapproved';
                                                }
                                                if($value->lm_status == 4 ||  $value->hr_status == 4)
                                                {
                                                    $application_status='Resubmit';
                                                }
                                            @endphp
                                            <td class="sr_no">{{$key+1}}</td>
                                            <td class="sort_datee">{{$value->empcod}}</td>
                                            <td class="sort_datee">{{$value->name}}</td>
                                            <td class="sort_datee">{{$value->e_country}}</td>
                                            <td class="sort_datee">{{ dateFromat($value->added_on) }}</td>
                                            <td class="sort_datee">{{$exp_date}}</td>
                                            <td class="sort_datee">{{$value->type}}</td>
                                            <td class="sort_datee">{{$value->symbol}}&nbsp;<b>
                                                @if ($value->tar_adv_amt)
                                                    {{number_format($value->tar_adv_amt - $value->tamount, 2)}}
                                                @else
                                                    {{number_format($value->tamount, 2)}}
                                                @endif</b>
                                            </td>
                                            @if($system_policies_flag)<td>{{$value->label}}</td>@endif
                                            <td class="sort_datee">{{ $value->hr_date?dateFromat($value->hr_date):'' }}</td>
                                            <td class="sort_datee">{!!statusName($application_status)!!}</td>
                                        </tr>
                                        @endif
                                        @endforeach()
                                        @else
                                            <tr>
                                                <td colspan="10" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                    <tfoot class="sticky-footer table_footer">
                                        <tr>
                                            <th id='footer-header-1' class="table_heading heading"><div id='footer-header-1-sizer'>Total</div></th>
                                            <th id='footer-header-2' class="table_heading heading"><div id='footer-header-2-sizer'></div></th>
                                            <th id='footer-header-3' class="table_heading heading"><div id='footer-header-3-sizer'></div></th>
                                            <th id='footer-header-4' class="table_heading heading"><div id='footer-header-4-sizer'></div></th>
                                            <th id='footer-header-5' class="table_heading heading"><div id='footer-header-5-sizer'></div></th>
                                            <th id='footer-header-6' class="table_heading heading"><div id='footer-header-6-sizer'></div></th>
                                            <th id='footer-header-7' class="table_heading heading"><div id='footer-header-7-sizer'></div></th>
                                            <!-- <td style="text-align: right; padding-right: 42px !important;" id="total_amount_id" class="pedding-left-seven">PKR {{number_format($total_amount)}}</td> -->
                                            <th id='footer-header-111' class="table_heading heading"><div id='total_amount_id'>{{number_format($total_amount, 2)}}</div></th>
                                            <th id='footer-header-8' class="table_heading heading"><div id='footer-header-8-sizer'></div></th>
                                            <th id='footer-header-9' class="table_heading heading"><div id='footer-header-9-sizer'></div></th>
                                        </tr>
                                    </tfoot>



                                </table>
                            </div>
                             <div class="expense_table_footer">
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@stop
@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: 'dd-MM-yyyy',
    }).on('changeDate', function(e) {
        $('.datepicker').hide();
    });
    var country_id=null;
    var status_id=null;
    var sDate=$('.start_date').val();
    var eDate=$('.end_date').val();
    var page = 1;
    var flag=false;
    var load_table = true;
    var sorting_flag = false;
    var protal="";
    $('body').on('click', '.excel_expense', function(e) {
        e.preventDefault();
        yearsDifference = yearsDiff(sDate,eDate)
        if (yearsDifference > 1.0) {
            error_common(reports_date_alert_message)
        }else{
            $( ".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/expense/report/download',
                type: "POST",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                data:{protal:protal,application_status:status_id,country_id:country_id,sDate:sDate,eDate:eDate,type:type},
                success:function(data){
                    removeLoader();
                var fileName='../../../../../../uploads/expense/'+data.filename+'.'+type;
                    download(fileName,data.filename+'.'+type,'expense');
                },
            });
        }
    });
    $('body').on('click', '.submit_btn_expense', function() {
        country_id = $('.countries_select').val();
        status_id = $('.status_select').val();
        sDate=$('.start_date').val();
        eDate=$('.end_date').val();
        page = 1;
        flag=true;
        search_record='true';
        yearsDifference = yearsDiff(sDate,eDate)
        if (yearsDifference > 1.0) {
            error_common(reports_date_alert_message)
        }else{
            loadMoreData(search_record);
        }
    });
    // $('.table').scroll(function() {
    //     if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
    //         load_table = false;
    //         page++;
    //         loadMoreData();
    //     }
    // });
    let ignoreScrollEvent = false;
    const tbl = document.querySelector(".table");
    function handleScroll(event) {
        if (ignoreScrollEvent) {
            return;
        }
        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(null, null, null, true);
        }
    }
    tbl.addEventListener("scroll", handleScroll);

    $(".soorting").click(function() {

    $(this).find('i').remove();
    $(this).append('<i class="fas fa-arrow-down ml-1 fa-xs" style="color: rgb(48, 128, 234);"></i>');

    // heading name
            var heading_name = $.trim($(this).text());

    //sorting flag
            if(sorting_flag){
                sorting_flag=false;
            }
            else{
                sorting_flag=true;
            }
            // load_table = true;
            ignoreScrollEvent = true;
            loadMoreData(null, heading_name, true, null);
            setTimeout(function() {
                ignoreScrollEvent = false;
            }, 3000);
    });

    function loadMoreData(search_record=null, heading=null, sorting=null, scrolling=null){

        var prams =  {protal:protal,application_status:status_id,country_id:country_id,sDate:sDate,eDate:eDate,page:page,type:'report'};
        console.log('------');
        if(sorting){
            var order='DESC';
            if(sorting_flag){
                order='ASC';
            }
            prams =  {protal:protal,application_status:status_id,country_id:country_id,sDate:sDate,eDate:eDate,page:page,type:'report',order:order,heading:heading};
        }

        $.ajax(
            {
                url: $('.base_url').val()+'api/expense/reports',
                type: "POST",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                data:prams,
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('#expense_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                if(search_record!=null){
                    var total = data.total_amount;
                    $("#total_amount_id").text(total.toLocaleString());
                }

                flag=false;
                if(data.total_amount == 0){
                    if (!$(".no_record").is(":visible")) {
                        $(".table_footer").hide();
                        $("#expense_data").append('<tr><td colspan="10" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td></tr>');
                        return;
                    }
                }
                else{
                    $(".table_footer").show();
                }
if(scrolling){
                $("#expense_data").append(data.html);

                }
                else{
                    $("#expense_data").html(data.html);
                }

                load_table = true;
                getSerialNumber();
                $(".resizeable_tbl tbody tr td").addClass("ellipsis");
                $(".resizeable_tbl tbody tr td").addClass("table_data");

            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                load_table = true;
                alert('server not responding...');
            });
    }
    function getSerialNumber(){
        var id = 0;
        var number = 0;
        $("#data_table > tbody > tr").each(function(index) {
            id = index+1;
            number = index+2;
            $('#data_table tr:eq('+number+') td:eq(0)').text(id);
        });
    }
</script>
@endsection