create popup for manage plan - choose plan

cmsWebApp/webroot/css/common.css

@@ -5770,7 +5770,7 @@ label, label .label-title span {
 	
 }
 
-.manage-plan-hidden-info {display: none; }
+/*.manage-plan-hidden-info {display: none; }*/
 .oneit-radio.checked .manage-plan-hidden-info {display: block;}
 
 .subscription-billed {
@@ -5909,6 +5909,104 @@ label, label .label-title span {
         margin: 0
 }
 
+#change-plan .jBox-content {padding: 0;}
+
+.change-plan-content {padding: 40px;}
+.change-plan-content h3  {
+	
+	color: #03A0E7;
+	font-family: Usual;
+	font-size: 22px;
+	font-weight: 500;
+	line-height: 29px;
+	text-align: center;
+}
+
+
+.change-plan-content .upgrade-info {
+	
+	color: #4A4A4A;
+	font-family: Usual;
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 25px;
+	text-align: center;
+}
+.change-plan-content .upgrade-info span{
+	display: block;
+	color: #4A4A4A;
+	font-family: Usual;
+	font-size: 16px;
+	font-weight: 300;
+	line-height: 25px;
+	text-align: center;
+        margin: 30px 0;
+}
+
+.change-plan-list{	
+	border: 1px solid #DBDBDF;
+	border-radius: 5px;
+	background-color: #F5F7F8;
+}
+.change-plan-list .list-item{	
+	border-bottom:  1px solid #DBDBDF;
+	height: 50px;
+        padding: 20px;
+}
+.change-plan-list .list-item:last-child{
+        border-bottom: none;
+}
+
+.change-plan-list .list-item .item-title  {
+	display: inline-block; width:48%;
+	color: #4E5258;
+	font-family: Usual;
+	font-size: 14px;
+	font-weight: 500;
+	text-align: left;
+}
+
+.change-plan-list .list-item .item-value{
+	display: inline-block; width: 50%;
+	color: #03A0E7;
+	font-family: Usual;
+	font-size: 14px;
+	font-weight: 500;
+	
+	text-align: right;
+}
+.change-plan-button {
+    border-top : 1px solid #EDEDEF;
+    padding: 27px 0;
+    text-align: center;
+}
+
+.change-plan-button .change-plan-no-button {
+        height: 60px;
+	width: 160px;
+	border: 1px solid #DBDBDF;
+	border-radius: 100px;
+        color: #F9623D;
+        font-size: 15px;
+        font-weight: 500;
+        text-align: center;
+        display: inline-block;
+        line-height: 60px;
+        margin-right: 20px;
+}
+
+.change-plan-button  .change-plan-yes-button{
+	height: 60px;
+	width: 160px;
+	border-radius: 100px;
+	background-color: #67B413;
+        color: #FFFFFF;
+        font-size: 15px;
+        font-weight: 500;
+        text-align: center;
+        display: inline-block;
+        line-height: 60px;
+}
 .company-content-area label {
     font-weight: normal;
 }

cmsWebApp/webroot/extensions/adminportal/inc/view_application_tab_applicant.jsp

@@ -28,7 +28,7 @@
         });
         
         $(selectDiv).css("margin-top", -10);
-        $(selectDiv).css("padding-top", "5px")
+        $(selectDiv).css("padding-top", "5px");
         $(selectDiv).css("background", "#fff");
         $(selectDiv).find(":first").css("font-size", "16px");
 

cmsWebApp/webroot/extensions/adminportal/job_detail.jsp

@@ -97,7 +97,7 @@
             });
             
             $("#save-job-occ").on("click",function(){
-                if(!lastclickedOccid==0){
+                if(!lastclickedOccid===0){
                     occPopup.close();
                 }
             });

cmsWebApp/webroot/extensions/adminportal/manage_plan.jsp

@@ -262,4 +262,59 @@
             </div>
         </div>
     </div>
+                                                        
+    
+     <div id="change-plan-popup" >
+         <div class="change-plan-content">
+             <h3>
+                 Upgrade to 20 Jobs per month?
+             </h3>
+             <div class="upgrade-info">
+                 Upgrading your plan yo 20 jobs per month will incur an additional cost of $2,000 be billed immediately. 
+                 <span>
+                 This cose is to cover the differnce between your current active 10 job plan ($2,700) and the new 20 job plan ($4,700).
+                 </span>
+             </div>
+             <div class="change-plan-list">
+                 <div class="list-item">
+                     <span class="item-title">Jobs remaining this month</span>
+                     <span class="item-value">10 Job Remaining</span>
+                 </div>
+                 <div class="list-item">
+                     <span class="item-title">Date your plan will reset</span>
+                     <span class="item-value">12 September, 2018</span>
+                 </div>
+                 <div class="list-item">
+                     <span class="item-title">Date of next billing period</span>
+                     <span class="item-value">$4,700 on 12 September, 2018</span>
+                 </div>
+             </div>
+              <div class="upgrade-info">
+               
+                 <span>
+                 Would you like to proceed with upgrading your account?
+                 </span>
+             </div>
+             
+             
+         </div>
+         <div class="change-plan-button">
+                 <a class="change-plan-no-button">No</a>
+                 <a class="change-plan-yes-button">Yes</a>
+             </div>
+    </div>
+      
+  <script>
+                      $(function(){
+                            var Popup = new jBox('Modal', {
+                              id : "change-plan",
+                              attach: '.select-job-plan',
+                              content : $("#change-plan-popup"),
+                              overlay : true, 
+                              width : 600, height : 640
+                              
+                              
+                          });
+                     });                                                
+                </script>                                                          
 </oneit:dynIncluded>