Subversion Repositories SmartDukaan

Rev

Rev 33515 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<link href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.bootstrap.css" rel="stylesheet"/>

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>DESIGN COMPLETED</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Design Completed</li>
            </ol>
        </div>
    </div>

    ## Search Box
    <div class="col-lg-12" style="margin-bottom: 15px;">
        <div class="row">
            <div class="col-lg-8">
                <label style="margin-right: 10px;"><strong>Search:</strong></label>
                <input type="text" id="designCompletedSearch" class="form-control"
                       style="width: 250px; display: inline-block;"
                       placeholder="Outlet, Phone, Code, City..." value="$!search">
                <button type="button" class="btn btn-primary" id="designCompletedSearchBtn" style="margin-left: 5px;">
                    <i class="fa fa-search"></i> Search
                </button>
                #if($search && $search != "")
                    <button type="button" class="btn btn-default" id="clearDesignCompletedSearchBtn"
                            style="margin-left: 5px;">
                        Clear
                    </button>
                #end
            </div>
        </div>
    </div>

    <div class="col-lg-12">
        <table class="table table-border table-condensed table-bordered" id="OnboardingDesignCompleted" style="width:100%">

            <thead class="row htable" style="background:#F5F5F5;">

            <tr style="color:black;">
               <th>Id</th>
                <th>Outlet Name(SM)</th>
                <th>Created On</th>
                <th>Acquired Date()</th>

                <th>Phone </br>Number(SM)</th>

                <th>City (SM)</th>
                <th>State Head(SM)</th>
                <th>BDM (SM)</th>
                <th>Agreed Brand fees(SM)</th>

                <th>Inauguration Date(SM)</th>
                <th>LOI(legal)</th>
                <th>Kyc</th>
                <th>Code(legal)</th>
                <th class="hidden-col">Recee Planed</th>
                <th>Recee Actual(Branding L1)</th>
                <th class="hidden-col">Stock Payment</th>
                <th class="hidden-col">2D with BOQ Planed</th>
                <th>BOQ Actual(Branding L1)</th>
                <th>BOQ Document(Branding L1)</th>
                <th class="hidden-col">3D with BOQ Planed</th>
                <th class="hidden-col">3D with BOQ Actual</th>
                <th class="hidden-col">3D with BOQ</th>
                <th class="hidden-col">PO To Vendor Planed</th>
                <th class="hidden-col">PO To Vendor Actual</th>

                <th class="hidden-col">Briefing Partner Date</th>
                <th class="hidden-col">Briefing Partner Actual Date</th>
                <th class="hidden-col">Deployment Planed</th>
                <th class="hidden-col">Deployment Actual</th>
                <th class="hidden-col">Final Pics Planed</th>
                <th>Final Pics Actual(Branding L1)</th>
                <th>Final Pics(Branding L1)</th>
                <th class="hidden-col">NOC Actual</th>
                <th class="hidden-col">NOC</th>

            </tr>
            </thead>
            <tbody>
                #foreach($pob in $user )
                <tr>
                 
                    #if($pob.getId())
                        <td style="background:#87cefa;">$pob.getId()</td>
                    #else
                        <td>$pob.getId()</td>
                    #end
                   
                    #if($pob.getOutLetName() && $pob.getOutLetName() != "")
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                        <input type="text" placeholder="OutLet Name" value="$pob.getOutLetName()" name="outlateName"
                                   disabled></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="text" placeholder="OutLet Name" name="outlateName" disabled></td>
                    #end
                   
                    #if($pob.getCreatedTimestamp())
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i>$pob.getCreatedTimestamp().format($datehiphenFormatter)</td>
                     #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i>
                        </td>
                     #end 
                    
                    
                    #if($pob.getAcquiredDate())
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="date" class="acquired" placeholder="Acquired Date(SM)" disabled
                                   name="acquireddate"
                                   value="$pob.getAcquiredDate().format($datehiphenFormatter)"></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="date" class="acquired" placeholder="Acquired Date(SM)" disabled
                                   name="acquireddate">
                        </td>
                    #end 
                    
                   
                    #if($pob.getPhoneNumber() && $pob.getPhoneNumber() != 0)
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                        <input type="number" placeholder="9999999999" value="$pob.getPhoneNumber()"
                                   name="phonenumber1"
                                   disabled ></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="number" placeholder="9999999999" name="phonenumber1" disabled></td>
                    #end
                    

                    #if($pob.getCity() && $pob.getCity() != "")
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="text" placeholder="City (SM)" disabled name="city1" value="$pob.getCity()"></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="text" placeholder="City (SM)" disabled name="city1"></td>
                    #end
                    #if($pob.getStateHead() && $pob.getStateHead() != "")
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="text" placeholder="State Head(SM)" disabled name="shead1"
                                   value="$pob.getStateHead()"></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="text" placeholder="State Head(SM)" disabled name="shead1"></td>
                    #end
                    #if($pob.getBDM() && $pob.getBDM() != "")
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="text" placeholder="BDM (SM)" disabled name="bdm1" value="$pob.getBDM()"></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="text" placeholder="BDM (SM)" disabled name="bdm1"></td>
                    #end

                    ## Agreed Brand Fees
                    #if($pob.getAgreedBrandFees() != 0)
                     #if($pob.getReceivedBrandFees()>= $pob.getAgreedBrandFees())
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="text" placeholder="Agreed Brand fees(SM)" disabled name="abrand1"
                                   value="$pob.getAgreedBrandFees()" ></td>
                     #else
                             <td><i class="far fa-arrow-alt-circle-down" style="background:red"></i><input type="text" placeholder="Agreed Brand fees(SM)" disabled name="abrand1"
                                                                                                           value="$pob.getAgreedBrandFees()">
                             </td>
                     #end
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="text" placeholder="Agreed Brand fees(SM)" disabled name="abrand1"></td>
                    #end
                    
                    
                  
                  

                    #if($pob.getInvestmentDate())

                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="date" placeholder="Investment Date(SM)" disabled name="idate1" id="idate"
                                   value="$pob.getInvestmentDate().format($datehiphenFormatter)"
                                   ></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-up" style="background:pink"></i><input type="date" placeholder="Investment Date(SM)" disabled name="idate1"></td>
                    #end


                    #if($pob.getLOI() != 0)
                        <td class="loiDesign docfile">
                        <i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                            <input type="hidden" class="loiHidden" value="$pob.getLOI()">
                            <input type="file" class="loidoc" name="loi1" placeholder="LOI(SM)" disabled  value="$pob.getLOI()">
                            <a href="${rc.contextPath}/download-attachment?documentId=$pob.getLOI()" class="download">Download Doc</a>
                            <a href="javascript:void(0)" style="padding: 49px;" class="Del">Delete Doc</a>
                       
                        </td>
                      #else
                      
                        <td class="loiDesign docfile">
                        <i class="far fa-arrow-alt-circle-up" style="background:pink"></i>
                         <input type="hidden" class="loiHidden">
                        <input type="file" placeholder="LOI(SM)" disabled name="loi1">
                        </td>
                      #end
                    
                    #if($pob.getKyc() && $pob.getKyc() != 0)
                        <td class="kycDesign docfile">
                        <i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                            <input type="hidden" class="kychidden" value="$pob.getKyc()">
                            <input type="file" class="kyc" placeholder="KYC (SM)" disabled name="kyc1"
                                   value="$pob.getKyc()">
                            ##<button type="button" class="btn btn-primary download-kyc-file" data-docpid="$pob.getKyc()" data-id="$pob.getId()">Download Document</button>
                            <a href="${rc.contextPath}/download-attachment?documentId=$pob.getKyc()" class="download">Download Doc</a>
                             <a href="#" style="padding: 49px;" class="Del">Delete Doc</a>
                             
                        </td>
                    #else
                        <td class="kycDesign docfile">
                        <i class="far fa-arrow-alt-circle-up" style="background:pink"></i>
                            <input type="hidden">
                            <input type="file" id="kyc" placeholder="KYC (SM)" disabled name="kyc1">
                        </td>
                    #end
                   
                    #if($pob.getCode() && $pob.getCode() != "")
                        <td ><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="text" placeholder="Code(SM)" disabled name="code1" value="$pob.getCode()"
                                   ></td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="text" placeholder="Code(SM)" disabled name="code1"></td>
                    #end

                    ## Hidden: Recee Planed
                    #if($pob.getReceeActual())
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                type="date" id="rplaned" placeholder="Recee Planed" disabled name="rplaned1"
                                   value="$pob.getReceePlaned().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down" style="background:red"></i><input
                                type="date" id="rplaned" placeholder="Recee Planed" disabled name="rplaned1"
                                value="$pob.getReceePlaned().format($datehiphenFormatter)">
                        </td>
                    #end
                   #if($pob.getReceeActual())
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="date" id="ractual" placeholder="Recee Actual(Kamini)" disabled name="ractual1"
                                   value="$pob.getReceeActual().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="date" id="ractual" placeholder="Recee Actual(Kamini)" disabled name="ractual1">
                        </td>
                    #end

                    ## Hidden: Stock Payment
                     #if($pob.getStockPayment()!= 0)
                         <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                 type="text" placeholder="Stock payment" disabled
                                   value="$pob.getStockPayment()" name="stockPaymentDesign"></td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down"
                                                  style="background:pink"></i><input type="text"
                                                                                     placeholder="Stock payment"
                                                                                     disabled name="stockPaymentDesign">
                        </td>
                    #end



                    ## Hidden: 2D BOQ Planed
                    #if($pob.getTwoDBoqdate() &&  $pob.getTwodBOQ() != 0)
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                type="date" id="TwoDBoqdate" placeholder="2D BOQ Planed" disabled name="twoDBoq1"
                                   value="$pob.getTwoDBoqPlanedDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down" style="background:red"></i><input
                                type="date" id="TwoDBoqdate" placeholder="2D BOQ Planed" disabled name="twoDBoq1"
                                value="$pob.getTwoDBoqPlanedDate().format($datehiphenFormatter)">
                        </td>
                    #end
                    
                     #if($pob.getTwoDBoqdate())
                        <td><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="date" id="actualTwoDBoqdate" placeholder="Two D Boqdate (Kamini)" disabled name="ractual1"
                                   value="$pob.getTwoDBoqdate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="date" id="actualTwoDBoqdate" placeholder="Two D Boqdate(Kamini)" disabled name="ractual1">
                        </td>
                    #end
                    
                    
                     #if($pob.getTwodBOQ() &&  $pob.getTwodBOQ() != 0)
                        <td class="twoDBoq docfile">
                        <i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                            <input type="hidden" class="twoDBoqHidden" value="$pob.getTwodBOQ()">
                            <input type="file" class="twoDBoqDoc" placeholder="2D with BOQ" disabled  value="$pob.getTwodBOQ()">
                            <a href="${rc.contextPath}/download-attachment?documentId=$pob.getTwodBOQ()" class="download">Download Doc</a>
                       <a href="#" style="padding: 49px;" class="Del">Delete Doc</a>
                      #else
                       <td class="twoDBoq docfile">
                       <i class="far fa-arrow-alt-circle-up" style="background:pink"></i>
                         <input type="hidden">
                        <input type="file" placeholder="2D with BOQ" disabled name="3d1">
                        </td>
                      #end
                    ## Hidden: 3D BOQ Planed
                        #if($pob.getThreeDBoq() && $pob.getThreeDBoq() !=0 )
                            <td class="hidden-col"><i class="far fa-arrow-alt-circle-up"
                                                      style="background:lime"></i><input type="date" id="threeDBoqdate"
                                                                                         placeholder="3D Boqdate"
                                                                                         disabled name="threeBoqDate1"
                                   value="$pob.getThreeDBoqPlanedDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:red"></i><input
                                type="date" id="threeDBoqdate" placeholder="3D Boqdate" disabled name="threeBoqDate1"
                                value="$pob.getThreeDBoqPlanedDate().format($datehiphenFormatter)">
                        </td>
                    #end

                    ## Hidden: 3D BOQ Actual
                    #if($pob.getThreeDBoqdate() )
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                type="date" id="threeDBoqdate" placeholder="3D Boqdate" disabled name="threeBOQDate1"
                                   value="$pob.getThreeDBoqdate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down"
                                                  style="background:pink"></i><input type="date" id="threeDBoqdate"
                                                                                     placeholder="3D Boqdate" disabled
                                                                                     name="threeBOQDate1">
                        </td>
                    #end

                    ## Hidden: 3D BOQ Document
                     #if($pob.getThreeDBoq() && $pob.getThreeDBoq() !=0 )
                     <td class="threeDBoq docfile hidden-col">
                        <i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                            <input type="hidden" class="threeDBoqHidden" value="$pob.getThreeDBoq()">
                            <input type="file" class="threeDBoqDoc" placeholder="3D with BOQ" disabled  value="$pob.getThreeDBoq()">
                            <a href="${rc.contextPath}/download-attachment?documentId=$pob.getThreeDBoq()" class="download">Download Doc</a>
                       <a href="#" style="padding: 49px;" class="Del">Delete Doc</a>
                      #else
                          <td class="threeDBoq docfile hidden-col">
                       <i class="far fa-arrow-alt-circle-down" style="background:pink"></i>
                         <input type="hidden">
                        <input type="file" placeholder="3D with BOQ" disabled name="3d1">
                        </td>
                      #end



                    ## Hidden: PO Vendor Planed
                      #if($pob.getPoVendor() && $pob.getPoVendor() !=0)
                          <td class="hidden-col"><i class="far fa-arrow-alt-circle-up"
                                                    style="background:lime"></i><input type="date" id="poVenderDate"
                                                                                       placeholder="PO Vender Date"
                                                                                       disabled name="poVenderDate1"
                                   value="$pob.getPoVenderPlanedDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:red"></i><input
                                type="date" id="poVenderDate" placeholder="po Vender" disabled name="poVenderDate1"
                                value="$pob.getPoVenderPlanedDate().format($datehiphenFormatter)">
                        </td>
                    #end

                    ## Hidden: PO Vendor Actual
                     #if($pob.getPoVenderDate())
                         <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                 type="date" id="poVenderDate" placeholder="PO Vender Date" disabled
                                 name="poVenderDate2"
                                   value="$pob.getPoVenderDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:red"></i><input
                                type="date" id="poVenderDate" placeholder="po Vender" disabled name="poVenderDate2">
                        </td>
                    #end



                    ## Hidden: Briefing Partner Planed
                      #if($pob.getBriefingPartner())
                          <td class="hidden-col"><i class="far fa-arrow-alt-circle-up"
                                                    style="background:lime"></i><input type="date"
                                                                                       id="briefingPartnerPlanedDate"
                                                                                       placeholder="Briefing Partner Planed"
                                                                                       disabled
                                                                                       name="briefingPartnerPlanedDate1"
                                   value="$pob.getBriefingPartnerPlaned().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down" style="background:red"></i><input
                                type="date" id="briefingPartnerPlanedDate" placeholder="Briefing Partner Planed"
                                disabled name="briefingPartnerPlanedDate1"
                                value="$pob.getBriefingPartnerPlaned().format($datehiphenFormatter)">
                        </td>
                    #end

                    ## Hidden: Briefing Partner Actual
                    #if($pob.getBriefingPartner())
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                type="date" id="briefingPartner" placeholder="Briefing Partner" disabled
                                name="briefPartner1"
                                   value="$pob.getBriefingPartner().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down"
                                                  style="background:pink"></i><input type="date" id="briefingPartner"
                                                                                     placeholder="Briefing Partner"
                                                                                     disabled name="briefPartner1">
                        </td>
                    #end

                    ## Hidden: Deployment Planed
                      #if($pob.getDeploymentDate())
                          <td class="hidden-col"><i class="far fa-arrow-alt-circle-up"
                                                    style="background:lime"></i><input type="date"
                                                                                       id="deploymentPlanedDate"
                                                                                       placeholder="Deployment Planed Date"
                                                                                       disabled
                                                                                       name="deploymentPlanedDate"
                                   value="$pob.getDeploymentPlanedDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down" style="background:red"></i><input
                                type="date" id="deploymentPlanedDate" placeholder="Deployment Planed Date" disabled
                                name="deploymentPlanedDate"
                                value="$pob.getDeploymentPlanedDate().format($datehiphenFormatter)">
                        </td>
                    #end

                    ## Hidden: Deployment Actual
                    #if($pob.getDeploymentDate())
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                type="date" id="deploymentActualDate" placeholder="Deployment Actual Date" disabled
                                name="deploymentPlanedDate1"
                                   value="$pob.getDeploymentDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down"
                                                  style="background:pink"></i><input type="date"
                                                                                     id="deploymentActualDate"
                                                                                     placeholder="Deployment Actual Date"
                                                                                     disabled
                                                                                     name="deploymentPlanedDate1">
                        </td>
                    #end


                    ## Hidden: Final Pics Planed
                     #if($pob.getFinalPicsOutlet() && $pob.getFinalPicsOutlet() != 0)
                         <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                 type="date" id="finalPicsOutLetsDate" placeholder="Final Pics OutLets" disabled
                                 name="FinalPicsOutLets"
                                   value="$pob.getFinalPicsOutletPlanedDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down" style="background:red"></i><input
                                type="date" id="finalPicsOutLetsDate" placeholder="Final Pics OutLets" disabled
                                name="FinalPicsOutLets"
                                value="$pob.getFinalPicsOutletPlanedDate().format($datehiphenFormatter)">
                        </td>
                    #end
                    
                    #if($pob.getFinalPicsOutletDate())
                        <td ><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input type="date" id="finalPicsOutLetsDate" placeholder="Final Pics OutLets" disabled name="FinalPicsOutLets1"
                                   value="$pob.getFinalPicsOutletDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td><i class="far fa-arrow-alt-circle-down" style="background:pink"></i><input type="date" id="finalPicsOutLetsDate" placeholder="Final Pics OutLets" disabled name="FinalPicsOutLets1" >
                        </td>
                    #end
                      
                      #if($pob.getFinalPicsOutlet() && $pob.getFinalPicsOutlet() != 0)
                        <td class="finalPics docfile">
                        <i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                            <input type="hidden" class="finalPicsHidden" value="$pob.getFinalPicsOutlet()">
                            <input type="file" class="finalPicsDoc" placeholder="Final Pics" disabled  value="$pob.getFinalPicsOutlet()">
                            <a href="${rc.contextPath}/download-attachment?documentId=$pob.getFinalPicsOutlet()" class="download">Download Doc</a>
                       <a href="#" style="padding: 49px;" class="Del">Delete Doc</a>
                      #else
                       <td class="finalPics docfile">
                       <i class="far fa-arrow-alt-circle-down" style="background:pink"></i>
                         <input type="hidden">
                        <input type="file" placeholder="finalPics Vendor" disabled name="finalPics1">
                        </td>
                      #end

                    ## Hidden: NOC Actual
                     #if($pob.getNocDate())
                         <td class="hidden-col"><i class="far fa-arrow-alt-circle-up" style="background:lime"></i><input
                                 type="date" id="nocDate" placeholder="NOC" disabled name="noc1"
                                   value="$pob.getNocDate().format($datehiphenFormatter)" >
                        </td>
                    #else
                        <td class="hidden-col"><i class="far fa-arrow-alt-circle-down"
                                                  style="background:pink"></i><input type="date" id="noc"
                                                                                     placeholder="NOC" disabled
                                                                                     name="noc1">
                        </td>
                    #end

                    ## Hidden: NOC Document
                     #if($pob.getNoc() && $pob.getNoc() != 0)
                     <td class="noc docfile hidden-col">
                        <i class="far fa-arrow-alt-circle-up" style="background:lime"></i>
                            <input type="hidden" class="nocDocHiddend" value="$pob.getNoc()">
                            <input type="file" class="nocDoc" placeholder="NOC Docs" disabled  value="$pob.getNoc()">
                            <a href="${rc.contextPath}/download-attachment?documentId=$pob.getNoc()" class="download">Download Doc</a>
                       <a href="#" style="padding: 49px;" class="Del">Delete Doc</a>
                      #else
                          <td class="noc docfile hidden-col">
                       <i class="far fa-arrow-alt-circle-down" style="background:pink"></i>
                         <input type="hidden">
                        <input type="file" placeholder="Noc File" disabled name="noc1">
                        </td>
                      #end
                      

                    
                </tr>
                #end

            </tbody>

        </table>
    </div>

    ## Pagination Controls (Bottom)
    <div class="col-lg-12" style="margin-top: 15px;">
        <div class="row">
            <div class="col-lg-12 text-center">
                #if($totalRecords > 0)
                    <span class="pagination-info">Showing $startRecord - $endRecord of $totalRecords</span>
                    <ul class="pagination pagination-sm" style="margin: 0 15px; display: inline-flex;">
                        #if($currentPage > 0)
                            <li><a href="javascript:void(0)" class="design-completed-page-link" data-page="0">First</a>
                            </li>
                            <li><a href="javascript:void(0)" class="design-completed-page-link" data-page="$prevPage">Prev</a>
                            </li>
                        #else
                            <li class="disabled"><span>First</span></li>
                            <li class="disabled"><span>Prev</span></li>
                        #end

                        <li class="active"><span>Page $currentPageDisplay of $totalPages</span></li>

                        #if($currentPage < $lastPage)
                            <li><a href="javascript:void(0)" class="design-completed-page-link" data-page="$nextPage">Next</a>
                            </li>
                            <li><a href="javascript:void(0)" class="design-completed-page-link" data-page="$lastPage">Last</a>
                            </li>
                        #else
                            <li class="disabled"><span>Next</span></li>
                            <li class="disabled"><span>Last</span></li>
                        #end
                    </ul>
                    <select class="form-control design-completed-page-size"
                            style="width: 120px; display: inline-block;">
                        <option value="10" #if($pageSize==10)selected#end>10 per page</option>
                        <option value="25" #if($pageSize==25)selected#end>25 per page</option>
                        <option value="50" #if($pageSize==50)selected#end>50 per page</option>
                        <option value="100" #if($pageSize==100)selected#end>100 per page</option>
                    </select>
                #end
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function () {
        // Search button click handler
        $('#designCompletedSearchBtn').on('click', function () {
            refreshDesignCompletedList(0);
        });

        // Search on Enter key
        $('#designCompletedSearch').on('keypress', function (e) {
            if (e.which === 13) {
                refreshDesignCompletedList(0);
            }
        });

        // Clear search button
        $('#clearDesignCompletedSearchBtn').on('click', function () {
            $('#designCompletedSearch').val('');
            refreshDesignCompletedList(0);
        });

        // Pagination link click handler
        $(document).on('click', '.design-completed-page-link', function (e) {
            e.preventDefault();
            refreshDesignCompletedList($(this).data('page'));
        });

        // Page size change handler
        $(document).on('change', '.design-completed-page-size', function () {
            refreshDesignCompletedList(0);
        });

        // Destroy existing DataTable if it exists
        if ($.fn.DataTable.isDataTable('#OnboardingDesignCompleted')) {
            $('#OnboardingDesignCompleted').DataTable().destroy();
        }

        var dtable = $('#OnboardingDesignCompleted').DataTable({
            "paging": false,
            "info": false,
            "bFilter": false,
            "bAutoWidth": false,
            "scrollX": true,
            fixedColumns: {
                leftColumns: 2
            },
            "columnDefs": [
                {"targets": [13, 15, 16, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 31, 32], "visible": false}
            ]
        });
    });

    // Function to refresh design completed list via AJAX
    function refreshDesignCompletedList(page) {
        var pageSize = $('.design-completed-page-size').val() || '25';
        var search = $('#designCompletedSearch').val() || '';
        var url = context + '/DesignTatCompletedShow?page=' + (page || 0)
                + '&pageSize=' + pageSize
                + '&search=' + encodeURIComponent(search);
        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#main-content').html(response);
            }
        });
    }
</script>

<style>
    .hidden-col {
        display: none !important;
    }

    td.hidden-col {
        display: none !important;
    }

    .pagination-info {
        margin-right: 15px;
        font-weight: bold;
    }

    .pagination {
        margin: 0;
    }

    .pagination li {
        display: inline-block;
        margin: 0 2px;
    }

    .pagination li a, .pagination li span {
        padding: 5px 10px;
        border: 1px solid #ddd;
        text-decoration: none;
        color: #333;
    }

    .pagination li.active span {
        background-color: #337ab7;
        color: white;
        border-color: #337ab7;
    }

    .pagination li.disabled span {
        color: #999;
        cursor: not-allowed;
    }
</style>