AccountDiscoveryPageVersion1.vfp

<apex:page standardController="Account" extensions="AccountDiscoveryController">
    <apex:outputpanel id="container">
        <apex:form >
        <script src="{!URLFOR($Resource.JqueryAccordion, 'JqueryAccordion/jquery-1.9.1.js')}"></script>


        <style>
            .textlabel {
                color: #084B8A;
                font-size: 13px
            }
             #innerheaderDiv {
                padding:10px !important;
                width: 50%;
                margin: 0px 28px;
            }
            .NewDiscoverySection{
                 width: 95%;
                 margin: auto;
                 border: 1px solid #A5A6A5;
                 margin-bottom: 10px;
                 -moz-border-radius: 11px;
                 -webkit-border-radius: 11px;
                 border-radius: 11px;
                 box-shadow: 0px 13px 161px 55px #C7D6E9 inset;
                 -webkit-box-shadow: 0px 13px 161px 55px #C7D6E9 inset;
                 -moz-box-shadow: 0px 13px 161px 55px #C7D6E9 inset;
                 background: white !important;
              }
            .btnDiv {
                 width: 95%;
                 margin: auto;
                 border: 1px solid #A5A6A5;
                 margin-bottom: 10px;
                 -moz-border-radius: 11px;
                 -webkit-border-radius: 11px;
                 border-radius: 11px;
                 box-shadow: 0px 13px 161px 55px #C7D6E9 inset;
                 -webkit-box-shadow: 0px 13px 161px 55px #C7D6E9 inset;
                 -moz-box-shadow: 0px 13px 161px 55px #C7D6E9 inset;
                 text-align: center;
            }
          /* -----------------------------------------New Tabbed panel controller style css---------------------- */
        .tabbed-area{
        }
        .tabbed-area > ul{
            list-style:none;
             height: 27px;
             width: 908px;
         }
        .tabbed-area > ul > li{
            float:left;
            margin: 0 2px 0 0;
            padding: 9px 10px 13px;
            display: inline-block !important;
            position: relative;
            box-shadow: 0px -42px 54px -20px #236FBD inset;
            -webkit-box-shadow: 0px -54px 54px -20px #236FBD inset;
            -moz-box-shadow: 0px -42px 54px -20px #236FBD inset;
            border-radius: 10px 10px 0px 0px;
            -webkit-border-radius: 10px 10px 0px 0px;
            -moz-border-radius: 10px 10px 0px 0px;
            font-family: Arial,Helvetica,sans-serif;
            text-align: center;
          }
         .tabbed-area > ul > li >a{
            padding-top:20px;
            text-align:center;
            color: white;
            text-decoration: none;
            font-size: 13px;
            font-family: Arial,Helvetica,sans-serif;
            text-align: center;
            font-weight: bolder;
          }
          .tabbed-area > ul > li:hover{
            background: white;
            cursor: pointer;
            box-shadow: 0px -42px 54px -20px rgba(73, 72, 72, 0.98) inset;
          }
          .tabbed-area > ul > li.tabActiveHeader{
            background: white;
            cursor: pointer;
            box-shadow: 0px -54px 54px -20px orange inset;
          }
         .tabbed-area > ul > li.tabActiveHeader > a {
                padding-top:20px;
                text-align:center;
                color: black;
                text-decoration: none;
                font-size: 13px;
                font-family: Arial,Helvetica,sans-serif;
                text-align: center;
                font-weight: bolder;
          }
          .tabContentWrapper{
            border: 1px solid #C1C9CA;
            width: 86%;
            padding: 20px;
            margin-left: 40px;
            min-height: 124px;
            border-top: 6px solid orange;
            margin-top: -3px;
            border-radius: 0px 15px 15px 0px;
          }
          .removeMargin{
            padding-left: 0px;
            -webkit-padding-start: 0px;
          }
          .lightInsight{
          }
          .errorTab{
            border-top: 3px solid red;
          }
         .blockHeader {
            width: 45%;
            padding: 7px 1px 5px 11px;
            box-shadow: 1px 0px 16px 1px gray;
          }

          .blockHeader > h3{
            font-size: 17px;
          }
         .fullwidthWithBorder{
            width: 96%;
            outline:none;
            margin-top: 11px;
            height: 125px;
            resize: none;
            box-shadow: 0px 0px 7px 0px lightblue inset;
            -webkit-box-shadow: 0px 0px 7px 0px lightblue inset;
            -moz-box-shadow: 0px 0px 7px 0px lightblue inset;
            font-size: 12px !important;
            line-height: 1 !important;
            border: 1px solid lightgray !important;
            border-radius: 10px !important;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            box-sizing : border-box;
            padding : 5px;
          }
          .box-wrap{

            border: 1px solid #C1C9CA;
            width: 86%;
            /* border-radius: 15px; */
            padding: 20px;
            margin-left: 40px;
            min-height: 124px;
            border-top: 6px solid orange;
            margin-top: -3px;
            border-radius: 0px 15px 15px 15px;
         }
         #overlay {
            background: url("/resource/1398195934000/EmailValidation/loading.gif") no-repeat scroll center center rgba(177, 177, 177, 0.71);
            border: 0px solid #000000;
            bottom: 0;
            left: 0;
            opacity: 0.75;
            position: fixed;
            top: 0;
            visibility: hidden;
            width: 100%;
            border-radius: 15px;
            z-index: 1000;
        }
        </style>
        <script>

                 //--------------------------------------Function to initiate tab nature-------------------------------------------
                  function initiateTabs(tabWrapper,options){
                    var optionsJson = jQuery.parseJSON(options);
                    if(optionsJson.activeTab != null){
                        $(tabWrapper).children('.tabdiv').hide().eq(optionsJson.activeTab).show();
                    }
                    else{
                        $(tabWrapper).children('.tabdiv').hide().eq(0).show();
                    }
                  };
                  //-------------------------------------Function to check and show errors in discovery tab-------------------------
                  function CheckErrorTabs(){
                    $.each($(".box-wrap").children(".tabdiv"),function(){
                         var parent = $(this);
                        $(this).find(".errorMsg").filter(function(){

                                $(".box-wrap").siblings("ul").find("li[id*="+parent.attr('id')+"]").each(function(){
                                     $(this).addClass("errorTab");
                                //     alert($(this).attr("id"));

                                });
                            });
                    });
                  };
                 //-------------------------------------Function to check and show errors in discovery tab-------------------------
                 //-------------------------------------Function to check length of field on page level/7/3/2014----------------------------
                function TextAreaLengthCheck(areaId,FieldName,validlength){

                        $(areaId).keyup(function () {
                            var maxLength = validlength;
                            var text = $(this).val();
                            var textLength = text.length;
                            if (textLength > maxLength) {
                                $(this).val(text.substring(0, (maxLength)));
                                alert("Sorry, you are only " + maxLength + " characters allowed for "+FieldName);
                            }
                            else {
                                //alert("Required Min. 500 characters");
                            }
                        });
                };
               //------------------------Methods to show and hide overlay on page----------------------------
               function showOverlay() {
                    var o = document.getElementById('overlay');
                    o.style.visibility = 'visible';
                }
                function hideOverlay() {
                    var o = document.getElementById('overlay');
                    o.style.visibility = 'hidden';
                }
                //------------------------Method to  refresh parent page of current Inline page--------------
                function parentRefresh(){
                    //--------------------Accessing parent view url and reloading----------------------------
                    window.top.location.href = '{!redirectUrl}';
                }
                //------------------------Method to confirm user action--------------------------------------
                function ConfirmUserAction(msg){
                    var action = confirm(msg);
                    if(action){
                        parentRefresh();
                    }else{

                        return false;
                    }

                }

        </script>
          
            <!-- -------------------------New Discovery section starts------------------------- -->
          <div  class="NewDiscoverySection">
                    <div class="pbHeader" id ="innerheaderDiv"  style="background: none;border: none;">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td class="pbTitle" style="padding-left: 0px;">
                                        <h2 class="mainTitle" style="color: #084B8A;font-size: 15px;">Discovery Guide</h2>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                     <apex:outputpanel style="padding-left: 40px;background: none;border: none;height:inherit !important;">
                     <!-- ---------------------------------------------As/Simplion/7/3/2014-------------------- -->
                        <div style="margin-top: -10px;">
                        <!-- ---------------------------------------------As/Simplion/7/3/2014-------------------- -->
                             <div class="tabbed-area">

                                    <ul class="tabs group" id="tabsItems">
                                        <li class="tabActiveHeader" id="#box1"><a>Contact Information</a></li>
                                        <li id="#box2"><a>Customer WAN</a></li>
                                        <li id="#box3"><a>CPE and LAN</a></li>
                                        <li id="#box4"><a>Integrations</a></li>
                                        <li id="#box5"><a>Validation Phase</a></li>
                                    </ul>

                                    <div class="box-wrap">

                                            <div id="box1" class="tabdiv">


                                                       <apex:panelGrid columns="1"  border="0" columnClasses="panelgridFull" style="width:98%">
                                                         <apex:outputpanel >
                                                            <div class="blockHeader textlabel"><h3>What to look for</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">  
																	<apex:pageBlock title="Quick Edit: {!Account.Name}">
																		<li>Number of locations:
          																	<apex:inputField value="{!account.Number_Of_Locations__c}"/>
                                                                            <!--<apex:commandButton action="{!save}" value="Save"/>-->
	                                                                		<apex:inputText value="{!account.name}"/></li>
                                                            
                                                                 
          
                                                                 <li></li>
                                                                 <li></li>
                                                                     </apex:pageBlock>
                                                                </ul>
                                                            </div><br/>
															 <div class="blockHeader textlabel"><h3>Discovery Questions</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                    <li>Company:  Check online resources, verify size/segment</li>
                                                                    <li>Ask Prospect: What’s your role in the process?  Have you been through a phone system replacement before?</li>
                                                                    <li>There’s been a lot of change in the telecom industry over the past several years
                                                                        <ul>
                                                                            <li>How familiar are you with some of these new technologies and capabilities that are available?</li>
                                                                            <li>Would it be useful if I shared how these new capabilities could benefit you and your business?</li>
                                                                        </ul>
                                                                    </li>

                                                                </ul>
                                                            </div>
                                                             <!-- <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder"  value="{!leadQualificationObj.Discovery_Notes_1__c}"/> -->

                                                         </apex:outputpanel>
                                                       </apex:panelGrid>

                                            </div>
                                            <div id="box2" class="tabdiv">

                                                       <apex:panelGrid columns="1"  border="0" columnClasses="panelgridFull" style="width:98%">
                                                         <apex:outputpanel >
                                                            <div class="blockHeader textlabel"><h3>What to look for</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                 <li>Business Drivers:  Deeper understanding of business drivers, pain and impact</li>
                                                                 <li>Urgency</li>
                                                                 <li>Timing:  Implementation timing and decision timing</li>
                                                                 <li>Stage:  Where are they in the buying process (journey)</li>
                                                                </ul>
                                                            </div><br/>
                                                            <div class="blockHeader textlabel"><h3>Discovery Questions</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                    <li>I understand you’re looking into a new system because (info gathered from SDR).  Can you tell me a little more about that?  If cost answer, dig deeper for why</li>
                                                                    <li>Second level of discovery questions once you identify business drivers
                                                                        <ul>
                                                                         <li>How does that (e.g. business drivers) impact your business?</li>
                                                                         <li>Who is impacted  within your company (How)?</li>
                                                                        </ul>
                                                                    </li>
                                                                    <li>When do you need to have a new system up and running?
                                                                        <ul>
                                                                            <li>Driven by specific events?  What if this date is missed?</li>
                                                                        </ul>
                                                                    </li>
                                                                    <li>When do you plan to make a decision on a new telecom system?</li>
                                                                    <li>Where are you in the process of looking for a new system?</li>
                                                                </ul>
                                                            </div>
                                                            <!-- <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder"  value="{!leadQualificationObj.Discovery_Notes_2__c}"/>-->

                                                         </apex:outputpanel>
                                                       </apex:panelGrid>


                                            </div>
                                            <div id="box3" class="tabdiv">

                                                       <apex:panelGrid columns="1"  border="0" columnClasses="panelgridFull" style="width:98%">
                                                         <apex:outputpanel >
                                                            <div class="blockHeader textlabel"><h3>What to look for</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                 <li>Locations</li>
                                                                 <li>Current technology and provider</li>
                                                                 <li>ISP and network readiness for Cloud VoIP</li>
                                                                 <li>Existing contracts</li>
                                                                 <li>Rough current spend?  And includes…?</li>
                                                                </ul>
                                                            </div><br/>
                                                            <div class="blockHeader textlabel"><h3>Discovery Questions</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                    <li>Are you looking for a system for the whole company or just a few locations?</li>
                                                                    <li>Can you tell me a little about your current phone system(s)?</li>
                                                                    <li>Do you currently have high speed Internet?  (If not – will you be upgrading for the new system?</li>
                                                                    <li>Contracts you have with your current provider(s)? (If longer than 6 mo), why looking now?</li>
                                                                    <li>For a lot of our customers, total cost is an important factor.  So that I can help you in the best way, an you give me an idea of the cost areas you consider part of your phone expenses?</li>
                                                                </ul>
                                                            </div>
                                                             <!-- <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder"  value="{!leadQualificationObj.Discovery_Notes_3__c}"/> -->

                                                         </apex:outputpanel>
                                                       </apex:panelGrid>


                                            </div>
                                            <div id="box4" class="tabdiv">

                                                       <apex:panelGrid columns="1"  border="0" columnClasses="panelgridFull" style="width:98%">
                                                         <apex:outputpanel >
                                                            <div class="blockHeader textlabel"><h3>What to look for</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                 <li>Preferred technology (cloud?)</li>
                                                                 <li>Features required?</li>
                                                                 <li>Mobile and remote workers</li>
                                                                 <li>Capabilities beyond features (e.g. flexibility, manageability, etc.)</li>
                                                                 <li>Vendor attributes (service, support, responsiveness)</li>
                                                                </ul>
                                                            </div><br/>
                                                            <div class="blockHeader textlabel"><h3>Discovery Questions</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                    <li>What telecom technology (cloud, on-premise) best fits your business?</li>
                                                                    <li>Besides price, what’s most important to you in a solution?  Why?</li>
                                                                    <li>What are the top 3-5 specific capabilities in priority order that you need?</li>
                                                                    <li>What are the top 3-5 capabilities in priority order that your current system provides that you must have in a new one? (also listen for deal killer features RC can’t provide)</li>
                                                                    <li>Are there any capabilities that you don’t want in your new phone system?  Why?</li>
                                                                    <li>What additional “nice to have” features are you looking for?</li>
                                                                    <li>How important is it to connect remote and mobile workers?</li>
                                                                    <li>What’s important in a new provider?</li>
                                                                    <li>How many people in your organization will be using phones?</li>

                                                                </ul>
                                                            </div>
                                                             <!-- <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder"  value="{!leadQualificationObj.Discovery_Notes_4__c}"/> -->

                                                         </apex:outputpanel>
                                                       </apex:panelGrid>


                                            </div>
                                            <div id="box5" class="tabdiv">

                                                       <apex:panelGrid columns="1"  border="0" columnClasses="panelgridFull" style="width:98%">
                                                         <apex:outputpanel >
                                                            <div class="blockHeader textlabel"><h3>What to look for</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                 <li>Decision Maker</li>
                                                                 <li>Evaluation Criteria</li>
                                                                 <li>Budget constraints, approved project</li>
                                                                 <li>Competition</li>
                                                                </ul>
                                                            </div><br/>
                                                            <div class="blockHeader textlabel"><h3>Discovery Questions</h3></div> <br/>
                                                            <div>
                                                                <ul class="removeMargin textlabel lightInsight">
                                                                    <li>Who besides yourself is responsible for the decision?</li>
                                                                    <li>Are you working with an outside consulting firm on this process?</li>
                                                                    <li>Are there any budget constraints you’re working within?</li>
                                                                    <li>Do you have a weighted list of capabilities and requirements that you are making your decision against?</li>
                                                                    <li>What other solutions are you considering?  Why?</li>

                                                                </ul>
                                                            </div>
                                                         <!--    <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder"  value="{!leadQualificationObj.Discovery_Notes_5__c}"/> -->

                                                         </apex:outputpanel>
                                                       </apex:panelGrid>


                                            </div>
                                            <div id="box6" class="tabdiv">

                                                   <apex:panelGrid columns="1"  border="0" columnClasses="panelgridFull" style="width:98%">
                                                     <apex:outputpanel >
                                                        <div class="blockHeader textlabel"><h3>What to look for</h3></div> <br/>
                                                        <div>
                                                            <ul class="removeMargin textlabel lightInsight">
                                                             <li>Objections
                                                                <ul>
                                                                    <li>VoIP voice quality and reliability (redundancy, failover, etc.)</li>
                                                                    <li>Transition risk – porting, disruption, employee adoption/resistance</li>
                                                                    <li>Price</li>
                                                                    <li>Bad online reviews (possibly fed by 8x8)</li>
                                                                </ul>
                                                             </li>
                                                             <li>Pre-Disposition
                                                                <ul>
                                                                    <li>Technology preference (cloud?)</li>
                                                                    <li>Current provider or other provider pre-disposition (using you for price)</li>
                                                                    <li>Vendor pre-disposition or reference to RC</li>

                                                                </ul>
                                                             </li>
                                                             <li>Potential Deal Killers
                                                                <ul>
                                                                    <li>Price shopping only</li>
                                                                    <li>Existing provider contract 6 mo</li>
                                                                    <li>No High speed ISP and unwilling to upgrade  </li>
                                                                </ul>
                                                             </li>
                                                            </ul>
                                                        </div><br/>
                                                        <div class="blockHeader textlabel"><h3>Discovery Questions</h3></div> <br/>
                                                        <div>
                                                            <ul class="removeMargin textlabel lightInsight">
                                                                <li>Are there any concerns you have about going with a VoIP solution that I can address?</li>
                                                                <li>A common question many companies have is how transition is handled.  Do you have any concerns about that I can address for you?  Are there others who have the same concern(s)?</li>
                                                                <li>What do you like most about the RC Solution?</li>
                                                                <li>Are there any concerns about how the RC solution can best meet your needs?</li>
                                                                <li>Based on what you know about RC, where do we stand in your rankings today?  Why?</li>

                                                            </ul>
                                                        </div>
                                                         <!-- <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder"  value="{!leadQualificationObj.Discovery_Notes_6__c}"/> -->

                                                     </apex:outputpanel>
                                                   </apex:panelGrid>


                                        </div>


                                    </div>
                                  <!-- ---------------------------------------------As/Simplion/7/3/2014 start-------------------- -->
                                      <div style="margin-left: 40px;margin-top: 30px;">
                                          <apex:panelGrid columns="1"  border="0" width="98%" >
                                            <apex:outputpanel >
                                                <apex:outputLabel styleclass="textlabel"  value="Discovery Notes"/>
                                                <apex:inputTextarea rows="8"   styleclass="fullwidthWithBorder discoveryNotes"  value="{!leadQualificationObj.Discovery_notes__c}"/>
                                            </apex:outputpanel><br/>
                                            <apex:outputpanel >
                                                <apex:panelGrid columns="2" border="0" width="98%" style="margin-bottom: 10px;">
                                                    <apex:outputpanel >
                                                        <apex:outputLabel styleclass="textlabel"  value="Next Step"/>
                                                        <apex:inputTextarea rows="4" style="height: 150px;"  styleclass="fullwidthWithBorder discoveryNextStep"  value="{!Account.Next_Steps_questions__c}"/>
                                                    </apex:outputpanel>
                                                    <apex:outputpanel >
                                                         <apex:outputLabel styleclass="textlabel"  value="Manager Notes"/>
                                                        <apex:inputTextarea rows="4"  style="height: 150px;" styleclass="fullwidthWithBorder managerNotes"  value="{!Account.Manager_Notes__c}"/>
                                                    </apex:outputpanel>
                                                </apex:panelGrid>
                                            </apex:outputpanel>
                                          </apex:panelGrid>
                                      </div>
                                 <!-- ---------------------------------------------As/Simplion/7/3/2014 ends-------------------- -->
                                 </div>
                        </div>
                    </apex:outputpanel>




           </div>
           <apex:outputpanel rendered="{!viewMode == 'read'}" >
                <script>
                    $(".NewDiscoverySection").find("input,select,textarea").prop('disabled',true);
                </script>
           </apex:outputpanel>
           <apex:actionStatus id="renderMeStatus" onStart="showOverlay();" onstop="jsLoad();hideOverlay();"/>
          <!-- -------------------------New Discovery section ends------------------------- -->
          <div class="btnDiv" id="readModeButton"   >
                <apex:outputpanel rendered="{!viewMode == 'read'}">
                     <apex:commandButton value="Edit" reRender="container" action="{!showEdit}" status="renderMeStatus" style="padding: 8px 20px 8px 20px;"/>
                </apex:outputpanel>
                <apex:outputpanel rendered="{!viewMode == 'edit'}">
                     <apex:commandButton value="Save" reRender="container" action="{!save}" status="renderMeStatus" style="padding: 8px 20px 8px 20px;" oncomplete="parentRefresh();"/>
                     <apex:commandButton value="Cancel"  onClick="return ConfirmUserAction('Do you really want to continue without saving changes?')" status="renderMeStatus" style="padding: 8px 20px 8px 20px;"/>
                </apex:outputpanel>

          </div>
          <script>
                  function jsLoad(){
                        initiateTabs('.box-wrap','{"activeTab" : 0}');
                        $("#tabsItems").find("li").on('click',function(){

                            var targetId = $(this).attr('id');
                            $(".box-wrap").children('.tabdiv').hide();
                            $(targetId).show();
                            $(this).siblings().removeClass('tabActiveHeader');
                            $(this).addClass('tabActiveHeader');
                        });

                        CheckErrorTabs();
                        <!-- ---------------------------------------------As/Simplion/7/3/2014-------------------- -->
                        TextAreaLengthCheck('.discoveryNotes','Discovery Notes',32000);
                        TextAreaLengthCheck('.discoveryNextStep','Next Step',10000);
                        TextAreaLengthCheck('.managerNotes','Manger Notes',10000);
                    }

                    jsLoad();

                    function setFocusOnLoad() {
                        $('.discoveryNotes').blur();
                        $('.discoveryNextStep').blur();
                        $('.managerNotes').blur();
                    }
                    <!-- ---------------------------------------------As/Simplion/7/3/2014-------------------- -->
            </script>
        </apex:form>
    </apex:outputpanel>
    <div id="overlay"></div>
</apex:page>