<nav class="navbar navbar-expand-lg  navbar-dark bg-dark" style="display:none;margin: 0;height: 6.5em;@if (isset($text)) background: red !important; @endif">
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item" style="border: none;padding:25px 0px;">
                <img src="{{url("public/image/logo_capture2.png")}}" alt="" style="width: 15%;" srcset=""
                    style="matgin:10px">{{nbsp(10)}}
                    <a href="{{url('home')}}"><i class="fa fa-arrow-circle-left fa-3x text-light" style="position: absolute;" aria-hidden="true"></i></a>
            </li>
        </ul>
        <h3 style="position: absolute;margin: 0;left: 45%;padding: 25px;">{{ @$text }}</h3>
        <span class="navbar-text" style="width: 20%;text-align: right;right:0;position: absolute;">
            <h3  id="time_runner"></h3>
        </span>
    </div>
</nav>




    <div class="col-xl-3 col-lg-2" style="background: #404040;z-index:1009;">
        <div class="row">
    <div id="textdiv"></div>
            @php
                if(isset($json)){
                    $tb_procedure = DB::table('tb_procedure')->where('procedure_name',$json->procedurename)->first();
                }else{
                    $tb_procedure = DB::table('tb_procedure')->where('procedure_name','EGD')->first();
                }
            @endphp

            <div class="col-12" style="background-color: {{$tb_procedure->procedure_color}}">
                    <div class="row">
                    <div class="col-6"><h4>{{ @$json->procedurename }}{{ @$text }}</h4></div>
                    <div class="col-6" align="right"> <h5>Case ID : @if(@$case->case_id != 0){{ @$case->case_id }}@endif{{ @$text }}</h5></div>
                    </div>
            </div>
        </div>
        <table id="table_a" style="height: 100%">
            <tr>
                <td valign="top">
                        <table id="table_b" border="1">
                            <thead id="detail_table">
                                <tr>
                                    <th style="width: 40%;">HN : </th>
                                    <td> {{ @$patient->hn }}{{ @$text }}</td>
                                </tr>
                                <tr>
                                    <th>Name : </th>
                                    <td>{{ @$patient->firstname }} {{ @$patient->lastname }}{{ @$text }}</td>
                                </tr>
                                <tr>
                                    <th>Gender / Age : </th>
                                    <td>{{ @$gender }}{{ @$text }} &emsp; / &emsp; {{ age(@$patient->birthdate) }}{{ @$text }}</td>
                                </tr>
                                <tr>
                                    <th style="vertical-align: top;">Endoscopist :</th>
                                    <td>
                                        {{ @$json->doctorname }}{{ @$text }}
                                    </td>
                                </tr>

                                <tr>
                                    <td colspan="2">
                                        <div class="row">
                                            <div class="col-6">
                                                {!!userSELECT('physicians02',$word->physicians02,$doctor,@$json->physicians02,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                            <div class="col-6">
                                                {!!userSELECT('physicians03',$word->physicians03,$doctor,@$json->physicians03,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>

                                    <td colspan="2">
                                        <div class="row">
                                            <div class="col-6">
                                                {!!userSELECT('nurse01',$word->nurse01,$nurse,@$json->nurse01,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                            <div class="col-6">
                                                {!!userSELECT('nurse02',$word->nurse02,$nurse,@$json->nurse02,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                        </div>
                                    </td>
                                </tr>


                                <tr>
                                    <td colspan="2">
                                        <div class="row">
                                            <div class="col-6">
                                                {!!userSELECT('nurse03',$word->nurse03,$register,@$json->nurse03,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                            <div class="col-6">
                                                {!!userSELECT('nurse04',$word->nurse04,$register,@$json->nurse04,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th style="vertical-align: top;">Room :</th>
                                    <td>
                                        <div class="row">
                                            <div class="col-6">
                                                {{select_users($room,@$json->room,'room_name',['room_name'],'room','เลือกห้อง','form-control form-control-lg editroom savejson')}}
                                            </div>
                                            <div class="col-6">
                                                {!!userSELECT('anes','เลือกวิสัญญีแพทย์',$anes,@$json->anes,'class="form-control form-control-lg savejson"')!!}
                                            </div>
                                        </div>
                                    </td>
                                </tr>



                                <tr style="">
                                    <th style="vertical-align: top;">Scope : </th>
                                    <td>
                                        <select class="form-control form-control-lg" id="select_scope">
                                            @if(isset($patient))
                                                <option value="0" selected>Select Scope</option>
                                            @else
                                                <option value="1" selected>Select Scope</option>
                                            @endif
                                            @if(isset($scope))
                                                @foreach ($scope as $sc)
                                                    @if($sc->scope_id==$scope_select)
                                                        <option value="{{ $sc->scope_id }}" selected>{{$sc->scope_name}} SN {{ $sc->scope_serial }} [{{ $sc->scope_model }}]</option>
                                                    @else
                                                        <option value="{{ $sc->scope_id }}">{{$sc->scope_name}} SN {{ $sc->scope_serial }} [{{ $sc->scope_model }}]</option>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <audio loop autoplay>
                                            <source src="{{fileconfig("sound/capture/silence32min.mp3")}}" type="audio/mpeg">
                                            Your browser does not support the audio element.
                                        </audio>
                                        <button id="start" class="btn btn-success start_time" style="{{$btn_start}}">START</button>
                                        <button id="stop" class="btn btn-danger" style="{{$btn_finish}}">FINISH</button>
                                    </td>
                                    <td>
                                        <div class="row">
                                            <div class="col-6">
                                                <input id="time_start" type="text" value="{{$time_start}}" class="form-control savejson" readonly>
                                            </div>
                                            <div class="col-6">
                                                <input id="time_finish" type="text" value="{{$time_finish}}" class="form-control savejson" readonly>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 id="test">IMAGE <font id="num_img">0</font></h4>
                                    </td>
                                    <td><font id="txt"></font></td>
                                </tr>
                            </thead>
                        </table>

                        <div class="smooth-scroll" id="pic_list" style="height:100%;overflow:auto;overflow-x:hidden;">

                            @php
                                $count_img = 0;
                                $dir = '../ScreenRecord';
                                $str = '';

                                if (is_dir($dir)) {
                                    if ($dh = opendir($dir)) {
                                        // dd(readdir($dh));
                                        while (($file = readdir($dh)) !== false) {
                                            $pic = explode('_',$file);
                                            if($pic[0]==$case->case_id){
                                                if(substr($file,-3) == "jpg" || substr($file,-3) == "png"){
                                                    $count_img++;
                                                }
                                            }
                                        }
                                        closedir($dh);
                                    }
                                }

                                if (is_dir($dir)) {
                                    if ($dh = opendir($dir)) {
                                        // $reversed = array_reverse($dh);

                                        $arr = array();

                                        while (($file = readdir($dh)) !== false) {
                                            $pic = explode('_',$file);
                                            if($pic[0]==$case->case_id){
                                                if(substr($file,-3) == "jpg" || substr($file,-3) == "png"){
                                                    $arr[] = $file;
                                                }
                                            }

                                        }

                                        $invert = array_reverse($arr);

                                        foreach ($invert as $key) {
                                            $str .= "<img src='../../ScreenRecord/";
                                            $str .= $key;
                                            $str .= '?dkjlkj=';
                                            $str .= rand(10, 10000);
                                            $str .= "' width='100%'";
                                            $str .= "class='imgnew'";
                                            if($count_img!=1){
                                                $str .= "style=''";
                                            }
                                            $str .= "><div class='count_img'>$count_img</div>";
                                            // $str .= "<br>";
                                            $count_img--;
                                        }





                                        echo $str;
                                        closedir($dh);
                                    }
                                }
                            @endphp

                        </div>
                    </td>
                </tr>
        </table>
    </div>


    <script>

        var table_a = $("#table_a").height();
        var table_b = $("#table_b").height();
        var table_cal=table_a-table_b;

        console.log(table_a,table_b,table_cal);
        $('#pic_list').attr('style','height:'+555.625+'px;overflow:auto;overflow-x:hidden;');


    var stop = document.getElementById("stop");
    var time = document.getElementById("time");
    var start = document.getElementById("start");
    start.addEventListener("click", startTimer);

    var days = 0;
    var hours = 0;
    var mins = 0;
    var secs = 0;
    var timer;

    function startTimer() {
    if (timer == undefined) {
        setTimeout(function() {
        timer = setInterval(timerRun, 1000);
        }, 200);
        }
    }


    function timerRun() {
        if(secs < 59) {
            secs++;
        } else {
            secs = 0;
            mins++;
        }

        if(mins >= 59){
            mins = 0;
            hours++;
        }

        if(hours >= 23) {
            hours=0;
            days++;
    }

    var currentTime = checkZero(days)+ ":" +checkZero(hours)+ ":" + checkZero(mins) + ":"+ checkZero(secs);

        function checkZero(i) {
        if(i < 10) {i = "0" + i; }
        return i;
        }

        //time.textContent = currentTime;
    }

    stop.addEventListener("click", function() {
        if(secs<10){
            secs = '0'+secs;
        }
        if(mins<10){
            mins = '0'+mins;
        }
        if(hours<10){
            hours = '0'+hours;
        }
        $("#123").html(hours+':'+mins+':'+secs);
        if(timer != undefined) {
            clearInterval(timer);
                timer = undefined;
            days = 0;
            hours = 0;
            mins = 0;
            secs = 0;
        }
    });


    </script>
