@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') }}"> -->
<link rel="stylesheet" href="{{ URL::asset('assets/css/multi-select.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
@section('content')
<style type="text/css">
    .expense_table {
        box-shadow: 0px 3px 6px 0px #0000001a;
    }
    .alert-dismissible .close {
        right: 1px;
    }
    .dropdown_option_custom:hover {
        background-color: #D8DCDF !important;
        max-width: 258px !important;
        text-decoration: none !important;
    }
    .dropdown-menu>li>a:focus {
        outline: none !important
    }
    .ml_fifteen>div>div>ul>li>a>span {
    margin-left: -20 !important;
    }
    .selected ul {
        border: 1px solid red !important;
    }
    .modal_title {
        line-height: 2.428571 !important;
        margin-left: 10px;
        font-weight: 700;
        font-family: Roboto, sans-serif;
    }
    .modal-body {
        height: 94px;
    }
    .close {
        margin-top: 4px !important;
        margin-right: 6px;
    }
    .modal-header {
        padding: unset !important;
        height: 29px !important;
    }

    .expense_table {
        margin-left: 16px;
        width: 1208px;
    }
    .reason_submit_btn {
        margin-top: -19px !important;
        margin-left: 510px !important;
        margin-right: -5px !important;
    }
    .modal_tbl {
        border: 1px solid #D8DCDF;
        width: 587px !important;
        margin-left: 5px !important;
        margin-top: 4px !important;
        width: 587px !important;
    }
    .sub_heading {
        margin-top: -5px;
        color: #343434;
        margin-left: 5px;
        font-size: 13px;
        font-family: Roboto, sans-serif;
    }
    .modal_width {
        width: 48% !important;
    }
    .footer_btn {
        margin-top: -19px !important;
        margin-left: 498px !important;
        margin-right: -5px !important;
    }
    .termination_textarea_label {
        top: 21px !important;
        margin-left: 2.5rem !important;
    }
    label {
        font-weight: unset !important;
    }
    .terminate_textarea {
    width: 51.5%;
    margin-top: 18px;
    }
    .modal-content {
        width: 628px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .font_size {
        font-size: 12px !important;
    }
    .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
        background-color: #D8DCDF !important;
        color: black !important;
    }
    .dropdown-menu {
        padding-bottom: 0px !important;
    }
    .btn-default .badge {
        top: -1px !important;
    }
    .la_list_footer {
        margin-top: -2px !important;
    }
    .bs-searchbox>input {
        width: 236px !important;
        margin-left: 2px;
        height: 22px;
    }
    .badge {
        background-color: #61BF63 !important;
        font-size: 11px;
    }
    .badge-secondary {
        font-family: Roboto, sans-serif !important;
    }
    .form-control:focus {
        border-color: #D8DCDF;
        outline: 0;
        -webkit-box-shadow: unset !important;
        box-shadow: unset !important;
    }
    .nav, .nav-tabs{
        margin-left: 11px !important;
    }
    .nav-tabs>li>a {
        width: unset !important;
        height:  20px !important;
    }
    .nav>li>a{
        padding-left: 15px !important;
        padding-right: 10px;
        margin-top: 2px !important; 
        margin-left: -6px !important;
    }
    .reason_textarea {
        font-size: 11px !important;
    }
    a, a:link, a:active, a:visited {
        color: #3080EA;
    }
    textarea {
        border:1px solid #d8dcdf !important;
        resize: none;
    }
    .reason_table table tbody tr td a {
        font-size: 11px !important;
        font-family: Roboto, sans-serif !important;
        margin-left: 13px !important;
    }
    .reason_table table tbody tr td {
        padding: 5.1px !important;
    }

    .reason_table table tr {
        display: table;
        width: 100%;
        box-sizing: border-box;
    }
    .reason_table table thead {
        display: table;
        width: 100%;
    }
    .reason_table table tbody {
        display: block;
        max-height: 600px;
        overflow-y: auto;
    }
    .reason_table table tbody {
        max-height: 252px !important;
    }
    .disabled{
        color: #8D8D8D !important;
        border: 1px solid #999999a8 !important;
    }
    .table .table {
     background-color: unset !important; 
    }
    #universal_table table tbody {
        width: 1166px !important;
        max-height: 86px !important;
    }
    .checkbox_pool_amount {
        width:23px !important;
        height:18px !important;
        margin-left:70px !important;
    }
    .table table tbody tr td div span{
        margin-left: 14px !important;
    }
    select:disabled + label{
        color: #8D8D8D !important;
        font-weight: 100 !important;  
    }
    input:disabled{
        background-color: white !important;
    }
    input:disabled+label {
        color: #8D8D8D;
    }
    .disable-arrow:after {
    border-top: 5px solid red !important; 
    }
    .dropdown-menu ul li  a:hover{
        background-color: #D8DCDF!important;
    }
    .dropdown-menu ul li a {
        padding-left: 30px;
        padding-top: 6px;
    }
    .dropdown-menu {
        width: 0px !important;
        border-radius: 0px !important;
    }
    ::placeholder {
      color: transparent !important;
      opacity: 1; /* Firefox */
    }
    /*Align table columns and rows*/
   /* .table tr th, .table tr td {
        width: 199px !important;
        padding: 7px 20px !important;
    }
    .table table {
        width: 100% !important;
    }
    .table table thead {
        width: unset !important;
    }*/
    /*End alignment*/
    .dropdown-menu ul li:nth-child(odd) {
        background-color: #FAFAFB;
        opacity: 1;
        color: #343434;
    }
        .dropdown-menu ul li:nth-child(even) {
        background-color: #FFFFFF;
        opacity: 1;
        color: #343434;
    }

    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 150px !important;
        padding: 7px 15px;
    }
    .table table tr {
            display: table; /* display purpose; th's border */
            width: 1208px !important;
            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;
        max-height: 291px !important;
        overflow-y: auto;
        width: 1208px;
        overflow-x: hidden !important;
    }
    /*End allignment*/

    table thead tr th span {
    margin-left: 16px !important;
    }
    table tbody tr td div span {
        margin-left: 14px !important;
    }
    .select:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #333333;
        position: absolute;
        top: 11px !important;
        right: 9px;
     }
    .approval_details_footer {
        height: 27px !important;
        margin-top: 20px;
    }
    .expense_header{
        margin-left:  -14px;
    }
    .font_size_twelve {
        font-weight: 400 !important;
        font-size: 11px !important;
        font-family: Roboto !important;
    }
    .font_weight {
        font-weight: 400 !important;
        font-size: 11px !important;
        font-family: Roboto !important;
    }
    .table tbody tr td{
        padding: 6px !important;
    }
    .table tbody tr td a{
        font-size: 11px !important;
        font-family: Roboto, sans-serif;
    }
    .table thead tr th{
        padding: 4.5px !important;
    }
    .filter-option {
       font-size: 11px !important; 
    }
    .select-text {
        padding: 5px 5px 5px 5px;
        font-size: 11px;
        padding-left: 7px !important;
    }
    .dropdown_height {
        height: 26px !important;
        }
   .notification_custom {
      bottom: 2.5% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: 125px !important;
   }
    .success_message{
        height: 40px !important;
    }
    .dropdown-toggle
    {
        border: unset !important;
        padding: unset !important;
    }
    .multi-lable
    {
        top: 6%;
    }
    .dropdown-toggle
    {
        box-shadow: unset !important;
        background-color: unset !important;
        outline: unset !important;
    }
    .dropdown-toggle:focus
    {
        outline: none !important;
        outline-offset: unset !important;
    }
    .bs-caret
    {
        display: none;
    }
    .multi_dropdown_color
    {
        color: #3080EA;
        opacity: 1;
    }
    .multi_dropdown_color_border
    {
        border: 1px solid #3080EA;
        border-radius: 4px;
    }
    .glyphicon-ok{
        color: white !important;
        font-size: 8px !important;
        background-color: #3080EA !important;
        padding: 3px;
        border-radius: 4px;
    }
    .dropdown-menu li:focus{
        border: 0 !important;
    }
    .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
        margin-left: -8px !important;
        font-size: 11px !important;
        font-family: Roboto !important;
    }
    .add_new {
        /*float: right !important;*/
        margin-top: 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: 300px; /* e.g. */
        overflow-y: auto; /* keeps the scrollbar even if it doesn't need it; display purpose */
    }
    .panel-heading-nav {
      border-bottom: 0;
      padding: 10px 0 0;
    }
    .panel-heading-nav .nav {
      padding-left: 10px;
      padding-right: 10px;
    }
    .nav-tabs>li>a {
        border: 1px solid #d8dcdf;
        border-radius: 3px;
        background: linear-gradient(180deg, #ededed 0%, #fafafa 100%) 0% 0% no-repeat padding-box;;
        width: 168px;
        height: 28px;
    }
    .nav-tabs {
        border-bottom: unset;
        margin-left: 4px;
        margin-top: -20px;
    }
    .tabs_left_margin {
        margin-left: 10px;
    }
    .tabs_text {
        margin-top: -8px;
        margin-left: -5px;
        color: #3080EA;
        font-size: 11px !important;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        font-family: Roboto, sans-serif;
        font-weight: bold !important;
        background: linear-gradient(0deg, #f1fafe 0%, #bde9fb 100%) 0% 0% no-repeat padding-box;
        border-bottom: 1px solid #d8dcdf;
    }
    .reason_save_btn{
        margin-left:96.19%;
        margin-top:5px;
    }
    .reason_update_btn{
        margin-left:95.23% !important;
        margin-top:5px;
    }
    .list {
        margin-top: 12px;
    }
</style>
<div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Setup</span>
</div>
@php
if($setpup_detail)
{
    $setpup_detail->loan_setup=(object)$setpup_detail->loan_setup;
    $setpup_detail->loan_setup->loan_type=(object)$setpup_detail->loan_setup->loan_type;
}
if(isset($pool_amount) && !is_string($pool_amount))
{
    $pool_amount[0]=(object)$pool_amount[0];
}
@endphp
<section class="expense">
    <div class="row">
        @include('loan_advance.setup.partials.la_setup')
        @include('loan_advance.setup.partials.universal')
        @include('loan_advance.setup.partials.reasons')
        @include('loan_advance.setup.partials.la_list')
    </div>
</section>
@include('notification')
@stop
@section('scripts')
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script>
    $('body').on('click', '.reason_save_btn', function() {
        $('#add_reason_modal').modal('show');
        $('.add_reason').css('display', 'block');
        $('.update_reason').css('display', 'none');
        $('.modal_title').text('Add Reasons');

    });
    $('body').on('click', '.close_modal', function() {
        $('#add_reason_modal').modal('hide');
    });
    var reasons_page = 1;
    var reasons_flag=false;
    var append_reasons_flag=false;
    $(document).ready(function(){

    if($('#is_universal').find(":selected").val()==2){
        $('.universal_pool_amount, .universal_comments, .universal_data_save, .pool_amount').addClass('disabled');
        $('.comment_label, .pool_amount_label').css("color", "#ccc");
        $(".universal_pool, .remaining_pool").val("");
    }
    handleDepartments();
     var url      = window.location.href;
     if (~url.indexOf("id") || ~url.indexOf("create=new_setup")){
        $('#universal').removeClass('active');
        $('#setup').addClass('active');
        $('#universal_tab').removeClass('in');
        $('#setup_tab').addClass('in');
        $('#universal_tab').removeClass('active');
        $('#setup_tab').addClass('active'); 
     }
        var selected_departments = null;
        if (Object.keys(selected_departments).length > 0) {
            setCountForMutliple('.department_ids');
        }
        var selected_desig = null;
        if (Object.keys(selected_desig).length > 0) {
            setCountForMutliple('.unique_position_ids');
        }
        var selected_bands = null;
        if (Object.keys(selected_bands).length > 0) {
            setCountForMutliple('.band_ids');
        }
        var selected_reasons = null;
        if (Object.keys(selected_reasons).length > 0) {
            setCountForMutliple('.reason_ids');
        }
        loadReasonsData(reasons_page);
    });

    $(".reasons_tbl_body").scroll(function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        // if($(".reason_table").scrollTop() + $(".reason_table").height() >= 250) {
            reasons_page++;
            loadReasonsData(reasons_page);
        }
    });

    function loadReasonsData(reasons_page){
     $.ajax(
        {
            url: $('.base_url').val()+'api/hr/Loan_Advance/reasons?page='+reasons_page,
            type: "GET",
            headers: {
             'Authorization':localStorage.getItem("laravel_token")
            },
            beforeSend: function()
            {
                if(reasons_flag)
                {
                    $('#reason_data').empty();
                }
            }
        })
        .done(function(data)
        {
            reasons_flag=false;
            if(append_reasons_flag)
            {
                $("#reason_data").html(data.html);
            }
            else
            {
                $("#reason_data").append(data.html);
            }
            append_reasons_flag=false;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
         alert('server not responding...');
        });
    }

    function editReason(id, reason)
    {
        $('#add_reason_modal').modal('show');
        $('.add_reason').css('display', 'none');
        $('.update_reason').css('display', 'block');
        $('.modal_title').text('Update Reason');
   
       document.getElementById("reason").value = reason;
       $("#reason").attr("reasonId",id);
    }
    function updateReason()
    {
       var reason = document.getElementById("reason").value;
       var reasonId = $("#reason").attr("reasonId");
       $.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').css('display', 'block');
                $('.success_message').removeClass('fade')
                $('.success_message_text').html('Reason updated successfully.');
                setInterval(function() {
                    $('.success_message').css('display', 'none');
                    $('.success_message').addClass('fade');
                    $('.success_message_text').html("");
                }, 2000);
              $('#add_reason_modal').modal('hide');
              append_reasons_flag=true;
              loadReasonsData(reasons_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){
                console.log(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() {
                    $('.error_message').css('display', 'none');
                    $('.error_message').addClass('fade');
                    $('.error_message_text').html("");
                }, 2000);
              }
              else{
                $('.success_message').css('display', 'block');
                $('.success_message').removeClass('fade')
                $('.success_message_text').html(response.message);
                setInterval(function() {
                    $('.success_message').css('display', 'none');
                    $('.success_message').addClass('fade');
                    $('.success_message_text').html("");
                }, 2000);
                    append_reasons_flag=true;
                    loadReasonsData(reasons_page);
                }
           }
        });
    }

    $(".remove_reason").click(function() {
        var reason_ids = [];
        $('input[name="reason"]:checked').each(function() {
            reason_ids.push(this.value);
        });

        $.ajax({
               url: $('.base_url').val()+'api/hr/Loan_Advance/reasons/delete',
               type: "POST",
               headers: {
                  'Authorization':localStorage.getItem("laravel_token")
               },
               data:{reason_ids:reason_ids},
               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() {
                    $('.error_message').css('display', 'none');
                    $('.error_message').addClass('fade');
                    $('.error_message_text').html("");
                }, 2000);
              }
              else{
                $('.success_message').css('display', 'block');
                $('.success_message').removeClass('fade')
                $('.success_message_text').html(response.message);
                setInterval(function() {
                    $('.success_message').css('display', 'none');
                    $('.success_message').addClass('fade');
                    $('.success_message_text').html("");
                }, 2000);
                    append_reasons_flag=true;
                    loadReasonsData(reasons_page);
                }
           }
        });
    });

    $('body').on('change', '.department_ids', function(event){
        event.stopImmediatePropagation();
        var departments = $(this).val();
        if ($(this).val().length === 0) return;
        setCountForMutliple('.department_ids');
        $.ajax({
            url: $('.base_url').val()+'api/common/designations',
            type: "GET",
            data: {department_id:departments},
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            }
        })
        .done(function(response){
            if (response.status == 'pass') {
                var selector = '';
                selector +='<select class="select-text selectpicker multiselect_width unique_position_ids dropdown_height" multiple data-live-search="true" data-actions-box="true" required name="unique_position_ids[]" title="Not Set">';
                if (response.data.length > 1) {
                    selector +='<option value="-1">ALL</option>';
                }
                for (var i =0 ; i < response.data.length; i++) {
                    selector +='<option value="'+response.data[i]['designation_id']+'">'+response.data[i]['designation_name']+'</option>';
                }
                selector +='</select>';
                selector +='<label class="select-label multi-lable font_weight">Designation</label>';
                $('.unique_position_div').html(selector);
                $('.unique_position_ids').selectpicker({
                    'actionsBox' : false,
                    'tickIcon' : 'glyphicon-ok',
                    'size' : 20
                });
            } else {
                var selector = '';
                selector +='<select class="select-text selectpicker multiselect_width unique_position_ids dropdown_height" multiple data-live-search="true" data-actions-box="true" required name="unique_position_ids[]" title="Not Set">';
                selector +='</select>';
                selector +='<label class="select-label multi-lable font_weight">Designation</label>';
                $('.unique_position_div').html(selector);
                $('.unique_position_ids').selectpicker({
                    'actionsBox' : false,
                    'tickIcon' : 'glyphicon-ok',
                    'size' : 20
                });
                $('.error_message').css('display', 'block');
                $('.error_message').removeClass('fade')
                $('.error_message_text').html('No position found for selected department(s).');
                setInterval(function() {
                    $('.error_message').css('display', 'none');
                    $('.error_message').addClass('fade');
                    $('.error_message_text').html("");
                }, 2000);
            }
        })
        .fail(function(jqXHR, ajaxOptions, thrownError){
            //alert('server not responding...');
        });
    });
    $(document).on('change', '.unique_position_ids', function(){
        if ($(this).val().length === 0) return;
        setCountForMutliple('.unique_position_ids');
    });
    $(document).on('change', '.band_ids', function(){
        if ($(this).val().length === 0) return;
        setCountForMutliple('.band_ids');
    });
    $(document).on('change', '.reason_ids', function(){
        if ($(this).val().length === 0) return;
        setCountForMutliple('.reason_ids');
    });
    $('body').on('focusin', '.dropdown-toggle', function() {
        if($(this).parent('.open').length == 0)
        {
            $(this).parent().parent().find('label').addClass( "multi_dropdown_color" );
            $(this).parent().addClass('multi_dropdown_color_border');
        }
        else
        {
            $(this).parent().removeClass('multi_dropdown_color_border');
            $(this).parent().parent().find('label').removeClass( "multi_dropdown_color" );
        }
    });

    $(".is_universe").change(function(){
        var universal_pool = $(".universal_pool_amount").attr("universal_pool_data");
        var remaining_pool = $(".remaining_pool").attr("remaining_pool_data");
        if(this.value == 1) {
            $('.pool_amount').addClass('disabled');
            $('.comment_label').css("color", "#3080EA");
            $('.pool_amount_label').css("color", "#ccc");
            $('.universal_pool_amount, .universal_comments, .universal_data_save').removeClass('disabled');
            $(".universal_pool").val(universal_pool);
            $(".remaining_pool").val(remaining_pool);
        }
        else if(this.value == 2) {
            $('.universal_pool_amount, .universal_comments, .universal_data_save, .pool_amount').addClass('disabled');
            $('.comment_label, .pool_amount_label').css("color", "#ccc");
            $(".universal_pool, .remaining_pool").val("");
        }
        else if(this.value == 0) {
            $('.pool_amount').removeClass('disabled');
            $('.comment_label, .pool_amount_label').css("color", "#3080EA");
            $('.universal_pool_amount, .universal_comments, .universal_data_save').removeClass('disabled');
            $(".universal_pool").val(universal_pool);
            $(".remaining_pool").val(remaining_pool);
        }
    });
    $(".pool_amount").change(function(){
        $("#flexCheckChecked").prop("checked", false);
    });

    $('body').click(function(){
        $('.multi_dropdown_color_border').removeClass('multi_dropdown_color_border');
        $('.multi-lable').removeClass("multi_dropdown_color");
    });
    $('.selectpicker').selectpicker({
        'actionsBox' : false,
        'tickIcon' : 'glyphicon-ok',
        'size' : 20
    });
    $(document).on("changed.bs.select",".selectpicker", function(e, clickedIndex, isSelected, previousValue) {
        e.stopImmediatePropagation();
        var temp=$(this).children("option[value='-1']").text();
        if(temp == 'ALL' && clickedIndex == 0 && isSelected == true){
            $(this).selectpicker('selectAll');
        }
        else if(temp == 'ALL' && clickedIndex == 0 && isSelected == false){
            $(this).selectpicker('deselectAll');
        }else if(clickedIndex !=0)
        {
            var select_flag=$(this).children("option[value='-1']").is(":checked");
            if(select_flag)
            {
                $(this).children("option[value='-1']").prop("selected", false);
                $('.selectpicker').selectpicker('refresh');
            }
        }
    });
    $('body').on('click', '.add_new', function() {
        window.location.replace($('.base_url').val() + 'loanadvance/hr_loan_setup?create=new_setup');
    });
    $(".setup_submit_btn").unbind().click(function() {
        var departments_ids = [];
        $('.department_ids').find(":selected").each(function(index) {
            departments_ids.push(parseInt($(this).val()));
        });
        var unique_position_ids = [];
        $('.unique_position_ids').find(":selected").each(function(index) {
            unique_position_ids.push(parseInt($(this).val()));
        });
        var band_ids = [];
        $('.band_ids').find(":selected").each(function(index) {
            band_ids.push(parseInt($(this).val()));
        });
        var reason_ids = [];
        $('.reason_ids').find(":selected").each(function(index) {
            reason_ids.push(parseInt($(this).val()));
        });
        var flag_pool=$('#is_universal').find(":selected").val();
        var pool_amount=flag_pool==1 ? $('.universal_pool_amount').val() : flag_pool==0 ? $('.pool_amount').val() : $('#is_universal').find(":selected").val();
        
        var is_universal = flag_pool==1?1:0;
        let obj = {
            "loan_advance_name": $('.loan_advance_name').val(),
            "country_id": $('#country_id').find(":selected").val(),
            "max_limit_amount":$('.max_limit_amount').val(),
            "pool_amount": $('.is_universe').find(":selected").val() == 2?'':pool_amount,
            "not_set_flag": $('.is_universe').find(":selected").val() == 2?1:0,
            "usage_percentage_id": $('.usage_percentage_id').find(":selected").val(),
            "essential_interval": $('.essential_interval').val(),
            "loan_activation_id": $('.loan_activation_id').find(":selected").val(),
            "loan_type_facility_id": $('.loan_type_facility_id').find(":selected").val(),
            "loan_criteria_id": $('.loan_criteria_id').find(":selected").val(),
            "years_months_id": 2,
            "max_limit": 3,
            "loan_amount": 2000,
            "rescheduling_id": $('.rescheduling_id').find(":selected").val(),
            "rescheduling_limit_id": $('.rescheduling_limit_id').find(":selected").val(),
            "disburstment": $('.disburstment').val(),
            "deduction_gap_id": $('.deduction_gap_id').find(":selected").val(),
            "max_installments": $('.max_installments').val(),
            "loan_advance_type_id": $('.loan_advance_type_id').find(":selected").val(),
            "essential_interval_years_months_id": $('.essential_interval_years_months_id').find(":selected").val(),
            "max_limit_id": $('.max_limit_id').find(":selected").val(),
            "payback_tenure": $('.payback_tenure').val(),
            "payback_tenure_years_months_id": $('.payback_tenure_years_months_id').find(":selected").val(),
            "department_ids": departments_ids,
            "unique_position_ids": unique_position_ids,
            "reason_ids": reason_ids,
            "band_ids": band_ids,
            "is_universal":is_universal,
        };
        @if($setpup_detail)
            obj["setup_id"] = ;
            var url = ($('.base_url').val()) + 'api/hr/Loan_Advance/setup/';
            var method = 'PUT';
        @else
            var url = ($('.base_url').val()) + 'api/hr/Loan_Advance/setup';
            var method = 'POST';
        @endif
        ajaxCall(url, obj, method);
    });
    var page=1;
    var flag=false;
    var load_table = true;
    $(".tbl_section tbody").scroll(function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
            load_table = false;
            page++;
            loadMoreData();
        }
    });
    function loadMoreData(){
        $.ajax(
            {
                url: $('.base_url').val()+'api/hr/Loan_Advance/setup?page='+page,
                type: "GET",
                headers: {
                    'Authorization':localStorage.getItem("laravel_token")
                },
                beforeSend: function()
                {
                    if(flag)
                    {
                        $('#listing_data').empty();
                    }
                }
            })
            .done(function(data)
            {
                flag=false;
                if(data.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                htmlData(data.data.data);
                load_table = true;
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                load_table = true;
                alert('server not responding...');
            });
    }
    function htmlData(data)
    {

        var html='';
        var base_url=$('.base_url').val();
        for (var i =0 ; i <= data.length - 1; i++) {
            html=html+'<tr>';
                html=html+'<td><div><span>'+data[i]['country']['country']+'</span></div></td>';
                html=html+'<td>';
                    html=html+'<a href="'+base_url+'loanadvance/hr_loan_setup/?id='+data[i]['id']+'" title="View Loan">';
                        html=html+data[i]['setup_name'];
                    html=html+'</a>';
                html=html+'</td>';
                html=html+'<td>'+data[i]['loan_criteria']+'</td>';
                html=html+'<td>';
               var str = '';
                for (var j = 0; j <= data[i]['departments'].length - 1; j++) {
                     
                    // html=html+data[i]['departments'][j]['department_name'] +',';
                    var str=str+data[i]['departments'][j]['department_name'] +',';
                }

                var str_length = str.length;
                if(str_length > 5)
                {
                    var depts = str.substr(0, 15) + '... ';

                    var words = str.split(",");
                    var total_depts = words.length;
                    var total = total_depts-1;
                    html = html+depts+'<span title="'+str+'" class="badge badge-success">' + total + '</span>';
                }
                else {
                    var depts = str;
                    html = html+depts;
                }

                html=html+'</td>';
                html=html+'<td>'+data[i]['payback_tenture']+'</td>';
                html=html+'<td>'+(data[i]['status']?"Active":"Inactive")+'</td>';
            html=html+'</tr>';   
        }
        $("#listing_data").append(html);
    }
    var universal_flag=false;
    $('body').on('click', '.universal_data_save', function() {
        universal_flag=true;
        let obj = {
            "pool_amount":$('.universal_pool_amount').val(),
            "comments":$('.universal_comments').val(),
            "calculation_type":"universal",
        };
        var url = ($('.base_url').val()) + 'api/hr/Loan_Advance/setup_pool';
        var method = 'POST';
        if($('.universal_id').val())
        {
            url=url+'/'+$('.universal_id').val();
            method = 'PUT';
        }
        ajaxCall(url, obj, method);
    });
    function ajaxCall(url, data, method) {
        $.ajax({
            url: url,
            headers: {
                'Authorization': localStorage.getItem("laravel_token")
            },
            type: method,
            data: data,
            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() {
                        $('.error_message').css('display', 'none');
                        $('.error_message').addClass('fade');
                        $('.error_message_text').html("");
                    }, 3000);

                } 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("");
                    }, 3000);
                    if(class_name == '.success') {
                        page=1;
                        flag = true;
                        loadMoreData();
                        if($('.setup_submit_btn').attr('data-check') == 'true')
                        {
                            $(".department_ids").val('default');
                            $(".department_ids").selectpicker("refresh");
                            $(".unique_position_ids").val('default');
                            $(".unique_position_ids").selectpicker("refresh");
                            $(".band_ids").val('default');
                            $(".band_ids").selectpicker("refresh");
                            $(".reason_ids").val('default');
                            $(".reason_ids").selectpicker("refresh");
                            $('.setup_form')[0].reset();
                        }
                        if(universal_flag)
                        {
                            // location.reload();
                            window.location.href = ($('.base_url').val()) + 'loanadvance/hr_loan_setup';
                        }
                        // setInterval(function() {
                            // location.reload();
                            // window.location.replace($('.base_url').val() + 'loanadvance/hr_loan_setup');
                        // }, 1500);
                    }
                }
            },
        });
    }
    function disableArrow(className)
    {
        $("."+className).addClass("disable-arrow");
        $("."+className).removeClass("select-label");
    }
    $(".loan_criteria_id").on('change' , function(){
        if ($( ".loan_criteria_id option:selected" ).text().toLowerCase() != 'amount') {
            if (!document.getElementById('max_limit_amount').value) {
                $('#max_limit_amount').val(-1);
            }
            $('.gross_loan_section').css('display','block');
            $('.amount_loan_section').css('display','none');
        } else {
            if ($('#max_limit_amount').val() == -1) {
                $('#max_limit_amount').val('');
            }
            $('.amount_loan_section').css('display','block');
            $('.gross_loan_section').css('display','none');
        }
    });

    @if ($setpup_detail && strtolower($loan_advance_type[$setpup_detail->loan_setup->loan_type->id]->loan_type) == 'advance')
        $(".loan_criteria_id option:contains(Gross Salary)").attr('selected', 'selected');
        if (!document.getElementById('max_limit_amount').value) {
            $('#max_limit_amount').val(-1);
        }
        $('.gross_loan_section').css('display','block');
        $('.amount_loan_section').css('display','none');
        $(".loan_criteria_id").attr('disabled' , true);
        $(".rescheduling_id").attr('disabled' , true);
        $(".payback_tenure").attr('disabled' , true);
        $(".payback_tenure_years_months_id").attr('disabled' , true);
        $(".rescheduling_limit_id").attr('disabled' , true);
        // $(".max_installments").attr('disabled' , true);
        $(".disburstment").attr('disabled' , true);
    @endif

    $(".loan_advance_type_id").on('change' , function(){
        if ($(".loan_advance_type_id option:selected").text() == "Advance") {

            $(".loan_criteria_id option:contains(Gross Salary)").attr('selected', 'selected');
            if (!document.getElementById('max_limit_amount').value) {
                $('#max_limit_amount').val(-1);
            }
            $('.gross_loan_section').css('display','block');
            $('.amount_loan_section').css('display','none');
            $(".advance_case").css('color' , '#8D8D8D');
            $(".advance_case").css('margin-top' , '12px');
            $(".font_color  span").css('color' , 'transparent');
            $(".loan_criteria_id").attr('disabled' , true);
            disableArrow('loan_criteria_id');
            $(".rescheduling_id").attr('disabled' , true);
            $(".payback_tenure").attr('disabled' , true);
            $(".payback_tenure_years_months_id").attr('disabled' , true);
            $(".rescheduling_limit_id").attr('disabled' , true);
            // $(".max_installments").attr('disabled' , true);
            $(".disburstment").attr('disabled' , true);
        } else {

            $(".advance_case").css('margin-top' , '-2px');
            $(".advance_case").css('color' , '#3080EA');
            $(".font_color  span").css('color' , '#343434');
            $(".loan_criteria_id").attr('disabled' , false);
            $(".rescheduling_id").attr('disabled' , false);
            $(".payback_tenure").attr('disabled' , false);
            $(".payback_tenure_years_months_id").attr('disabled' , false);
            $(".rescheduling_limit_id").attr('disabled' , false);
            // $(".max_installments").attr('disabled' , false);
            $(".disburstment").attr('disabled' , false);
        }
    });

    $(".rescheduling_id").on('change' , function(){
        if($("#rescheduling_id").val() == 0){
            $("#reschedule_lmt div span").css('color' , 'white');
            $(".reschedule_limit_label").css('color' , '#8D8D8D');
            $("#rescheduling_limit_id").attr('disabled' , true);
            $(".max_installments").attr('disabled' , true);
        }
        else{
            $("#reschedule_lmt div span").css('color' , '#343434');
            $(".reschedule_limit_label").css('color' , '#3080EA');
            $(".rescheduling_limit_id").attr('disabled' , false);
            $(".max_installments").attr('disabled' , false);
        }
    });

    function handleDepartments()
    {
        $('.depts').each(function(i){
            var row = i+1;
            var departments = $(this).val();
            var str_length = departments.length;
            if(str_length > 5)
            {
                var words = departments.split(",");
                var total_depts = words.length;
                var total = total_depts-1;
                if(total>1)
                {
                    $('#listing_data tr:nth-child(' + row + ') td:nth-child(4)').text(departments.split(',')[1] + '... ').append('<span id="'+row+'" class="badge badge-danger">' + total + '</span>');
                }
                $('#' + row).attr("title", departments);
            }
        });
    }
</script>
@endsection