{assign var="pgLayout" value="layouts/withLeftNav.tpl"}
{include_php file="shared_handle:company_management/survey_wizard"}

<h1>Survey Wizard</h1>
<p><i>Under Construction, please be patient.</i></p>
<form method="post" action="index.php">
<input type="hidden" name="pg" value="{$page.name}" />
<select name="load_survey_id">
  <option value="" style="font-weight:bold;">- SELECT SURVEY TO UPDATE -</option>
 {foreach from=$aCompanySurveys item=survey}
  <option value="{$survey.id}">{$survey.surveyName}</option>
 {/foreach}
  <option value="" style="font-weight:bold;">- GLOBAL SURVEYS -</option>
 {foreach from=$aGlobalSurveys item=survey}
  <option value="{$survey.id}">{$survey.surveyName}</option>
 {/foreach}
</select> <input type="submit" value="Load" />
</form>

{* display var=$aLoadedSurvey *}

<h2 id="editor-title">{if $aLoadedSurvey.surveyName}Editing: <b>{$aLoadedSurvey.surveyName}</b>{else}Creating A New Survey{/if}</h2>
<blockquote>
  <table><tr><td valign="top" align="center">
  <a href="javascript:xOpen('icon-change-div');"><img id="survey-icon" class="sIco ico{$aLoadedSurvey.icon|default:"Survey"}" src="blank.gif" width="1" height="1" border="0" alt="" /><br />
  <small>change</small></a>
  </td><td valign="top">
<div id="icon-change-div" style="display:none;">
  {assign_array var="aIcons" values="Carrots,Weights,Jumper,Nurse,Stethescope,Medal,Click,Scantron"}
  {foreach from=$aIcons item="ico"}
    <a href="javascript:setIcon('{$ico}');"><img class="sIco ico{$ico}" src="blank.gif" width="1" height="1" border="0" alt="" /></a>
  {/foreach}
</div>

<div id="survey-editor">
  <input type="checkbox" name="survey[isActive]" value="1"{if $aLoadedSurvey.isActive eq 'Yes'} checked="checked"{/if} /> <b>Enable this survey?</b> <small>Available to be taken once saved.</small><br />
  <input type="checkbox" name="survey[isIncentivePoints]" value="1"{if $aLoadedSurvey.isIncentivePoints eq 'Yes'} checked="checked"{/if} /> <b>Incentive points?</b> <small>Total score will be added to incentive points.</small><br />
  <hr />
  <table align="center" border="0" style="margin-left:10px;">
  <tr>
    <td><b>Survey Name</b>:</td>
    <td><input id="survey-name" type="text" onchange="setChanged('s');" size="45" maxlength="64" name="survey[surveyName]" value="{$aLoadedSurvey.surveyName}" onkeypress="titleUpdate();" /> &nbsp; 
      <b>Base Value</b>: <input type="text" onchange="setChanged('s');" size="4" maxlength="5" name="survey[baseValue]" value="{$aLoadedSurvey.baseValue}" /></td>
  </tr>
  <tr>
    <td><b>Frequency</b>:</td>
    <td><select name="survey[frequency]">
{assign_array var="aFrequencies" values="Daily,Weekly,Monthly,Annually,Once,No Limit"}
         {foreach from=$aFrequencies item=frequency}
          <option onchange="setChanged('s');" value="{$frequency}"{if $frequency eq $aLoadedSurvey.frequency} selected="selected{/if}>{$frequency}</option>
         {/foreach}
        </select> &nbsp; 
        <b>Category</b>: <select name="survey[categoryId]" onchange="setChanged('s');">
          <option value="">- SELECT A CATEGORY -</option>
         {foreach from=$aSurveyCategories item=category}
          <option value="{$category.id}"{if $category.id eq $aLoadedSurvey.surveyCategoryId} selected="selected"{/if}>{$category.name}</option> 
         {/foreach}
        </select></td>
  </tr>
  <tr>
    <td valign="top"><b>Instructions:</b></td>
    <td><textarea onchange="setChanged('s');" name="survey[instructions]" rows="3" cols="50">{$aLoadedSurvey.instructions}</textarea></td>
  </tr>
  <tr>
    <td valign="top"><b>Completion:</b></td>
    <td><textarea onchange="setChanged('s');" name="survey[completionText]" rows="2" cols="50">{$aLoadedSurvey.completionText}</textarea><br />
      <small>A brief &quot;Thank You&quot; message after survey has been finished.</small><br /><br /></td>
  </tr>
  </table>

  <div align="center">
    <b style="color:red;" id="survey-save-alert" style="display:none;">* Survey updates not yet saved.</b><br />
    <input type="button" value="Save Changes" /> {if $aLoadedSurvey.surveyName}<input type="button" value="Save As New" /> {/if}<input id="questions-editor-button" type="button" value="Edit Questions" onclick="editQuestions();" />
  </div>

</div>

<div id="questions-editor" style="display:none;">
<table align="center">
  <tr>
    <td valign="bottom"><h2>Question #<b id="question-number-b">1</b></h2></td>
    <td valign="bottom" align="center"><input type="button" value="Back" /> <input type="button" value="Next" /></td>
  </tr>
  <tr>
    <td valign="top"><b>Question</b>:</td>
    <td><textarea onchange="setChanged('q');" name="question[question]" rows="3" cols="50">{$aLoadedQuestion.question}</textarea></td>
  </tr>
  <tr>
    <td valign="top"><b>Feedback:</b></td>
    <td><textarea onchange="setChanged('q');" name="question[generalFeedback]" rows="2" cols="50">{$aLoadedQuestion.generalFeedback}</textarea><br />
      <small>Explanation of question shown after survey is completed.</small><br /><br /></td>
  </tr>
{assign_array var='aQs' values='A,B,C,D,E'}
{foreach from=$aQs item='qAlpha' name='qAlpha'}{assign var="qAlphaNext" value=`$aQs[$smarty.foreach.qAlpha.iteration]`}
  <tr id="question-row_{$qAlpha}"{if !$smarty.foreach.qAlpha.first AND !$aLoadedQuestion[$qAlpha]} style="display:none;"{/if}>
    <td><b>Option {$qAlpha}</b>:<br /><br />{assign var="feedbackAlpha" value="feedback`$qAlpha`"}{if !$aLoadedQuestion.$feedbackAlpha}<input type="button" value="Add Feedback" onclick="document.getElementById('feedback-row_{$qAlpha}').style.display='inline';this.style.display='none';" />{/if}</td>
    <td><input onchange="setChanged('q');" type="text" name="question[{$qAlpha}]" size="51" maxlength="128" value="{$aLoadedQuestion.$qAlpha}" {if !$smarty.foreach.qAlpha.first}onload="if(this.value=='')"{/if}/> &nbsp;
      <b>Value</b>: <input onchange="setChanged('q');" type="text" name="question[value{$qAlpha}]" size="4" {assign var="valueAlpha" value="value`$qAlpha`"}value="{$aLoadedQuestion[$valueAlpha]}" maxlength="5" /></td>
  </tr>
  <tr id="feedback-row_{$qAlpha}"{if !$aLoadedQuestion.$qAlpha OR !$aLoadedQuestion[$feedbackAlpha]} style="display:none;"{/if}>
    <td valign="top"><b>Feedback</b>:</td>
    <td><textarea name="question[feedbackA]" onchange="setChanged('q');" rows="2" cols="50">{$aLoadedQuestion[$feedbackAlpha]}</textarea></td>
  </tr>
  {if !$smarty.foreach.qAlpha.last AND !$aLoadedQuestion[$qAlphaNext]}
  <tr>
    <td colpan="2">&nbsp;<input id="add-next-question-button_{$qAlpha}" type="button" value="Add Option [{$qAlphaNext}]" style="display:none;" /></td>
  </tr>
  {/if}
{/foreach}
<tr>
  <td valign="top"><b>Placement</b>:</td>
  <td><select name="question[ids]">
      <option value="1" onchange="setChanged('q');">1</option>
    </select> Select which number you want this question to be.<br /><small>Existing questions will be moved down.</small><br /><br /></td>
</tr>
<tr>
  <td colspan="2" align="center">
    <b style="color:red;" id="question-save-alert" style="display:none;">* Question updates not yet saved.</b><br />
    <input type="button" value="Discard Changes" onclick="editSurvey();" />
    {if $aLoadedSurvey.companyId gt 0}<input type="button" value="Save Changes" />{/if}
    <input type="button" value="Save As New" />
    <input type="button" value="Delete" />
  </td>
</tr>
</table>
</div>
</td></tr></table>
</blockquote>
</div>

<script type="text/javascript">{literal}

  function setIcon(ico) {
    xGetElementById('survey-icon').className = 'sIco ico'+ico;
    xClose('icon-change-div');
  }

  function editSurvey() {
    surveyName = xGetElementById('survey-name').value;
    xGetElementById('editor-title').innerHTML = 'Editing: <b>'+surveyName+'</b>';
    xClose('questions-editor');
    xOpen('survey-editor');
  }

  function editQuestions() {
    xGetElementById('editor-title').innerHTML = 'Editing Survey Questions (Survey Name)';
    xOpen('questions-editor');
    xClose('survey-editor');
  }

  function titleUpdate() {
    surveyName = xGetElementById('survey-name').value;
    xGetElementById('editor-title').innerHTML = (surveyName) ? 'Editing: <b>'+surveyName+'</b>' : 'Editing: <b>Untitled</b>';
  }

  function setChanged(type) {
    switch(type) {
      case 's':
        xGetElementById('survey-save-alert').style.display = 'inline';
        break;
      case 'q':
        xGetElementById('question-save-alert').style.display = 'inline';
        break;
    }
  }

  xClose('survey-save-alert');
  xClose('question-save-alert');

{/literal}</script>