@php
    $ds             = ((disk_total_space("D:/")/1024)/1024)/1024;
    $ds             = intval($ds);
    $drive          = ((disk_free_space("D:/")/1024)/1024)/1024;
    $drive          = intval($drive);
    $persen         = ($drive*100)/$ds;
    $persen         = 100-intval($persen);
    $drive_color    = 'bg-success';
    if($persen<=24)                 {$drive_color = '';}
    if($persen>25 && $persen<=49)   {$drive_color = 'bg-success';}
    if($persen>50 && $persen<=74)   {$drive_color = 'bg-info';}
    if($persen>75 && $persen<=89)   {$drive_color = 'bg-warning';}
    if($persen>=90)                 {$drive_color = 'bg-danger';}
@endphp

<!DOCTYPE html>
<html lang="en">
<head>
    <title>EndoINDEX</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="{{ url('public/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ url('public/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ url('public/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ url('public/images/favicon.png') }}" rel="shortcut icon">
    <link href="{{ url('public/camera/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ url('public/camera/jquery.min.js') }}"></script>
    <script src="{{ url('public/camera/bootstrap.min.js') }}"></script>
    <script src="{{ url('public/plugins/jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <link href="{{ url('public/css/camera/camera.css') }}" rel="stylesheet" type="text/css" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <style>
        .box-vdo i{color:black;}
        .box-vdo.active{background: red !important;}
        .box-vdo.active i{color: #fff;}
        body{height: 100vh;}
        #set_page_top{display: none;}
        @media (min-height: 1000px) {
            #set_page_top{display: block;}
        }
        .on_menu{display: none;}
        .on_menu.active{display:block;}
    </style>

<body>
    @include('EndoCAPTURE.camera.modal.modal_new_case')
    @include('EndoCAPTURE.camera.modal.camera_setting')

    <div class="modal fade" id="end_procedure" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-center text-primary">สิ้นสุดการทำหัตถการ </h2>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id="element">
        <input id="vdo_play" type="hidden" value="stop">

        @php
            $admin['controllername'] = "CameraController";
            $admin['viewname']       = "endocapture/camera/new";
            cardADMIN($admin);
        @endphp



        @include('endocapture.camera.01head')

        <div id="container" style="background: #212020;position: absolute;width: 100%;height:100%;padding-left: 30px;">
            <br id="set_page_top">
            <div class="row" style="width: 100%;height: 97%;">
                @include('endocapture.camera.02left')
                <div class="col-xl-9 col-lg-10" style="height: 100vh;">
                    @if(!isset($patient->hn))
                    <div class="bar_test bg-danger w-100 text-center h3 py-4"> ท่านกำลังทดสอบระบบกล้อง</div>
                    @endif
                    <div class="row m-0" style="height: 100vh;">
                        <div class="col-lg-12 h-80 mb-2">
                            <div class="row m-0 h-100" style="align-items: center;">
                                <img id="image1" src="{{"http://localhost:5000/video?source=0&hn=$case->case_hn&caseuniq=$case->caseuniq&cid=$case->case_id"}}" class="col-lg-12 h-100 p-0 set_class_camera">
                                <img id="image2" class="col-lg-6 d-none p-0 set_class_camera">
                                <img id="image3" class="col-lg-6 d-none p-0 set_class_camera">
                                <img id="image4" class="col-lg-6 d-none p-0 set_class_camera">
                            </div>
                        </div>
                        <div class="col-lg-12 h-10">
                            <div class="row m-0">
                                <div class="col-4 px-2 mh-178px">
                                    <div class="row m-0">
                                        <div class="col-12 p-0">
                                            <label for="" class="text-light">STATUS</label>
                                        </div>
                                    </div>
                                    <div class="row bg-black mh-153px">
                                        <div class="col-12 p-0">
                                            <div class="row m-0 p-0 py-2 bg-black">
                                                <div class="col-6"><b class="text-light">Switch Status</b></div>
                                                <div class="col-auto">

                                                    <b id="usb_on" style="color: green">Connect</b>
                                                    <b id="usb_off" style="color: red;display:none">Disconnect</b>
                                                </div>
                                                <div class="col text-right">
                                                    <i class="fa fa-undo text-light" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                            <div class="row m-0 p-0 py-2 bg-black">
                                                <div class="col-6 "><b class="text-light">Live Stream</b></div>
                                                <div class="col-auto pt-1">
                                                    <label class="switch mb-0">
                                                        <input type="checkbox" id="open_key">
                                                        <span class="slider round"></span>
                                                    </label>
                                                </div>
                                                <div class="col switch-key">
                                                    <div class="input-group set-group">
                                                        <div class="input-group-prepend">
                                                          <div class="input-group-text"><i class="fa fa-key text-dark m-2" aria-hidden="true"></i></div>
                                                        </div>
                                                        <input type="number" class="form-control form-control-sm show-key" id="inlineFormInputGroupUsername" placeholder="Key" min="100000" max="999999">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m-0 p-0 py-2 bg-black pb-11">
                                                <div class="col-6"><b class="text-light">Storage</b></div>
                                                <div class="col-6">
                                                    <div class="progress mb-0">
                                                        <div class="progress-bar {{$drive_color}}" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: {{$persen}}%"></div>
                                                    </div>
                                                    <small class="text-light">{{$drive}} GB / {{$ds}} GB &emsp;({{$persen}}%)</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6 p-0 mh-178px px-5">
                                    <div class="row m-0">
                                        <div class="col p-0"><label for="" class="text-light">VIDEO SOURCE</label></div>
                                        <div class="col p-0 text-right"><label for="text-light"  data-toggle="modal" data-target="#camera_setting"><i class="fa fa-cog" aria-hidden="true"></i> SETTING</label></div>
                                    </div>

                                    <div class="row bg-black mh-153px">
                                        @for($i=1;$i<=4;$i++)
                                            <div class="col-3 pt-4 on_menu @if($i==1) active @endif @if(@$connection["camera_$i"]=='on') active @endif" id="menu_set_{{$i}}">
                                                <b class="mt-3" id="name_label_{{$i}}">@if(isset($connection["name_camera$i"])) {{$connection["name_camera$i"]}} @else Text {{$i}} @endif</b>
                                                <select name="" class="form-control mt-2"></select>
                                                <div class="row m-0 mt-2">
                                                    <div class="col-auto p-1">
                                                        <button id="capture{{$i}}" class="btn btn-light btn-sm"><i class="fa fa-camera fa-lg" aria-hidden="true"></i></button>
                                                    </div>
                                                    <div class="col-auto p-1">
                                                        <button id="btnvdo{{$i}}" source="0" sub="1" class="{{@$config->btnvdo1}} btn btn-light btn-sm box-vdo" time="time_{{$i}}">
                                                            <i class="fa fa-dot-circle-o fa-lg" aria-hidden="true"></i>
                                                        </button>
                                                    </div>
                                                    <div class="col p-1"></div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="row m-0">
                                        @if(isset($patient->hn))
                                        <div class="col-12 text-right">
                                            <button class="btn btn-success info2 text-light make_report btn-lg px-5"><h4 class="m-0"><i class="fa fa-file-text-o mr-2 fa-2xs" aria-hidden="true"></i> REPORT</h4></button>
                                        </div>
                                        <div class="col-12 text-right">
                                                <button class="btn btn-primary btn-lg text-light mt-4 select_newcase" data-toggle="modal" data-target="#modal_new_case">
                                                    <h4 class="m-0">&nbsp;<i class="fa fa-plus mr-2" aria-hidden="true"></i> NEW CASE</h4>
                                                </button>
                                            </div>
                                            @endif
                                        <div class="col-12 text-right">
                                            <a href="{{url("loadpic2server/$case->case_id")}}" class="btn btn-info info2 text-light btn-lg  mt-4"><h4 class="m-0"><i class="fa fa-home mr-2 fa-2xs" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HOME&nbsp;&nbsp;&nbsp;&nbsp;</h4></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @include('endocapture.camera.04controller')
                        <table class="w-100" border="1" style="display: none;">
                            <tr>
                                <td>
                                    <div style="z-index:99999;position: absolute;opacity:0;width: fit-content;">
                                        <h1 id="p2p" style="">aaaa</h1>
                                        <h1 id="vdoplay"></h1>
                                        <h1 id="timecount"></h1>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="relative" style="width:100%;">

                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include("EndoCAPTURE.camera.modal.camera_alert")
    @include("EndoCAPTURE.camera.modal.camera_menu")
    @include("EndoCAPTURE.camera.modal.vdoplay_alert")
    @include("EndoCAPTURE.camera.modal.modal_casetest")
    @include("EndoCAPTURE.camera.modal.modal_nodata")

    @include("EndoCAPTURE.camera.modal.modal_detailscope")
    @include("EndoCAPTURE.camera.modal.modal_progress_camera")
    @include("EndoCAPTURE.camera.modal.modal_vdo_render")
</body>

</html>


<script src="{{ url('public/camera/DetectRTC.js') }}"> </script>
<script src="{{ url('public/camera/EBML.js') }}"></script>

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

<script>
    ck_pcd()
    function ck_pcd(){
        var ck_pcd = $(".name-select").length
        for(i=0;i<ck_pcd;i++){
            var this_pcd_have = $($(".name-select")[i]).text()
            $('.select-pcd option[text_pcd="'+this_pcd_have+'"]').attr('disabled',true)
        }
    }
    $('#submit_newprocedure').on('click',function(){
        var this_pcd_value = $(".select-pcd").val()
        if(this_pcd_value!=0){
            $.post('{{url('jquery')}}',{
                event               : 'camera_copy_pcd',
                case_procedurecode  : this_pcd_value,
                case_id             : "{{$case->case_id}}",
                this_url            : "{{url("")}}"
            },function(data,status){
                location.replace('{{url("camera")}}/'+data);
                ck_pcd()
            });
        }else{
            alert("this zero");
        }
    });
</script>

<script>
    let vdo_render      = false;
    let make_report     = false;
    let cameraselect    = true;
    $("#num_img").text('{{ $count_img }}');
</script>


<script>
    $('.make_report').click(function() {
        $(this).prop("disabled", true);
        make_report = true;
        var vdo_play = $('#vdo_play').val();
        var pt_time         = $('#pt_time').val();
        var start_time      = $('#start_time').val();
        var withdrawal_time = $('#withdrawal_time').val();
        if(pt_time!="" || start_time!="" || withdrawal_time!=""){
            call_time('end_time');
        }


        setTimeout(() => {
            if (vdo_play == "start") {
                $('#vdoplay_alert').modal('show');
            } else {
                $('#modal_progress_camera').modal('show');
                $('#make_report').prop("disabled", true);
                if (vdo_render) {
                    $('#modal_vdo_render').modal('show');
                } else {
                    $('#finishcamera').submit();
                }
            }
        }, 800);

    });

</script>

<script>
    var recording_start = new Audio("{{ fileconfig('sound/capture/recording_start.mp3') }}");
    var recording_stop  = new Audio("{{ fileconfig('sound/capture/recording_stop.mp3') }}");
    var audio2          = new Audio("{{ fileconfig('sound/capture/incorrect.mp3') }}");
    var audio_casetest  = new Audio("{{ fileconfig('sound/capture/alert.mp3') }}");
    var audio           = new Audio("{{ fileconfig('sound/capture/shutter.mp3') }}");
    var sel_scope = $('#select_scope').val();
    if (sel_scope != 0) {
        $('#btn-start-recording').prop('disabled', false);
    }

    $("#none_scope").click(function() {
        $('#myModal').modal('show');
    });

    function playAudio() {
        audio2.play();
        $('#camera_alert').modal('show')
    }


    $('.savejson').bind('focusout', function() {
        var this_id = $(this).attr('id');
        var this_type = $(this).attr('type');
        var this_table = $(this).attr('table');
        if (typeof this_table === 'undefined') {
            this_table = "tb_case";
        }
        if (this_type == "checkbox") {
            $.post('{{ url('photomove') }}', {
                event: 'savejson',
                name: this_id,
                value: $(this).prop('checked'),
                table: this_table,
                field: 'case_json',
                id: '{{ @$case->case_id }}',
                comcreate: '{{ @$case->comcreate }}',
                procedure: '{{ @$case->case_procedure }}',
            }, function(data, status) {});
        } else {
            $.post('{{ url('photomove') }}', {
                event: 'savejson',
                name: this_id,
                value: $('#' + this_id).val(),
                table: this_table,
                field: 'case_json',
                id: '{{ @$case->case_id }}',
                comcreate: '{{ @$case->comcreate }}',
                procedure: '{{ @$case->case_procedure }}',
            }, function(data, status) {});
        }
    });
</script>


<script>
    $('#make_report').click(function() {
        var vdo_play = $('#vdo_play').val();
        if (vdo_play == "start") {
            $('#vdoplay_alert').modal('show');
        } else {
            $('#modal_progress').modal('show');
            $('#make_report').prop("disabled", true);
            $('#finishcamera').submit();
        }
    });

    $('.select_newcase').click(function() {
        make_report = true;
        var vdo_play = $('#vdo_play').val();
        var pt_time         = $('#pt_time').val();
        var start_time      = $('#start_time').val();
        var withdrawal_time = $('#withdrawal_time').val();
        if(pt_time!="" || start_time!="" || withdrawal_time!=""){
            call_time('end_time');
        }
    });

    function showdata(data) {
        json = JSON.parse(data);
        console.log(json);
        if (json.type == "nodata") {
            $('#modal_nodata').modal('show');
            setTimeout(function() {
                $('#modal_nodata').modal('hide');
            }, 2000);
        }

        if (json.type == "scope") {
            $('#modal_detailscope').modal('show');
            setTimeout(function() {
                $('#modal_detailscope').modal('hide');
            }, 2000);
            $('#select_scope').val(json.id);
            $("#btn_capture").show();
            $('#btn-start-recording').prop('disabled', false);
            $("#none_scope").hide();
            $('#scope_id').val(json.id);
            $('#scope_name').val(json.scope_name);
            $('#scope_model').val(json.scope_model);
            $('#scope_serial').val(json.scope_serial);
        }
    }
</script>


<script src="http://{{ webconfig('server_name') }}:3000/socket.io/socket.io.js"></script>
<script>
    var socketserver = io.connect('http://{{ webconfig('server_name') }}:3000');
    socketserver.emit('queue', 'refreshdata');
</script>


<script src="http://{{ $_SERVER['SERVER_NAME'] }}:3000/socket.io/socket.io.js"></script>
<script>

    //
        // $("#camera_setting").modal("show");
    //

    var socket = io.connect('http://{{ $_SERVER['SERVER_NAME'] }}:3000');
    function reload_node() {socket.emit('chat message', 11);}
    socket.emit('changecamera0', 1);
    socket.emit('changecamera1', 1);

    socket.on('camera_ocr', function(msg) {
        var camera_ocr = JSON.parse(msg);

        if(camera_ocr[0]=="0"){
            if($('#scopes_1 option[sub="'+camera_ocr[1]+'"]').length > 0){
                var save_select = $('#scopes_1 option[sub="'+camera_ocr[1]+'"]').val();
                $('#scopes_1').val(save_select).change();
                var scope_id = $('#scopes_1').val();
                socket.emit('changecamera0', scope_id);
                track_capture();
            }
        }
        if(camera_ocr[0]=="1"){
            if($('#scopes_2 option[sub="'+camera_ocr[1]+'"]').length > 0){
                var save_select = $('#scopes_2 option[sub="'+camera_ocr[1]+'"]').val();
                $('#scopes_2').val(save_select).change();
                var scope_id = $('#scopes_2').val();
                socket.emit('changecamera1', scope_id);
            }
        }

        if(camera_ocr[0]=="black"){
            $("#camera_menu").modal('show');
        }
        console.log(msg);
    });

    socket.on('filename', function(msg) {
        var numtext = $("#num_img").text();
        $("#num_img").text(parseInt(numtext) + 1);
        var number =  $("#num_img").text();
        $("#pic_list").prepend("<img src='../../ScreenRecord/" + msg +"' width='100%' class='imgnew'><div class='count_img'>"+number+"</div>");

        $.post("{{ url('camera') }}", {
            event: "checkblack",
            name_img : msg
        }, function(data, status) {
            json = JSON.parse(data);
            console.log(json);
            if (json.status == "black") {audio2.play();}
        });

    });

    socket.on('chat message', function(msg) {
        console.log(msg);
        if (msg == 1) {
            var camera01 = $("#camera01").val();
            var camera02 = $("#camera02").val();
            var scopes_1 = $("#scopes_1").val();


            if(scopes_1 !="" && camera01==0 || camera01==1){
                audio.play();
                socket.emit('capture',camera01);
            }else{
                $("#camera_alert").modal("show");
            }

            if(camera02==0 || camera02==1){
                audio.play();
                socket.emit('capture',camera02);
            }
        }

        if (msg == 2) {


            //คำสั่งให้บันทึก VDO
            if($(".box-vdo").hasClass('active')){
                $.post("{{ url('camera') }}", {
                    event: "python_vdostop",
                }, function(data, status) {});
                recording_stop.play();
                $(".box-vdo").removeClass('active');
                setTimeout(() => {
                    location.reload();
                }, 2000);
                $("#camera01").attr("disable",false);
                $("#camera02").attr("disable",false);

            }else{
                $.post("{{ url('camera') }}", {
                    event: "python_vdostart",
                }, function(data, status) {});
                recording_start.play();
                $("#camera01").prop("disable",'disabled');
                $("#camera02").prop("disable",'disabled');
                $(".box-vdo").addClass('active')
            }
        }

        if (msg=="usb_on"){
            $("#usb_on").show();
            $("#usb_off").hide();
        }

        if (msg=="usb_off"){
            $("#usb_on").hide();
            $("#usb_off").show();
        }






    });



    function track_capture(){
        var scope_id    = $("#scopes_1").val();
        var room        = $("#room").val();

        console.log(cameraselect);

        if(scope_id>0 && room!="" && cameraselect==true){
            $.post("http://{{configTYPE("admin","server_name")}}/{{configTYPE("admin","app_name")}}/api/track", {
                event       : "track_capture",
                scope_id    : scope_id,
                room        : room,
                userID      : "{{$userID}}",
                caseuniq    : "{{@$caseuniq}}"
            }, function(data, status){});
            cameraselect = false;
        }

    }

    $('#scopes_1').change(function(){
        var scope_id = $('#scopes_1').val();
        if(scope_id!=""||scope_id!=null){
            socket.emit('changecamera0', scope_id);
            cameraselect = true;
        }
    });

    $('#scopes_2').change(function(){
        var scope_id = $('#scopes_2').val();
        if(scope_id!=""||scope_id!=null){socket.emit('changecamera1', scope_id);}
    });

    $("#capture1").on('click',function(){
        var camera01 = $("#camera01").val();
        var scopes_1 = $("#scopes_1").val();
        if(scopes_1 !="" &&camera01==0 || camera01==1){
            audio.play();
            socket.emit('capture',camera01);
            track_capture();
        }else{
            $("#camera_alert").modal('show')
        }
    });

    $("#capture2").on('click',function(){
        var camera02 = $("#camera02").val();
        audio.play();
        socket.emit('capture',1);
    });


    $("#btnvdo2").on('click',function(){
            var camera02 = $("#camera02").val();
            var source  = 1;
            var sub     = $(this).attr("sub");

            var camera = $("#camera02").val();
            var component_name = $(this).attr("id");
            if($(this).hasClass('active')){
                if(camera!='Select source'){
                    $.post("{{ url('camera') }}", {
                        event: "python_vdostop",
                        source: camera
                    }, function(data, status) {});
                }
                caseconfig("{{$id}}",component_name,"");
                recording_stop.play();
                $(this).removeClass('active')
                aaaaaaaa(sub,camera);
                $(".select-source[sub='"+sub+"']").attr('disabled',false)
            }else{
                $.post("{{ url('camera') }}", {
                    event: "python_vdostart",
                    source: camera
                }, function(data, status) {});
                caseconfig("{{$id}}",component_name,"active");
                recording_start.play();
                $(this).addClass('active')
                $(".select-source[sub='"+sub+"']").attr('disabled',true)
            }
    })

    $("#btnvdo1").on('click',function(){
            var camera01 = $("#camera01").val();
            var source  = $(this).attr("source");
            var sub     = $(this).attr("sub");
        if(camera01==0 || camera01==1){
            var camera = $("#camera01").val();
            var component_name = $(this).attr("id");

            if($(this).hasClass('active')){
                if(camera!='Select source'){
                    $.post("{{ url('camera') }}", {
                        event: "python_vdostop",
                        source: camera
                    }, function(data, status) {});
                }
                caseconfig("{{$id}}",component_name,"");
                recording_stop.play();
                $(this).removeClass('active')
                aaaaaaaa(sub,camera);
                $(".select-source[sub='"+sub+"']").attr('disabled',false)
            }else{
                $.post("{{ url('camera') }}", {
                    event: "python_vdostart",
                    source: camera
                }, function(data, status) {});
                caseconfig("{{$id}}",component_name,"active");
                recording_start.play();
                $(this).addClass('active')
                $(".select-source[sub='"+sub+"']").attr('disabled',true)
            }
        }else{
            $("#camera_alert").modal('show')
        }
    })

    $(".select-source").on("change",function(){
        var number_select   = $(this).attr('sub');
        var value_select    = $(this).val();
        var component_name  = $(this).attr("id");
        caseconfig("{{$id}}",component_name,value_select);
        var url_s = "http://localhost:5000/video?source="
        var uer_end = "&hn={{$case->case_hn}}&caseuniq={{$case->caseuniq}}&cid={{$case->case_id}}"
        if(value_select!='Select source'){
            $("#image"+number_select).addClass('d-flex').removeClass('d-none');
        }else{
            $("#image"+number_select).addClass('d-none').removeClass('d-flex');
        }

        if($($(".select-source")[0]).val()=='Select source'||$($(".select-source")[1]).val()=='Select source'){
            for(i=0;i<2;i++){
                var num = i+1;
                if($($(".select-source")[i]).val()!='Select source'){
                    $("#image"+num).removeClass('col-lg-6').addClass('col-lg-12');
                }else{
                    $("#image"+num).removeClass('col-lg-6').removeClass('col-lg-12');
                }
            }
        }else{
            $("#image1").removeClass('col-lg-12').addClass('col-lg-6')
            $("#image2").removeClass('col-lg-12').addClass('col-lg-6')
        }

        for(ii=1;ii<3;ii++){
            var full_url = '#';
            if($('.select-source[sub="'+ii+'"]').val()!=99){
                var full_url = url_s+$('.select-source[sub="'+ii+'"]').val()+uer_end
                $('#image'+ii).attr('src',full_url)
            }else{
                $('#image'+ii).attr('src',full_url)
            }
        }
    })



    function caseconfig(cid,component_name,value){
        $.post("{{ url('camera') }}", {
            event           : "caseconfig",
            cid             : cid,
            component_name  : component_name,
            value           : value
        }, function(data, status) {});
    }



    function aaaaaaaa(number_select,value_select){
        var url_s = "http://localhost:5000/video?source="
        var uer_end = "&hn={{$case->case_hn}}&caseuniq={{$case->caseuniq}}&cid={{$case->case_id}}"
        if(value_select!='Select source'){
            $('#image'+number_select).attr('src',"http://localhost/config/img/Pulse.gif").addClass('border-s');
            setTimeout(() => {
                var full_url = url_s+value_select+uer_end
                $('#image'+number_select).attr('src',full_url).removeClass('border-s');
                $("#image"+number_select).addClass('d-flex').removeClass('d-none');
            }, 2000);

        }else{
            $("#image"+number_select).addClass('d-none').removeClass('d-flex');
        }
        if($($(".select-source")[0]).val()=='Select source'||$($(".select-source")[1]).val()=='Select source'){
            for(i=0;i<2;i++){
                var num = i+1;
                if($($(".select-source")[i]).val()!='Select source'){
                    $("#image"+num).removeClass('col-lg-6').addClass('col-lg-12');
                }else{
                    $("#image"+num).removeClass('col-lg-6').removeClass('col-lg-12');
                }
            }
        }else{
            // $("#image1").removeClass('col-lg-12').addClass('col-lg-6')
            // $("#image2").removeClass('col-lg-12').addClass('col-lg-6')
        }
    }

</script>



@isset($text)
    <script>
        setTimeout(function() {
            audio_casetest.play();
            setInterval(function() {
                audio_casetest.play();
            }, 13000);
            $('#modal_casetest').modal('show');
        }, 60000);
    </script>
@endisset

@if (webconfig('com_name') != 'endocapture')
    <script>
        setInterval(function() {
            $.post("{{ url('synchronize') }}", {},
                function(data, status) {
                    if (data == "true") {
                        location.reload();
                    }
                });
            console.log("Connect server success!!!");
        }, 10000);
    </script>
@endif



@if (webconfig('camera_auto_start_time') && $time_start == '')
    <script>

        setTimeout(() => {
            var start_time  = $("#start_time").val();
            if(start_time==""){$("#btn_starttime").trigger("click");}
        }, 1000);
    </script>
@endif

<script>
    setTimeout(() => {
        var pt_time = $("#pt_time").val();
        if(pt_time==""){$("#btn_pttime").trigger("click");}
    }, 1000);
</script>


<script>

    $("#start").click(function(){
        var time = new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
        $('#time_start').val(time);
        $('#time_finish').val('');
        $('#time_start').focus();
        $(this).hide();
        $("#stop").show();
    });

    $("#stop").click(function(){
        var time = new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
        $('#time_finish').val(time);
        $('#time_finish').focus();
        $(this).hide();
        $("#start").show();
    });






function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}





$(".vdo_run").on('click',function(){
    var time_id = $(this).attr('time')
    if($(this).hasClass('btn-danger')){
        $("#"+time_id).removeClass('active')
        $(this).addClass('btn-light')
        $(this).removeClass('btn-danger')
    }else{
        $("#"+time_id).addClass('active')
        $(this).removeClass('btn-light')
        $(this).addClass('btn-danger')
    }
})

$("#switch_camera").on('change',function(){
    var camera_val = $(this).val()

    var e = 0;
    if(camera_val!=0){

        $("#image1").removeClass('col-lg-12')
        $("#image1").removeClass('h-100')
        $("#image1").addClass('col-lg-6')

        for(i=0;i<=camera_val;i++){
            e = i+1;
            $("#image"+e).attr('src',"http://localhost:5000/video?source="+i+"&hn=TEST20220901&caseuniq=220901131147&cid=13")
            $("#image"+e).addClass('d-flex')
            $("#image"+e).removeClass('d-none')
            $("#image"+e).removeClass('h-50')
            $("#image"+e).addClass('h-50')
        }
    }else{
        $("#image1").removeClass('col-lg-6')
        $("#image1").addClass('col-lg-12')
        $("#image1").addClass('h-100')
        for(i=1;i<=2;i++){
            e = i+1;
            $("#image"+e).removeClass('d-flex')
            $("#image"+e).addClass('d-none')
            $("#image"+e).removeClass('h-50')
        }
    }
    $(".list-camera").css('display','none')
    var countcamera = camera_val+1
    for(ii=0;ii<countcamera;ii++){
        $($(".list-camera")[ii]).css('display','flex')
    }
})
$(document).ready(function(){
  $("#search_case").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".list-cases").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
$(".switch").click(function(){
    if($("#open_key").is(':checked')){
        $('.switch-key').addClass('active')
    }else{
        $('.switch-key').removeClass('active')
    }
})
$(".fa-key").click(function(){
    $(".show-key").val(Math.floor(100000 + Math.random() * 900000))
})

$(".save_config").on('click change',function(){
    var type    = $(this).attr('type')
    var value   = $(this).val();
    var id      = $(this).attr('id');
    if(type=='checkbox'){
        if($(this).is(':checked')){
            value = 'on';
        }else{
            value = 'off'
        }
    }
    $.post("{{url('jquery')}}",{
        event   : "configcamera",
        id      : id,
        value   : value,
    },function(data, status){});
});
</script>


<script>
    {!!viewmode()!!}
</script>



    @isset($config->camera02)
        <script>
            setTimeout(() => {
                $("#camera02").val({{$config->camera02}}).change()
            }, 2000);
        </script>
    @endisset

    @isset($config->camera01)
        <script>
            setTimeout(() => {
                $("#camera01").val({{$config->camera01}}).change()
            }, 2000);
        </script>
    @endisset




@include('endocapture.camera.js.nurse_monitor')
