@php
    $view['json']           = $json;
    $view['note']           = $note;
    $view['procedure']      = $procedure;
    $view['doctor_select']  = $doctor_select;
    $view['nurse_select']   = $nurse_select ;
    if(isset($queue)){
        $view['queue']   = $queue ;
    }
@endphp

@extends('layouts.note_layout')
@section('title', 'EndoCapture')
@section('con-top')

@endsection


@section('style')
<link href="{{ asset('public/css/note/create.css') }}" rel="stylesheet" type="text/css" />
@endsection



@section('content')

    <div class="row" style="margin: 0;padding: 1em;">
        <div class="col-lg-2" style="padding: 5px;">
            <div class="card card-custom bgi-no-repeat card-stretch gutter-b"
                style="height: 100%;border-radius: 15px;background-position: right top; background-size: 30% auto; background-image: url({{ url('') }}/public/sample/assets/media/svg/shapes/abstract-2.svg);">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 text-center" style="margin-bottom: 1em;">
                            @if (@$note->pic == '')
                                <img id="imgnew" src="{{ asset('public/images/avatar.png') }}" />
                            @else
                                <img id="imgnew"
                                    src="{{ url("public/pic_patient/@$note->pic") }}?a={{ date('Y-m-dH:i:s') }}" />
                            @endif
                        </div>
                        <div class="col-12 mrs">
                            <b>HN</b>&emsp;: {{ $json->hn }}
                        </div>
                        <div class="col-12 mrs">
                            <b>AN</b>&emsp; : {{ @$case->an }}
                        </div>
                        <div class="col-12 mrs">
                            <b>ชื่อ</b>&emsp; : {{ @$json->patientname }}
                        </div>
                        <div class="col-12 mrs">
                            <b>อายุ</b>&emsp; : {{ @$json->age }}
                        </div>
                        <div class="col-12 mrs">
                            <b>เพศ</b>&emsp; : {{ @$case->gender_name }}
                        </div>
                        <div class="col-12 mrs">
                            <b>ติดต่อ</b>&emsp; : {{ @$case->email }}
                        </div>
                        <div class="col-12 mrs">
                            <b>สิทธิการรักษา</b>&emsp; : -
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-10" style="margin:1em 0em;">
            <div class="row">
                <button class="tablink col-lg-2" onclick="openPage('HistoryTaking', this, 'red')"
                    style="border-radius:15px 0 0 0;" id="defaultOpen">ซักประวัติ(ก่อนนัดหมาย)</button>
                <button class="tablink col-lg-2"
                    onclick="openPage('Appointment', this, 'rgb(184, 115, 11)')">นัดหมาย</button>
                <button class="tablink col-lg-2"
                    onclick="openPage('TakingHistory', this, 'rgb(219, 205, 9)')">ซักประวัติก่อนส่องกล้อง</button>
                <button class="tablink col-lg-2"
                    onclick="openPage('PerformTheProcedure', this, 'rgb(131 169 2)')">ทำหัตถการ</button>
                <button class="tablink col-lg-2"
                    onclick="openPage('AfterTheProcedure', this, 'green')">หลังทําหัตถการ</button>
                <button class="tablink col-lg-2" onclick="openPage('TrackSymptoms', this, '#049c76')"
                    style="border-radius: 0 15px 0 0;">ติดตามอาการ</button>
            </div>

            <div class="row">
                <div id="HistoryTaking" class="tabcontent col-lg-12">
                    @component('endonote.nursenote.component.step00', $view)@endcomponent
                </div>
                <div id="Appointment" class="tabcontent col-lg-12">
                    @component('endonote.nursenote.component.step01', $view)@endcomponent
                </div>
                <div id="TakingHistory" class="tabcontent col-lg-12">
                    @component('endonote.nursenote.component.step02', $view)@endcomponent
                </div>
                <div id="PerformTheProcedure" class="tabcontent col-lg-12">
                    @component('endonote.nursenote.component.step03', $view)@endcomponent
                </div>
                <div id="AfterTheProcedure" class="tabcontent col-lg-12">
                    @component('endonote.nursenote.component.step04', $view)@endcomponent
                </div>
                <div id="TrackSymptoms" class="tabcontent col-lg-12">
                    @component('endonote.nursenote.component.step05', $view)@endcomponent
                </div>
            </div>
        </div>
    </div>





    <script>
        function openPage(pageName, elmnt, color) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
            }
            document.getElementById(pageName).style.display = "block";
            elmnt.style.backgroundColor = color;
        }

        document.getElementById("defaultOpen").click();

    </script>
@endsection




@section('script')
    <script src="{{ url('public/js/jquery-ui.js') }}"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function call_ajax(hn,type){
            alert('HN : '+hn+' TYPE : '+type);
        }
        ///// editnow /////
        $('.savejson').bind('focusout', function() {

            var this_id     = $(this).attr('id');
            var this_name   = $(this).attr('name');
            var this_type   = $(this).attr('type');

            if (this_type == "checkbox") {
                $.post('{{ url('jquery') }}', {
                    event   : 'notesavejson',
                    idhtml  : this_id,
                    value   : $(this).prop('checked'),
                    table   : 'tb_case',
                    idname  : 'note_id',
                    id      : '{{ $note->note_id }}',
                    procedure: '0',
                }, function(data, status) {});
            } else {
                setTimeout(function() {
                    $.post('{{ url('jquery') }}', {
                        event   : 'notesavejson',
                        idhtml  : this_id,
                        value   : $('#' + this_id).val(),
                        table   : 'tb_case',
                        idname  : 'note_id',
                        id      : '{{ $note->note_id }}',
                        procedure: '0',
                    }, function(data, status) {
                        console.log(data);
                    });
                }, 1000);
            }
        });

        $('.savejson_checkbox').focusout(function() {
            var this_name = $(this).attr('name');
            var allVals = [];
            $('[name=' + this_name + ']:checked').each(function() {
                allVals.push($(this).val());
            });
            var val = JSON.stringify(allVals);
            $.post('{{ url('jquery') }}', {
                event: 'notesavejson_checkbox',
                idhtml: this_name,
                value: val,
                table: 'tb_case',
                idname: 'note_id',
                id: '{{ $note->note_id }}',
                procedure: 0,
            }, function(data, status) {});
        });

        {!! viewmode() !!}

        $('.detectbodyafter').focusout(function() {
            detectbody('after');
        });

        $("#btn_appdetectafter").click(function() {
            var str = "";
            str += '<tr>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_time"    class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_bp"      class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_p"       class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_rr"      class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_spo"     class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_loc"     class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_o"       class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_symptom" class="detectbodyafter form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="after_arr_remark"  class="detectbodyafter form-control"></td>';
            str += '</tr>';
            $("#tabledetectafter").append(str);
            $('.detectbodyafter').focusout(function() {
                detectbody('after');
            });
        });

        $('.detectbodyactive').focusout(function() {
            detectbody('active');
        });

        $("#btn_appdetectactive").click(function() {
            var str = "";
            str += '<tr>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_time"    class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_bp"      class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_p"       class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_rr"      class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_spo"     class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_loc"     class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_o"       class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_symptom" class="detectbodyactive form-control"></td>';
            str +=
                '<td style="padding: 5px;"><input type="text" name="active_arr_remark"  class="detectbodyactive form-control"></td>';
            str += '</tr>';
            $("#tabledetectactive").append(str);
            $('.detectbodyactive').focusout(function() {
                detectbody('active');
            });
        });



        function detectbody(actwhen) {
            var arr_time = [];
            $('[name=' + actwhen + '_arr_time]').each(function() {
                arr_time.push($(this).val());
            });
            var arr_bp = [];
            $('[name=' + actwhen + '_arr_bp]').each(function() {
                arr_bp.push($(this).val());
            });
            var arr_p = [];
            $('[name=' + actwhen + '_arr_p]').each(function() {
                arr_p.push($(this).val());
            });
            var arr_rr = [];
            $('[name=' + actwhen + '_arr_rr]').each(function() {
                arr_rr.push($(this).val());
            });
            var arr_spo = [];
            $('[name=' + actwhen + '_arr_spo]').each(function() {
                arr_spo.push($(this).val());
            });
            var arr_loc = [];
            $('[name=' + actwhen + '_arr_loc]').each(function() {
                arr_loc.push($(this).val());
            });
            var arr_o = [];
            $('[name=' + actwhen + '_arr_o]').each(function() {
                arr_o.push($(this).val());
            });
            var arr_symptom = [];
            $('[name=' + actwhen + '_arr_symptom]').each(function() {
                arr_symptom.push($(this).val());
            });
            var arr_remark = [];
            $('[name=' + actwhen + '_arr_remark]').each(function() {
                arr_remark.push($(this).val());
            });
            var val_time = JSON.stringify(arr_time);
            var val_bp = JSON.stringify(arr_bp);
            var val_p = JSON.stringify(arr_p);
            var val_rr = JSON.stringify(arr_rr);
            var val_spo = JSON.stringify(arr_spo);
            var val_loc = JSON.stringify(arr_loc);
            var val_o = JSON.stringify(arr_o);
            var val_symptom = JSON.stringify(arr_symptom);
            var val_remark = JSON.stringify(arr_remark);
            $.post("{{ url('jquery') }}", {
                event: 'detectbody',
                cid: '{{ $note->note_id }}',
                actwhen: actwhen,
                val_time: val_time,
                val_bp: val_bp,
                val_p: val_p,
                val_rr: val_rr,
                val_spo: val_spo,
                val_loc: val_loc,
                val_o: val_o,
                val_symptom: val_symptom,
                val_remark: val_remark,
            }, function(data, status) {
                console.log(data);
            });
        }

    </script>

    <script src="http://{{webconfig('server_name')}}:3000/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://{{webconfig('server_name')}}:3000');
        socket.on('chat message', function(msg) {
        });
        $('.btn-step2-before-operation').click(function(){
            var hn = $(this).attr('hn');
            $.post('{{url('note')}}',{
                event   : 'operation_before',
                hn      : hn
            },function(data,status){
                socket.emit('queue','refreshdata');
            });
        });
    </script>


@endsection