<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Add new project/PI</title>
   <link rel="stylesheet" type="text/css" href="../style/default.css"/>
   <link rel="stylesheet" type="text/css" href="../style/addproject.css"/>
   <link rel="stylesheet" type="text/css" href="../style/jquery.alerts.css"/>
   <!-- jquery -->
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
   <!-- jquery UI -->
   <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
   <!-- Form handler class -->
   <script type="text/javascript" src="addproject.js"></script>
   <script src="../common/jquery.alerts.js"></script>

</head>
<body>
<div id="arsf_header">
   <a href="/">
      <img src="../images/banner.jpg">
   </a>
</div>
<div id="nerclogo">
   <a href="http://www.nerc.ac.uk/">
      <img src="/images/nerc_logo.png" width="86" height="60" border="0" alt="NERC Homepage" title="NERC Homepage">
   </a>
</div>
<div id="flight_form">
   <h1>Add Projects / PIs</h1>

   <h2>Project</h2>

   <div id="project_top">
      <div id="project_input_1">
         <div class="form_row">
            <table style="width: 100%">
               <tr>
                  <td style="white-space: nowrap;">Existing Project</td>
                  <td><input type="radio" name="project" id="existing_project" disabled="true"/></td>
                  <td>
                     <select id="project_select" disabled="true">
                        <?php
                        foreach($projects as $project) {
                           echo sprintf('<option value="%s">%s</option>', $project, $project);
                        }
                        ?>
                     </select>
                  </td>
               </tr>
               <tr>
                  <td style="vertical-align: top;">New Project</td>
                  <td style="vertical-align: top;"><input type="radio" name="project" id="new_project" checked="true"/>
                  </td>
                  <td>
                     <table id="new_project_table" style="width: 100%;">
                        <tr style="vertical-align: baseline;">
                           <td style="white-space: nowrap;">Project Code<span class="red"><sup>*</sup></span></td>
                           <td><input type="text" id="project_code"/></td>
                        </tr>
                        <tr style="vertical-align: baseline;">
                           <td style="white-space: nowrap;">Project EUFAR Code</td>
                           <td><input type="text" id="project_eufar_code"/></td>
                        </tr>
                        <tr style="vertical-align: top;">
                           <td style="white-space: nowrap;">Project Summary<span class="red"><sup>*</sup></span></td>
                           <td><textarea id="project_summary"></textarea></td>
                        </tr>
                        <tr style="vertical-align: top;">
                           <td style="white-space: nowrap;">Project Description<span class="red"><sup>*</sup></span>
                           </td>
                           <td><textarea id="project_description"></textarea></td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>
         </div>
      </div>
   </div>
   <h2>PI</h2>

   <div id="project_top">
      <div id="project_input_1">
         <div class="form_row">
            <table style="width: 100%">
               <tr>
                  <td style="white-space: nowrap;">Existing PI</td>
                  <td><input type="radio" name="pi" id="existing_pi" checked="true"/></td>
                  <td>
                     <select id="pi_select">
                        <?php
                        foreach($pis as $pi) {
                           echo sprintf('<option value="%s">%s</option>', $pi['id'], $pi['pi_name']);
                        }
                        ?>
                     </select>
                  </td>
               </tr>
               <tr>
                  <td style="vertical-align: top;">New PI</td>
                  <td style="vertical-align: top;"><input type="radio" id="new_pi" name="pi"/></td>
                  <td>
                     <table id="new_pi_table" style="width: 100%; display: none;">
                        <tr style="vertical-align: baseline;">
                           <td style="white-space: nowrap;">Name<span class="red"><sup>*</sup></span></td>
                           <td><input type="text" id="pi_name"/></td>
                        </tr>
                        <tr style="vertical-align: baseline;">
                           <td style="white-space: nowrap;">Email</td>
                           <td><input type="text" id="pi_email"/></td>
                        </tr>
                        <tr style="vertical-align: top;">
                           <td style="white-space: nowrap;">Address</td>
                           <td><textarea id="pi_address"></textarea></td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>
         </div>
      </div>
   </div>
   <input type="submit" id="submit" name="submit" value="Add project and PI" class="submit_button"/>
</body>
</html>

