@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>
    .amount {
        text-align: right;
        margin-right: 23px !important;
    }
    .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;
    }
    /*End allignment*/
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    ::placeholder {
        color: #3080EA;
        opacity: 1;
        font-size: 11px Roboto;
    }
    .table_dropdown {
        margin-left: 5px;
        margin-right: -6px;
    }
    .search_btn {
        margin-right: -7px;
        margin-left: 9px;
    }
    .installment_rec_btn {
        width: 125px !important;
    }
    .modal-lg {
        max-width: 460px !important;
    }

    thead::marker {
        display: none !important;
    }

    .datepicker {
        /*left: 40% !important;*/
        position: absolute !important;
        z-index: 9999;
    }
    .dropdown-menu {
        padding: 0 !important;
    }
    .datepicker-switch{
        color: white !important;
    }
    .dow{
        color: white !important;
    }
    .table thead tr th{
        padding:  6.5px !important;
    }

    button:disabled,
    button[disabled]{
    border: 1px solid #999999;
    background-color: #cccccc;
    cursor: default !important;
    }button:disabled,
    button[disabled]:hover{
    border: 1px solid #999999 !important;
    background-color: #cccccc !important;
    cursor: default !important;
    }
    .dropdown-menu {
        max-height: 300px !important;
        overflow: auto !important;
    }
</style>
@php
    $data=(object)$data;
    if(isset($data->data))
    {
        $data->data=(object)$data->data;
    }
    $key_count=0;
@endphp
<div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Installments </span>
</div>
<section class="expense">
    <div class="row">
        <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">
                                            Loan / Advance Installment
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-0.22em; margin-right:1px;">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties search_employee" 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;
                                                            ">Not Set</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($emp_filters))
                                                                    @foreach ($emp_filters as $key=>$emp)
                                                                        @php
                                                                            $emp=(object)$emp;
                                                                        @endphp
                                                                        <a class="dropdown-item dropdown_option_custom" key-value="{{$emp->id}}">{{$emp->name}}</a>
                                                                     @endforeach
                                                                @endif
                                                          </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                    <div class="main_dropdown_div" style="margin-left:5px !important;">
                                                            <input type="text" class="table_dropdown common_dropdown_properties py-0 dateselect" placeholder="dd-MM-YYYY" value="{{dateFromat(\Carbon\Carbon::now())}}">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div">
                                                            <button class="search_btn submit_btn_installment">Search</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                   <!--      <button type="button" id="rec_btn" class="btn btn-primary btn-sm mr-2" disabled>Intallment Received</button> -->
                                                        <button id="rec_btn" class="search_btn installment_rec_btn" disabled>Installment Received</button>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table" id="sorting_installment_table">
                                <table>
                                    <thead>
                                        <tr>
                                           <th class="sr_number sortTable" style="padding-left: 38px !important;">
                                                Sr #
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" >
                                                Emp Code
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" >
                                                Name
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" >
                                                Application Date
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                             <th class="sortTable" >
                                                Type
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                             <th class="sortTable" >
                                                Installment Amount
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                             <th class="sortTable" >
                                                Status
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                             <th class="sortTable" >
                                                Installment Month
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                        </tr>
                                        <tr>
                                    </thead>
                                    <tbody id="installment_data">
                                        @if(isset($data->data))
                                            @foreach ($data->data as $key_count=> $app)
                                                @php
                                                    $app=(object)$app;
                                                @endphp
                                                <tr id="row{{$app->installment_id}}">
                                                    <td>
                                                        <div>
                                                            <span style="display: flex;margin-bottom: -10px;">
                                                        @if($app->status != 2)
                                                        <input type="checkbox" style="width: 15px;margin-top: -7px;" onchange="checkboc({{$app->installment_id}} , this)">
                                                        <span style="margin-left:5px !important;margin-top: 0px;">{{$key_count+1}}</span>
                                                        @else
                                                        <span style="margin-left:20px !important; margin-top: -2px;">{{$key_count+1}}</span>
                                                        @endif
                                                    </span>
                                                </div>
                                                    </td>
                                                    <td>{{$app->empcode}}</td>
                                                    @php
                                                        $url_detail=config('app.BASE_URL');
                                                        $url_detail=$url_detail.'loanadvance/detail/'.$app->loan_req_id;
                                                    @endphp
                                                    <td><a href="{{$url_detail}}" title="View Loan">{{$app->name}}</a></td>
                                                    <td>{{$app->application_date}}</td>
                                                    <td>{{ucfirst($app->loan_type)}}</td>
                                                    <td><div class="amount"><a href="{{route('hr_loan_amortization_schedule' , $app->installment_id)}}">{{$app->monthly_installment}}</a></div></td>
                                                    <td>
                                                        @if ($app->status == 1)
                                                            <span class="text-danger">Rescheduled</span>
                                                        @else
                                                            {!!loanStatus($app->status)!!}
                                                        @endif
                                                    </td>
                                                    <td>{{$app->payroll_month}}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content expense_table">
            <div class="expense_table_hader">
                <div class="row">
                    <div class="col-md-8">
                        <div class="header_left">
                            Loan / Advance Applications
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-body p-0">
                <div class="table">
                    <table>
                        <thead>
                            <tr>
                                <th style="width: 2%;">Sr</th>
                                <th style="width: 10%;">Role</th>
                                <th style="width: 35%;">Name</th>
                                <th style="width: 15%;">Status</th>
                                <th style="width: 15%;">Action Date</th>
                                <th style="width: 20%;" class="right-text">Comments</th>
                            </tr>
                            <tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>LM</td>
                                <td>Atifa Tariq</td>
                                <td>Approved</td>
                                <td></td>
                                <td class="right-text"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
    @stop
    @section('scripts')
    <script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ URL::asset('assets/js/calendar.js') }}"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
    <script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
    <script>
        const monthNames = ["January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November", "December"
        ];
        var today = new Date();
        var sDate = today.getDate()+'-'+(monthNames[today.getMonth()])+'-'+today.getFullYear();
        console.log(sDate);
        var search_employee = "";
        var page = 1;
        var flag=false;
        var load_table = true;
        var count=null;
    $('body').on('click', '.submit_btn_installment', function() {
        sDate=$('.dateselect').val();
        count=-1;
        search_employee=$('.search_employee').val();
        if(search_employee || sDate)
        {
            page = 1; 
        }
        flag=true;
        if (load_table) {
            load_table = false;
            loadMoreData();
        }
    });

    $(".table tbody").scroll(function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
            load_table = false;
            page++;
            loadMoreData();
        }
    });

    function loadMoreData(){
        var url = "";
        if(sDate == "" && search_employee == ""){
            url = $('.base_url').val()+'api/hr/Loan_Advance/installments?client_id=48page='+page;
        }
        else if(sDate == "" && search_employee != ''){
            url = $('.base_url').val()+'api/hr/Loan_Advance/installments?client_id=48&emp_id='+search_employee+'&page='+page;
        }
        else if(search_employee == "" && sDate != ""){
            url = $('.base_url').val()+'api/hr/Loan_Advance/installments?client_id=48&installment_month='+sDate+'&page='+page;
        }
        else{
            url = $('.base_url').val()+'api/hr/Loan_Advance/installments?client_id=48&emp_id='+search_employee+'&installment_month='+sDate+'&page='+page;
        }
        $.ajax(
            {
                url: url,
                type: "GET",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                // data:{search_employee:search_employee,sDate:sDate},
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('#installment_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                flag=false;
                var string = "";
                if(data.status == "pass"){
                    data = data.data.data;
                    count++;
                    for (let i = 0; i < data.length; i++) {
                        var checkbox = '';
                        var inst_status = '';
                        count++;
                        var count_margin = 20;
                        if(data[i]['status'] == 0){
                            checkbox = '<input type="checkbox" style="width: 15px;margin-top: -7px;" onchange="checkboc('+data[i]['installment_id']+' , this)">';
                            count_margin = 5;
                        }
                        if(data[i]['status'] == 1){
                            inst_status = '<span class="text-danger">Rescheduled</span>';
                        } else {
                            inst_status = loanStatus(data[i]['status']);
                        }
                        var url_detail=$('.base_url').val()+'loanadvance/detail/'+data[i]['loan_req_id'];
                        string +='<tr id="row'+data[i]['installment_id']+'">'+
                                    '<td><div><span style="display: flex;margin-bottom: -10px;">'+checkbox+
                                        '<span style="margin-left:'+count_margin+'px !important;">'+count+'</span>'+
                                    '</span></div></td>'+
                                    '<td>'+data[i]['empcode']+'</td>'+
                                    '<td><a href="'+url_detail+'" title="View Loan">'+data[i]['name']+'</a></td>'+
                                    '<td>'+data[i]['application_date']+'</td>'+
                                    '<td>'+data[i]['loan_type']+'</td>'+
                                    '<td><div class="amount"><a href="'+$('.base_url').val()+'loanadvance/hr_loan_amortization_schedule/'+data[i]['installment_id']+'">'+data[i]['monthly_installment']+'</a></div></td>'+
                                   '<td>'+inst_status+'</td>'+
                                    '<td>'+data[i]['payroll_month']+'</td>'+
                                '</tr>';
                    }
                    
                }
                $("#installment_data").append(string);
                load_table = true;
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                load_table = true;
                alert('server not responding...');
            });
    }
        var ids = [];

        function checkboc(id, e) {
            if (e.checked) {
                ids.push(id);
            } else {
                ids = ids.filter(item => item !== id)
            }
            if (ids.length > 0) {
                $("#rec_btn").attr('disabled', false);
            } else {
                $("#rec_btn").attr('disabled', true);
            }
        }

        $("#rec_btn").on('click', function() {
            var url = ($('.base_url').val()) + 'api/hr/Loan_Advance/installments/update';
            $.ajax({
                url: url,
                headers: {
                    'Authorization': localStorage.getItem("laravel_token")
                },
                type: "POST",
                data: {
                    ids: ids,
                    emp_id: $('.login_id').val(),
                },
                success: function(response) {
                    if (response) {
                        if(response.status == "pass"){
                            $(".alert").addClass("alert-success");
                            $(".alert").css('display' , 'block');
                            var temp='<button type="button" class="close" data-dismiss="alert">×</button>\n\t<div class="msg_list"><span class="success_message_text">'+response.message+'</span></div>';
                            $(".alert").html(temp)
                            setInterval(function () {$('.success_message').hide()}, 3000);
                            setInterval(function () {$('.error_message').hide()}, 3000);
                            var st = '';
                            ids.forEach(function(item) {
                                st += '<tr id=row'+item+'>'+$("#row"+item).html()+'</tr>';
                                $("#row"+item).remove();
                            });
                            // $("#installment_data").append(st);
                            $('#installment_data > tr').each(function(index , tr){ 
                                $(this).find('td:nth-child(1)').find('span').find('span').html(index+1);
                            });
                        }  
                        else{
                            $(".alert").addClass("alert-danger");
                            $(".alert").css('display' , 'block');
                            $(".alert").html("Unable to update installment")
                        }
                    }
                },
            });
        });

        $('.dateselect').datepicker({
        format: 'dd-MM-yyyy',

        // startDate: '-3d'
        }).on('show', function(e) {
            $("#overlay").css('display' , 'block');
        }).on('hide', function(e) {
            $("#overlay").css('display' , 'none');
        }).on('changeDate', function(e) {
            $('.datepicker').hide();
            $("#overlay").css('display' , 'none');
        });
    $(".dropdown-menu a").click(function(){
        setTimeout(function(){
            $(".dropdown button span:nth-child(2)").css("position", "absolute");
        }, 100)
    });
    </script>
    @endsection