@extends( 'layouts.master' )

@section( 'script' )

@parent

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="{!! asset('js/jquery.timepicker.min.js') !!}"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="{!! asset('js/submissionCommon.js') !!}"></script>

<script type="text/javascript">

$( document ).ajaxStart( function () {
	$("body").addClass("loading");
} ).ajaxStop( function () {
	$("body").removeClass("loading");
} );

$( function() {
	// Date picker for "Date Vaccine Administered:"
	$( ".date" ).datepicker( {
		changeMonth: true,
		changeYear: true,
		yearRange:  "-85:+0",					   
	} );

	var dialog = $( "#adverse-dialog" );
	$( ".adverse-lookup" ).click( function() {
		var adverseTable = $( this ).parent().find( ".adverse-table" );
		$.ajax( {
		    url: "/getAdverseLookUp" ,
		    success: function( data ){
				dialog.dialog( {
					autoOpen: false,
					modal: true,
					title: "Adverse Event Lookup:",
					height: 600,
					width: 450,
					buttons: {
						"Add Adverse Event": function() {	    
							var label = $( "#adverse-label" ).val();
							var iri = $( "#adverse-iri" ).val();
							adverseTable.find( 'tr:last' ).after(
'<tr class="adverse-row">\
	<td>\
		<label class="adverse-label-display">' + label + '</label>\
		<input name="event[adverse][label][]" type="hidden" class="adverse-label" value="' + label + '"/>\
		<input name="event[adverse][iri][]" type="hidden" class="adverse-iri" value="' + iri + '" />\
	</td>\
	<td>\
		<div class="report_item">\
			<label></label>\
			<input type="text" name="event[adverse][comment][]" size="50" />\
		</div>\
	</td>\
	<td>\
		<button onclick="removeAdverse( this )" type="button">Remove</button>\
	</td>\
</tr>'
							);
							dialog.dialog( "close" );
						},
						"Cancel": function() {
			                dialog.dialog( "close" );
						}
					}
				} ).dialog( "open" );
		    	dialog.html( data );
		    }   
		});
	} );
} );

function removeAdverse( element ) {
	element.parentElement.parentElement.remove();
}

</script>

@endsection

@section( 'style' )

@parent

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs
<link rel="stylesheet" type="text/css" href="/css/jquery.timepicker.css" />

<style>
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url( {!! asset('images/ajax-loader.gif') !!} )
                50% 50% 
                no-repeat;
    background-attachment: fixed;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
</style>

@endsection

@section( 'content' )

<table width="850" align="center">

<tr>
	<td>
		<h2>Report Adverse Event Online</h2>
		<h3>Step 3 of 4: Adverse Event & Event Outcomes</h3>
		<label><span class="reqIndicator">*</span> = required field&nbsp;</label>
		
		<form id="form_admin" role="form" method="POST" action="{{ url( '/report' ) }}">
			{!! csrf_field() !!}
			
			<fieldset>
				<legend>Adverse Events</legend>
				
				<fieldset>
					<legend><span class="reqIndicator">*</span>Vaccine Adverse Events</legend>
					
					<input class="adverse-lookup" type="button" value="Adverse Event Look Up" />
					@if ( $errors->has( "event.adverse" ) )
						<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse" ) }}</strong></span>
					@endif
					<table class="adverse-table" width="500" border="0" cellpadding="4" cellspacing="1" bgcolor="#666666">
						
						<tr align="center">
							<td bgcolor="#FFFFFF" width="40%"><label>Adverse Event </label></td>
							<td bgcolor="#FFFFFF" width="60%"><label>Comment </td>
							<td bgcolor="#FFFFFF"></td>
						</tr>
						@if( !empty( old( 'event.adverse' ) ) )
							@foreach( old( 'event.adverse' ) as $adverseIndex => $adverse )
								<tr class="adverse-row">
									<td>
										<label class="adverse-label-display">{{ $adverse['label'] }}</label>
										<input name="{{ "event[adverse][label][]" }}" type="hidden" class="adverse-label" value="{{ $adverse['label'] }}" />
										<input name="{{ "event[adverse][iri][]" }}" type="hidden" class="adverse-iri" value="{{ $adverse['iri'] }}" />
									</td>
									<td>
										@include( 'includes.form.text', [
											'label' => '',
											'size' => '50',
											'name' => "event[adverse][comment][]",
											'oldName' => "event.adverse.$adverseIndex.comment",
											'sessionValue' => null,
										] )
									</td>
									<td>
										@if ( $errors->has( "event.adverse.$adverseIndex.label" ) )
											<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse.$adverseIndex.label" ) }}</strong></span>
										@endif
										
										@if ( $errors->has( "event.adverse.$adverseIndex.iri" ) )
											<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse.$adverseIndex.iri" ) }}</strong></span>
										@endif
										<button onclick="removeAdverse( this )" type="button">Remove</button>
									</td>
								</tr>
							@endforeach
						@elseif( !is_null( $case->event->adverse[0]->iri ) )
							@foreach( $case->event->adverse as $adverseIndex => $adverse )
								<tr class="adverse-row">
									<td>
										<label class="adverse-label-display">{{ !is_null( $adverse->label ) ? $adverse->label : old( "event.adverse.$adverseIndex.label" ) }}</label>
										<input name="{{ "event[adverse][label][]" }}" type="hidden" class="adverse-label" value="{{ !is_null( $adverse->label ) ? $adverse->label : old( "event.adverse.$adverseIndex.label" ) }}" />
										<input name="{{ "event[adverse][iri][]" }}" type="hidden" class="adverse-iri" value="{{ !is_null( $adverse->iri ) ? $adverse->iri : old( "event.adverse.$adverseIndex.iri" ) }}" />
									</td>
									<td>
										@include( 'includes.form.text', [
											'label' => '',
											'size' => '50',
											'name' => "event[adverse][comment][]",
											'oldName' => "event.adverse.$adverseIndex.comment",
											'sessionValue' => $adverse->comment,
										] )
									</td>
									<td>
										@if ( $errors->has( "event.adverse.$adverseIndex.label" ) )
											<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse.$adverseIndex.label" ) }}</strong></span>
										@endif
										
										@if ( $errors->has( "event.adverse.$adverseIndex.iri" ) )
											<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse.$adverseIndex.iri" ) }}</strong></span>
										@endif
										<button onclick="removeAdverse( this )" type="button">Remove</button>
									</td>
								</tr>
								@if ( $errors->has( "event.adverse.$adverseIndex.label" ) )
									<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse.$adverseIndex.label" ) }}</strong></span>
								@endif
								
								@if ( $errors->has( "event.adverse.$adverseIndex.iri" ) )
									<span class="form-error-msg"><strong>{{ $errors->first( "event.adverse.$adverseIndex.iri" ) }}</strong></span>
								@endif
							@endforeach
						@endif
					</table>
				</fieldset>
				
				<fieldset>
					<legend>Check All Appropriate Event Outcomes:</legend>
					@include( 'includes.form.check', [
						'label' => 'Patient Died',
						'name' => "event[death]",
						'oldName' => "event.death",
						'sessionValue' => $case->event->death,
					] )
					<div class="report_item">
						<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date (mm/dd/yyyy):</label>
						<input class="date" name="event[death_date]" type="text" size="10" maxlength="10" value="{{ !is_null( $case->event->death_date ) ? $case->event->death_date : old( "event.death_date" ) }}" title="Death Date"/>
					</div>
					@if ( $errors->has( "event.death_date" ) )
						<span class="form-error-msg"><strong>{{ $errors->first( "event.death_date" ) }}</strong></span>
					@endif
					
					@include( 'includes.form.check', [
						'label' => 'Life Threatening Illness',
						'name' => "event[life_threaten_ill]",
						'oldName' => "event.life_threaten_ill",
						'sessionValue' => $case->event->life_threaten_ill,
					] )
					
					@include( 'includes.form.check', [
						'label' => 'Required Emergency Room/Doctor Visit',
						'name' => "event[emergency_visit]",
						'oldName' => "event.emergency_visit",
						'sessionValue' => $case->event->emergency_visit,
					] )
					
					@include( 'includes.form.check', [
						'label' => 'Required Hospitalization',
						'name' => "event[hospital]",
						'oldName' => "event.hospital",
						'sessionValue' => $case->event->hospital,
					] )
					<div class="report_item">
						<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Days:</label>
						<input name="event[hospital_days]" type="text" size="10" maxlength="10" value="{{ !is_null( $case->event->hospital_days ) ? $case->event->hospital_days : old( "event.hospital_days" ) }}" />
					</div>
					@if ( $errors->has( "event.hospital_days" ) )
						<span class="form-error-msg"><strong>{{ $errors->first( "event.hospital_days" ) }}</strong></span>
					@endif
					
					@include( 'includes.form.check', [
						'label' => 'Resulted in Prolongation of Hospitilization',
						'name' => "event[hospital_prolong]",
						'oldName' => "event.hospital_prolong",
						'sessionValue' => $case->event->hospital_prolong,
					] )
					
					@include( 'includes.form.check', [
						'label' => 'Resulted in Permanent Disability',
						'name' => "event[disability]",
						'oldName' => "event.disability",
						'sessionValue' => $case->event->disability,
					] )
				</fieldset>
				
				<br />
				
				@include( 'includes.form.select', [
					'label' => 'Patient Recovered:',
					'name' => "event[recover]",
					'oldName' => "event.recover",
					'sessionValue' => $case->event->recover,
					'defaultLabel' => '',
					'options' => ['yes' => 'yes', 'no' => 'no', 'unknown' => 'unknown'],
				] )
				
				<br />
				
				<div class="report_item">
					<label>Adverse Event Onset Date (mm/dd/yyyy):</label>
					<input class="date" name="event[onset_date]" type="text" size="10" maxlength="10" value="{{ !is_null( $case->event->onset_date ) ? $case->event->onset_date : old( 'event.onset_date' ) }}" title="Adverse Event Onset Date" />
				</div>
				@if ( $errors->has( 'event.onset_date' ) )
					<span class="form-error-msg"><strong>{{ $errors->first( 'event.onset_date' ) }}</strong></span>
				@endif
				
				<br />
				
				@include( 'includes.form.text', [
					'label' => 'Adverse Event Onset Time (eg. AM, 6:15 PM):',
					'name' => 'event[onset_time]',
					'oldName' => 'event.onset_time',
					'sessionValue' => $case->event->onset_time,
				] )
				
				<br />
				
				@include( 'includes.form.textbox', [
					'label' => 'Relevant Diagnostic Tests & Laboratory Data: ',
					'rows' => '4',
					'cols' => '80',
					'name' => 'event[lab_test]',
					'oldName' => 'event.lab_test',
					'sessionValue' => $case->event->lab_test,
				] )
				
				<br />
				
				@include( 'includes.form.textbox', [
					'label' => 'Other Medications: ',
					'rows' => '4',
					'cols' => '80',
					'name' => "event[other_medication]",
					'oldName' => "event.other_medication",
					'sessionValue' => $case->event->other_medication,
				] )
				
				<br />
				
				<fieldset>
					<legend>Only for Reports Submitted by State Health Coordinator or Immunization Project</legend>
					
					@include( 'includes.form.text', [
						'label' => 'Immunization Project Report Number:',
						'name' => "event[report_number]",
						'oldName' => "event.report_number",
						'sessionValue' => $case->event->report_number,
					] )
					
					<br />
					
					<div class="report_item">
						<label>Date Received by Immunization Project (mm/dd/yyyy):</label>
						<input class="date" name="event[report_date]" type="text" size="10" maxlength="10" value="{{ !is_null( $case->event->report_date ) && !empty( $case->event->report_date ) ? $case->event->report_date : old( 'event.report_date' ) }}" title="Date Received by Immunization Project" />
					</div>
					@if ( $errors->has( "event.report_date" ) )
						<span class="form-error-msg"><strong>{{ $errors->first( "event.report_date" ) }}</strong></span>
					@endif
					
				</fieldset>
				
			</fieldset>
			
			<br />
			
			<input type="hidden" name="step" value="{{ $case->step }}"/>
			
			<button type= "submit" name="action" value="previous">Previous</button>
			
			<button type="reset">Reset</button>
			
			<button type="submit" name="action" value="save">Save</button>
			
			<button type="submit" name="action" value="save_continue">Save and Continue</button>
			
		</form>
	</td>
</tr>

</table>

<div id="adverse-dialog"></div>

<div class="modal"></div>

@endsection