@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet"/>
@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">{{ __('patients.new_patient') }}</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">{{ __('patients.dashboard') }}</a></li>
                <li><a href="{{ route('patients.index') }}">{{ __('patients.patients') }}</a></li>
                <li class="active">{{ __('patients.register') }}</li>
            </ol>
        </div>
    </div>

    <div class="white-box" id="white-box">

        @include('flash::message')

        {{ Form::open(['route' => 'patients.store','data-toggle'=>'validator']) }}

        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    {{ Form::label('first_name',__('patients.first_name')) }}
                    {{ Form::text('first_name','',['class' => 'form-control compulsory', 'required', 'placeholder'=>'Christian name eg Fred', 'id' => 'first_name']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('last_name',__('patients.last_name')) }}
                    {{ Form::text('last_name','',['class' => 'form-control compulsory', 'required','placeholder'=>'Surname eg Asiimwe', 'id' => 'last_name']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <label class="alert alert-danger" id="similar_patients_names" style="display: none"></label>

                <div class="form-group">
                    {{ Form::label('gender',__('patients.gender')) }}
                    <br>
                    {{ Form::radio('gender', 1, false, ["required"]) }} {{ __('patients.male') }} &nbsp;&nbsp;
                    {{ Form::radio('gender', 2, false, ["required"]) }} {{ __('patients.female') }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('national_id',__('patients.national_id')) }}
                    {{ Form::text('national_id','',['class' => 'form-control','maxlength'=>15]) }}
                </div>

                <div class="form-group">
                    {{ Form::label('date_of_birth',__('patients.date_of_birth')) }}
                    <div class="input-group">
                        {{ Form::text('date_of_birth','',['class' => 'form-control compulsory','readonly','id'=>'date_of_birth', 'required']) }}
                        <span class="input-group-addon"><i class="icon-calender"></i></span>
                    </div>
                    <div class="help-block with-errors"></div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            {{ Form::label('age',__('patients.years')) }}
                            {{ Form::number('age_in_years','0',['class' => 'form-control compulsory','id'=>'age_in_years','min'=>'0','max'=>'120', 'required']) }}
                        </div>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            {{ Form::label('age',__('patients.months')) }}
                            {{ Form::number('age_in_months','0',['class' => 'form-control','id'=>'age_in_months','min'=>'0','max'=>'12']) }}
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    {{ Form::label('marital_status',__('patients.marital_status')) }}
                    <br>
                    @foreach($marital_statuses as $key=>$value)
                        {{ Form::radio('marital_status', $key,false,[]) }} {{ $value }} &nbsp;&nbsp;
                    @endforeach
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('religion',__('patients.religion')) }}
                    {{ Form::select('religion',$religions,'',['class' => 'form-control x']) }}
                    <div class="help-block with-errors"></div>
                </div>
            </div>

            <div class="col-md-4">

                <div class="form-group">
                    {{ Form::label('occupation',__('patients.occupation')) }}
                    {{ Form::select('occupation',$occupations,'',['class' => 'form-control occupation', 'id' => 'occupation']) }}
                    <a href="#modal_occupation" data-toggle="modal" id="modal_occupation_link"><font size="1">Add new occupation </font></a>
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('next_of_kin',__('patients.next_of_kin')) }}
                    {{ Form::text('next_of_kin','',['class' => 'form-control compulsory', 'required']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group" id="kin_div">
                    <div class="row">
                        <div class="col-sm-6">
                            {{ Form::label('next_of_kin_relationship',__('patients.next_of_kin_relationship')) }}
                            {{ Form::select('next_of_kin_relationship',$relationships,'',['class' => 'form-control compulsory', 'required']) }}
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="col-sm-6">
                            {{ Form::label('next_of_kin_phone',__('patients.next_of_kin_phone')) }}
                            {{ Form::text('next_of_kin_phone','',['class' => 'form-control compulsory', 'required','pattern' => '\d{10}', 'title'=>'Phone number must be exactly 10 digits']) }}
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    {{ Form::label('phone',__('patients.phone')) }}
                    {{ Form::text('phone','',['class' => 'form-control compulsory','id' => 'phone', 'required','pattern' => '\d{10}', 'title'=>'Phone number must be exactly 10 digits' ]) }}
                    <div class="help-block with-errors"></div>
                </div>

                <label class="alert alert-danger" id="similar_phone_number" style="display: none"></label>

                <div class="form-group">
                    {{ Form::label('alternative_phone', 'Alternative Phone Number') }}
                    {{ Form::text('alternative_phone','',['class' => 'form-control','id' => 'alternative_phone','pattern' => '\d{10}', 'title'=>'Phone number must be exactly 10 digits']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('phone_owner',__('patients.phone_owner')) }}
                    <br>
                    {{ Form::radio('phone_owner','self',false,['id'=>'owned']) }} {{ __('patients.self') }} &nbsp;&nbsp;
                    {{ Form::radio('phone_owner','other',false,['id'=>'non_owned']) }} {{ __('patients.other') }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group owner_name" style="display: none;">
                    {{ Form::label("owner_name",__('patients.phone_owner_name')) }}
                    {{ Form::text('owner_name','',['id'=>'owner_name','class' => 'form-control']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('patient_category',__('patients.patient_category'))}}
                    {{ Form::select('patient_category',$patient_categories,'1',['class' => 'form-control compulsory', 'required', 'data-error'=>'']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('company',__('patients.company_slash_employer'))}}
                    {{ Form::select('company', $companies ,'',['class' => 'form-control', 'data-error'=>'', 'id' => 'company']) }}
                    <div class="help-block with-errors"></div>
                    <a href="#modal_company" data-toggle="modal" id="modal_company_link"><font size="1">{{ __('patients.add_new_company') }} </font></a>
                </div>
            </div>

            <div class="col-sm-4">

                <div class="form-group">
                    {{ Form::label('language',__('patients.preferred_language')) }}
                    {{ Form::select('language',['vern'=>'Vernacular','eng'=>'English',],'eng',['class' => 'form-control compulsory', 'required', 'data-error'=>'Select the language']) }}
                    <div class="help-block with-errors"></div>
                </div>
                <div class="form-group">
                    {{ Form::label('citizenship',__('patients.citizenship')) }}
                    {{ Form::select('citizenship',['1'=>'Ugandan','0'=>'Non Ugandan'],'',['class' => 'form-control compulsory', 'required', 'data-error'=>'Select the language','id' => 'citizenship']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div id="not_ugandan_regions" style="display: none;">
                    <div class="form-group">
                        {{ Form::label('country_id',__('patients.country_of_origin')) }}
                        {{ Form::select('country_id', $countries, '',['class' => 'form-control', 'data-error'=>'Select the country','id' => 'country_picker']) }}
                        <div class="help-block with-errors"></div>
                        {{-- <a href="#modal_residence" data-toggle="modal" id="modal_residence_link"><font size="1">{{ __('patients.add_new_residence') }} </font></a> --}}
                        <a href="#modal_add_country_foreigner" data-toggle="modal" id="modal_add_country_foreigner_id"><font size="1">Add new country </font></a>

                    </div>

                    <div class="form-group">
                        <label for="non_ugandan_foreigner_or_refugee">{{ __('patients.foreigner_or_refugee') }}</label>
                         <select id="foreginer_refugee" name="non_ugandan_foreigner_or_refugee" class="form-control ">
                            <option value="null"> -- {{ __('patients.select') }} --</option>
                            <option value="1"> {{ __('patients.foreigner') }} </option>
                            <option value="2"> {{ __('patients.refugee') }} </option>

                         </select>
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-group">
                        <label for="non_ugandan_national_id">{{ __('patients.national_id') }}</label>
                         <input type="text" name="non_ugandan_national_id_no" value="" class="form-control">
                        <div class="help-block with-errors"></div>
                    </div>

                </div>



                <div id="ugandan_regions">
                    <div class="form-group">
                        {{ Form::label('residence','Residence') }}
                        <select class="form-control col-md-12" name="residence" id="residence" style="display: block; width: 100%" required></select>
                        <div class="help-block with-errors"></div>
                        <a href="#modal_residence" data-toggle="modal" id="modal_residence_link"><font size="1">{{ __('patients.add_new_residence') }} </font></a>
                    </div>
                </div>

                @if (!empty($patient_registration_fields))
                    @foreach ($patient_registration_fields as $patient_registration_field)
                        <input type="hidden" name="registration_field_names[]" id="reg_field_{{$patient_registration_field->id}}" value="reg_field_{{$patient_registration_field->id}}"/>
                        @if (!empty($patient_registration_field->options))
                            <div class="form-group">
                                {{ Form::label($patient_registration_field->name, $patient_registration_field->name) }}
                                <select name="registration_field_values[]" id="{{$patient_registration_field->name}}" class="col-sm-12 {{ ($patient_registration_field->compulsory == 1)? 'compulsory':'' }} form-control" {{ ($patient_registration_field->compulsory == 1)? 'required':'' }}>
                                    <option value="">--select--</option>
                                    @php
                                        $options = explode(',',$patient_registration_field->options);
                                        for ($i=0; $i < count($options) ; $i++) { 
                                            echo '<option value="'.$options[$i].'">'.$options[$i].'</option>';
                                        }
                                    @endphp
                                </select>
                            </div>
                        @else
                            <div class="form-group">
                                {{ Form::label($patient_registration_field->name, $patient_registration_field->name) }}
                                <input type="text" name="registration_field_values[]" class="col-sm-12 {{ ($patient_registration_field->compulsory == 1)? 'compulsory':'' }} form-control" {{ ($patient_registration_field->compulsory == 1)? 'required':'' }}>
                            </div>
                        @endif                        
                    @endforeach
                @endif

                @if(is_fingerprint_enabled())
                    <div>
                        {{ Form::label('fingerprint_template',__('patients.patient_fingerprint')) }}

                        <div class="fingerprint_box text-center">
                            <img id="fingerprint_image" height="240" width="220">
                        </div>

                        {{ Form::hidden('fingerprint_template', '', ['id' => 'fingerprint_template']) }}

                        <button type="button" onClick='capture_fingerprint()' class="btn btn-sm btn-primary">{{ __('patients.capture_fingerprint') }}</button>

                        <p id="scanner_msg"></p>
                    </div>
                @endif

               
               

            </div>
            <div class="col-md-8">
                <hr>
            </div>
            <div class="col-md-4">
                {{ Form::button(__('patients.submit'),['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10', 'id' => 'patients_submit']) }}
                {{ Form::button(__('patients.cancel'),['type'=>'reset','class'=>'btn btn-default waves-effect waves-light']) }}
            </div>
        </div>
        {{ Form::close() }}
    </div>
@endsection

<div class="modal fade" id="modal_occupation" 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">{{ __('patients.register_occupation') }}</h4>
            </div>
            <div class="modal-body">
                <div class="controls">
                    <input id="new_occupation_name" name="new_occupation_name"
                           type="text"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('patients.cancel') }}</button>
                <input type="button" class="btn btn-success" id="submit_new_occupation" value="<?php echo __('patients.save') ?>"/>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_company" 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">{{ __('patients.register_company') }}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    {{ Form::label('company_name', __('patients.company_name')) }}
                    {{ Form::text('company_name', '', ['class' => 'form-control compulsory', 'id' => 'company_name']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('company_contact', __('patients.contact')) }}
                    {{ Form::text('company_contact', '', ['class' => 'form-control compulsory', 'id' => 'company_contact']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('company_identifier', __('patients.identifier')) }}
                    {{ Form::text('company_identifier', '', ['class' => 'form-control', 'id' => 'company_identifier']) }}
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('patients.cancel') }}</button>
                <a class="btn btn-success" onclick="submitCompany()">{{ __('patients.save') }}</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_residence" 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">{{ __('patients.add_new_residence') }}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>{{ __('patients.district') }}</label>
                    <div id="district_id_div">{{ Form::select('district_id', $districts, '', ['id'=>'district_id','class'=>'form-control compulsory']) }}</div>
                    {{ Form::text('new_district_name', '', ['id' => 'new_district_name', 'class' => 'form-control compulsory', 'style' => 'display: none']) }}
                    <a href="#" id="modal_district_link">{{ __('patients.add_new_district') }}</a>
                </div>

                <div class="form-group">
                    <label>{{ __('patients.county') }}</label>
                    <div id="county_id_div"><select class='form-control' name='county_id' id='county_id'></select></div>
                    {{ Form::text('new_county_name', '', ['id' => 'new_county_name', 'class' => 'form-control', 'style' => 'display: none']) }}
                    <a href="#" id="modal_county_link">{{ __('patients.add_new_county') }}</a>
                </div>

                <div class="form-group">
                    <label>{{ __('patients.sub_county') }}</label>
                    <div id="subcounty_id_div"><select class='form-control' name='subcounty_id' id='subcounty_id'></select></div>
                    {{ Form::text('new_subcounty_name', '', ['id' => 'new_subcounty_name', 'class' => 'form-control', 'style' => 'display: none']) }}
                    <a href="#" id="modal_subcounty_link">{{ __('patients.add_new_subcounty') }}</a>
                </div>

                <div class="form-group">
                    <label>{{ __('patients.parish') }}</label>
                    <div id="parish_id_div"><select class='form-control' name='parish_id' id='parish_id'></select></div>
                    {{ Form::text('new_parish_name', '', ['id' => 'new_parish_name', 'class' => 'form-control', 'style' => 'display: none']) }}
                    <a href="#" id="modal_parish_link">{{ __('patients.add_new_parish') }}</a>
                </div>

                <div class="form-group">
                    <label>{{ __('patients.village') }}</label>
                    {{ Form::text('new_village_name', '', ['id' => 'new_village_name', 'class' => 'form-control compulsory']) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('patients.cancel') }}</button>
                <a class="btn btn-success" onclick="submitResidenceVillage()">{{ __('patients.save') }}</a>
            </div>
        </div>
    </div>
</div>
<!-- end of residence modals -->

{{-- start of add other foreigner country modal --}}
<div class="modal fade" id="modal_add_country_foreigner" 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">Add New Country</h4>
            </div>
            <div class="modal-body">
                
                <div class="form-group">
                    <label>Country Name</label>
                     <input type="text" name="new_country_name" id="new_country_name" value="" class="form-control compulsory">
                    <div class="help-block with-errors"></div>
                </div>

                {{-- @error('name')
                <span class="text-danger">{{ $message }}</span>
                @enderror --}}

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('patients.cancel') }}</button>
                <a class="btn btn-success" onclick="submitCountry()">{{ __('patients.save') }}</a>
            </div>
        </div>
    </div>
</div>


<div class="modal" id="modal_similar_patients" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-center"><b>{{ __('patients.similar_patients') }}</b></h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive" id="modal_table"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('patients.close') }}</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <!-- pull in select2 for auto searchanble drop downs -->
    <script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>
    {{-- <script src="{{ asset('elite/js/validator.js') }}"></script> --}}
    <script src="{{ asset('js/patients/create.js') }}"></script>
    <script src="{{ asset('elite/js/mask.js') }}"></script>
    <script type="text/javascript">
        function capture_fingerprint() {
            $.ajax({
                url: '/patients/fetch_fingerprint_from_scanner/',
                success: function(response){
                    let responseArray = JSON.parse(response);

                    if (responseArray["error_code"] == "0") {
                        let template = responseArray["template"];
                        let pngImage = "data:image/png;base64," + responseArray["image"];

                        $("#fingerprint_image").attr('src', pngImage);
                        $('#fingerprint_template').val(template);

                        $('#scanner_msg').text("Fingerprint Captured").css('color', 'green');
                    } else {
                        $('#scanner_msg').text("Error Code: " + responseArray["error_code"] + " - Error Message: " + responseArray["error_message"]).css('color', 'red');
                    }
                }
            });
        }

        function submitResidenceVillage() {
            let district_id = $("#district_id").val();
            let county_id = $("#county_id").val();
            let subcounty_id = $("#subcounty_id").val();
            let parish_id = $("#parish_id").val();
            let new_district_name = $("#new_district_name").val();
            let new_county_name = $("#new_county_name").val();
            let new_subcounty_name = $("#new_subcounty_name").val();
            let new_parish_name = $("#new_parish_name").val();
            let new_village_name = $("#new_village_name").val();

            if ((district_id === "" && new_district_name === "") || new_village_name === "") {
                alert("Please make sure that you fill in a village name and a district");
                return false;
            }

            $.ajax({
                method: 'POST',
                url: '/patients/quick_add_residence',
                data: {
                    'district_id' : district_id, 'county_id' : county_id, 'subcounty_id' : subcounty_id, 'parish_id' : parish_id, 'new_district_name' : new_district_name,
                    'new_county_name' : new_county_name, 'new_subcounty_name' : new_subcounty_name, 'new_parish_name' : new_parish_name, 'new_village_name' : new_village_name
                },
                success: function(response){
                    $('#residence').append($('<option>', {
                        value: response,
                        text: new_village_name
                    })).val(response);
                    $('#modal_residence').modal('hide');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(JSON.stringify(jqXHR));
                }
            });
        }

        // add new country
        function submitCountry() {
            var new_country_name = $("#new_country_name").val();

            if ($("#new_country_name").val() === "" || !$("#new_country_name").val()) {
                alert("Please make sure that you fill in a country name");
                return false;
            }
           
            var data = {
                        'name':new_country_name, 
                         };

            // $.ajax({
            //     method: 'POST',
            //     url: '/patients/add_country',
            //     data: data,
            //     success: function(response){
            //         if(!isNaN(response)){
            //             //response = last inserted id
            //             $('#country_picker').append($('<option>', {
            //                 value: response,
            //                 text: new_country_name
            //             }));
            //             $('#country_picker').val(response);//preselect the newly added referral
            //             $('#modal_add_country_foreigner').modal('hide'); //manually hide the modal
            //         } else {
            //             alert("error occurred");
            //         }
            //     },
            //     error: function(jqXHR, textStatus, errorThrown) {
            //         alert(JSON.stringify(jqXHR));
            //         console.log(JSON.stringify(jqXHR));
            //     }
            // });

            $.ajax({
            method: 'POST',
            url: '/patients/add_country',
            data: data,
            success: function(response) {
                if (!isNaN(response)) {
                    // response = last inserted id
                    $('#country_picker').append($('<option>', {
                        value: response,
                        text: new_country_name
                    }));
                    $('#country_picker').val(response); // preselect the newly added country
                    $('#modal_add_country_foreigner').modal('hide'); // manually hide the modal
                } else {
                    alert(response.error || "An unknown error occurred");
                }
            },
            error: function(jqXHR) {
                var response = jqXHR.responseJSON;
                if (jqXHR.status === 409 && response && response.error) {
                    alert(response.error); // Show the "Country already exists" message
                } else {
                    alert("An error occurred: " + JSON.stringify(jqXHR));
                }
            }
        });
        }

        function submitCompany() {
            var company_name = $("#company_name").val();
            var company_contact = $("#company_contact").val();
            var company_identifier = $("#company_identifier").val();

            if ($("#company_name").val() === "" || !$("#company_name").val()) {
                alert("Please make sure that you fill in a company name");
                return false;
            }
            
            if ($("#company_contact").val() === "" || !$("#company_contact").val()) {
                alert("Please make sure that you add the company contact");
                return false;
            }

            var data = {'company_name':company_name, 'company_contact': company_contact, 'company_identifier': company_identifier};

            $.ajax({
                method: 'POST',
                url: '/patients/add_company',
                data: data,
                success: function(response){
                    if(!isNaN(response)){
                        //response = last inserted id
                        $('#company').append($('<option>', {
                            value: response,
                            text: company_name
                        }));
                        $('#company').val(response);//preselect the newly added referral
                        $('#modal_company').modal('hide'); //manually hide the modal
                    } else {
                        alert("error occurred");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(JSON.stringify(jqXHR));
                    console.log(JSON.stringify(jqXHR));
                }
            });
        }

        $('#date_of_birth').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd/mm/yyyy',
            endDate: new Date()
        });

        $('#age_in_years, #age_in_months').on('change', function () {
            let years = parseInt($('#age_in_years').val());
            let months = parseInt($('#age_in_months').val());
            let possibleBirthday = new Date();
            
            if (!isNaN(years) || !isNaN(months)) {
                possibleBirthday.setMonth(possibleBirthday.getMonth() - (months + (years * 12)));
                $('#date_of_birth').val(format_date(possibleBirthday));
            } else {
                alert("<?php echo __('patients.valid_number_years')?>")
            }
        });

        function format_date(date) {
            let d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2) {
                month = '0' + month;
            }

            if (day.length < 2) {
                day = '0' + day;
            }

            return [day, month, year].join('/');
        }

        $("#date_of_birth").on('change', function () {
            var today = new Date();
            var birthDate = $(this).val();
            var temp_date = birthDate.split("/");
            birthDate = new Date(temp_date[2], (temp_date[1] - 1), temp_date[0]);

            //calculate years
            var age = today.getFullYear() - birthDate.getFullYear();
            age = parseInt(age);
            var m = today.getMonth() - birthDate.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }

            //calculate months
            var monthBirth = birthDate.getMonth() + 1;
            var monthToday = today.getMonth() + 1;
            if (monthToday > monthBirth) {
                var months = monthToday - monthBirth;
            } else if (monthToday == monthBirth) {
                var months = 0;
            } else if (monthToday < monthBirth) {
                var months = monthToday - monthBirth;
                months = months + 12;
            }
            if (months < 10) {
                months = '0' + months
            }

            //set the values
            $('#age_in_years').val(age);
            $('#age_in_months').val(months);
        });

        $('#next_of_kin').on('change', function () {
            if ($(this).val() != "" && $(this).val() != " ") {
                $('#kin_div').show();
            } else {
                $('#kin_div').hide();
            }
        });

        $('#first_name, #last_name').change(function () {
            let first_name = $('#first_name').val();
            let last_name = $('#last_name').val();

            if (first_name !== "" && last_name !== "") {
                $.ajax({
                    method: 'POST',
                    url: '/patients/check_duplicate_patients',
                    data: {'first_name': first_name, 'last_name': last_name},
                    success: function(response){
                        let responseArray = JSON.parse(response);

                        if (responseArray["results_count"] > 0) {
                            $("#similar_patients_names").text(responseArray["results_count"] + " patient(s) with similar names were found. Click here to view them and avoid duplicate patient records");
                            $("#similar_patients_names").show();
                            $("#modal_table").html(responseArray["html"]);
                        } else {
                            $("#similar_patients_names").hide();
                        }
                    }
                });
            }
        });

        $('#phone').change(function () {
            let phone = $('#phone').val();
            $.ajax({
                method: 'POST',
                url: '/patients/check_duplicate_patients',
                data: {'phone': phone},
                success: function(response){
                    let responseArray = JSON.parse(response);

                    if (responseArray["results_count"] > 0) {
                        $("#similar_phone_number").text(responseArray["results_count"] + " patient(s) with similar phone numbers were found. Click to view them");
                        $("#similar_phone_number").show();
                        $("#modal_table").html(responseArray["html"]);
                    } else {
                        $("#similar_phone_number").hide();
                    }
                }
            });
        });

        $('#similar_patients_names, #similar_phone_number').click(function () {
            $('#modal_similar_patients').modal('show');
        });

        $('#district_id').on('change', function () {
            //remove content from all dependant dropdowns
            $('#county_id').empty();
            $('#subcounty_id').empty();
            $('#parish_id').empty();

            //get selected value
            let id = $('#district_id').val();

            $.ajax({
                method: 'GET',
                url: '/patients/get_counties/' + id,
                success: function(response){
                    $('#county_id').html(response);
                }
            });
        });

        $('#county_id').on('change', function () {
            $('#subcounty_id').empty();
            $('#parish_id').empty();

            //get selected value
            let id = $('#county_id').val();

            $.ajax({
                method: 'GET',
                url: '/patients/get_subcounties/' + id,
                success: function(response){
                    $('#subcounty_id').html(response);
                }
            });
        });

        $('#subcounty_id').on('change', function () {
            $('#parish_id').empty();

            //get selected value
            let id = $('#subcounty_id').val();

            $.ajax({
                method: 'GET',
                url: '/patients/get_parishes/' + id,
                success: function(response){
                    $('#parish_id').html(response);
                }
            });
        });

        /* make residence dropdowns searchable */
        $('#district_id,#county_id,#subcounty_id,#parish_id,#company,#occupation,#foreginer_refugee').select2({
            placeholder: "<?php echo __('patients.select')?>",
            width: '100%',
        });

        $('#modal_district_link').click(function () {
            if($('#new_district_name').is(":visible")) {
                $('#district_id_div').show();
                $('#new_district_name').val('').hide();
            } else {
                $('#new_district_name').show();
                $('#district_id_div').val('').hide();
                $('#district_id').val('');
            }
        });

        $('#modal_county_link').click(function () {
            if($('#new_county_name').is(":visible")) {
                $('#county_id_div').show();
                $('#new_county_name').val('').hide();
            } else {
                $('#new_county_name').show();
                $('#county_id_div').hide();
                $('#county_id').val('');
            }
        });

        $('#modal_subcounty_link').click(function () {
            if($('#new_subcounty_name').is(":visible")) {
                $('#subcounty_id_div').show();
                $('#new_subcounty_name').val('').hide();
            } else {
                $('#new_subcounty_name').show();
                $('#subcounty_id_div').hide();
                $('#subcounty_id').val('');
            }
        });

        $('#modal_parish_link').click(function () {
            if($('#new_parish_name').is(":visible")) {
                $('#parish_id_div').show();
                $('#new_parish_name').val('').hide();
            } else {
                $('#new_parish_name').show();
                $('#parish_id_div').hide();
                $('#parish_id').val('');
            }
        });

        //$('.select2-selection.select2-selection--single').addClass('form-control');//add class to select2 display
        $('.select2-selection.select2-selection--single').css('height', 'calc(3.85rem)');
        $('.select2-selection.select2-selection--single').css('padding-top', '5px');
        $('.select2-selection__arrow').css('top', '3px');

        $("#submit_new_occupation").click(function () {
            var new_occupation_name = $("#new_occupation_name").val();
            if (new_occupation_name == '') {
                alert("<?php echo __('patients.fill_name')?>");
            } else {
                $.ajax({
                    type: "POST",
                    url: "/add_new_occupation_dynamically",
                    data: {name: new_occupation_name},
                    cache: false,
                    success: function (response) {
                        if (response == 'false') {
                            alert("<?php echo __('patients.new_occupation_error')?>");
                        } 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();
        });

        $("#citizenship").click(function(){
            var citizenship = $("#citizenship").val();
            if (citizenship == 0) {
                $("#not_ugandan_regions").show();
                $("#ugandan_regions").hide();
                $('#residence').prop('required', false);
            } else {
                $("#not_ugandan_regions").hide();
                $("#ugandan_regions").show();
                $("#country_id").val('');
                $('#residence').prop('required', true);
            }
        });

        $('#residence').select2({
            placeholder: 'Search residences',
            ajax: {
                url: '/patients/search_residences',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.ids
                            }
                        })
                    };
                },
                cache: true
            }
        });
        $("#patients_submit").click(function (e) { // make sure that all compulsory fields have been filled out
            var empty_compulsory_fields = [];
            $("#white-box.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;
            }
        });
    </script>


    {{-- palm vein scanner --}}


    {{-- <script type="text/javascript" src="{{ asset('js/palmsecure/fbf.standalone.js') }}" xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5"></script> --}}

    {{-- <script type ="text/javascript" src="{{ asset('js/palmsecure/fbf.module.js') }}"></script> --}}
    <script type ="text/javascript" src="{{ asset('js/palmsecure/demo.bundle.js') }}"></script>
    <script type ="text/javascript" src="{{ asset('js/palmsecure/demo.js') }}"></script>
    
   
    <script type="text/javascript">
                start();
    </script>

    {{-- end of palm vein scanner --}}
@endpush