<%@ page extends="oneit.servlets.jsp.JSPInclude" %>

<%@ include file="/inc/stdimports50.jsp" %><%-- This is in cougar --%>
<%@ include file="/inc/stdcms.jsp" %><%-- This is in cougar --%>
<%@ include file="/extensions/performa/inc/stdimports.jsp" %>

<oneit:dynIncluded>
<%
    Job     job         =   (Job) process.getAttribute("Job");
    String  jobPage     =   WebUtils.getSamePageInRenderMode(request, "Page");

    Debug.assertion(job != null, "Job is null in admin portal create job");
    
    SecUser                             txUser      =   SecUser.getTXUser(process.getTransaction());
    CompanyUser                         companyUser =   txUser.getExtension(CompanyUser.REFERENCE_CompanyUser);
    List<AssessmentCriteriaTemplate>    templates   =   job.getAssessmentTemplates();
    String                              nextPage    =   WebUtils.getSamePageInRenderMode(request, WebUtils.ASSESSMENT_CRITERIA);
%>

    <style>
        button[disabled] {
            opacity: 0.6;
            background-color: #0582ba;
        }
    </style>
    <script type="text/javascript">
        var lastclickedOccid = 0 , lastclickedOcc = "" , levelClicked = "";
        var occPopup;
        var occlistObj = {"level0" : null , "level1" : null , "level2" : null , "level3" : null };
        var scrolldiv = null ;
        $(document).ready(function() 
        {
            setupRecalc ($("form#editJob"), {'recalcOnError':true});

            $("select[name$='AssessmentTemplate']").change(function()
            {
                $("button[name$='loadJobFromTemplate']").click();
            });
            
            if ($("#select-occupation-id").val()) {
               lastclickedOccid =  $("#select-occupation-id").val();
            }else {
                lastclickedOccid = 0 ;
            }

            var popup_width = 1040;
            
            occPopup = new jBox('Modal', {
                id : "occupation-list",
                attach: '.select-occupation',
                title: 'Select the occupation classification for this job',
                content : $("#occupation_content"),overlay : true,
                closeButton: "title",
                minWidth : popup_width, height : 500,
                onCreated : function(){
                    $(".dyn-div").empty();
                    $(".occupation_content_column").css("width", popup_width/4 );
                },
                onOpen : function(){
                    $(".dyn-div").empty();
                    $('.occupation_content_column ul li').removeClass("clicked");
                    $(".occupation_select_info").css("width","75%");
                     if (scrolldiv===null) scrolldiv = '.main-list-div';
                    if(lastclickedOccid!==0){
                        var  currEle = $(".main-list-div").find("li[data-id='"+ lastclickedOccid +"']");
                        occlistObj[currEle.parent('ul').attr("class")] = lastclickedOccid ;
                        checkParents(currEle);
                        for (i = 0; i < 4; i++) {
                            if (occlistObj["level"+i] ){
                                popuplateSelectLists  ($(".main-list-div").find("li[data-id='"+ occlistObj["level"+i] +"']"));
                                $(".level"+i+"-div").find("li").removeClass("clicked");
                                $(".level"+i+"-div").find("li[data-id='"+ occlistObj["level"+i] +"']").addClass("clicked");
                                occlistObj["level"+i] = null ;
                            }
                        }
                    }
                }
            });
            
            $(document).on("click",".occupation_content_column ul li",function(){
                popuplateSelectLists($(this));               
            });
            
            $("#save-job-occ").on("click",function(){
                if(lastclickedOccid!==0){
                    occPopup.close();
                }
            });
            
            $(document).on('mousewheel', function(e){
                if(scrolldiv!==null){
                    var target = $( scrolldiv);
                    if(e.originalEvent.wheelDelta /120 > 0) {
                        target.scrollTop(target.scrollTop() + 10);
                    }
                    else{
                        target.scrollTop(target.scrollTop() - 10);
                    }
                }
            });
                
            $(".create-job").find('input,select,textarea').each( function (i) 
            {
                if($(this).hasClass('type_radio'))
                {
                    $(this).next('label').attr('tabindex', i + 1); 
                }
                else if($(this).hasClass('level_radio'))
                {
                    $(this).parent('a').attr('tabindex', i + 1); 
                }
                else if($(this).hasClass('last-workflow'))
                {
                    $(this).attr('tabindex', i + 5); 
                }
                else
                {
                    $(this).attr('tabindex', i + 1); 
                }
            });
                
            var currFocusSelect2;
            
            $(document).on('focus', '.select2.select2-container', function (e) {
            // only open on original attempt - close focus event should not fire open
                if (e.originalEvent && $(this).find(".select2-selection--single").length > 0) {
                    currFocusSelect2 = $(this).siblings('select').on("select2-blur", function(e) { log ("blur");});;
                    currFocusSelect2.select2('open');
                } 
            });
                  
            $(document).on('keyup', '.select2.select2-container', function (e) {
                      
                if(!$(this).hasClass('select2-container--open')){
                    nexttab = parseInt($(this).siblings('select').attr('tabindex')) + 1 ;
                    $('[tabindex=' + nexttab + ']').focus();
                }
            });
                  
            $('input[type="text"][id$="Industry"]').blur(function(){
                if($(this).next().val() === ""){
                   $(this).val('');
                }
            });
                
            $('input[type="text"][id$="Industry"]').attr('placeholder','Please select an Industry');
        });
        
      
        function checkParents(currEle){
            newCurrEle = currEle.parent('ul').parent("li");
            if (newCurrEle.length){               
                occlistObj[newCurrEle.parent("ul").attr("class")] = newCurrEle.data("id") ;
                checkParents(newCurrEle);
            } else {
                return false;
            }
        }
        
        function popuplateSelectLists(thisEle){
           
            lastclickedOccid = thisEle.data('id');
            lastclickedOcc = thisEle.data('occ');
            levelClicked = thisEle.data('level');
            
            if(levelClicked === "fourth"){
                $('.btn-save-occ').removeAttr('disabled');
                $(".select-occupation").val(lastclickedOcc);
                $("#select-occupation-id").val(lastclickedOccid);
            } else {
                $(".select-occupation").val("");
                $("#select-occupation-id").val(0);
                $('.btn-save-occ').attr('disabled', 'disabled');
            }
                
            thisEle.siblings('li').removeClass("clicked");
            thisEle.addClass("clicked");

            if( !thisEle.parent().hasClass("level3")) {
                $(".occupation_select_info").show();
                var nextUl = thisEle.find('ul').first().clone();

                $("." + nextUl.attr('class') + "-div").empty();
                $("." + nextUl.attr('class') + "-div").nextAll().empty();
                var nextDiv = $("." + nextUl.attr('class') + "-div");
                
            
                if(nextUl) {
                    nextUl.appendTo(nextDiv);
                }
                
                if(nextDiv.hasScrollBar()){
                    scrolldiv = "." + nextUl.attr('class') + "-div";
                }else{
                    scrolldiv = '.main-list-div';
                }
              

                if(thisEle.parent().hasClass("level2")) {
                    $(".occupation_select_info").hide();
                } else {
                    if( thisEle.hasClass("main-item")) {
                        $(".occupation_select_info").css("width","50%").show();
                    } else {
                        if( thisEle.parent().hasClass("level1")) {
                            $(".occupation_select_info").css("width","25%").show();
                        }
                    }
                }
            }
        }
        
        function addWorkflow() 
        {
            ajaxProcessAddJQ ("<%= request.getContextPath() %>/extensions/adminportal/inc/workflow_add.jsp", "#middle-workflows", {}, function (theHTML_JQ) {
                $("#middle-workflows").append (theHTML_JQ);
                
                $("#middle-workflows").find('input').each( function () 
                {
                   $(this).attr('tabindex', 26);  
                });
            });
            
        }
        
        function deleteWorkflow(deleteVarKey)
        {
            ajaxProcessDeleteJQ("<%= request.getContextPath() %>/genericDelete_AJAX.jsp", "#middle-workflows" , { varKey: deleteVarKey });
            return false;
        }
        
      (function($) {
            $.fn.hasScrollBar = function() {
                return this.get(0).scrollHeight > this.height();
            }
        })(jQuery);  

    </script>  
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCaBh-MsMb8BBYJD_NcFzoCmygQbt5-QSw"></script>
    <oneit:script>
        <oneit:script src="/scripts/google_address.js"/>
    </oneit:script>
    <oneit:form name="editJob" method="post"    enctype="multipart/form-data">
        <div class="container-fluid">
            
            <oneit:dynInclude   page="/extensions/applicantportal/inc/multifieldtext.jsp"   data="<%= CollectionUtils.EMPTY_MAP%>"/>
        
            <h1 class="page-title">Create a job</h1>

            <oneit:dynInclude   page="/extensions/adminportal/inc/job_main_tabs.jsp"    PageNumber="1"    data="<%= CollectionUtils.EMPTY_MAP%>"/>
            
            <%
                job.setCompletedDetails(Boolean.TRUE);
            %>
            <div class="form-page-area nopadding">
                <div class="create-job"> 
                    <div class="form-page-section">
                    <%
                        if(templates.size() > 0)
                        {
                    %>
                            <oneit:button   value=" "   name="loadJobFromTemplate"  cssClass="hide"
                                            requestAttribs="<%= CollectionUtils.mapEntry ("Job", job)
                                                                            .mapEntry (UpdateMappedObjFP.FAIL_VALIDATION_ERRORS, Boolean.FALSE)
                                                                            .toMap() %>" />

                            <div class="form-group wider-select">
                                <tagfile:ormsingleasso_select   obj="<%= job %>"    assocName="AssessmentTemplate" options="<%= templates.toArray(new AssessmentCriteriaTemplate[0])  %>"  
                                                                blankValue="Optional: Use another Job as a starting point"/>
                            </div>
                    <%
                        }
                    %>
                        <div class="form-group row">
                            <div class="col-md-8">
                                <label><oneit:label GUIName="Job Title" /></label>
                                <oneit:ormInput obj="<%= job %>"    type="text" attributeName="JobTitle"    cssClass="form-control" />                                
                            </div>
                            <div class="col-md-4">
                                <label><oneit:label GUIName="Reference Number" /><a href="#" title="Uniquely identify jobs that have identical titles. Examlple:<br>&#8226; New Home Sales Consutant (ABC123)<br>&#8226;  New Home Sales Consutant (ABC456)" class="info-icon"><img src="images/info-icon.png" /></a></label>
                                <oneit:ormInput obj="<%= job %>"   type="text" attributeName="ReferenceNumber" cssClass="form-control" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><oneit:label GUIName="About the Job" /></label>
                                <oneit:ormtextarea  obj="<%= job %>"     attributeName="JobDescription"  cssClass="form-control textarea-box"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label><oneit:label GUIName="Job Owner"/></label>
                                <div class="wider-select">
                                    <tagfile:ormsingleasso_select obj="<%= job %>"    assocName="JobOwner"    options="<%= job.getHiringTeam().getActiveTeammates().toArray(new CompanyUser[0]) %>"/>
                                </div>
                            </div>
                            <%
                                if(job.getHiringTeam().showHasClientSupport())
                                {
                            %>
                                    <div class="col-sm-6 col-xs-12">
                                        <label><oneit:label GUIName="Client "/><span>(Optional)</span></label>
                                        <div class="wider-select">
                                            <tagfile:ormsingleasso_select obj="<%= job %>"   assocName="Client"  options="<%= Utils.getClientsByHiringTeam(transaction) %>"/>
                                        </div> 
                                    </div>
                            <%
                                }
                            %>
                        </div>
                    </div>
                    <div class="form-page-section darkbg">
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="label-16">Job Location</label>                
                            </div>
                        </div>
<%--                        
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label><oneit:ormlabel  obj="<%= job %>"    field="Country" /></label>
                                <oneit:ormEnum  obj="<%= job %>"    attributeName="Country" cssClass="form-control"/>
                            </div>
                            <div class="col-md-6">
                                <label><oneit:label GUIName="State or Province"/></label>
                                <oneit:ormEnum  obj="<%= job %>"    attributeName="State" cssClass="form-control"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label><oneit:label GUIName="City or Town"/></label>
                                <oneit:ormInput obj="<%= job %>"    type="text" attributeName="City"        cssClass="form-control" />      
                            </div>
                            <div class="col-md-4">
                                <label><oneit:label GUIName="Zip / Post Code"/></label>
                                <oneit:ormInput obj="<%= job %>"    type="text" attributeName="PostCode"    cssClass="form-control" />      
                            </div>
                            <div class="col-md-4">
                                <label><oneit:label GUIName="Expected Candidate Radius"/></label>
                                <oneit:ormEnum  obj="<%= job %>"    attributeName="ExpectedCandidateRadius" cssClass="form-control"/>
                            </div>
                        </div>
--%>
                        <div class="form-group row">
                            <div class="col-md-8">
                                <label><oneit:label GUIName="Google Location"/></label>
                                <oneit:ormInput obj="<%= job %>" type="text"  attributeName="GoogleAddressText" class="autoAddress" id="<%= "gAddress_"+job.getObjectID() %>" placeholder="Enter your address" cssClass="form-control" />
                            </div>
                            <div class="col-md-4">
                                <label><oneit:label GUIName="Expected Candidate Radius"/></label>
                                <oneit:ormEnum  obj="<%= job %>"  attributeName="ExpectedCandidateRadius" cssClass="form-control"/>
                            </div>                
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <div class="styled_checkboxes">
                                    <div class="checkbox checkbox-primary">
                                        <oneit:ormInput obj="<%= job %>" id="is-remote"    attributeName="Remote"  type="checkbox"/>
                                        <oneit:recalcClass  htmlTag="span"  classScript="job.getRemote() != null && job.getRemote() ? 'checked': 'unchecked'"    job="<%= job %>">
                                            <label for="is-remote">
                                                <oneit:label GUIName="Working remotely is an option" />
                                            </label>
                                        </oneit:recalcClass>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-page-section"> 
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><oneit:label GUIName="Job Type" /></label>
                                <oneit:ormEnum  obj="<%= job %>"    attributeName="JobType" cssClass="form-control"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label><oneit:label GUIName="Industry Classification" /></label>
                                <oneit:ormEnum  obj="<%= job %>"     attributeName="Industry"    cssClass="form-control"    displayType="autocomplete"/>
                            </div>
                            <div class="col-md-6">
                                <label><oneit:label GUIName="Job Occupation Classification" /></label>
                                <input type="text" class="form-control select-occupation search-input " placeholder="Select the occupation classification"
                                       value="<%= job.getOccupation() != null ? job.getOccupation() : "Select the occupation classification"%>"></input>
                                <oneit:ormInput obj="<%= job %>"  id="select-occupation-id"    attributeName="OccupationId" type="hidden"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <div class="styled_checkboxes">
                                    <div class="checkbox checkbox-primary">
                                        <oneit:ormInput obj="<%= job %>"  id="require-cv"    attributeName="RequireCV"  type="checkbox"/>
                                        <oneit:recalcClass  htmlTag="span"  classScript="job.getRequireCV() != null && job.getRequireCV() ? 'checked': 'unchecked'"    job="<%= job %>">
                                            <label for="require-cv">
                                                <oneit:label GUIName="Require CV and Cover Letter from Candidate" />
                                            </label>
                                        </oneit:recalcClass>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-page-section darkbg">
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="label-16">Applicant Workflow</label>                
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                Please define your applicant approval/refinement workflow and tabs below. We have nominated some defaults to help you get started. You are allowed up to 9 different steps, and can drag to re-order using the handle on the left.
                            </div>
                        </div>
                        <div id="workflows">
                            <div>
                            <%
                                WorkFlow firstWorkflow  =   job.getWorkFlowBySortOrder(1);
                            %>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <div class="workflow-row">
                                            <span><%= firstWorkflow.getSortOrder() %></span>
                                            <oneit:ormInput obj="<%= firstWorkflow %>"    type="text" attributeName="Name"    cssClass="form-control" /> 
                                        </div>
                                        <div class="seperator-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
                                    </div>
                                </div>
                            </div>
                            <div id="middle-workflows">
                                <%
                                    List<WorkFlow>  sortedWorkflows =   job.getSortedMiddleWorkFlows();
                                    int             index           =   0;
                                    for (WorkFlow workflow : sortedWorkflows)
                                    {
                                        index++;
                                %>

                                        <div class="form-group row" id="<%= workflow.getID() %>">
                                            <div class="col-md-12">
                                                <div class="workflow-row">
                                                    <span><%= workflow.getSortOrder() %></span>
                                                    <oneit:ormInput obj="<%= workflow %>"    type="text" attributeName="Name"    cssClass="form-control" /> 
                                                    <%
                                                        if(workflow.getApplicationStatus() != ApplicationStatus.SUBMITTED && workflow.getApplicationStatus() != ApplicationStatus.SHORTLISTED)
                                                        { 
                                                            String      deleteVarKey    =   FormTag.getVariableKey (request);

                                                            FormTag.setVariable (request, deleteVarKey, "objToDelete", workflow);
                                                            FormTag.setVariable (request, deleteVarKey, "jqToDelete", "#" + workflow.getID());          
                                                    %>
                                                            <div class="remove-icon" onclick="return deleteWorkflow (<%= deleteVarKey %>)">_</div>
                                                    <%
                                                        }
                                                    %>
                                                </div>
                                            </div>
                                        </div>
                                <%
                                    }
                                %>
                            </div>
                            <div>
                            <%
                                WorkFlow lastWorkflow  =   job.getWorkFlowBySortOrder(9);
                            %>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <div class="seperator-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
                                        <div class="workflow-row">
                                            <span><%= lastWorkflow.getSortOrder() %></span>
                                            <oneit:ormInput obj="<%= lastWorkflow %>"    type="text" attributeName="Name"    cssClass="form-control last-workflow" /> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row" style="text-align: center;" >
                            <a href="#" class="add-more-btn review-edit-btn" onclick="<%="addWorkflow(); return false;"%>"  tabindex="32">Add Workflow Step</a>
                        </div>
                        <div class="form-brack-line"></div>
                        <div class="text-center">
                        <%
                            if(false)
                            {
                        %>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        Job Templates include both Job Details and Requirements.
                                    </div>
                                    <div class="col-md-12">
                                        Saving a new Job Template a can be completed on the next step.                        
                                    </div>
                                </div>
                        <%
                            }
                        %>
                            <oneit:button   value="Save as draft"   name="saveJob"  cssClass="btn btn-primary largeBtn greyBtn"
                                            requestAttribs="<%= CollectionUtils.mapEntry("nextPage", jobPage)
                                                                                .mapEntry("DraftLocation", DraftLocation.DETAILS)
                                                                                .mapEntry(UpdateMappedObjFP.FAIL_VALIDATION_ERRORS, Boolean.FALSE)
                                                                                .toMap() %>"/>
                            <button class="btn btn-primary largeBtn" onclick="$('.processCulture').click();" tabindex="33">Proceed to Requirements</button>
                            <oneit:button   value="Proceed to Requirements" name="processCulture" cssClass="processCulture hide" 
                                            requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
                                                                            .mapEntry("procParams", CollectionUtils.mapEntry("Job", job).toMap())
                                                                            .mapEntry("fromJobMatch", true)
                                                                            .toMap() %>"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                    
        <div class="occupation_content" id="occupation_content" style="display: none;">
            <div  class="occupation_content_row">
                <div id="scrollme" class="main-list-div occupation_content_column">
                    <ul class="level0">
                    <%
                        Occupation[]    firstLevelOccupations   =   Occupation.SearchByAll()
                                                                                .andLevel(new EqualsFilter<>(OccupationLevel.LEVEL_1))
                                                                                .search(transaction);
                        for (Occupation firstLevel : firstLevelOccupations)
                        {
                    %>
                            <li class="main-item" data-id="<%= firstLevel.getObjectID()%>" data-occ="<%= firstLevel%>" data-level="first">
                                <span> <%= firstLevel%> </span>
                                <ul class="level1">
                                <%
                                    for (Occupation secondLevel : firstLevel.getChildOccupationsSet())
                                    {
                                %>
                                        <li data-id="<%= secondLevel.getObjectID()%>" data-occ="<%= secondLevel%>"  data-level="second">
                                            <span> <%= secondLevel%></span>
                                            <ul class="level2">
                                            <%
                                                for (Occupation thirdLevel : secondLevel.getChildOccupationsSet())
                                                {
                                            %>
                                                    <li data-id="<%= thirdLevel.getObjectID()%>" data-occ="<%= thirdLevel%>" data-level="third">
                                                        <span>  <%= thirdLevel%></span>
                                                        <ul class="level3">
                                                        <%
                                                            for (Occupation  fourthLevel : thirdLevel.getChildOccupationsSet())
                                                            {
                                                        %>
                                                                <li data-id="<%= fourthLevel.getObjectID()%>" data-occ="<%= fourthLevel%>"  data-level="fourth">
                                                                    <span>  <%= fourthLevel%></span>
                                                                </li>
                                                        <%
                                                            }
                                                        %>
                                                        </ul>
                                                    </li>
                                            <%
                                                }
                                            %>
                                            </ul>
                                        </li>
                                <%
                                    }
                                %>
                                </ul>
                            </li>
                    <%
                        }
                    %>
                    </ul>
                </div>
                <div class="level1-div occupation_content_column dyn-div"></div>

                <div class="level2-div occupation_content_column dyn-div"></div>

                <div class="level3-div occupation_content_column dyn-div"></div>
            </div>
            <div class="occupation_select_info">
                Select the most appropriate Category to help narrow down your Occupation
            </div>
            <div class="occupation_select_button">
                <button type="button" value="Save Job Occupation" id="save-job-occ" class="btn btn-primary largeBtn btn-save-occ" style="" disabled>Save Job Occupation</button>
            </div>
        </div>
        <script>
            addGoogleAddressListener('#<%= "gAddress_"+ job.getObjectID() %>');
        </script>
    </oneit:form>
</oneit:dynIncluded>
