@extends('layouts.main') 

@push('styles')
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('art_clinic.art_clinic') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}">{{ __('art_clinic.dashboard') }}</a></li>
            <li class="active">{{ __('art_clinic.art_clinic') }}</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        @include('patients::allergies.header')
    </div>
</div>

<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">{{ __('art_clinic.triage_details') }}
                <div class="panel-action"><a href="#" data-perform="panel-collapse"><i class="ti-minus"></i></a> <a href="#" data-perform="panel-dismiss"><i class="ti-close"></i></a></div>
            </div>
            <div class="panel-wrapper collapse in">
                <ul class="nav customtab nav-tabs" role="tablist">
                    <li role="presentation" class="active nav-item"><a href="#home1" class="nav-link" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-home"></i></span><span class="hidden-xs"> {{ __('art_clinic.observations') }}</span></a></li>
                    <li role="presentation" class="nav-item"><a href="#profile1" class="nav-link" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false"><span class="visible-xs"><i class="ti-user"></i></span> <span class="hidden-xs">{{ __('art_clinic.symptoms') }}</span></a></li>
                    <li role="presentation" class="nav-item"><a href="#messages1" class="nav-link" aria-controls="messages" role="tab" data-toggle="tab"><span class="visible-xs"><i class="ti-email"></i></span> <span class="hidden-xs">{{ __('art_clinic.grade') }}</span></a></li>
                </ul>
                <div class="panel-body">
                    <div class="tab-content m-t-0">
                        <div role="tabpanel" class="tab-pane fade active in" id="home1">
                            <div class="clearfix"></div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="profile1">
                            <div class="col-md-6">
                                @if($triage)
                                    {{ get_name($triage->symptoms,'id','name','symptoms') }}
                                @else
                                    <code>{{ __('art_clinic.no_symptoms_records') }}</code>
                                @endif
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="messages1">
                            <div class="col-md-6">
                                @if($triage)
                                    @switch($triage->severe_grade)
                                    @case (1)
                                    <span style="font-weight: bolder; color: green;">{{ __('art_clinic.green') }}</span>
                                    @break
                                    @case (2)
                                    <span style="font-weight: bolder; color: yellow;">{{ __('art_clinic.yellow') }}</span>
                                    @break
                                    @case (3)
                                    <span style="font-weight: bolder; color: green;">{{ __('art_clinic.red') }}</span>
                                    @break
                                    @default
                                    <code>{{ __('art_clinic.triage_grade_not_determined') }}</code>
                                    @endswitch                             
                                @endif
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">{{ __('art_clinic.patient_documents') }}
                <div class="panel-action">
                    <div class="dropdown active men"> 
                        <a class="dropdown-toggle"  data-toggle="dropdown" href="#" aria-expanded="false" role="button"><span class="label label-purple">{{ $documents->count() }}</span> &nbsp; <span class="caret"></span></a>
                        <ul class="dropdown-menu bullet dropdown-menu-right" aria-labelledby="examplePanelDropdown" role="menu">
                            <li role="presentation"><a href="#" role="menuitem" data-perform="panel-collapse"><i class="ti-plus"></i></a></li>
                            <li role="presentation"><a href="#" role="menuitem" data-perform="panel-dismiss"><i class="ti-close"></i></a></li>
                            <li class="divider" role="presentation"></li>
                            <li role="presentation"><a href="{{ route('patient_documents.index') }}" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> {{ __('art_clinic.add') }}</a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel-action">

                </div>
            </div>
            <div class="panel-wrapper collapse in table-responsive">
                <table class="table table-hover table-condensed">
                    <tbody>
                        @foreach($documents as $document)
                        <tr>
                            <td><a href="#">{{ $document->title }}</a></td>
                            <td>{{ Carbon\Carbon::parse($document->date_taken)->format('jS M Y') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        @include('flash::message')
        <div class="white-box"> 
            <b>{{ __('art_clinic.art_clinic') }}</b><br><br>
            <div class="row">
                <div class="col-sm-10"></div><div class="col-sm-2"><b>{{ __('art_clinic.clinician') }} : </b><font style="background: #eaeaf3;"> {{ isset($triage) ? get_name($triage->created_by,'id','last_name','users') : ""}} </font></div>
            </div>
            <hr>
            {{ Form::open(['route' => 'antiretral_viral_therapy.store','data-toggle'=>'validator']) }}

            <input type="hidden" name="patient_id" value="{{ $patient_id }}">
            <input type="hidden" name="episode_id" value="{{ $episode_id }}">

            <div class="row">
                <div class="form-group col-sm-2">
                    {{ Form::label('age','Age') }}
                    @php
                        $age_array = days_months_years($patient->date_of_birth, Carbon\Carbon::now());
                        $age_days = $age_array[0];
                        $age_months = $age_array[1];
                        $age_years = $age_array[2];
                    @endphp
                    <br>
                    <div style="background: #eaeaf3; padding: 5px;">
                        {{ $age_years }} Years {{ $age_months }} Months <br>
                    </div>
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="marital_status">{{ __('art_clinic.marital_status') }}</label>
                    {{ Form::select('marital_status',$marital_statuses,'',['class'=>'form-control compulsory']) }}
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    {{ Form::label('art_clinic_number','ART CLINIC NUMBER') }}
                    {{ Form::text('art_clinic_number','',['class'=>'form-control compulsory']) }}
                </div>

                <div class="col-sm-1"></div>

                <div class="col-sm-2">
                    <label for="date_hiv_confirmed">{{ __('art_clinic.date_confirmed_hiv_positive') }}</label>
                    <div class="input-group">
                        {{ Form::text('date_hiv_confirmed','',['class'=>'form-control compulsory','id'=>'datepicker-autoclose1','required']) }}
                        <span class="input-group-addon"><i class="icon-calender"></i></span>
                    </div>
                </div>                
            </div>
            <div class="row">
                <div class="form-group col-sm-2">
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="test_type">{{ __('art_clinic.test_type') }}</label>
                    <br>
                    {{ Form::radio('test_type', 'AB', false, ['required']) }} Yes &nbsp;&nbsp;
                    {{ Form::radio('test_type', 'PCR', false, ['required']) }} No
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="where">{{ __('art_clinic.where') }}</label>
                    {{ Form::text('where','',['class'=>'form-control']) }}
                </div>

                <div class="form-group col-sm-2">
                </div>

                <div class="col-sm-1"></div>                
            </div>
            <div class="row">
                <div class="form-group col-sm-2">
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="care_entry_point">{{ __('art_clinic.care_entry_point') }}</label>
                    <br>
                    {{ Form::select('care_entry_point',$care_entry_points,'',['class' => 'form-control compulsory']) }}
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="other_care_entry_point">{{ __('art_clinic.other_specify') }}</label>
                    {{ Form::text('other_care_entry_point','',['class'=>'form-control']) }}
                </div>

                <div class="form-group col-sm-2">
                </div>

                <div class="col-sm-1"></div>                
            </div>
            <hr>
            <div class="row">
                <div class="form-group col-sm-2">
                    <label for="treatment_supporter">{{ __('art_clinic.treatment_supporter') }}</label>
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="treatment_support_name">{{ __('art_clinic.support_name') }}</label>
                    {{ Form::text('treatment_supporter_name','',['class'=>'form-control compulsory']) }}
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2">
                    <label for="treatment_supporter_phone">{{ __('art_clinic.supporter_telephone') }}</label>
                    {{ Form::text('treatment_supporter_phone','',['class'=>'form-control compulsory']) }}
                </div>

                <div class="col-sm-1"></div>

                <div class="col-sm-2" id="div_district">
                    <label for="district">{{ __('art_clinic.district') }}</label>
                    {{ Form::select('district',$districts,'',['class'=>'form-control compulsory district','id'=>'district_id']) }}
                    <a href="#modal_district" data-toggle="modal" id="modal_district_link"><font size="1">{{ __('art_clinic.add_new_district') }}</font></a>
                </div>                
            </div>
            <div class="row">
                <div class="form-group col-sm-2" id="div_county" style="display: none;">
                    <label for='county_id'>{{ __('art_clinic.county') }}</label>
                    <select class='form-control county' name='county_id' id='county_id' data-error=''>
                        <option>{{ __('art_clinic.select') }}</option>
                    </select>
                    <a href="#modal_county" data-toggle="modal" id="modal_county_link"><font size="1">{{ __('art_clinic.add_new_county') }}</font></a>
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2" id="div_subcounty" style="display: none;">
                    <label for='subcounty_id'>{{ __('art_clinic.sub_county') }}</label>
                    <select class='form-control subcounty' name='subcounty_id' id='subcounty_id' data-error=''>
                        <option>{{ __('art_clinic.select') }}</option>
                    </select>
                    <a href="#modal_subcounty" data-toggle="modal" id="modal_subcounty_link"><font size="1">{{ __('art_clinic.add_new_sub_county') }}</font></a>
                </div>

                <div class="col-sm-1"></div>

                <div class="form-group col-sm-2" id="div_parish" style="display: none;">
                    <label for='parish'>{{ __('art_clinic.parish') }}</label>
                    <select class='form-control parish' name='parish' id='parish' data-error=''>
                        <option>{{ __('art_clinic.select') }}</option>
                    </select>
                    <a href="#modal_parish" data-toggle="modal" id="modal_parish_link"><font size="1">{{ __('art_clinic.add_new_parish') }}</font></a>
                </div>

                <div class="col-sm-1"></div>

                <div class="col-sm-2" id="div_village" style="display: none;">
                    <label for='village'>{{ __('art_clinic.village') }}</label>
                    <select class='form-control village' name='village' id="village" data-error=''>
                        <option>{{ __('art_clinic.select') }}</option>
                    </select>
                    <a href="#modal_village" data-toggle="modal" id="modal_village_link"><font size="1">{{ __('art_clinic.add_new_village') }}</font></a>
                </div>                
            </div>
            <hr>
            <div class="row">
                <div class="form-group col-sm-3">
                    <label for="home_based_care_provided_by">{{ __('art_clinic.home_based_care_provided_by') }}</label>
                </div>

                <div class="form-group col-sm-3">
                    {{ Form::label('','') }}
                    {{ Form::text('home_based_care_provided_by','',['class'=>'form-control compulsory']) }}
                </div>

                <div class="form-group col-sm-2">
                </div>

                <div class="col-sm-3" style="padding: 5px;">
                    {{ Form::button('Complete registration',['type'=>'submit','class'=>'btn btn-success btn-lg col-sm-12','id'=>'submit_art_registration','value'=>'complete']) }}
                </div>                
            </div>
        </div>
    </div>
</div>
{{ Form::close() }} 

<!-- add residence modals -->
<!-- new district modal -->
<div class="modal fade" id="modal_district" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel1">{{ __('art_clinic.register_a_new_district') }}</h4>
            </div>
            <div class="modal-body">
                <div class="controls">
                    <input class="form-control" id="new_district_name" name="new_district_name" type="text" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('art_clinic.cancel') }}</button>
                <input type="button" class="btn btn-success" id="submit_new_district" value="Save " />
            </div>
        </div>
    </div>
</div>

<!-- new county modal -->
<div class="modal fade" id="modal_county" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel1">{{ __('art_clinic.register_a_new_county') }}</h4>
            </div>
            <div class="modal-body">
                <div class="controls">
                    <input class="form-control" id="new_county_name" name="new_county_name" type="text" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('art_clinic.cancel') }}</button>
                <input type="button" class="btn btn-success" id="submit_new_county" value="Save " />
            </div>
        </div>
    </div>
</div>

<!-- new subcounty modal -->
<div class="modal fade" id="modal_subcounty" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel1">{{ __('art_clinic.register_a_new_sub_county') }}</h4>
            </div>
            <div class="modal-body">
                <div class="controls">
                    <input class="form-control" id="new_subcounty_name" name="new_subcounty_name" type="text" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('art_clinic.cancel') }}</button>
                <input type="button" class="btn btn-success" id="submit_new_subcounty" value="Save " />
            </div>
        </div>
    </div>
</div>

<!-- new parish modal -->
<div class="modal fade" id="modal_parish" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel1">{{ __('art_clinic.register_a_new_parish') }}</h4>
            </div>
            <div class="modal-body">
                <div class="controls">
                    <input class="form-control" id="new_parish_name" name="new_parish_name" type="text" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('art_clinic.cancel') }}</button>
                <input type="button" class="btn btn-success" id="submit_new_parish" value="Save " />
            </div>
        </div>
    </div>
</div>

<!-- new village modal -->
<div class="modal fade" id="modal_village" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel1">{{ __('art_clinic.register_a_new_village') }}</h4>
            </div>
            <div class="modal-body">
                <div class="controls">
                    <input class="form-control" id="new_village_name" name="new_village_name" type="text" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('art_clinic.cancel') }}</button>
                <input type="button" class="btn btn-success" id="submit_new_village" value="Save " />
            </div>
        </div>
    </div>
</div>

@endsection 

@push('scripts')
<script src="{{ asset('js/streamline_plugins/jquery.session.js') }}"></script>
<script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript">
    $('#datepicker-autoclose1,#datepicker-autoclose2,#datepicker-autoclose3,#datepicker-autoclose4,#datepicker-autoclose5,#datepicker-autoclose6').datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'dd/mm/yyyy',
    });

    $("#submit_art_registration").click(function (e) { // make sure that all compulsory fields have been filled out
        var empty_compulsory_fields = [];
        $(".compulsory").each(function () {
            if ($(this).val() == "") {
                var textname = $(this).attr('name');
                $(this).focus();
                empty_compulsory_fields.push(textname);
                $(this).css('border','1px solid #F08080');
            }
        });
        /* check if the array containing empty compulsory fields is not empty then return false */
        if (empty_compulsory_fields.length != 0) {
            alert("Please fill in all compulsory fields");
            console.log(empty_compulsory_fields);
            e.preventDefault();
            return false;
        }
    });

    $("#submit_new_occupation").click(function () {
        var new_occupation_name = $("#new_occupation_name").val();
        if (new_occupation_name == '') {
            alert("Please fill out a name");
        } else {
            $.ajax({
                type: "POST",
                url: "/add_new_occupation_dynamically",
                data: {name: new_occupation_name},
                cache: false,
                success: function (response) {
                    if(response == 'false'){
                        alert("Error occured. New occupation has not been added");
                    } else {
                        $('.occupation').append($('<option>', {
                            value: response,
                            text: new_occupation_name
                        }));
                        $('.occupation').val(response);//preselect the newly added referral
                        //$('#modal_occupation').hide();
                        $('#modal_occupation').modal('hide');
                    }
                }
            });
        }
        $("#new_occupation_name").val('');
        $("#modal_occupation #close").click();
    });

    $("#submit_new_district").click(function () {
        var new_district_name = $("#new_district_name").val();
        if (new_district_name == '') {
            alert("Please fill out a name");
        } else {
            $.ajax({
                type: "POST",
                url: "/add_new_district_dynamically",
                data: {name: new_district_name},
                cache: false,
                success: function (response) {
                    if(response == 'false'){
                        alert("District already Exists");
                    } else {
                        $('.district').append($('<option>', {
                            value: response,
                            text: new_district_name
                        }));
                        $('.district').val(response);//preselect the newly added referral
                        //$('#modal_occupation').hide();
                        $('#modal_district').modal('hide');
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        $("#new_district_name").val('');
        $("#modal_district #close").click();
    });

    $("#submit_new_county").click(function () {
        var new_county_name = $("#new_county_name").val();
        if (new_county_name == '') {
            alert("Please fill out a name");
        } else {
            $.ajax({
                type: "POST",
                url: "/add_new_county_dynamically",
                data: {name: new_county_name},
                cache: false,
                success: function (response) {
                    if(response == 'false'){
                        alert("County already Exists");
                    } else {
                        $('.county').append($('<option>', {
                            value: response,
                            text: new_county_name
                        }));
                        $('.county').val(response);//preselect the newly added referral
                        //$('#modal_occupation').hide();
                        $('#modal_county').modal('hide');
                    }
                }
            });
        }
        $("#new_county_name").val('');
        $("#modal_county #close").click();
    });

    $("#submit_new_subcounty").click(function () {
        var new_subcounty_name = $("#new_subcounty_name").val();
        if (new_subcounty_name == '') {
            alert("Please fill out a name");
        } else {
            $.ajax({
                type: "POST",
                url: "/add_new_subcounty_dynamically",
                data: {name: new_subcounty_name},
                cache: false,
                success: function (response) {
                    if(response == 'false'){
                        alert("Sub-County already Exists");
                    } else {
                        $('.subcounty').append($('<option>', {
                            value: response,
                            text: new_subcounty_name
                        }));
                        $('.subcounty').val(response);//preselect the newly added referral
                        //$('#modal_occupation').hide();
                        $('#modal_subcounty').modal('hide');
                    }
                }
            });
        }
        $("#new_subcounty_name").val('');
        $("#modal_subcounty #close").click();
    });

    $("#submit_new_parish").click(function () {
        var new_parish_name = $("#new_parish_name").val();
        if (new_parish_name == '') {
            alert("Please fill out a name");
        } else {
            $.ajax({
                type: "POST",
                url: "/add_new_parish_dynamically",
                data: {name: new_parish_name},
                cache: false,
                success: function (response) {
                    if(response == 'false'){
                        alert("Parish already Exists");
                    } else {
                        $('.parish').append($('<option>', {
                            value: response,
                            text: new_parish_name
                        }));
                        $('.parish').val(response);//preselect the newly added referral
                        //$('#modal_occupation').hide();
                        $('#modal_parish').modal('hide');
                    }
                }
            });
        }
        $("#new_parish_name").val('');
        $("#modal_parish #close").click();
    });

    $("#submit_new_village").click(function () {
        var new_village_name = $("#new_village_name").val();
        if (new_village_name == '') {
            alert("Please fill out a name");
        } else {
            $.ajax({
                type: "POST",
                url: "/add_new_village_dynamically",
                data: {name: new_village_name},
                cache: false,
                success: function (response) {
                    if(response == 'false'){
                        alert("Village already Exists");
                    } else {
                        $('.village').append($('<option>', {
                            value: response,
                            text: new_village_name
                        }));
                        $('.village').val(response);//preselect the newly added referral
                        //$('#modal_occupation').hide();
                        $('#modal_village').modal('hide');
                    }
                }
            });
        }
        $("#new_village_name").val('');
        $("#modal_village #close").click();
    });

    $('#div_district').on('change', function () {
        $('#div_county').show();
        //get selected value
        var id = $('#district_id').val();
        //add dropdown to immediate dependant dropdown
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else
        {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                //set counties dropdown options for selected district
                console.log("selected district_id = " + id);
                document.getElementById("county_id").innerHTML = xmlhttp.responseText;
                /*document.getElementById("subcounty_id").innerHTML = xmlhttp.responseText;
                document.getElementById("parish").innerHTML = xmlhttp.responseText;
                document.getElementById("village").innerHTML = xmlhttp.responseText;*/
            }
        }
        xmlhttp.open("GET", "/patients/get_counties/" + id, false);
        xmlhttp.send();
    });

    $('#div_county').on('change', function () {
        var id = $('#district_id').val();
        var id = $('#county_id').val();
        $('#div_subcounty').show();

        //add dropdown to immediate dependant dropdown
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else
        {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("subcounty_id").innerHTML = xmlhttp.responseText;
                document.getElementById("parish").innerHTML = xmlhttp.responseText;
                document.getElementById("village").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "/patients/get_subcounties/" + id, false);
        xmlhttp.send();
    });

    $('#div_subcounty').on('change', function () {
        //remove content from all dependant dropdowns
        //get selected value
        var id = $('#subcounty_id').val();
        var district_id = $('#district_id').val();
        $('#div_parish').show();

        //add dropdown to immediate dependant dropdown
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else
        {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("parish").innerHTML = xmlhttp.responseText;
                document.getElementById("village").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "/patients/get_parishes/" + id, false);
        xmlhttp.send();
    });

    $('#div_parish').on('change', function () {
        //remove content from all dependant dropdowns
        //get selected value
        var id = $('#parish').val();
        $('#div_village').show();

        //add dropdown to immediate dependant dropdown
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else
        {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("village").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "/patients/get_villages/" + id, false);
        xmlhttp.send();
    });

    $('#district_id').on('click', function () {
        var district_id = $('#district_id').val();
        $.ajax({
            type: 'GET',
            url: '/patient_residence/'+district_id,
            cache: false,
            success: function (response) {
                /* auto fill the subcounties based on the district that is selected */
                var subcounties = response.subcounties;
                for(var id in subcounties){               
                    var subcounty_select = document.getElementById("subcounty_id");
                    var subcounty_option = document.createElement("option");
                    subcounty_option.value = id;
                    subcounty_option.text = subcounties[id];
                    subcounty_select.appendChild(subcounty_option); 
                }
                /* auto fill the parishes based on the selected district */
                var parishes = response.parishes;
                for(var id in parishes){               
                    var parish_select = document.getElementById("parish");
                    var parish_option = document.createElement("option");
                    parish_option.value = id;
                    parish_option.text = parishes[id];
                    parish_select.appendChild(parish_option); 
                }
                /* auto fill the villages based on the selected district */
                var villages = response.villages;
                for(var id in villages){               
                    var village_select = document.getElementById("village");
                    var village_option = document.createElement("option");
                    village_option.value = id;
                    village_option.text = villages[id];
                    village_select.appendChild(village_option); 
                }
            }
        });    
    });
</script>
@endpush