[% META title="Sample storage" %]
<!-- BEGIN [% template.name %] -->
    [% # PROCESS dumper.tt dump = specimen_map %]
    [% # PROCESS dumper.tt dump = storage %]
    [% # PROCESS dumper.tt dump = c.stash.errs %]
    [% # PROCESS dumper.tt dump = menu_options %]
    
  [% # define some data structures:
        # c.debug('##############'); # to reveal any db calls from templates
    data = request_data;
    patient = request_data.patient_case.patient; # not as_tree - preserve datetime objects;
    sample_codes = specimen_map.item(data.id).sample_code;
  %]

  <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      $('#sample').blur(function() {
        // $('#xna_fields').hide();
        var f = this.value.toLowerCase(); // alert(f);
        if (f.match('[rd]na')) {
          $('#xna_fields').show();
        }
        else {
          $('#xna_fields').hide();
        }
      });
    });
  </script>

    <h2>
        Sample storage on [% patient.last_name | upper %],
        [% format_firstname(patient) || patient.first_name | ucfirst %]
        [ [% PROCESS site/lab_number.tt %] ]
    </h2>

    <h3 class="header">Current stock</h3>
    
    <p class="info indent">Number of vials in store: [% available.size %]</p>
    
    [% IF storage.size %]
        <table class="indent">
            <tr>
                <td class="borderless"></td>
                <th>Specimen</th>
                <th>Vial ID</th>
                <th>Sample</th>
                <th>Source</th>
                <th>Volume</th>
                <th>Conc<sup>n</sup></th>
                <th>
                  <span class="acronym" title="XNA extration method">Method</span>
                </th>
                <th>In</th>
                <th>Out</th>
                <td class="borderless"></td>
            </tr>
        [% FOREACH item IN storage; # PROCESS dumper.tt dump = item.as_tree
            class = item.signed_out ? 'grey' : 'normal';
        %]
            <tr class="[% class %]">
                <td>[% loop.count %]</td>
                <td>[% item.specimen.sample_code %]</td>
                <td>[% item.vialId %]</td>
                <td>[% item.sample %]</td>
                <td>[% item.source || site.html.grey_null %]</td>
                <td>[% IF item.volume; item.volume; '&micro;L';
                        ELSE; site.html.grey_null; END %]</td>
                <td>[% IF item.concentration; item.concentration; 'ng/&micro;L';
                        ELSE; site.html.grey_null; END %]</td>
                <td>[% item.method || site.html.grey_null %]</td>
                <td>[% item.created_at.strftime('%d.%b.%Y') %]</td>
                <td>[% item.signed_out.strftime('%d.%b.%Y') %]</td>
                <td>
                  <a href="[% app_url %]/storage/edit/[% item.vialId %]">[edit]</a>
                </td>
            </tr>
        [% END %]
        </table>
    [% END %]
    
  <h3 class="header">Input new vial
		[% div_name = 'input'; INCLUDE site/snippets/toggleview.tt %]		
	</h3>

  <div class="item[% available.size AND NOT dfv_errors ? 'hidden' : 'show' %]"
      id="[% div_name %]">
    <p class="info indent">Scan multiple vials consecutively (no spaces):</p>
    
    <form action="[% app_url %]/storage/input/[% data.id %]" method="post" id="form">
      <table class="indent">
        <tbody>
          <tr>
            <td class="label" style="width: 120px">Vial ID(s):</td>
            <td>
              <label><input type="text" id="vialId" name="vialId" /></label>
            </td>
            <td class="borderless">
              [% IF error_vialId; error_vialId; ELSIF NOT c.query.param('vialId') %]
                <span id="vialId_result" class="error">
                  &#171; place cursor here to scan barcode
                </span>
              [% END %]
            </td>
          </tr>
  
          <tr>
            <td class="label">Specimen:</td>
            <td>
              [% FOREACH s IN sample_codes; # PROCESS dumper.tt dump = s %]
                <div>
                  <label>
                    <input type="radio" name="specimen" value="[% s %]"
                      [% IF sample_codes.size == 1; 'checked=1'; END %]  />
                      [% s %]
                    </label>
                </div>
              [% END %]
            </td>
            <td class="borderless">[% error_specimen %]</td>
          </tr>
          <tr>
            <td class="label">Sample:</td>         
            <td>
              <label>
                <input type="text" name="sample" placeholder="DNA, RNA, skin, etc"
                    id="sample" />
              </label>
            </td>
            <td class="borderless">[% error_sample %]</td>
          </tr>
          <tr>
            <td class="label">Source:</td>         
            <td>
              <label>
                <select name="source">
                  <option value="">-- select --</option>
                  [% FOREACH entry IN menu_options.source %]
                    <option value="[% entry %]">[% entry %]</option>
                  [% END %]
                </select>
              </label>
            </td>
            <td class="borderless">[% error_source %]</td>
          </tr>
      </tbody>
      [% display = c.query.param('sample').match('[rd]na') ? 'visible' : 'none' %]
      <tbody id="xna_fields" style="display:[% display %]">
        <tr>
          <td class="label">Volume:</td>         
          <td>
            <label>
              <input type="text" name="volume" placeholder="&micro;L" />
            </label>
          </td>
          <td class="borderless">[% error_volume %]</td>
        </tr>
        <tr>
          <td class="label">Concentration:</td>         
          <td>
            <label>
              <input type="text" name="concentration" placeholder="ng/&micro;L" />
            </label>
          </td>
          <td class="borderless">[% error_concentration %]</td>
        </tr>
        <tr>
          <td class="label"><div>Extraction</div><div>method:</div></td>         
          <td>
            <label>
              <select name="method">
                <option value="">-- select --</option>
                [% FOREACH entry IN menu_options.method %]
                  <option value="[% entry %]">[% entry %]</option>
                [% END %]
              </select>                
            </label>
          </td>
          <td class="borderless">[% error_method %]</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
          <td colspan="3" class="borderless">
            <span class="indent">[% site.html.submit %] [% site.html.reset %]</span>
          </td>
        </tr>
       </tfoot>
      </table>
    </form>
  </div>

  [% IF available.size %]    
    <h3 class="header">Output vial</h3>

    [% IF error; # PROCESS dumper.tt dump = error %]
      <p class="error">ERROR: [% error %]</p>
    [% END %]
    
    <form action="[% app_url %]/storage/output/[% data.id %]" method="post">
      <div class="indent"
        <p>
          <span class="info">Available vials to sign out:</span>
          [% available.join(', ') %]
        </p>
        <p>
          <span class="bold">VialId:</span>
          <label><input type="text" name="vialId" /></label>
          [% IF error_vialId; error_vialId; ELSE %]
            <span class="error">&#171; place cursor here to scan barcode</span>
          [% END %]
        </p>
        <p class="indent">
          [% site.html.submit %]
        </p>
    </form>
  [% END %]

    <!-- done() needs jquery >= 1.5: -->
    <script src="/js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        // vialId field focus:
        document.getElementById('form').vialId.focus();
        // vialID validation:
        $('#vialId').blur(function() { // alert("Handler for .blur() called.");
            var formData = { 'id' : $('input[name=vialId]').val() };
            var appMethod = "[% app_url %]/ajax/check_storage_vialId";
            $.get( appMethod, formData ).done( function(result) {
                $( "#vialId_result" ).text(result); // alert(result);
            } );
        });
    </script>
<!-- END [% template.name %] -->