@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>
    .table table tbody {
        max-height: 291px !important;
    }
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    .reason_textarea{
        font-size: 11px !important;
    }
    a, a:link, a:active, a:visited {
        color: #3080EA;
    }
    textarea {
        border:1px solid #d8dcdf !important;
        resize: none;
    }
    table tbody tr td a {
        font-size: 11px !important;
        font-family: Roboto, sans-serif !important;
        margin-left: 13px !important;
    }
        table tbody tr td {
        padding: 7.5px !important;
    }

    .table table tr {
        display: table; /* display purpose; th's border */
        width: 100%;
        box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
    }
    .table table thead {
        display: table; /* to take the same width as tr */
        width: 100%;
    }
    .table table tbody {
        display: block; /* to enable vertical scrolling */
        max-height: 600px; /* e.g. */
        overflow-y: auto; /* keeps the scrollbar even if it doesn't need it; display purpose */
    }
</style>
<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 Reason
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;">
                                <div class="col-md-2" style="height:80px;">
                                    <div class="margin_left_five" style="font-weight: bold; margin-top: 30px;">Loan / Advance Reason</div>
                                </div>
                               <div class="col-md-10" style="height:80px;">
                                    <textarea placeholder="Loan & Advance Reason" class="reason_textarea" id="reason" ></textarea>
                                    <input type="hidden" id="reasonId">
                               </div>
                            </div>
                            <div class="expense_table_footer">
                              <button class="search_btn float-right mt-2 withdraw_btn reason_save_btn" id="save" onclick="addReason()" >Save</button>
                              <button class="search_btn float-right mt-2 withdraw_btn reason_save_btn" id="update" onclick="updateReason()" style="display: none;" >Update</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <br>
     <br>
     <div class="row">
        <div class="container-fluid">
            <div class="expense_header margin_top_twentyfour 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 Reason
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="reason_box">
                              <div class="table">
                                 <table>
                                    <tbody class="reason_data" id="reason_data">
                                    </tbody>
                                </table>
                             </div>
                             <div class="expense_table_footer">
                             </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@include('notification')
@stop
@section('scripts')
<script>
var page = 1;
var flag=false;
var append_flag=false;
$( document ).ready(function() {
   loadMoreData(page);
});
function addReason()
{
   var reason = document.getElementById("reason").value;
   $.ajax({
       url: $('.base_url').val()+'api/hr/Loan_Advance/reasons',
       type: "POST",
       headers: {
          'Authorization':localStorage.getItem("laravel_token")
       },
   data:{reason:reason,client_id: $('.client_id').val()},
   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_text').html(html);
        setInterval(function() {
            $('.error_message').css('display', 'none');
            $('.error_message_text').html("");
        }, 3000);
      }
      else{
            $('.success_message').show();
            $('.success_message_text').html(response.message);
            setInterval(function () {$('.success_message').hide()}, 2000);
            append_flag=true;
            loadMoreData(page);
      }
   }
 });
}

function editReason(id, reason)
{
   document.getElementById("reason").value = reason;
   document.getElementById("reasonId").value = id;
   $("#save"). css("display", "none");
   $("#update"). css("display", "block");
}
function updateReason()
{
   var reasonId = document.getElementById("reasonId").value;
   var reason = document.getElementById("reason").value;
   $.ajax({
   url: $('.base_url').val()+'api/hr/Loan_Advance/reasons/'+reasonId,
   type: "PUT",
   headers: {
      'Authorization':localStorage.getItem("laravel_token")
   },
   data:{reason:reason,client_id: $('.client_id').val()},
   success:function(response){
      $('.success_message').show();
      $('.success_message_text').html(response.message);
      setInterval(function () {$('.success_message').hide()}, 2000);
      $('.reason_textarea').val(' ');
      $("#save"). css("display", "block");
      $("#update"). css("display", "none");
      append_flag=true;
      loadMoreData(page);
   }
});

}
$("tbody").scroll(function() {
        if($(".table").scrollTop() + $(".table").height() >= 290) {
            page++;
            loadMoreData(page);
        }
    });
 function loadMoreData(page){
     $.ajax(
        {
            url: $('.base_url').val()+'api/hr/Loan_Advance/reasons?page='+page,
            type: "GET",
            headers: {
             'Authorization':localStorage.getItem("laravel_token")
            },
            beforeSend: function()
            {
                if(flag)
                {
                    $('#reason_data').empty();
                }
            }
        })
        .done(function(data)
        {
            flag=false;
            if(append_flag)
            {
                $("#reason_data").html(data.html);
            }
            else
            {
                $("#reason_data").append(data.html);
            }
            append_flag=false;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
         alert('server not responding...');
        });
 }
</script>
@endsection