[% META
    title  = 'Haematological Malignancy Research Network &raquo; Edit Treatment Data'
%]

<!-- BEGIN hmrn/data/edit_treatment_data.tt  -->
    [% # PROCESS dumper.tt dump = data %]
    [% # PROCESS dumper.tt dump = data.maps.tx_details %]
    [% # INCLUDE dumper.tt dump = data.maps.tx_details %]

	[% addcss =	[
			'validationEngine.jquery.css' # for validationEngine
			'smoothness/jquery-ui-1.8.4.custom.css' # for DatePicker
		]
	%]

	[% # PROCESS site/js/jquery.tt # already loaded in html_wrapper %]
	<script type="text/javascript" src="/js/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.datepicker').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy',
            });
        });
	</script>

    [% IF not_using_validationEngine_jquery # then use 'basic' jquery val %]
    <script type="text/javascript" src="/js/jquery.validate.js"></script>
    <script type="text/javascript">
	    $(document).ready(function() {
	      $("#treatment").validate({
            rules: {
				[% c.jquery_validation_profile("${profile_name}").join(',') %]
            },
          });
        });
    </script>
    <script type="text/javascript">
        // override default message:
        jQuery.extend(jQuery.validator.messages, {
            remote:   "&#171; invalid entry",
            required: "&#171; required field",
        });
    </script>
    [% ELSE; INCLUDE site/js/validationEngine.tt %]
	<script type="text/javascript">
		$(document).ready(function() {
			$("#treatment").validationEngine()
		})
	</script>
    [% END %]

	<script language="javascript" type="text/javascript">
	<!--
		function set_proposed(id, proposed) { $(id).val(proposed) }
	
		function clear_tx_cycles() {
			$('#tx_cycles').val("");
		}
	
		function showhide_tx_cycles(tx_type_val) {
			var tx_type_ids_with_cycles = [ 3, 6 ];    // 3 is chemotherapy, 6 is clinical trial
			match_has_cycles = jQuery.grep(tx_type_ids_with_cycles, function (a) { return a == tx_type_val; }); //alert(match_has_cycles);
			if (match_has_cycles.length) { // ie show if the type has cycles data
				$('#tx_cycles').addClass("validate[optional,custom[onlyDecimal]]");      //adds jquery validation for cycles (can be optional or required)
				$('#tblRowTxCycles').show();                                            //shows table row containing cycles
			}
			else {
				$('#tx_cycles').removeClass("validate[optional,custom[onlyDecimal]]");   //adds jquery validation for cycles (can be optional or required)
				$('#tblRowTxCycles').hide();                                            //hide table row containing cycles
			}			 
			//			$('#tblRowTxCycles').hide();
		}
	
		function showhide_tx_detail(f,v) {
			var t = f.tx_detail_id;
			var tx_type_ids = [ [% data.maps.tx_type_ids.join(',') %] ];
			
			showhide_tx_cycles(v);
			
			// does value of 'v' match any of tx_type_ids array:
			match_type_id = jQuery.grep(tx_type_ids, function (a) { return a == v; }); // alert(match_type_id);

			/* alternative:
			var match_type_id = 0;
			for (i=0; i<tx_type_ids.length; i++) {
				if (tx_type_ids[i] == v) {
					match_type_id = 1;
					break;
				}
			}
			if (match_type_id) { .. }
			*/

			if (match_type_id.length) { // ie contains the value of tx_type_id
				t.style.visibility='visible';
			}
			else {
				t.style.visibility='hidden';
			}			
			
		}

		// use addLoadEvent function in common.js for onload:
		[% visibility = data.maps.tx_details.size ? 'visible' : 'hidden' %]
		addLoadEvent(
			function() {
				document.treatment.tx_detail_id.style.visibility='[% visibility %]';
				showhide_tx_cycles( $('#tx_type_id').val() );
			}
		);

		// tx_type_id onChange event for tx_detail_id select menu
		$(document).ready(function () {
			$('#tx_type_id').change( function() {
				$('#tx_detail').load('[% app_url %]/hmrn_data/treatment_options', {
					tx_type_id: $('#tx_type_id').val()
				})
			})
		});
	-->
	</script>

    <h3>Edit treatment data:</h3>

    [% IF dfv_errors %]
        <p class="error">[% c.cfg('msg').dfv_errors %]</p>
	[% ELSE %]
		<p class="indent warning">Minimum data entry: centre &amp; type</p>
    [% END %]

    <form method="post" name="treatment" id="treatment" [% # hmrn_treatment_onsubmit # using jQuery val %]
        action="[% app_url %]/hmrn_data/do_edit_treatment/[% data.request_id %]/[% data.id %]">

	  <table class="indent">
		<tr>
			<td class="label">Centre:</td>
			<td class="content">
				<select name="location_id" class="validate[required]" id="location_id">
					<option value=""></option>
					[% FOREACH key IN data.maps.location.keys.sort %]
                    <option value="[% data.maps.location.$key %]"
						[% 'selected' IF data.maps.location.$key == data.location_id %]>
                        [% key %]
					</option>
					[% END %]
				</select>
				[% error_location_id %]
			</td>
		</tr>
		<tr>
			<td class="label">Type:</td>
			<td class="content">
				<select name="tx_type_id" id="tx_type_id" class="validate[required]"
						onchange="showhide_tx_detail(this.form,this.value); clear_tx_cycles();" id="tx_type_id">
					<option value=""></option>
					[% FOREACH key IN data.maps.tx_type.keys.sort %]
                    <option value="[% data.maps.tx_type.$key %]"
					[% 'selected' IF data.maps.tx_type.$key == data.tx_type_id %]>
                        [% key %]
					</option>
					[% END %]
				</select>
				[% error_tx_type_id %]
			</td>
		</tr>
		<tr>
			<td class="label">Detail:</td>
			<td class="content">
				<!-- // replaced by ajax output after selection of tx_type_id: -->
				<select name="tx_detail_id" id="tx_detail">
					[% IF data.maps.tx_details.size %]
					<option value=""></option>
					[% FOREACH key IN data.maps.tx_details.keys.sort;
                        tx_id = data.maps.tx_details.$key %]
						<option value="[% tx_id %]"
                                [% 'selected' IF tx_id == data.tx_detail_id %]>
							[% key %]
						</option>
					[% END; END %]
				</select>
				[% error_tx_detail_id %]
			</td>
		</tr>
		<tr>
			<td class="label">Start:</td>
			<td class="content">
				<input type="text" name="start_date" class="validate[ajax[ajaxDate]] datepicker"
					id="start_date" value="[% data.start_date.strftime('%d.%b.%Y') %]" size="10" />
				[% error_start_date %]
			</td>
		</tr>
		<tr>
			<td class="label">End:</td>
			<td class="content">
				<input type="text" name="end_date" class="validate[ajax[ajaxDate]] datepicker"
					id="end_date" value="[% data.end_date.strftime('%d.%b.%Y') %]" size="10" />
				[% error_end_date %]
			</td>
		</tr>
		<tr id="tblRowTxCycles" style="display:none;">
			<td class="label">No. cycles:</td>
			<td class="content">
				<input type="text" name="tx_cycles" id="tx_cycles" size="4" value="[% data.tx_cycles %]"/> <!--class="validate[required,custom[onlyDecimal]]" added in 'show' javascript -->
				<span style="font-size: smaller">&#171;
					( <a href="#" onclick="javascript:set_proposed('#tx_cycles', '8888'); return false">
						<span class="acronym" title="not stated [8888]">NS</span>
					</a> |
					<a href="#" onclick="javascript:set_proposed('#tx_cycles', '9999'); return false">
						<span class="acronym" title="not done [9999]">ND</span>
					</a> )
				</span>
				[% error_tx_cycles %]
			</td>
		</tr>		
		<tr>
			<td class="label">Response:</td>
			<td class="content">
				<select name="response_id">
					<option value=""></option>
					[% FOREACH option IN data.maps.response %]
                    <option value="[% option.value %]"
						[% 'selected' IF option.value == data.response_id %]>
						[% option.key %]
					</option>
					[% END %]
				</select>
				[% error_response %]
			</td>
		</tr>

		<tr class="borderless">
			<td>[% site.html.back_button %]</td>
			<td align="right">
			[% IF c.query.param('delete') %]
				<span class="title">confirm deletion (no undo possible):</span>
				<input type="checkbox" name="confirm_delete" value="1" />
				<input type="hidden" name="delete" value="1" />
				[% site.html.submit %]
			[% ELSE %]
				[% site.html.submit %]
				[% site.html.reset %]
				<a href="[% app_url %]/hmrn_data/edit_treatment/[% c.param('id')
						%]/[% c.param('Id') %]?delete=1">
					<span class="highlight">delete</span>
				</a>
			[% END %]
			</td>
		</tr>
      </table>
    </form>
<!-- END hmrn/data/edit_treatment_data.tt  -->
