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

@endsection


@section('style')
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
<link href="{{ asset('public/css/note/home.css') }}" rel="stylesheet" type="text/css" />
<link href="{{asset('public/css/pdf/index.css')}}"     rel="stylesheet" type="text/css"/>
<style>
    *{
        font-size: 18px;
    }
    #logo_ipad img{
        height: 2em !important;
    }
    .checkbox{
        font-size: 18px !important;
    }
    .cn{
        align-items: center;
    }
    .text-input,.text-input:focus{
        width: 40%;
        border: 0 solid grey;
        border-bottom: 1px solid grey;
        outline: none;
        padding-left: 5px;
    }
    .text-input2,.text-input2:focus{
        width: 80%;
        border: 0 solid grey;
        border-bottom: 1px solid grey;
        outline: none;
        padding-left: 5px;
    }
    .text-input3,.text-input3:focus{
        width: 70%;
        border: 0 solid grey;
        border-bottom: 1px solid grey;
        outline: none;
        padding-left: 5px;
    }
    #side-re{
        border-right: 1px solid gray;
        border-bottom: none;
    }
    @media (max-width: 1200px){
        #side-re{
            border-bottom: 1px solid gray;
            border-right: none;
            padding: 1em 0;
            margin: 1em 0;
        }
    }
</style>
@endsection
@section('modal')
    @php
        $y=date('Y')-100;
        for($i=date('Y');$i>=$y;$i--){
            $year[] =$i;
        }
        for($m=1;$m<=12;$m++){
            $month[] = $m;
        }
        // $id   = $_GET['id'];
        $note = DB::table('tb_casenote')->where('note_id',$id)->first();
        $json = jsonDecode($note->note_casejson);
        $patient = DB::table('patient')->where('hn',$json->hn)->first();
        $json_patient = jsonDecode($patient->patient_json);
    @endphp
    <div class="modal" tabindex="-1" role="dialog" id="detail_pt">
        <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body pt-0">
                <div class="row m-0 mt-5">
                    <div class="col text-right">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                    </div>
                </div>
                <div class="row m-0">

                    <div class="col-3 text-center">
                        <img src="{{url('')}}/public/images/avatar.png" alt="งิงิ" srcset="" class="w-50">
                        <div class="col-xl-12 mt-5 h3 text-center text-danger"> HN : {{ $json->hn }}</div>
                        <div class="col-xl-12 text-center mt-2"><button type="button" class="btn btn-outline-dark">Edit Patient profile</button></div>
                    </div>
                    <div class="col-9">
                        <div class="row m-0">
                            <div class="col-6 mt-5"><b>ชื่อ : </b>{{ @$json->patientname }}</div>
                            <div class="col-6 mt-3"><b>ติดต่อ : </b>{{ @$json->email }}</div>
                            <div class="col-6 mt-3"><b>ID/Passport : </b>123456789</div>
                            <div class="col-6 mt-3"><b>ติดต่อฉุกเฉิน :</b>ไม่พบข้อมูล</div>
                            <div class="col-6 mt-3"><b>อายุ : </b>{{ @$json->age }}</div>
                            <div class="col-6 mt-3"><b>หมู่เลือด :</b>ไม่พบข้อมูล</div>
                            <div class="col-12 mt-3"><b>เพศ : </b>{{ @$json->gender_name }}</div>
                            <div class="col-12 mt-3"><b>สิทธิการรักษา :</b> -</div>
                            <div class="col-6 mt-3"><select name="" id="" class="form-control"><option value=""></option></select></div>
                        </div>
                    </div>
                    {{-- <div class="col-xl-12 mt-3 text-center">
                        {!! QrCode::size(100)->generate('https://techvblogs.com/blog/generate-qr-code-laravel-8') !!}
                    </div> --}}

                </div>
            </div>
        </div>
        </div>
    </div>
@endsection


@section('content')
@php
    $note               = DB::table('tb_casenote')->where('note_id',$id)->first();
    $json               = jsonDecode($note->note_casejson);
    $doctor             = DB::table('users')->where('user_type','doctor')->get();
    $nurse              = DB::table('users')->where('user_type','nurse')->get();
    // $procedure          = null;
    // $procedure          = Department::procedure(Auth::id());
    $righttotreatment   = DB::table('dd_righttotreatment')->get();
@endphp
<div class="row m-0 mt-3">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row m-0">
                    <div class="col-xl-4 menu-pc" id="profile_top">
                        <div class="row m-0">
                            <div class="col-xl-5">
                                <div class="row m-0">
                                    <div class="col-lg-12 text-center">
                                        <img src="{{url('')}}/public/image/bot.jpg" alt="งิงิ" srcset="" class="img-fluid">
                                    </div>
                                    <div class="col-lg-12 mt-5 h3 text-center text-danger"> HN : 1234567890</div>
                                    <div class="col-lg-12 text-center mt-2"><button type="button" class="btn btn-outline-dark">Edit Patient profile</button></div>
                                </div>
                            </div>
                            <div class="col-xl-7 p-0">
                                <div class="row m-0">
                                    <div class="col-lg-12"><b>ชื่อ : </b>{{ @$json->patientname }}</div>
                                    <div class="col-lg-12 mt-2"><b>ID/Passport : </b>1234567890</div>
                                    <div class="col-lg-12 mt-2"><b>อายุ : </b>{{ @$json->age }}</div>
                                    <div class="col-lg-12 mt-2"><b>เพศ : </b>{{ @$json->gender_name }}</div>
                                    <div class="col-lg-12 mt-2"><b>ติดต่อ : </b>{{ @$json->email }}</div>
                                    <div class="col-lg-12 mt-2"><b>ติดต่อฉุกเฉิน : </b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-2"><b>หมู่เลือด : </b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-2"><b>สิทธิการรักษา : </b>ไม่พบข้อมูล</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-8">
                        <div class="row m-0">
                            <div class="col-lg-5 p-0">
                                <div class="row m-0">
                                    <div class="col-lg-12"><b class="border-bottom border-dark">ผลการซักประวัติ</b></div>
                                    <div class="col-lg-12 mt-3"><b>อาการนำมา : </b>10543</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติความเจ็บป่วย : </b>Room 1</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการใช้ยา : </b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการแพ้ยา : </b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการแพ้อาหาร : </b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการผ่าตัด : </b>ไม่พบข้อมูล</div>
                                </div>
                            </div>
                            <div class="col-lg-5 p-0">
                                <div class="row m-0">
                                    <div class="col-lg-12">&emsp;</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการตั้งครรภ์ :</b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการส่องกล้อง :</b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการดื่มสุรา :</b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>ประวัติการสูบบุหรี่ :</b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>Provisional Diagnosis :</b>ไม่พบข้อมูล</div>
                                    <div class="col-lg-12 mt-3"><b>Status :</b><span class="label label-inline">ซักประวัติ</span></div>
                                </div>
                            </div>
                            <div class="col-lg-2 p-0">
                                <div class="row m-0 h-100">
                                    <div class="col-lg-12 m-auto">
                                        <a href="javascript:void(0)" class="btn btn-light-danger font-weight-bold w-100">
                                            <span class="svg-icon svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Code\Stop.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M19.0710678,4.92893219 L19.0710678,4.92893219 C19.4615921,5.31945648 19.4615921,5.95262146 19.0710678,6.34314575 L6.34314575,19.0710678 C5.95262146,19.4615921 5.31945648,19.4615921 4.92893219,19.0710678 L4.92893219,19.0710678 C4.5384079,18.6805435 4.5384079,18.0473785 4.92893219,17.6568542 L17.6568542,4.92893219 C18.0473785,4.5384079 18.6805435,4.5384079 19.0710678,4.92893219 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                </g>
                                            </svg><!--end::Svg Icon--></span>
                                            <br>
                                            Cancel
                                        </a>
                                        <a href="javascript:void(0)" class="btn btn-light-warning font-weight-bold mt-3 w-100">
                                            <span class="svg-icon svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Communication\Write.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M12.2674799,18.2323597 L12.0084872,5.45852451 C12.0004303,5.06114792 12.1504154,4.6768183 12.4255037,4.38993949 L15.0030167,1.70195304 L17.5910752,4.40093695 C17.8599071,4.6812911 18.0095067,5.05499603 18.0083938,5.44341307 L17.9718262,18.2062508 C17.9694575,19.0329966 17.2985816,19.701953 16.4718324,19.701953 L13.7671717,19.701953 C12.9505952,19.701953 12.2840328,19.0487684 12.2674799,18.2323597 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.701953, 10.701953) rotate(-135.000000) translate(-14.701953, -10.701953) "/>
                                                    <path d="M12.9,2 C13.4522847,2 13.9,2.44771525 13.9,3 C13.9,3.55228475 13.4522847,4 12.9,4 L6,4 C4.8954305,4 4,4.8954305 4,6 L4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,13 C20,12.4477153 20.4477153,12 21,12 C21.5522847,12 22,12.4477153 22,13 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L12.9,2 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                </g>
                                            </svg><!--end::Svg Icon--></span>
                                            <br>
                                            Edit
                                        </a>
                                        {{-- <div class="col-12 text-center pt-3">
                                            {!! QrCode::size(100)->generate('https://techvblogs.com/blog/generate-qr-code-laravel-8') !!}
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row m-0">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-10">
                                                <div class="row m-0">
                            <div class="col-lg-12 p-0"><b>อาการนำมาโรงพยาบาล</b></div>
                        </div>
                        <div class="checkbox-list mt-3">
                            <div class="row">
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital01')!!}
                                        <span></span>
                                        ปวดท้อง
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital02')!!}
                                        <span></span>
                                        ท้องเสีย
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital03')!!}
                                        <span></span>
                                        ตัวเหลืองตาเหลือง
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital04')!!}
                                        <span></span>
                                        ท้องอืดเเน่นจุกเสียด
                                    </label>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital05')!!}
                                        <span></span>
                                        คลื่นไส้อาเจียน
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital06')!!}
                                        <span></span>
                                        ท้องผูก
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital07')!!}
                                        <span></span>
                                        มีก้อนในท้อง
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital08')!!}
                                        <span></span>
                                        อาเจียนเป็นเลือด
                                    </label>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital09')!!}
                                        <span></span>
                                        ถ่ายเป็นมูกเลือด
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital10')!!}
                                        <span></span>
                                        ถ่ายดำ
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital11')!!}
                                        <span></span>
                                        น้ำหนักลด
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <label class="checkbox checkbox-warning">
                                        {!!combox($json,'enters_hospital12')!!}
                                        <span></span>
                                        มีไข้
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-lg-12">อื่นๆ
                                {!!comtxt($json,'enters_hospital_other','text-input')!!}
                            </div>
                        </div>
                        <div class="row m-0 mt-5 pt-3 cn mb-4">
                            <div class="col-lg-12 p-0"><b>Provisional Diagnosis</b>{!!comtxt($json,'provisional_diagnosis_text','text-input2')!!}</div>
                            {{-- <div class="col-lg-9 p-0"></div> --}}
                        </div>
                    </div>
                    <div class="col-lg-1"></div>
                </div>

                <hr class="mt-5">
                <div class="row m-0">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-5">
                        <div class="row m-0">
                            <div class="col-lg-12"><b>นัดหมายทำหัตถการ</b></div>
                            <div class="col-lg-4 mt-3">วันที่นัดส่องตรวจ</div>
                            <div class="col-lg-8 mt-3"><input type="datetime-local" name="" id="" class="form-control"></div>
                            <div class="col-lg-4 mt-3">เเพทย์</div>
                            <div class="col-lg-8 mt-3">
                                <select name="" id="" class="form-control">
                                    <option value="" selected disabled hidden>Select</option>
                                    @forelse($doctor as $d)
                                        <option value='{{ $d->id }}'>{{ $d->name }}</option>
                                    @empty
                                        <option>ไม่ข้อมูล</option>
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-lg-4 mt-3">Procedure</div>
                            <div class="col-lg-8 mt-3">
                                <select name="" id="" class="form-control">
                                    <option value="" selected disabled hidden>Select</option>
                                    @isset($procedure)
                                    @forelse($procedure as $p)
                                        <option value='{{ $p->procedure_code }}'>{{ $p->procedure_name }}</option>
                                    @empty
                                        <option>ไม่ข้อมูล</option>
                                    @endforelse
                                    @endif
                                </select>
                            </div>
                            <div class="col-lg-4 mt-3">สิทธิการรักษา</div>
                            <div class="col-lg-8 mt-3">
                                <select name="" id="" class="form-control">
                                    <option value="" selected disabled hidden>Select</option>
                                    @forelse($righttotreatment as $l)
                                        <option value='{{ $l->id }}'>{{ $l->name }}</option>
                                    @empty
                                        <option>ไม่ข้อมูล</option>
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-lg-4 mt-3">รายละเอียดเพิ่มเติม</div>
                            <div class="col-lg-8 mt-3"><textarea name="" id="" rows="3" class="form-control"></textarea></div>
                        </div>
                    </div>
                    <div class="col-lg-5 m-auto">
                        <div class="row m-0">
                            <div class="col-lg-6">
                                <a href="{{url('note')}}" class="h-100 btn btn-light-success font-weight-bold w-100 p-5">
                                    <span class="svg-icon svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\General\Save.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M17,4 L6,4 C4.79111111,4 4,4.7 4,6 L4,18 C4,19.3 4.79111111,20 6,20 L18,20 C19.2,20 20,19.3 20,18 L20,7.20710678 C20,7.07449854 19.9473216,6.94732158 19.8535534,6.85355339 L17,4 Z M17,11 L7,11 L7,4 L17,4 L17,11 Z" fill="#000000" fill-rule="nonzero"/>
                                            <rect fill="#000000" opacity="0.3" x="12" y="4" width="3" height="5" rx="0.5"/>
                                        </g>
                                    </svg><!--end::Svg Icon--></span>
                                    <br>
                                    <label for="" class="h3">บันทึก</label>
                                </a>
                            </div>
                            <div class="col-lg-6">
                                <a href="javascript:void(0)" class="btn btn-light-primary font-weight-bold w-100 p-5"
                                onclick="printJS({printable:'{{url('')}}/notepdf/1', type:'pdf', showModal:true})"
                                >
                                    <span class="svg-icon svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Devices\Printer.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <path d="M16,17 L16,21 C16,21.5522847 15.5522847,22 15,22 L9,22 C8.44771525,22 8,21.5522847 8,21 L8,17 L5,17 C3.8954305,17 3,16.1045695 3,15 L3,8 C3,6.8954305 3.8954305,6 5,6 L19,6 C20.1045695,6 21,6.8954305 21,8 L21,15 C21,16.1045695 20.1045695,17 19,17 L16,17 Z M17.5,11 C18.3284271,11 19,10.3284271 19,9.5 C19,8.67157288 18.3284271,8 17.5,8 C16.6715729,8 16,8.67157288 16,9.5 C16,10.3284271 16.6715729,11 17.5,11 Z M10,14 L10,20 L14,20 L14,14 L10,14 Z" fill="#000000"/>
                                            <rect fill="#000000" opacity="0.3" x="8" y="2" width="8" height="2" rx="1"/>
                                        </g>
                                    </svg><!--end::Svg Icon--></span>
                                    <br>
                                    <label for="" class="h3">บันทึก และ พิมพ์ใบนัดหมาย</label>
                                </a>
                            </div>
                        </div>
                        <div class="row m-0 mt-5 pt-5 cn">
                            <div class="col-lg-4">พยาบาลผู้ทำนัด</div>
                            <div class="col-lg-8"><select name="" id="" class="form-control"><option value=""></option></select></div>
                        </div>
                    </div>
                    <div class="col-lg-1"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- <div id="example1"></div> --}}
@endsection




@section('script')
<script src="{{url('')}}/public/js/print.min.js"></script>
<script src="{{url('')}}/public/js/pdfobject.min.js"></script>
<script CHARSET="UTF-8">PDFObject.embed("{{url('')}}/notepdf/1", "#example1");</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