class LoadContent{
    getFortNightClaimsCountUIContent(){
        let UIContent=`<div class="headerDiv d-flex pb-2">
                    <h5 class="subHeading  mb-0 d-flex align-self-center"><span class="yearValue mr-2"></span><span> FortNight Claims</span></h5>
                    <select class="form-control ml-auto w-auto text-right subCircleDropDown"></select>
                </div>
                <div class="subSection">
                    <div class="card engNotSubmtClaims ml-0 mb-0">
                        <h6 class="font-weight-bold mt-4 p-2">Pending at Emp</h6> <!--Claims Not Submitted-->
                        <div class="d-flex justify-content-center align-items-center">
                            <h4 id="count_engNotSubmtClaims" class="mb-0 w-50 d-inline">0</h4>
                            <div class="progress">
                                <div class="inner" data-toggle="tooltip" data-className="engNotSubmtClaims">0</div>
                            </div>
                        </div>
                        <p class="m-auto dayClaims_ptag"><b>Day claims: <span class="dayClaimValue"></span></b></p>
                        <hr class="m-0">
                        <a href="siteVisit/" target="_blank" class="siteVisitsAnchor" data-claimstatus="0">to site-&gt;</a>
                    </div>
                    <div class="card engSubmtClaims">
                        <h6 class="font-weight-bold mt-4 p-2">Pending at TL</h6> <!--Claims Not Submitted-->
                        <div class="d-flex justify-content-center align-items-center">
                            <h4 id="count_engSubmtClaims" class="mb-0 w-50 d-inline">0</h4>
                            <div class="progress">
                                <div class="inner" data-toggle="tooltip" data-className="engSubmtClaims">0</div>
                            </div>
                        </div>
                        <p class="m-auto dayClaims_ptag"><b>Day claims: <span class="dayClaimValue"></span></b></p>
                        <hr class="m-0">
                        <a href="siteVisit/" target="_blank" class="siteVisitsAnchor" data-claimstatus="1">to site-&gt;</a>
                    </div>
                    <div class="card TLApprovedClaims">
                        <h6 class="font-weight-bold mt-4 p-2">Pending at Finance</h6> <!--Claims Not Submitted-->
                        <div class="d-flex justify-content-center align-items-center">
                            <h4 id="count_TLApprovedClaims" class="mb-0 w-50 d-inline">0</h4>
                            <div class="progress" >
                                <div class="inner" data-toggle="tooltip" data-className="TLApprovedClaims">0</div>
                            </div>
                        </div>
                        <p class="m-auto dayClaims_ptag"><b>Day claims: <span class="dayClaimValue"></span></b></p>
                        <hr class="m-0">
                        <a href="siteVisit/" target="_blank" class="siteVisitsAnchor" data-claimstatus="2">to site-&gt;</a>
                    </div>
                    <div class="card FinanceApprovedClaims">
                        <h6 class="font-weight-bold mt-4 p-2">Finance Approved</h6> <!--Claims Not Submitted-->
                        <div class="d-flex justify-content-center align-items-center">
                            <h4 id="count_FinanceApprovedClaims" class="mb-0 w-50 d-inline">0</h4>
                            <div class="progress" >
                                <div class="inner" data-toggle="tooltip" data-className="FinanceApprovedClaims">0</div>
                            </div>
                        </div>
                        <p class="m-auto dayClaims_ptag"><b>Day claims: <span class="dayClaimValue"></span></b></p>
                        <hr class="m-0">
                        <a href="siteVisit/" target="_blank" class="siteVisitsAnchor" data-claimstatus="4">to site-&gt;</a>
                    </div>
                    <div class="card rejectedClaims">
                        <h6 class="font-weight-bold mt-4 p-2">Rejected</h6> <!--Claims Not Submitted-->
                        <div class="d-flex justify-content-center align-items-center">
                            <h4 id="count_rejectedClaims" class="mb-0 w-50 d-inline">0</h4>
                            <div class="progress" >
                                <div class="inner" data-toggle="tooltip" data-className="rejectedClaims">0</div>
                            </div>
                        </div>
                        <p class="m-auto dayClaims_ptag"><b>Day claims: <span class="dayClaimValue"></span></b></p>
                        <hr class="m-0">
                        <a href="siteVisit/" target="_blank" class="siteVisitsAnchor" data-claimstatus="3">to site-&gt;</a>
                    </div>
                    <div class="card FinancePaidClaims mr-0">
                        <h6 class="font-weight-bold mt-4 p-2">Finance Paid</h6> <!--Claims Not Submitted-->
                        <div class="d-flex justify-content-center align-items-center">
                            <h4 id="count_FinancePaidClaims" class="mb-0 w-50 d-inline">0</h4>
                            <div class="progress" >
                                <div class="inner" data-toggle="tooltip" data-className="FinancePaidClaims">0</div>
                            </div>
                        </div>
                        <p class="m-auto dayClaims_ptag"><b>Day claims: <span class="dayClaimValue"></span></b></p>
                        <hr class="m-0">
                        <a href="siteVisit/" target="_blank" class="siteVisitsAnchor" data-claimstatus="6">to site-&gt;</a>
                    </div>
                </div>`;
                return UIContent;
    }
    getNoOfSiteVisitsUIContent(){
        let UIContent=`<div class="headerDiv d-flex">
                            <h5 class="subHeading  position-absolute"><span class="yearValue mr-2"></span><span> No Of SiteVisits</span></h5>
                            <select class="form-control ml-auto w-auto text-right subCircleDropDown"></select>
                        </div>
                        <div id="siteVisitsPerAnnum_mainDiv"  class="d-flex" style="height:500px"></div>`;
        return UIContent;
    }
    
    getOverAllFortNightAmountUIContent(){
        let UIContent=`<h5 class="subHeading mb-0">OverAll FortNight Amounts Details</h5>
                        <select class="form-control ml-auto w-auto text-right mb-1 subCircleDropDown"></select>
                        <div id="fortNgtAmtDetailsPiechart_mainDiv" class="w-100 d-flex justify-content-center"></div>
                        <div class="detailsInText px-4 pb-4">
                            <table class="m-auto w-100">
                                <tr><td><div class="engclaimedAmountDot d-inline-flex mr-3"></div><span>Engineer Claimed :</span></td><td><span id="fnEnggClaimdAmount">0</span><span> &#8377;</span></td></tr>
                                <tr><td><div class="TLApprovedAmountDot d-inline-flex mr-3"></div><span>TL Approved :</span></td><td><span id="fnTLClaimdAmount" >0</span><span> &#8377;</span></td></tr>
                                <tr><td><div class="FinApprovedAmountDot d-inline-flex mr-3"></div><span>Finance Approved :</span></td><td><span id="fnFinanceClaimdAmount">0</span><span> &#8377;</span></td></tr>
                                <tr><td><div class="FinPaidAmountDot d-inline-flex mr-3"></div><span>Paid :</span></td><td><span id="fnPaidAmount">0</span><span> &#8377;</span></td></tr>
                            </table>
                        </div>`;
        return UIContent;
    }

    getCircleWiseSiteVisitsUIContent(){
       let UIContent=`<div class="circleWiseSiteVisitsDetailsLinechart bg-white ">
                            <h5 class="subHeading mb-0">Circle Wise SiteVisits</h5>
                            <div id="circleWiseSiteVisitsDetailsLinechart_mainDiv" class="d-flex justify-content-center" style="height:400px;"></div>
                        </div>
                        <div class="siteProjectDetails bg-white">
                            <hr>
                            <h5 class="subHeading mb-4">Circle Wise Projects</h5>
                            <div id="circleWiseSiteProjectDetails_mainDiv" class="overflow-auto"></div>
                        </div>
                        <div class="mt-4">
                            <button id="moreBtn" class="btn  btn-theme-type1">
                                <span class="d-flex">More <i class="fas fa-angle-down ml-2 align-self-center"></i></span>
                            </button>
                        </div>`;
        return UIContent;
    }
    getFortNightEmployeeDetailsSubDropDownUI(){
        let subDropDownUI=`<h5 class="subHeading  mb-0 d-flex align-self-center">Fortnight Wise Claim Details Of Individual Employees</h5>
                           <select class="form-control ml-auto w-auto text-right mb-1 subCircleDropDown"></select>`;
            return subDropDownUI;
    }
    appendLoadedContent(){
        $(".fortNightClaimsCountDiv").html(this.getFortNightClaimsCountUIContent());
        $(".section.siteVisitsPerAnnum").html(this.getNoOfSiteVisitsUIContent());
        $(".section.overAllFortNightAmounts").html(this.getOverAllFortNightAmountUIContent());
        $(".section.circleWiseSiteVisits_noOfSiteProjects_main").html(this.getCircleWiseSiteVisitsUIContent());
        $(".claimDetailsOfIndividuals .headerDiv").html(this.getFortNightEmployeeDetailsSubDropDownUI());
    }
    
}

// ;;