@if(Auth::user()->can('view-vitals-on-inpatient-sheet'))

    <hr>

    <h4>Vitals and Observations</h4>

    <table class="table table-bordered color-bordered-table success-bordered-table">
        <tbody>
            @if(count($patient_vitals) > 0)
                @foreach($patient_vitals as $key => $value)
                    <tr>
                        <td class="text-center"><span style="font-size: 18px; color: black">{{ $key }}</span></td>
                        <td>
                            <table class="table table-bordered color-bordered-table success-bordered-table">
                                <tbody>
                                <tr>
                                    @php $vitals_counter = 0; @endphp
                                    @foreach($value as $value_array)
                                        @php
                                            if($vitals_counter > 4) {
                                                break;
                                            }
                                            $vitals_counter++;
                                        @endphp
                                        <td>
                                            <span style="font-size: 15px; color: black">{{ $value_array["value"] }}</span>

                                            <hr>

                                            @php
                                                try {
                                                    echo Carbon\Carbon::parse($value_array["time"])->toDateTimeString();
                                                } catch (Exception) {}
                                            @endphp
                                        </td>
                                    @endforeach
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td style="color: black" class="text-center">No Vitals Registered</td>
                </tr>
            @endif
        </tbody>
    </table>

    <a class="btn btn-sm btn-rounded btn-primary" data-toggle="modal" data-target="#view_vitals">View All Vitals</a>
    <a class="btn btn-sm btn-rounded btn-success" data-toggle="modal" data-target="#add_vitals">Add New Vitals</a>
@endif

<div class="modal fade" id="add_vitals" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" 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="add_vitals_label">Add New Vitals</h4>
            </div>
            <div class="modal-body">
                <input type='hidden' id="age_group" value="{{ $age_group }}">

                <h4>Select Vitals</h4>

                <input type='hidden' id="vitals_slug_0">

                <table class='table color-bordered-table success-bordered-table'>
                    <thead>
                    <tr>
                        <th width="25%">Vitals</th>
                        <th>Value</th>
                        <th>Normal Ranges</th>
                        <th width="10%">NEWS</th>
                        <th>TIme and Date</th>
                        <th></th>
                    </tr>
                    </thead>

                    <tbody class='vitals_table'>
                    <tr>
                        <td>
                            <div class='form-group controls'>
                                <select name='vitals_observations[]' id='vitals_observation_0' class='form-control compulsory required' onchange='get_observation_info(0, this.value)'>@php echo $options_observations; @endphp</select>
                                <input type='hidden' id='vitals_slug_0'>
                            </div>
                        </td>
                        <td>
                            <div class='form-group controls'>
                                <input type='number' class='form-control' id='vitals_value_0' name='vitals_value[]' onchange='get_score(0, this.value)'>
                            </div>
                        </td>
                        <td>
                            <div class='form-group controls'>
                                <input type='text' class='form-control' id='vitals_normal_ranges_0' readonly>
                            </div>
                        </td>
                        <td>
                            <div id='vitals_news_0'></div>
                        </td>
                        <td>
                            <div class='form-group controls'>
                                <input type='datetime-local' name='vitals_datetime[]' id='vitals_datetime_0' class='form-control compulsory' />
                            </div>
                        </td>
                        <td>
                            <div class='form-group'>
                                <button type='button' class='btn btn-sm btn-rounded btn-success add_vitals_row' style='color: white;'><i class='fa fa-plus'></i></button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="save_vitals()">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('layout.close') }}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="view_vitals" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" 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="view_vitals_label">View All Vitals</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered color-bordered-table success-bordered-table">
                        <tbody>
                        @if(count($patient_vitals) > 0)
                            @foreach($patient_vitals as $key => $value)
                                <tr>
                                    <td class="text-center"><span style="font-size: 18px; color: black">{{ $key }}</span></td>
                                    <td>
                                        <table class="table table-bordered color-bordered-table success-bordered-table">
                                            <tbody>
                                            <tr>
                                                @foreach($value as $value_array)
                                                    <td>
                                                        <span style="font-size: 15px; color: black">{{ $value_array["value"] }}</span>

                                                        <hr>

                                                        @php
                                                            try {
                                                                echo Carbon\Carbon::parse($value_array["time"])->toDateTimeString();
                                                            } catch (Exception) {}
                                                        @endphp
                                                    </td>
                                                @endforeach
                                            </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td style="color: black" class="text-center">No Vitals Registered</td>
                            </tr>
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('layout.close') }}</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script src="{{ asset('js/observations/all_age_groups.js') }}"></script>

    <script>
        let vitals_rows = 1;

        $('.add_vitals_row').click(function (e) {
            e.preventDefault();

            $('.vitals_table').append("<tr id='vitals_row_" + vitals_rows + "'>\
                <td><div class='form-group controls'>\
                <select name='vitals_observations[]' id='vitals_observation_" + vitals_rows + "' class='form-control compulsory required' onchange='get_observation_info(" + vitals_rows + ", this.value)'>@php echo $options_observations; @endphp</select>\
                <input type='hidden' id='vitals_slug_" + vitals_rows + "'></div></td><td><div class='form-group controls'>\
                <input type='text' class='form-control' id='vitals_value_" + vitals_rows + "' name='vitals_value[]' onchange='get_score(" + vitals_rows + ", this.value)'>\
                </div></td><td>\
                <div class='form-group controls'><input type='text' class='form-control' id='vitals_normal_ranges_" + vitals_rows + "' readonly></div>\
                </td><td><div id='vitals_news_" + vitals_rows + "'></div></td><td><div class='form-group controls'>\
                <input type='datetime-local' name='vitals_datetime[]' id='vitals_datetime_" + vitals_rows + "' class='form-control compulsory'/>\
                </div></td><td><div class='form-group'>\
                <button type='button' class='btn btn-sm btn-rounded btn-danger' onclick='remove_vitals_row(" + vitals_rows + ")' style='color: white;'><i class='fa fa-trash'></i></button>\
                </div></td></tr>");

            vitals_rows++;
        });

        function remove_vitals_row(id) {
            $('#vitals_row_' + id).remove();
        }

        function get_observation_info(id, value) {
            $.ajax({
                method: 'GET',
                url: '/observations/get_observation_info/' + value,
                success: function(response){
                    let responseArray = JSON.parse(response);

                    if (responseArray["error"] == 0) {
                        $('#vitals_normal_ranges_' + id).val(responseArray["normal_range"]);
                        $('#vitals_slug_' + id).val(responseArray["slug"]);
                    } else {
                        $('#vitals_normal_ranges_' + id).val();
                        $('#vitals_slug_' + id).val();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    //alert(JSON.stringify(jqXHR));
                }
            });
        }

        function save_vitals() {
            let vitals_observations = $("select[name='vitals_observations[]'] option:selected" ).map(function(){
                return this.value;
            }).get();

            let vitals_value = $("input[name='vitals_value[]']" ).map(function(){
                return this.value;
            }).get();

            let vitals_datetime = $("input[name='vitals_datetime[]']" ).map(function(){
                return this.value;
            }).get();

            let patient_id = $('#patient_id').val();
            let episode_id = $('#episode_id').val();
            let inpatient_id = $('#inpatient_id').val();

            $.ajax({
                url: '/save_patient_vitals',
                data: {
                    "vitals_observations[]": vitals_observations, "vitals_value[]": vitals_value, "vitals_datetime[]": vitals_datetime,
                    "patient_id": patient_id, "episode_id": episode_id, "inpatient_id": inpatient_id
                },
                success: function(response){
                    if (response == "1") {
                        alert("Vitals successfully added");
                        window.location.reload();
                    } else {
                        alert("Please make sure all values are filled in correctly");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    //
                }
            });
        }
    </script>
@endpush