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

<h1>Survey Wizard</h1>

<select name="survey[id]" onchange="">
  <option value="">- SELECT SURVEY TO UPDATE -</option> 
</select> <input type="button" value="Load" onclick="promptSurveyLoad();" />
<br /><br />

<h2 id="editor-title">Creating A New Survey</h2>
<blockquote>
  <table><tr><td valign="top" align="center">
  <a href="javascript:xOpen('icon-change-div');"><img id="survey-icon" class="sIco icoJumper" 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="" /> <b>Enable this survey?</b> <small>Available to be taken once saved.</small><br />
  <input type="checkbox" name="survey[isIncentivePoints]" value="" /> <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" size="45" maxlength="64" name="survey[surveyName]" value="" onkeypress="titleUpdate();" /> &nbsp; 
      <b>Base Value</b>: <input type="text" size="4" maxlength="5" name="survey[baseValue]" value="" /></td>
  </tr>
  <tr>
    <td><b>Frequency</b>:</td>
    <td><select name="survey[frequency]">
          <option value="Daily">Daily</option>          
          <option value="Weekly">Weekly</option>
          <option value="Monthly">Monthly</option>          
          <option value="Annually">Annually</option>
          <option value="Once">Once</option>
          <option value="No Limit">No Limit</option>
        </select> &nbsp; 
        <b>Category</b>: <select name="survey[categoryId]">
          <option value="">- SELECT A CATEGORY -</option>          
        </select></td>
  </tr>
  <tr>
    <td valign="top"><b>Instructions:</b></td>
    <td><textarea name="survey[instructions]" rows="3" cols="50"></textarea></td>
  </tr>
  <tr>
    <td valign="top"><b>Completion:</b></td>
    <td><textarea name="survey[instructions]" rows="2" cols="50"></textarea><br />
      <small>A brief &quot;Thank You&quot; message after survey has been finished.</small><br /><br /></td>
  </tr>
  </table>

  <div align="center"><input type="button" value="Save Changes" /> <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 name="question[question]" rows="3" cols="50"></textarea></td>
  </tr>
  <tr>
    <td valign="top"><b>Feedback:</b></td>
    <td><textarea name="question[generalFeedback]" rows="2" cols="50"></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'}
  <tr>
    <td><b>Option {$qAlpha}</b>:</td>
    <td><input type="text" name="question[{$qAlpha}]" size="51" maxlength="128" /> &nbsp;
      <b>Value</b>: <input type="text" name="question[value{$qAlpha}]" size="4" maxlength="5" /></td>
  </tr>
  <tr>
    <td valign="top"><b>Feedback</b>:</td>
    <td><textarea name="question[feedbackA]" rows="2" cols="50"></textarea><br /><br /></td>
  </tr>
{/foreach}
<tr>
  <td valign="top"><b>Placement</b>:</td>
  <td><select name="question[ids]">
      <option value="1">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-notification">* Question updates not yet saved.</b><br />
    <input type="button" value="Discard Changes" />
    <input type="button" value="Save" />
    <input type="button" value="Save As Next" />
    <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 promptSurveyLoad() {
    xGetElementById('editor-title').innerHTML = 'Editing Survey (Survey Name)';
    xClose('questions-editor'); 
    xOpen('survey-editor');
  }

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

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