@extends('layouts.frontend')

@section('title')
    @lang('frontend.add_report')
@endsection
 
 @section('vendor_css')
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/dropzone/basic.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/dropzone/dropzone.min.css') }}">
 
@endsection
 
@section('custom_css')
	<link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.rtl.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ URL('css/scanner.css') }}">
	
@endsection

@section('content')  
<div class="row mt-5 small_width page_header">
	<div class="col-12 col-md-12 col-lg-12">
		<h2 class="title mr-2">@lang('frontend.add_report')</h2> 
    </div>
</div> 

<div class="row mt-3 small_width ">
	<div class="col-12 col-md-12 col-lg-12">
 		<div class="card pt-2 pb-2 ">  
	        <div class="card-body">   
                <div class="card-block"> 
					<form class="form-horizontal" id='report-frm' method="POST" action="{{ route('frontend-store-report') }}" enctype="multipart/form-data">
                    <div class="row">
                         <div class="col-12 col-md-4 col-lg-4">
                            <fieldset class="form-group form-group{{ $errors->has('patient') ? ' has-error' : '' }}">
                                <label for="patient">@lang('frontend.patient_name')</label>
                                <select name="patient" id='patient' onchange="$('#hid_patient').val(this.value);has_history();" class="select2 form-control " required>
                                    <option value="">@lang('frontend.chose')</option>
                                    @foreach ($patients as $patient)
                                        <option value="{{ $patient->id }}">{{ $patient->name }}</option>
                                    @endforeach
                                </select>
                            </fieldset>
                        </div>

                         <div class="col-12 col-md-4 col-lg-4  "></div>
                         <div class="col-12 col-md-4 col-lg-4  ">
                        	<button type="submit" class="btn btn-outline-primary float-right"  onclick="if(!validation()){return false};">@lang('frontend.add') <i class="fa fa-check-circle "></i></button>  
                        </div>
                    </div> 

                    

                     <div class="row">
                         <div class="col-12 col-md-12 col-lg-12">
                         	<ul class="nav nav-tabs">
							  <li class="nav-item">
							    <a class="nav-link active" id="history" onclick="$('.nav-link').removeClass('active');$(this).addClass('active');$('.nav-div').hide();$('.history').show();return false;" href="#">History</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link " id='follow-up' onclick="$('.nav-link').removeClass('active');$(this).addClass('active');$('.nav-div').hide();$('.follow-up').show();return false;" href="#">Follow up</a>
							  </li> 
							  <li class="nav-item">
							    <a class="nav-link " id='scan' onclick="$('.nav-link').removeClass('active');$(this).addClass('active');$('.nav-div').hide();$('.scanner').show();return false;" href="#">Scan Files</a>
							  </li> 
							  <li class="nav-item">
							    <a class="nav-link " id='follow-up' onclick="$('.nav-link').removeClass('active');$(this).addClass('active');$('.nav-div').hide();$('.upload').show();return false;" href="#">Upload Files</a>
							  </li> 
							</ul> 
                        </div>
                    </div>  

    			<ul class="pl-3 pb-3 report-list border-left border-bottom  border-right pr-3">
    				<div class="history nav-div">
                    <div class="row">
                         <div class="col-12 col-md-4 col-lg-4 mb-2 mt-3">
                         	<li class="float-left ml-2"><label>Was the child admitted to NICU ?</label></li>
                         	<input type="checkbox" name="admitted_nicu" class="ml-1 mt-2">  

	                     	<label class="mt-2">Why admitted?</label>
	                 	 	<input type="text" name="why_admitted" class="form-control" >  

	                     	<label class="mt-2">The child is considered high risk newborn?</label>
	                 	 	<input type="text" name="high_risk" class="form-control" >  
                        </div>

                         <div class="col-12 col-md-4 col-lg-4 mt-3">
                         	<li class="float-left  ml-3"><label>Screening for thyroid functions done?</label></li>
                         	<input type="text" name="thyroid_functions" class="form-control" >  
                        </div>

                         <div class="col-12 col-md-4 col-lg-4 mb-2 mt-3">
                         	<li class="f  ml-3"><label>3-Vaccination taken up to date</label></li>
                         	<div class="form-check form-check-inline">
							  <input class="form-check-input" type="radio" name="vaccination" id="inlineRadio1" value="Compulsory">
							  <label class="form-check-label" for="inlineRadio1">Compulsory</label>
							</div>
							<div class="form-check form-check-inline">
							  <input class="form-check-input" type="radio" name="vaccination" id="inlineRadio2" value="Non-compulsory">
							  <label class="form-check-label" for="inlineRadio2">Non-compulsory</label>
							</div>
                        </div>
                    </div> 
 					
 					<hr class="w-50 mt-3"  >

                    <div class="row ">
                         <div class="col-12 col-md-4 col-lg-4">
                         	<li class=" ml-2"><label>Feeding:</label></li> 
                         		<label>Breast fed how long? </label> 
                         		<input type="text" name="feed_how_long" class="form-control" >    

	                         	<label class="mt-2">Weaning of breast feeding</label>
                         	 	<input type="text" name="weaning_breast_feeding" class="form-control" >   

	                         	<label class="d-block mt-2"> Feeding route:</label>
	                         	<div class="form-check form-check-inline mr-0">
								  <input class="form-check-input" type="radio" name="feeding_route" id="inlineRadio3" value="Oral">
								  <label class="form-check-label" for="inlineRadio3">Oral</label>
								</div>
								<div class="form-check form-check-inline mr-0">
								  <input class="form-check-input" type="radio" name="feeding_route" id="inlineRadio4" value="Nasogastric Tube">
								  <label class="form-check-label" for="inlineRadio4">Nasogastric Tube</label>
								</div>
								<div class="form-check form-check-inline mr-0 ">
								  <input class="form-check-input" type="radio" name="feeding_route" id="inlineRadio5" value="Gastrostomy">
								  <label class="form-check-label" for="inlineRadio5">Gastrostomy</label>
								</div>

	                         	<label class="mt-2 d-block">Feeding problems:</label>
	                         	<textarea class="form-control ml-2" name='feeding_problems'> </textarea> 
                        </div>  
                     	<div class="col-12 col-md-4 col-lg-4 ">
                         	<li class="float-left ml-2"><label>Is the child followed by growth charts?</label></li>  
                         		<input type="checkbox" name="growth_charts" class="ml-1 mt-2">   

	                         	<label class="mt-2">Last WT</label>
                         	 	<input type="text" name="Last_wt" class="form-control" >    


	                         	<label class="mt-2">Last HC</label>
                         	 	<input type="text" name="Last_hc" class="form-control" >   

	                         	<label class="mt-2">Last HT</label>
                         	 	<input type="text" name="Last_ht" class="form-control " >   
                        </div> 

                     	<div class="col-12 col-md-4 col-lg-4 ">
                         	<li class="float-left ml-2"><label>Previous admissions to hospital?</label></li>  
                         		<input type="checkbox" name="admissions_hospital" class="ml-1 mt-2">   

	                         	<label class="mt-2">How many times?</label>
                         	 	<input type="text" name="how_many_admissions" class="form-control " >    


	                         	<label class="mt-2">Age at each admission?</label>
                         	 	<input type="text" name="age_admission" class="form-control " >   

	                         	<label class="mt-2">Reason for admission?</label>
                         	 	<input type="text" name="reason_admission" class="form-control " >   
                        </div> 
                    </div>

 					<hr class="w-50 mt-3"  >

                    <div class="row">
                    	<div class="col-12 col-md-4 col-lg-4 ">
                         	<li class="float-left ml-2"><label>previous Blood Transfusions?</label></li>  
	                     		<input type="checkbox" name="blood_transfusions" class="ml-1 mt-2">   

	                         	<label class="mt-2">How many times?</label>
	                     	 	<input type="text" name="how_many_transfusions" class="form-control" >    


	                         	<label class="mt-2">Age at each transfusion?</label>
	                     	 	<input type="text" name="age_transfusions" class="form-control" >   

	                         	<label class="mt-2">Reason for Transfusion?</label>
                         	 	<input type="text" name="reason_transfusions" class="form-control " >   
                        </div>


                    </div>

 					<hr class="w-50 mt-3"  >


                    <div class="row"> 
                    	<div class="col-12 col-md-6 col-lg-6 ">
                         	<li class=" ml-2"><label>Chronic health problems?</label></li> 
                         	<textarea class="form-control " name="chronic_health_problems"> </textarea>    
                        </div>

                    	<div class="col-12 col-md-6 col-lg-6 ">
                         	<li class=" ml-2"><label>General and local examination?</label></li> 
                         	<textarea class="form-control " name="general_examination"> </textarea>    
                        </div>

                    </div>


 					<hr class="w-50 mt-3"  >


                    <div class="row">

                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Maintainance medications :</label></li> 
                         	<textarea class="form-control " name="maintainance_medications"> </textarea>  
                    	</div>
                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Additional Notes :</label></li> 
                         	<textarea class="form-control " name="history_notes"> </textarea>  
                    	</div>
                    </div> 

 				</div>
 				<div class="follow-up nav-div">  
                    <div class="row">

                        <div class="col-12 col-md-4 col-lg-4  mt-3"> 
                            <li class=" ml-2"><label>Session ID :</label></li> 
                            <select name="session_id" id='session'  class="select2 form-control ">
                                    <option value="">@lang('frontend.chose')</option>
                                    @foreach ($sessions as $session)
                                        <option value="{{ $session->id }}">{{ $session->id }}</option>
                                    @endforeach
                                </select>
                        </div> 
                    </div>

                    <hr class="w-50 mt-3"  >

                    <div class="row"> 
                    	<div class="col-12 col-md-6 col-lg-6  mt-3"> 
                         	<li class=" ml-2"><label>Complaint :</label></li> 
                         	<textarea class="form-control " name="complaint"> </textarea>  
                    	</div>
                    	<div class="col-12 col-md-6 col-lg-6  mt-3"> 
                         	<li class=" ml-2"><label>Relevant history taking :</label></li> 
                         	<textarea class="form-control " name="relevant_history"> </textarea>  
                    	</div>
                    </div>

 					<hr class="w-50 mt-3"  >


                    <div class="row">

                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>D.D. :</label></li> 
                         	<textarea class="form-control" name="dd"> </textarea>  
                    	</div>
                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Feeding :</label></li> 
                         	<textarea class="form-control " name="feeding"> </textarea>  
                    	</div>
                    </div>

 					<hr class="w-50 mt-3"  >

                    <div class="row">

                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Patient Meds :</label></li> 
                         	<textarea class="form-control " name="patientm_eds"> </textarea>  
                    	</div>
                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Provisional Diagnosis:</label></li> 
                         	<textarea class="form-control " name="provisional_diagnosis"> </textarea>  
                    	</div>
                    </div>

 					<hr class="w-50 mt-3"  >

 					 <div class="row">

                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Developmental assessment: </label></li> 
                         	<label class="float-left ">Normal for age?</label>
                         	<input type="checkbox" name="normal_age" class="ml-1 mt-1">  

                         	<label class="d-block mt-2">Gross motor </label>
                     	 	<input type="text" name="gross_motor" class="form-control " > 

                         	<label class="mt-2">Fine motor/vision </label>
                     	 	<input type="text" name="motor_vision" class="form-control " > 

	                        <label class="mt-2">Speech/hearing </label>
                     	 	<input type="text" name="speech_hearing" class="form-control " >  

	                        <label class="mt-2">Social</label>
                     	 	<input type="text" name="social" class="form-control " > 

	                        <label class="mt-2">Cognitive</label>
                     	 	<input type="text" name="cognitive" class="form-control " >  
                    	</div>
                    	<div class="col-12 col-md-6 col-lg-6 "> 
                         	<li class=" ml-2"><label>Recommendations:</label></li> 
                         	<textarea class="form-control ml-2" name="recommendations"> </textarea>

	                        <label class="mt-2">Labs:</label>
                     	 	<input type="text" name="labs" class="form-control " >   

	                        <label class="mt-2">Radiology:</label>
                     	 	<input type="text" name="radiology" class="form-control " >  

	                        <label class="mt-2">Procedures:</label>
                     	 	<input type="text" name="procedures" class="form-control" >

	                        <label class="mt-2">Meds:</label>
                     	 	<input type="text" name="meds" class="form-control " > 

	                        <label class="mt-2">Other consultation/referral:</label>
                     	 	<input type="text" name="other_consultation_referral" class="form-control" >  

	                        <label class="mt-2">Additional notes:</label>
                         	<textarea class="form-control" name="follow_up_notes"> </textarea>
                    	</div>
                    </div>
 				</div>
                <input type="hidden" name="follow_up" id="hid_follow_up">
		                {{ csrf_field() }} 
                    <div class="row nav-div upload">
                        <div class="col-12 col-md-4 col-lg-4  mt-2">
                            <select name="file_type" id='file_type' class="select2 form-control " required> 
                                @foreach ($file_types as $file_type)
                                    <option value="{{ $file_type->id }}">{{ $file_type->name }}</option>
                                @endforeach
                            </select>
                        </div> 
                    </div>
 			</form>

 				<div class="nav-div upload pt-3 ">  
        			<form class="form-horizontal dropzone border border-primary" id='dropzone'  method="POST" action="{{ route('frontend-upload-files') }}" enctype="multipart/form-data">
				    	<input name="file" class="d-none" type="file" multiple /> 
				    	<input type="hidden" name="hid_patient" id="hid_patient" >
		                {{ csrf_field() }} 
		            </form>  
 				</div>
 				<div class="nav-div scanner pt-3 ">  
					<button type="button" class="btn btn-outline-primary" onclick="scan_files()">Scan Files</button>  
					<div class="loading" style="display: none">
						<i class="fa fa-spinner fa-spin"></i>
					</div>
					<ul class="scan-images">
						
					</ul> 
 				</div>
				</ul>
                    <div class="row mt-5">
                    	<div class="col-12 col-md-4 col-lg-4  ">
                        	<button type="button" class="btn btn-outline-primary" onclick="$('#report-frm').submit();">@lang('frontend.add') <i class="fa fa-check-circle "></i></button>  
                        </div>
                    </div> 

                </div>   
			</div>  
	    </div>
    </div>
</div>

@endsection

 @section('page_vendor_js') 
    <script src="{{ URL('/temp_frontend/app-assets/vendors/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js') }} " type="text/javascript"></script>
    <script src="{{ URL('/temp_frontend/app-assets/vendors/js/forms/select/select2.full.min.js') }} " type="text/javascript"></script>
    <script src="{{ URL('/temp_frontend/app-assets/vendors/js/dropzone/dropzone-amd-module.min.js') }} " type="text/javascript"></script>
    <script src="{{ URL('/temp_frontend/app-assets/vendors/js/dropzone/dropzone.min.js') }} " type="text/javascript"></script>
@endsection

@section('page_level_js') 
<script src="{{ URL('/temp_frontend/app-assets/js/scripts/forms/select/form-select2.js') }}" type="text/javascript"></script>  
<script type="text/javascript"> 
    $('.nav-div').hide();
    $('.history').show(); 
    $('.follow-up input[type=text], .follow-up textarea').change(function(){
        $('#hid_follow_up').val(0);
        $('.follow-up input[type=text], .follow-up textarea').each(function(){
           if(this.value.trim() !=''){
                $('#hid_follow_up').val(1);
                return;
           } 
        }); 
    });
	function scan_files()
	{
		$.ajax({
            url: "{{ env('SCAN_PATH') }}",                       
            type: 'GET',
			dataType: 'json',
			beforeSend: function() {
				$(".loading").show();
			},
            success: function(data){
                $(".loading").hide();
				$.each( data, function(i, file){
				
					var li = $("<li />").append($("<img />").attr("src",file));
					$(".scan-images").append(li);
				});
				

            }
        });	
	}
    function has_history() { 
        $.ajax({
            url: "