@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />

    <style>
        .triage-grade li {
            display: inline-block;
        }

        .same_width {
            width: 100%;
            table-layout: fixed;
        }

        .wrapper {
            border: 1px solid #00c292;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
        }
    </style>
@endpush

@section('content')
    <div class="row bg-title">
        <div class="col-lg-6 col-md-7 col-sm-7 col-xs-12">
            <h4 class="page-title">{{ __('triage.edit_triage') }}</h4>
        </div>
        <div class="col-lg-6 col-sm-5 col-md-5 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">{{ __('triage.dashboard') }}</a></li>
                <li><a href="{{ route('patient_episodes.index') }}">{{ __('triage.patient_home') }}</a></li>
                <li class="active">{{ __('triage.triage') }}</li>
            </ol>
        </div>
    </div>

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


    <div class="row">
        <div class="col-sm-12">
            <!--Flash messages at the top -->
            @include('flash::message')
            <div class="white-box br-5" style="padding-top: 5px;">
                <h5 class="page-title"><strong>{{ __('triage.triage') }} ({{ $age_group_display }})
                        {{ __('triage.for_episode') }} : <font color="blue">
                            {{ streamline_date(get_name($episode_id, 'id', 'created_at', 'patient_episodes')) }}</font>
                    </strong></h5>
                <hr>
                {{ Form::model($triage, ['method' => 'PUT', 'route' => ['triage.update', $triage], 'data-toggle' => 'validator']) }}

                {{ Form::hidden('episode_id', $episode_id) }}

                {{ Form::hidden('patient_id', $patient_id) }}

                @php
                    $alert1 = '<div class="alert alert-warning "> <button type="button" class="close" data-dismiss="alert">×</button>' . __('triage.sick_children_warning') . '</div>';
                    $alert2 = '<div class="alert alert-warning "> <button type="button" class="close" data-dismiss="alert">×</button>' . __('triage.poison_warning') . '</div>';
                    $symptoms_array = [];
                @endphp

                @php
                    $option_symptoms = '';
                    $option_symptoms_periods = '';
                    $symptom_counter = 1;
                @endphp
                @if (!are_symptoms_on_consultation())
                    <div class="table-responsive">
                        <table class="table table-hover color-table success-table table-bordered" id="symptom_table">
                            <thead>
                                <tr>
                                    <th class="text-center">{{ __('triage.symptoms') }} <a data-toggle="modal" data-target="#symptomsmodal" class="label labelRight label-info pull-right">{{ __('triage.add_new') }}</a></th>
                                    <th class="text-center">{{ __('triage.duration') }}</th>
                                    <th class="text-center">{{ __('triage.prompt') }}</th>
                                    <th class="text-center">{{ __('triage.reference_text') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody class='symptoms_input_fields_wrap'>
                            @php
                                $symptoms_array = explode(",", $triage->symptoms);
                                $symptoms_duration_array = explode(",", $triage->symptom_duration);

                                foreach ($symptoms as $key => $value){
                                    $option_symptoms .= "<option value='$key'>" . str_replace('"', "", $value) . "</option>";
                                }

                                foreach ($symptoms_periods as $key => $value){
                                    $option_symptoms_periods .= "<option value='$key'>$value</option>";
                                }
                            @endphp
                            @if(empty($symptoms_array) || count($symptoms_array) != count($symptoms_duration_array))
                                <tr>
                                    <td style='width: 20%;'>
                                        <select name='symptoms[]' id='symptoms_0' class='form-control col-sm-12 compulsory' onchange='showPrompt(this.value, 0)' required>@php echo $option_symptoms; @endphp</select>
                                    </td>
                                    <td style='width: 21%'>
                                        <div class='row'>
                                            <div class='col-sm-3'>
                                                <input type='text' style='display: block;' name='duration[]' id='symptoms_duration_0' class='col-sm-12 form-control' required>
                                            </div>
                                            <div class='col-sm-9'>
                                                <select style='display: inline-block;' name='time[]' id='symptoms_time_0' class='col-sm-12 form-control' required>@php echo $option_symptoms_periods; @endphp</select>
                                            </div>
                                        </div>
                                    </td>
                                    <td id='symptoms_prompt_0' style='width: 30%'></td>
                                    <td id='symptoms_reference_0'></td>
                                    <td style='width: 1%;'></td>
                                </tr>
                            @else
                                @for($i = 0; $i < count($symptoms_array); $i++)
                                    @php
                                        $duration_array = explode(" ", $symptoms_duration_array[$i]);
                                    @endphp
                                    <tr>
                                        <td style="width: 20%;">
                                            {{ Form::select('symptoms[]', $symptoms, $symptoms_array[$i], ['id' => 'symptoms_' . $i, 'class' => 'form-control col-sm-12 compulsory initial_symptoms_select', 'onchange' => 'showPrompt(this.value, ' . $i . ')']) }}
                                        </td>
                                        <td style="width: 21%">
                                            <div class="row">
                                                <div class="col-sm-3">
                                                    <input type="text" style="display: block;" name="duration[]" id="duration[]" class="col-sm-12 form-control" value="{{ $duration_array[0] }}">
                                                </div>
                                                <div class="col-sm-9">
                                                    <select style="display: inline-block;" name="time[]" id="time[]" class="col-sm-12 form-control">
                                                        <option value="{{ $duration_array[1] }}" selected>{{ $duration_array[1] }}</option>
                                                        <option value="<?php echo __('triage.hours') ?>">{{ __('triage.hours') }}</option>
                                                        <option value="<?php echo __('triage.days') ?>">{{ __('triage.days') }}</option>
                                                        <option value="<?php echo __('triage.weeks') ?>">{{ __('triage.weeks') }}</option>
                                                        <option value="<?php echo __('triage.months') ?>">{{ __('triage.months') }}</option>
                                                        <option value="<?php echo __('triage.years') ?>">{{ __('triage.years') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                        <td id="symptoms_prompt_{{ $i }}" style="width: 30%"></td>
                                        <td id="symptoms_reference_{{ $i }}"></td>
                                        <td style="width: 1%;"></td>
                                    </tr>
                                @endfor
                            @endif
                            </tbody>
                        </table>
                        <a class="btn btn-success btn-xs" onclick="add_symptom_row()" id="add_row">{{ __('triage.add_row') }}</a>
                        <hr>
                    </div>
                @endif

                @if (is_tuberculosis_screening_enabled())
                    @include('patients::triage.edit_tb_screening')
                @endif

                @if (is_hiv_screening_tool_enabled())
                    @include('patients::triage.edit.edit_hiv_screening')
                @endif

                @if (is_gbv_screening_tool_enabled())
                    @include('patients::triage.edit.edit_gbv_screening')
                @endif

                <div class="row">
                    <div class="col-md-8">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped color-table success-table table-bordered"
                                id="observations_table">
                                <thead>
                                    <tr>
                                        <th>{{ __('triage.observation') }}</th>
                                        <th>{{ __('triage.value') }}</th>
                                        <th>{{ __('triage.normal_range') }}</th>
                                        @if ($age_group == 5)
                                            <th>KEWS</th>
                                            <th>NEWS</th>
                                        @else
                                            <th>KEWS</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    @include('patients::triage.edit.observations_changed')
                                </tbody>
                            </table>
                        </div>

                        @if (between($years, 16, 50))
                            @include('patients::triage.edit.family_planning_questions')
                        @endif

                        @if (between($years, 0, 12))
                            @include('patients::triage.edit.emergency_signs')
                        @endif
                    </div>
                    <div class="col-md-4">
                        @if ($age_group == 1 || $age_group == 2)
                            <?php echo $alert2; ?>
                            <?php echo $alert1; ?>
                        @else
                            <?php echo $alert2; ?>
                        @endif

                        <br>

                        @if (!is_add_attendance_to_consultation_enabled())                        
                            <div class="table-responsive">
                                <table class="table table-hover color-table success-table table-bordered">
                                    <thead>
                                        <tr>
                                            <th colspan="2" class="text-center">
                                                {{ __('triage.patient_attendance') }}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="2">
                                                <font color="#C85F6A" class="text-center">{{ __('triage.re_attendance_or_new') }}</font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="new_attendance" id="new_attendance" @if(!empty($triage->new_attendance)) checked @endif/> {{ __('triage.new_attendance') }}
                                            </td>
                                            <td>
                                                <input type="checkbox" name="re_attendance" id="re_attendance" @if(!empty($triage->re_attendance)) checked @endif/> {{ __('triage.re_attendance') }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        @if (between($years, 0, 12))
                            @include('patients::triage.edit.priority_signs')
                        @endif

                        <div style="background: #F5F5F5; padding: 10px;">
                            <h4 class="text-center">{{ __('triage.triage_grade') }}</h4>

                            <hr>

                            <div class="row text-center">
                                <div class="col-md-4 br">
                                    {{ Form::radio('triage_grade', 1, $triage->severe_grade == 1, ['required', 'id' => 'triage_grade_green']) }}
                                    <b style="color: #006400; font-weight: 900; font-size: 18;">{{ __('triage.green') }}
                                    </b>
                                </div>
                                <div class="col-md-4">
                                    {{ Form::radio('triage_grade', 2, $triage->severe_grade == 2, ['required', 'id' => 'triage_grade_yellow']) }}
                                    <b style="color: #FFC40C; font-weight: 900; font-size: 18; ">{{ __('triage.yellow') }}
                                    </b>
                                </div>
                                <div class="col-md-4">
                                    {{ Form::radio('triage_grade', 3, $triage->severe_grade == 3, ['required', 'id' => 'triage_grade_red']) }}
                                    <b style="color: #FF4500; font-weight: 900; font-size: 18;">{{ __('triage.red') }}</b>
                                </div>
                            </div>
                        </div>

                        <h4 style="background: #F5F5F5; padding: 10px;">{{ __('triage.referral_clinic_allocation') }}</h4>

                        <div class="form-group">
                            {{ Form::label('referral_hospital', __('triage.referred_by')) }}
                            {{ Form::select('referral_hospital', $referral_hospitals, $triage->referral, ['class' => 'form-control compulsory', 'required', 'id' => 'referral_hospital']) }}

                            <a class="pull-right" style="font-size: x-small" data-toggle="modal"
                                data-target="#referralsmodal">{{ __('triage.add_new') }}</a>
                        </div>

                        <div class="form-group">
                            {{ Form::label('clinic_allocation', __('triage.clinic_allocation')) }}

                            @if (is_numeric(get_name($episode_id, 'id', 'clinic_id', 'patient_episodes')))
                                {{ Form::select('clinic_allocation', $clinics, get_name($episode_id, 'id', 'clinic_id', 'patient_episodes'), ['class' => 'form-control col-sm-12 compulsory', 'required']) }}
                            @else
                                {{ Form::select('clinic_allocation', $clinics, '', ['class' => 'form-control col-sm-12 compulsory', 'required']) }}
                            @endif
                        </div>

                        <h4 style="background: #F5F5F5; padding: 10px;">{{ __('triage.comment') }}</h4>
                        <textarea name='comment' id="comment" class="col-sm-12" placeholder="<?php echo __('triage.type_comments_here'); ?>">{{ $triage->comments }}</textarea>

                        <br><br>

                        {{ Form::button(__('triage.submit_triage'), ['type' => 'submit', 'class' => 'btn btn-success col-sm-12', 'id' => 'submit_triage']) }}
                        <br><br>
                        {{ __('triage.triage_done_by') }} : <span
                            style="color: green; font-weight: bold;">{{ ucwords(Auth::user()->first_name) . ' ' . ucwords(Auth::user()->last_name) }}</span>
                    </div>
                </div>

                {{ Form::close() }}
            </div>
        </div>
    </div>

    <div class="modal fade" id="symptomsmodal" 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">{{ __('triage.add_new_symptom') }}</h4>
                </div>
                <div class="modal-body">
                    {{ Form::text('symptom_name', '', ['class' => 'form-control', 'id' => 'symptom_name', 'placeholder' => __('triage.symptom_name')]) }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">{{ __('triage.cancel') }}</button>
                    <a class="btn btn-success" onclick="submitSymptom()">{{ __('triage.add_symptom') }}</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="referralsmodal" 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">{{ __('triage.add_new_referral') }}</h4>
                </div>
                <div class="modal-body">
                    {{ Form::text('referral_name', '', ['class' => 'form-control', 'id' => 'referral_name', 'placeholder' => __('triage.referral_name')]) }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">{{ __('triage.cancel') }}</button>
                    <a class="btn btn-primary" onclick="submitReferral()">{{ __('triage.add_referral') }}</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>

    <script type="text/javascript">
        let max_rows = 20;
        let wrapper = $(".symptoms_input_fields_wrap");
        let x = {{ !empty($symptoms_array)? count($symptoms_array):1 }};
        let smart_triage_variables = {};
        // check if smart triage is enabled
        let smart_triage_enabled = <?php echo is_smart_triage_enabled() ? 1 : 0; ?>;
        let apply_triage_grade = <?php echo apply_triage_grade() ? 1 : 0; ?>;

        $(wrapper).on("click", ".remove_field", function(e) {
            e.preventDefault();
            $(this).parent('td').parent('tr').remove();
            x--;
        });

        function add_symptom_row() {
            if (x < max_rows) {
                $(wrapper).append("<tr>\
                <td style='width: 20%;'>\
                    <select name='symptoms[]' id='symptoms_" + x + "' class='form-control col-sm-12 compulsory' onchange='showPrompt(this.value, " + x + ")' required>@php echo $option_symptoms; @endphp</select>\
            </td>\
                <td style='width: 21%'>\
                    <div class='row'>\
                        <div class='col-sm-3'>\
                            <input type='text' style='display: block;' name='duration[]' id='symptoms_duration_" + x + "' class='col-sm-12 form-control' required>\
                        </div>\
                        <div class='col-sm-9'>\
                            <select style='display: inline-block;' name='time[]' id='symptoms_time_" + x + "' class='col-sm-12 form-control' required>@php echo $option_symptoms_periods; @endphp</select>\
                        </div>\
                    </div>\
                </td>\
                <td id='symptoms_prompt_" + x + "' style='width: 30%'></td>\
                <td id='symptoms_reference_" + x + "'></td>\
                <td style='width: 1%;'><a class='remove_field btn btn-sm btn-rounded btn-danger' style='color: white;'><i class='fa fa-trash'></i></a></td>\
                </tr>");

                generalSelect2Set('symptoms_' + x);
                $("#symptoms_" + x).load('/symptoms/get_symptoms');
                x++;
            }
        }

        function generalSelect2Set(id) {
            $('#' + id).select2({
                width: "100%"
            });
        }

        function showPrompt(symptom_id, id) {

            if (symptom_id == "") {
                return;
            }

            $.ajax({
                method: 'POST',
                url: '/triage/get_prompt',
                data: {
                    'symptom_id': symptom_id
                },
                success: function(response) {
                    let returnText = response.split('&&&&');

                    $('#symptoms_prompt_' + id).html('<p style="color: #C85F6A;">' + returnText[0] + '</p>');
                    $('#symptoms_reference_' + id).html(returnText[1]);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(JSON.stringify(jqXHR));
                    console.log(JSON.stringify(jqXHR));
                }
            });
        }

        function submitSymptom() {
            var symptom_name = $("#symptom_name").val();

            $.ajax({
                method: 'POST',
                url: '/triage/add_symptom',
                data: {
                    'symptom_name': symptom_name
                },
                success: function(response) {
                    if (response == 1) {
                        //reload all dropdowns
                        $(".1000").load('/symptoms/get_symptoms');
                        alert(symptom_name + ' symptom has been added.');
                        $('#symptomsmodal').modal('hide');
                    } else {
                        alert("<?php echo __('triage.adding_symptom_failed'); ?>");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(JSON.stringify(jqXHR));
                    console.log(JSON.stringify(jqXHR));
                }
            });
        }

        function submitReferral() {
            var name = $("#referral_name").val();

            $.ajax({
                method: 'POST',
                url: '/triage/add_referral',
                data: {
                    'name': name
                },
                success: function(response) {
                    if (!isNaN(response)) {
                        //response = last inserted id
                        $('#referral_hospital').append($('<option>', {
                            value: response,
                            text: name
                        }));
                        $('#referral_hospital').val(response); //preselect the newly added referral 
                        $('#referralsmodal').modal('hide'); //manually hide the modal
                    } else {
                        alert("<?php echo __('triage.adding_referral_failed'); ?>");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(JSON.stringify(jqXHR));
                    console.log(JSON.stringify(jqXHR));
                }
            });
        }

        $(document).ready(function() {
            $('.initial_symptoms_select').select2({
                width: "100%"
            });

            $('.select-2').select2({
                width: "100%"
            });

            var cons_attendance = <?php echo is_add_attendance_to_consultation_enabled() ? 1 : 0 ?>;

            $("#submit_triage").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');
                    }
                });

                if(cons_attendance == 0 && !$('#new_attendance').is(':checked') && !$('#re_attendance').is(':checked')){
                    alert('Please fill in Patient attendance.');
                    e.preventDefault();
                    return false;
                    $('#new_attendance, #re_attendance').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("<?php echo __('triage.compulsory_fields_warning'); ?>");
                    console.log(empty_compulsory_fields);
                    e.preventDefault();
                    return false;
                }
            });

            $('#new_attendance').click(function() {
                $('#re_attendance').not('#new_attendance').removeAttr('checked');
            });

            $('#re_attendance').click(function() {
                $('#new_attendance').not('#re_attendance').removeAttr('checked');
            });
        });

        $(document).ready(function() {
            $("#child_feeling_unsafe_section").hide();
            $("#tested_for_hiv_last_3_months_section").hide();
            $(".hiv_positive_section").hide();
        });

        function hide_tested_for_hiv_last_3_months_questions() {
            $("#tested_for_hiv_last_3_months_section").hide();
        }

        function show_tested_for_hiv_last_3_months_questions() {
            $("#tested_for_hiv_last_3_months_section").show();
        }

        function show_feeling_unsafe_questions() {
            $('#child_feeling_unsafe_section').show();
        }

        function hide_feeling_unsafe_questions() {
            $('#child_feeling_unsafe_section').hide();
        }

        function show_hiv_positive_questions() {
            $(".hiv_positive_section").show();
        }

        function hide_hiv_positive_questions() {
            $(".hiv_positive_section").hide();
        }

        // below 15

        $('input[type=radio][name=mother_hiv_positive]').change(function() {
            if (this.value == '1') {
                $('.child-hiv-status').removeClass('d-none').css('display', '');
                $('.child-hiv-status-questions').removeClass('d-none').css('display', '');
            } else if (this.value == '0') {
                $('.child-hiv-status').addClass('d-none').css('display', 'none');
                $('.child-hiv-status-questions').addClass('d-none').css('display', 'none');
                $('.child-hiv-status-questions input[type=radio]').each(function() {
                    this.value('');
                })
            }
        });
    </script>
@endpush