@extends('layouts.healthapp')
@section('content')
<style>
    li{
        font-size:11pt;
    }
</style>
<div class="row">
    <div class="col-sm-12">
        <div id="imaginary_container"> 
            <h3>Health Record Summary</h3>
            <br>
            <div class="row">
                <div class="col-sm-6">
                    <label>Academic Type</label>
                    <select name="academic_type" id="academic_type" class="form form-control" onchange="getDescription(this.value)">
                        <option>Select Academic Type</option>
                        <option>College</option>
                        <option>TESDA</option>
                        <option>Senior High School</option>
                        <option>Junior High School</option>
                    </select>    
                </div>
            </div>
                &nbsp;<br>
            <div class="row">
                <div class="col-sm-4">
                    <label>Category</label>
                    <select name="category" id="category" class="form form-control" onchange="getDescription(this.value)">
                        <option>Select Category</option>
                        <option value="0">Medical History</option>
                        <option value="1">Current Medical Condition</option>
                        <option value="2">Medication</option>
                        <option value="3">Allergy</option>
                    </select>    
                </div>
                <div class="col-sm-4">
                    <label>Description</label>
                    <select name="description" id="description" class="form form-control select2">
                        <option>Select Description</option>
                    </select>    
                </div>
                <div class="col-sm-4">
                    <label>&nbsp;</label>
                    <input type="button" id="submit" value="Generate" class="form form-control btn btn-primary" style="font-weight:bold" onclick="generateReport()">    
                </div>
            </div>
            <br>
            <div class="col-md-12 row" id="displayReport" style="font-size:11pt;">
                <div class="col-sm-12">
                    
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<script type="text/javascript">
    function getDescription(category){
            var array = {};
            array['category'] = category;
                $.ajax({
                    type: 'GET',
                    url: '/health/get/descriptions',
                    data: array,
                    success: function (data) {
                        $('#description').empty();
                        $('#description').html(data);
                    }
                });
        }
    
    function generateReport(){
            var array = {};
            array['academic_type'] = $("#academic_type").val();
            array['category'] = $("#category").val();
            array['description'] = $("#description").val();
                $.ajax({
                    type: 'GET',
                    url: '/health/get/record_summary',
                    data: array,
                    success: function (data) {
                        $('#displayReport').empty();
                        $('#displayReport').html(data);
                    }
                });
        }
</script> 
@stop