class SelectedTabRelatedImageBillUIDetails {


    Tab_TLNonEditableImageDetails(rowValues,imagesLoopIndex, empId_date) {
        var unique_Id = empId_date +"_"+ imagesLoopIndex;
        let customAttr="data-common-id='"+empId_date+"' data-index='"+imagesLoopIndex+"'";
        var imgurl = IMAGE_BASE_URL + rowValues.imageUrl; //IMAGE_BASE_URL is constant variable in contant.js

        var imageDetails =
            "<div class='img-zoom-container m-3 p-3 bg-white position-relative' style='box-shadow:1px 0px 16px 2px #7d7d7d38;'>" +
            "<h6 id='billTitle_"+unique_Id+"'>" + rowValues.billTitle + "</h6>" +
            "<img class='imagehover' id='billProofImg_" + unique_Id + "' "+customAttr+" src='" + imgurl + "'>" +
            "<p class='mt-1 BillTitle font-weight-normal'><b>Description : </b>" + rowValues.description + "</p>" +
            "<p class='font-weight-light'><span class='mr-2'><b class='font-weight-bold'>Engineer:</b>" + rowValues.engineerBillAmount + "</span></p>" +
            "<p class='font-weight-normal'><b class='font-weight-bold'>TL Approved Amount:</b><span id='actualBillAmount_"+unique_Id+"'>" + rowValues.TLApprovedBillAmount + "</span></p></div>";

        return imageDetails;

    }
    Tab_TLEditableImageDetails(rowValues,imagesLoopIndex, empId_date) {
        //var unique_Id = empId + siteVisitedDate + imagesLoopIndex;
        //var imgurl = IMAGE_BASE_URL + rowValues.imageUrl; //IMAGE_BASE_URL is constant variable in contant.js
        let mapKeyValue="billValue_"+empId_date+"_"+imagesLoopIndex;
        let unique_Id = empId_date +"_"+ imagesLoopIndex;
        let ClassName =empId_date +"_"+rowValues.billTitleId;
        let customAttr="data-common-id='"+empId_date+"' data-index='"+imagesLoopIndex+"'";
        var imgurl = IMAGE_BASE_URL + rowValues.imageUrl; //IMAGE_BASE_URL is constant variable in contant.js
        REFERENCE_EDIT_IMGBILL_VALUES_MAP.set(mapKeyValue,rowValues.TLApprovedBillAmount);
        var imageDetails =
            "<div class='img-zoom-container m-3 p-3 bg-white position-relative' style='box-shadow:1px 0px 16px 2px #7d7d7d38;'>" +
            "<h6 id='billTitle_"+unique_Id+"'>" + rowValues.billTitle + "</h6>" +
            "<img class='imagehover' id='billProofImg_" + unique_Id + "' "+customAttr+" src='" + imgurl + "'>" +
            "<p class='mt-1 BillTitle font-weight-normal'><b>Description : </b>" + rowValues.description + "</p>" +
            "<p class='font-weight-light'><span class='mr-2'><b class='font-weight-bold'>Engineer Bill Amount:</b><span id='actualBillAmount_"+unique_Id+"'>" + rowValues.engineerBillAmount + "</span></span></p>" +
            "<p>Amount : <input id='billProofAmount_" + unique_Id + "' type='number' value=" + rowValues.TLApprovedBillAmount + " class='w-50 billsInputField_"+ClassName+" billsInputField_of_"+empId_date+"'   disabled/></p><i id ='tickmark_" + unique_Id + "' class='fa fa-check mr-2 pt-1 text-success position-absolute d-none' style='font-size:22px; right:11px;'></i>" +
            "<button id='editBtn_" + unique_Id + "' class='imgProfbtns Edit mt-2 btn-theme-type1' "+customAttr+">Edit</button>" +
            "<button id='submitBtn_" + unique_Id + "' class='imgProfbtns Submit mt-2  btn-theme-type1 float-left' "+customAttr+" style='display:none'>Submit</button>" +
            "<button id='closeBtn_" + unique_Id + "' class='imgProfbtns Close mt-2 ml-1  btn-theme-type3 float-right' "+customAttr+" style='display:none'>Close</button>" +
            "</div>";

        return imageDetails;


    }
    Tab_FinaceEditableImageDetails(rowValues,imagesLoopIndex, empId_date) {
        let mapKeyValue="billValue_"+empId_date+"_"+imagesLoopIndex;
        let unique_Id = empId_date +"_"+ imagesLoopIndex;
        let ClassName =empId_date +"_"+rowValues.billTitleId;
        let customAttr="data-common-id='"+empId_date+"' data-index='"+imagesLoopIndex+"'";
        let imgurl = IMAGE_BASE_URL + rowValues.imageUrl; //IMAGE_BASE_URL is constant variable in contant.js
        
        REFERENCE_EDIT_IMGBILL_VALUES_MAP.set(mapKeyValue,rowValues.FinanceApprovedBillAmount);//reference_billValue
        let imageDetails =
            "<div class='img-zoom-container m-3 p-3 bg-white position-relative' style='box-shadow:1px 0px 16px 2px #7d7d7d38;'>" +
                "<h6 id='billTitle_"+unique_Id+"'>" + rowValues.billTitle + "</h6>" +
                "<img class='imagehover' id='billProofImg_" + unique_Id + "' "+customAttr+" src='" + imgurl + "'>" +
                "<p class='mt-1 BillTitle font-weight-normal'><b>Description : </b>" + rowValues.description + "</p>" +
                "<p class='font-weight-light'><span class='mr-2'><b class='font-weight-bold'>Engineer:</b>"+rowValues.engineerBillAmount+"</span><span class='float-right tlApprovedBillAmount'><b class='font-weight-bold'>TL:</b><span id='actualBillAmount_"+unique_Id+"'>"+rowValues.TLApprovedBillAmount+"</span></span></p>"+
                "<p>Finance Amount : <input id='billProofAmount_" + unique_Id + "' type='number' value=" + rowValues.FinanceApprovedBillAmount + " class='w-50 billsInputField_"+ClassName+" billsInputField_of_"+empId_date+"'   disabled/></p><i id ='tickmark_" + unique_Id + "' class='fa fa-check mr-2 pt-1 text-success position-absolute d-none' style='font-size:22px; right:11px;'></i>" +
                "<button id='editBtn_" + unique_Id + "' class='imgProfbtns Edit mt-2  btn-theme-type1' "+customAttr+">Edit</button>" +
                "<button id='submitBtn_" + unique_Id + "' class='imgProfbtns Submit mt-2  btn-theme-type1 float-left' "+customAttr+" style='display:none'>Submit</button>" +
                "<button id='closeBtn_" + unique_Id + "' class='imgProfbtns Close mt-2 ml-1  btn-theme-type3 float-right' "+customAttr+" style='display:none'>Close</button>" +
                "</div>";

        return imageDetails;


    }

    Tab_FinanceNonEditableImageDetails(rowValues,imagesLoopIndex, empId_date) {
        var unique_Id = empId_date +"_"+ imagesLoopIndex;
        let customAttr="data-common-id='"+empId_date+"' data-index='"+imagesLoopIndex+"'";
        var imgurl = IMAGE_BASE_URL + rowValues.imageUrl; //IMAGE_BASE_URL is constant variable in contant.js

        let imageDetails =
            "<div class='img-zoom-container m-3 p-3 bg-white position-relative' style='box-shadow:1px 0px 16px 2px #7d7d7d38;'>" +
                "<h6  id='billTitle_"+unique_Id+"'>" + rowValues.billTitle + "</h6>" +
                "<img class='imagehover' id='billProofImg_" + unique_Id + "' "+customAttr+" src='" + imgurl + "'>" +
                "<p class='mt-1 BillTitle font-weight-normal'><b>Description : </b>" + rowValues.description + "</p>" +
                "<p class='font-weight-light'><span class='mr-2'><b class='font-weight-bold'>Engineer:</b>"+rowValues.engineerBillAmount+"</span><span class='float-right tlApprovedBillAmount'><b class='font-weight-bold'>TL:</b>"+rowValues.TLApprovedBillAmount+"</span></p>"+
                "<p class='font-weight-normal'><b class='font-weight-bold'>Finance Amount:</b><span id='actualBillAmount_"+unique_Id+"'>" + rowValues.FinanceApprovedBillAmount + "</span></p></div>";
        return imageDetails;

    }
   




}



// ;;