class PlaceholderAnimation{
    setPlaceholderOnFnCards(){
        let placeholderUI='';
        for(let indexLoop=0;indexLoop<40;indexLoop++){
            placeholderUI +=`<div id="divEmployeeInfo_0" class="divEmployeeInfo pl-1 pt-1" style="margin-left: 2px;display: flex;padding-bottom: 4px;">
                                <div class="w-25 placeholder mr-2"></div>
                                    <table class="w-75">
                                        <tbody>
                                            <tr>
                                                <td colspan="3" class="position-relative">
                                                    <p class="placeholder w-50 mb-0"></p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="3" class="position-relative">
                                                    <p class="placeholder w-75 mb-0"></p>
                                               </td>
                                            </tr>
                                                <tr>
                                                    <td colspan="3" class="position-relative">
                                                        <p class="placeholder w-100 mb-0"></p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                </div>`;
        
        }
         $("#empInfoCard_divId").empty();
        $("#empInfoCard_divId").html(placeholderUI);
    }
    setPlaceholderOnDayClaimDetails(claimStatus){
        let colspanValue;
         switch (claimStatus) {
            case CLAIM_PENDING://undo:
            colspanValue=43;
            break;
			case CLAIM_TL_APPROVED://approved
			    if(LOGGED_IN_DEPARTMENT==TL_DEPARTMENT){
			        colspanValue=46;
			    }else if(LOGGED_IN_DEPARTMENT==FINANCE_DEPARTMENT){
			        colspanValue=43;
			    }
			    
				break;
			case CLAIM_TL_REJECTED://tl reject
			    colspanValue=58;
				break;
			case CLAIM_FINANCE_APPROVED://finan approved
			    if(LOGGED_IN_DEPARTMENT==TL_DEPARTMENT){
			        colspanValue=57;
			    }else if(LOGGED_IN_DEPARTMENT==FINANCE_DEPARTMENT){
			        colspanValue=44;
			    }
				break;
			case CLAIM_FINANCE_REJECTED://fin rejct
			    colspanValue=47; 
			break;
			case CLAIM_PAID://paid
			    colspanValue=47; 
				break;
    }
        
        
         let placeholderUI=`<tr><td  colspan="${colspanValue}" ><table class="w-100"><tbody>`;
        //placeholder design
        
            for(let outerLoopIndex=0;outerLoopIndex<2;outerLoopIndex++){
                placeholderUI +=`<tr class="placeholder-glow">`;
                for(let innerLoopIndex=0;innerLoopIndex< 7;innerLoopIndex++){
                    placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    
                }
                placeholderUI +=`</tr>`;
                
                placeholderUI +=`<tr class="placeholder-glow">`;
                for(let innerLoopIndex=0;innerLoopIndex< 7;innerLoopIndex++){
                        placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-75 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                }
                placeholderUI +=`</tr>`;
            }
            //last table row
                placeholderUI +=`<tr class="placeholder-glow">`;
                for(let innerLoopIndex=0;innerLoopIndex< 7;innerLoopIndex++){
                    placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    
                }
                placeholderUI +=`</tr></tbody></table><td></tr>`;
        $("#inserted_tableBody_data").html(placeholderUI);
    }
    
    
    
    setPlaceholderOnDayClaimDetails2(claimStatus){
        	LOGGED_IN_DEPARTMENT = $("#LoggeduserDepartment").html();
        let maxLenght;
        let lastColspan;
        
        switch (claimStatus) {
            case CLAIM_PENDING://undo:
             maxLenght=6; 
             lastColspan=7;
            break;
			case CLAIM_TL_APPROVED://approved
			    if(LOGGED_IN_DEPARTMENT==TL_DEPARTMENT){
			        
			    }else if(LOGGED_IN_DEPARTMENT==FINANCE_DEPARTMENT){
			      maxLenght=7;  
			    }
			    
				break;
			case CLAIM_TL_REJECTED://tl reject
				break;
			case CLAIM_FINANCE_APPROVED://finan approved
			    if(LOGGED_IN_DEPARTMENT==TL_DEPARTMENT){
			        
			    }else if(LOGGED_IN_DEPARTMENT==FINANCE_DEPARTMENT){
			        
			    }
				break;
			case CLAIM_FINANCE_REJECTED://fin rejct
			    maxLenght=8;  
			break;
			case CLAIM_PAID://paid
			    maxLenght=8;  
				break;
    }
        
        let placeholderUI='';
        //placeholder design
            for(let outerLoopIndex=0;outerLoopIndex<2;outerLoopIndex++){
                placeholderUI +=`<tr class="placeholder-glow">`;
                for(let innerLoopIndex=0;innerLoopIndex< maxLenght;innerLoopIndex++){
                    if(innerLoopIndex==(maxLenght-1)){ //last loop
                    placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>
                                    <td colspan="${lastColspan}" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    }else{
                    placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    }
                }
                placeholderUI +=`</tr>`;
                
                placeholderUI +=`<tr class="placeholder-glow">`;
                for(let innerLoopIndex=0;innerLoopIndex< maxLenght;innerLoopIndex++){
                    if(innerLoopIndex==(maxLenght-1)){ //last loop
                        placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-75 m-1"></span></td>
                                    <td colspan="${lastColspan}" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    }else{
                        placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-75 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    }
                }
                placeholderUI +=`</tr>`;
            }
                placeholderUI +=`<tr class="placeholder-glow">`;
                for(let innerLoopIndex=0;innerLoopIndex< maxLenght;innerLoopIndex++){
                    if(innerLoopIndex==(maxLenght-1)){ //last loop
                    placeholderUI +=`<td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    }else{
                    placeholderUI +=`<td colspan="${lastColspan}" class="p-2"><span class="placeholder w-100 m-1"></span></td>
                                    <td colspan="3" class="p-2"><span class="placeholder w-100 m-1"></span></td>`;
                    }
                }
                placeholderUI +=`</tr>`;
        $("#inserted_tableBody_data").html(placeholderUI);
    }
    
}


// ;;