@php
    $view['day_all']    = $day_all;
    $view['month_all']  = $month_all;
    $view['year_all']   = $year_all;
@endphp

@extends('layouts.layout_queue')
@section('style')
<link href="{{url('')}}/public/css/queues/queue.css" rel="stylesheet" type="text/css" />
@endsection



@section('content')
    @php
    $admin['controllername'] = "endoQUEUE/QueueController";
    $admin['viewname']       = "endoqueue.control.home.blade.php";
    cardADMIN($admin);
    @endphp

    @component('EndoQUEUE.control.modal',$view)@endcomponent

    <div class="row m-0">
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card-body bg-success text-white p-0 rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr>
                                <th>ผู้ป่วยมาใหม่วันนี้</th>
                                <th id="count_regis_all">0</th>
                                <th class="text-right">ราย</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-4">
                            <button class="btn btn-primary btn-block" id="btn_new_hn" data-toggle="modal" data-target="#new_hn">
                                <i class="fas fa-plus"></i> เพิ่มผู้ป่วยใหม่
                            </button>
                        </div>
                        <div class="col-4">
                            <button class="btn btn-success btn-block add-none-hn">
                            <i class="fas fa-plus"></i> พิมพ์บัตรคิว
                            </button>
                        </div>

                    </div>

                </div>



            </div>
            <div class="row mt-2">
                <div class="col-lg-3">
                    <div class="card-body bg-danger-o-90 p-0 text-dark rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr class="top_left" id="wait_detail">
                                <th class="text-dark">รอซักประวัติ</th>
                                <th class="bg-danger rounded-lg" style="width: 2em;" id="count_regis_history"></th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card-body bg-warning-o-90 p-0 text-dark rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr class="top_left" id="wait_call">
                                <th class="text-dark">รอนัดหมาย</th>
                                <th class="bg-warning rounded-lg" style="width: 2em;" id="count_regis_appoint"></th>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row m-0 mt-2 left_wait" id="tb_wait_detail">
                <div class="card-body bg-danger-o-90 rounded-lg">
                    <div class="row m-0">
                        <div class="col-lg-6">
                            <h2>
                                เรียกคิวซักประวัติ
                            </h2>
                            <div class="row v-center" v-if="call_type == 'ซักประวัติ'">
                                {{-- <div class="col-lg-4 text-center">
                                    <h1>001</h1>
                                </div>
                                <div class="col-lg-8">HN 001</div> --}}
                            </div>
                        </div>
                        {{-- <div class="col-lg-6">
                            <button class="btn btn-next w-100 btn-call-top-queue" status="regis_history">เรียกคิว</button>
                        </div> --}}
                        <div class="col-lg-12">
                            <table class="table table-borderless table-red mt-4">
                                <thead>
                                    <tr>
                                        <th scope="col">เลขคิว</th>
                                        <th scope="col">HN</th>
                                        <th scope="col">ระยะเวลารอคิว</th>
                                        <th scope="col" colspan="3"></th>
                                    </tr>
                                </thead>
                                <tbody id="body_regis_history"></tbody>
                                <tbody id="body_regis_history_skip"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-0 mt-2 dp-none left_wait" id="td_wait_call">
                <div class="card-body bg-warning-o-90 rounded-lg">
                    <div class="row m-0">
                        <div class="col-lg-6">
                            <h2>
                                เรียกคิวนัดหมาย
                            </h2>
                            <div class="row v-center" v-if="call_type == 'นัดหมาย'">
                                {{-- <div class="col-lg-4 text-center">
                                    <h1></h1>
                                </div>
                                <div class="col-lg-8">HN 001</div> --}}
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <button class="btn btn-next w-100 btn-call-top-queue" status="regis_appoint">เรียกคิว</button>
                        </div>
                        <div class="col-lg-12">
                            <table class="table table-borderless table-orange mt-4">
                                <thead>
                                    <tr>
                                        <th scope="col">เลขคิว</th>
                                        <th scope="col">HN</th>
                                        <th scope="col">ระยะเวลารอคิว</th>
                                        <th scope="col" colspan="3"></th>
                                    </tr>
                                </thead>
                                <tbody id="body_regis_appoint"></tbody>
                                <tbody id="body_regis_appoint_skip"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-8">
                    <div class="card-body bg-success text-white p-0 rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr>
                                <th>ผู้ป่วยนัดทำหัตถการวันนี้</th>
                                <th id="count_operation_all">
                                    0
                                </th>
                                <th class="text-right">ราย</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-4">
                    <button class="btn btn-primary" id="operation_appoint" data-toggle="modal" data-target="#old_hn"><i class="fas fa-plus"></i> เพิ่มผู้ป่วยทำหัตถการ</button>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-3">
                    <div class="card-body bg-yellow-o-90 p-0 text-dark rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr class="top_left" id="wait_for_detail">
                                <th class="text-dark">รอซักประวัติ</th>
                                <th class="bg-yellow rounded-lg" style="width: 2em;" id="count_operation_history"></th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card-body bg-green-o-90 p-0 text-dark rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr class="top_left" id="wait_procedure">
                                <th class="text-dark">เตรียมทำหัตถการ</th>
                                <th class="bg-green rounded-lg" style="width: 2em;" id="count_operation_before"></th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card-body bg-success-o-90 p-0 text-dark rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr class="top_left" id="rest_procedure">
                                <th class="text-dark">ทำหัตถการ / พักพื้น</th>
                                <th class="bg-success rounded-lg" style="width: 2em;" id="count_operation_current"></th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card-body bg-darkblue-o-90 p-0 text-dark rounded-lg">
                        <table class="table text-white table-borderless m-0">
                            <tr class="top_left" id="go_home">
                                <th class="text-dark">กลับบ้าน / Ward</th>
                                <th class="bg-darkblue rounded-lg" style="width: 2em;" id="count_operation_after"></th>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>




            <div class="row m-0 mt-2">
                <div class="card-body bg-yellow-o-90 rounded-lg right_wait" id="tb_wait_for_detail">
                    <div class="row m-0">
                        <div class="col-lg-6">
                            <h2>
                                เรียกคิวซักประวัติ
                            </h2>
                            <div class="row v-center" v-if="call_type == 'ซักประวัติฺ'">
                                {{-- <div class="col-lg-4 text-center">
                                    <h1>001</h1>
                                </div>
                                <div class="col-lg-8">HN 001</div> --}}
                            </div>
                        </div>
                        {{-- <div class="col-lg-6">
                            <button class="btn btn-next-p w-100 btn-call-top-queue" status="operation_history">เรียกคิว</button>
                        </div> --}}
                        <div class="col-lg-12">
                            <table class="table table-borderless table-yellow mt-4">
                                <thead>
                                    <tr>
                                        <th scope="col">เลขคิว</th>
                                        <th scope="col">HN</th>
                                        <th scope="col">ระยะเวลารอคิว</th>
                                        <th scope="col" colspan="2"></th>
                                    </tr>
                                </thead>
                                <tbody id="body_operation_history"></tbody>
                                <tbody id="body_operation_history_skip"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-body bg-green-o-90 rounded-lg dp-none right_wait" id="tb_wait_procedure">
                    <div class="row m-0">
                        <div class="col-lg-6">
                            <h2>
                                เรียกคิวเตรียมตัวทำหัตถการ
                            </h2>
                            <div class="row v-center" v-if="call_type == 'ทำหัตถการ'">
                                {{-- <div class="col-lg-4 text-center">
                                    <h1>001</h1>
                                </div>
                                <div class="col-lg-8">HN 001</div> --}}
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <button class="btn btn-next-p2 w-100 btn-call-top-queue" status="operation_before">เรียกคิว</button>
                        </div>
                        <div class="col-lg-12">
                            <table class="table table-borderless table-yellow mt-4">
                                <thead>
                                    <tr>
                                        <th scope="col">เลขคิว</th>
                                        <th scope="col">HN</th>
                                        <th scope="col">ระยะเวลารอคิว</th>
                                        <th scope="col" colspan="2"></th>
                                    </tr>
                                </thead>
                                <tbody id="body_operation_before"></tbody>
                                <tbody id="body_operation_before_skip"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-body bg-success-o-90 rounded-lg dp-none right_wait" id="tb_rest_procedure">
                    <div class="row m-0">
                        {{-- <div class="col-lg-6">
                            <h2>
                                คิวที่กำลังทำหัตถการ
                            </h2>
                            <div class="row v-center">
                                <div class="col-lg-3" v-for="q in queue_pcd_03">
                                    <b>001</b>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <h2>
                                คิวที่กำลังพักพื้น
                            </h2>
                                <div class="col-lg-3" v-for="q in queue_pcd_04">
                                    <b>001</b>
                                </div>
                        </div> --}}
                        <div class="col-lg-12">
                            <table class="table table-borderless table-green mt-4 w-60">
                                <thead>
                                    <tr>
                                        <th scope="col">เลขคิว</th>
                                        <th scope="col">HN</th>
                                        <th scope="col">Status</th>
                                        <th scope="col"></th>
                                    </tr>
                                </thead>
                                <tbody id="body_operation_current">
                                    <tr v-for="q in queue_pcd_05" class="s_call_r">
                                        <th class="q_number">001</th>
                                        <td class="q_hn">001</td>
                                        <td><div class="bg-light text-dark rounded-lg text-center w-10 p-1">พักพื้น</div></td>
                                        <td></td>
                                    </tr>
                                    <tr v-for="q in queue_pcd_04" class="s_call_r">
                                        <th class="q_number">001</th>
                                        <td class="q_hn">001</td>
                                        <td><div class="bg-light text-dark rounded-lg text-center w-10 p-1">กำลังทำหัตถการ</div></td>
                                        <td></td>
                                    </tr>
                                    <tr v-for="q in queue_pcd_03" class="s_call_r">
                                        <th class="q_number">001</th>
                                        <td class="q_hn">001</td>
                                        <td><div class="bg-light text-dark rounded-lg text-center w-10 p-1">เตรียมตัวทำหัตถการ</div></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-body bg-darkblue-o-90 rounded-lg dp-none right_wait" id="tb_go_home">
                    <div class="row m-0">
                        {{-- <div class="col-lg-6">
                            <h2>
                                เรียกคิวรับผู้ป่วย
                            </h2>
                            <div class="row v-center">
                                <div class="col-lg-3" v-for="q in queue_pcd_06">
                                    <h1>001</h1>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                        </div> --}}
                        <div class="col-lg-12">
                            <table class="table table-borderless table-green mt-4">
                                <thead>
                                    <tr>
                                        <th scope="col">เลขคิว</th>
                                        <th scope="col">HN</th>
                                        <th scope="col"></th>
                                        <th scope="col"></th>
                                    </tr>
                                </thead>
                                <tbody id="body_operation_after"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <p id="calling"></p>
        </div>

        <div class="col-lg-12">
            <div class="card mt-5">
                <div class="card-body mh bg-light">
                    <h2>คิวที่ข้ามไป</h2>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>เลขคิว</th>
                            <th>HN</th>
                            <th>Time</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody id="skip_list"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>





@endsection



@section('script')

<script src='{{url('resources/box/js/box.js')}}'></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('queue', function(msg) {
        refreshdata();

        var calling = msg.search("calling");
        if(calling>0){
            var ex = JSON.parse(msg);
            QueueCALL(ex.calling);
        }


    });


    function refreshdata(){
        $.post('{{url('queue')}}',{
            event:'refreshdata'
        },function(data,status){
            var obj                             = JSON.parse(data);
            var regis_history                   = JSON.stringify(obj.regis_history);
            var regis_appoint                   = JSON.stringify(obj.regis_appoint);
            var operation_history               = JSON.stringify(obj.operation_history);
            var operation_before                = JSON.stringify(obj.operation_before);
            var operation_current               = JSON.stringify(obj.operation_current);
            var operation_after                 = JSON.stringify(obj.operation_after);

            var regis_history_skip              = JSON.stringify(obj.regis_history_skip);
            var regis_appoint_skip              = JSON.stringify(obj.regis_appoint_skip);
            var operation_history_skip          = JSON.stringify(obj.operation_history_skip);
            var operation_before_skip           = JSON.stringify(obj.operation_before_skip);
            var skip                            = JSON.stringify(obj.skip);

            box('#body_regis_history'           ,regis_history,             '{{url('resources/box/endoqueue/q02.html')}}');
            box('#body_regis_appoint'           ,regis_appoint,             '{{url('resources/box/endoqueue/q02.html')}}');
            box('#body_operation_history'       ,operation_history,         '{{url('resources/box/endoqueue/q02.html')}}');
            box('#body_operation_before'        ,operation_before,          '{{url('resources/box/endoqueue/q02.html')}}');
            box('#body_operation_current'       ,operation_current,         '{{url('resources/box/endoqueue/operation_current.html')}}');
            box('#body_operation_after'         ,operation_after,           '{{url('resources/box/endoqueue/operation_after.html')}}');

            box('#body_regis_history_skip'      ,regis_history_skip,        '{{url('resources/box/endoqueue/q01.html')}}');
            box('#body_regis_appoint_skip'      ,regis_appoint_skip,        '{{url('resources/box/endoqueue/q01.html')}}');
            box('#body_operation_history_skip'  ,operation_history_skip,    '{{url('resources/box/endoqueue/q01.html')}}');
            box('#body_operation_before_skip'   ,operation_before_skip,     '{{url('resources/box/endoqueue/q01.html')}}');
            box('#skip_list'                    ,skip,                      '{{url('resources/box/endoqueue/q_skip.html')}}');

            $('#count_regis_history')           .html(obj.count_regis_history);
            $('#count_regis_appoint')           .html(obj.count_regis_appoint);
            $('#count_operation_history')       .html(obj.count_operation_history);
            $('#count_operation_before')        .html(obj.count_operation_before);
            $('#count_operation_current')       .html(obj.count_operation_current);
            $('#count_operation_after')         .html(obj.count_operation_after);
            $('#count_regis_all')               .html(obj.count_regis_all);
            $('#count_operation_all')           .html(obj.count_operation_all);

            // console.log(obj);
        });
    }


    setTimeout(()=>{refreshdata();},500);

    var ขอเชิญหมายเลข    = new Audio("{{fileconfig('sound/queue/th/เชิญหมายเลข.wav')}}");
    var sound0  = new Audio("{{fileconfig('sound/queue/th/0.wav')}}");
    var sound1  = new Audio("{{fileconfig('sound/queue/th/1.wav')}}");
    var sound2  = new Audio("{{fileconfig('sound/queue/th/2.wav')}}");
    var sound3  = new Audio("{{fileconfig('sound/queue/th/3.wav')}}");
    var sound4  = new Audio("{{fileconfig('sound/queue/th/4.wav')}}");
    var sound5  = new Audio("{{fileconfig('sound/queue/th/5.wav')}}");
    var sound6  = new Audio("{{fileconfig('sound/queue/th/6.wav')}}");
    var sound7  = new Audio("{{fileconfig('sound/queue/th/7.wav')}}");
    var sound8  = new Audio("{{fileconfig('sound/queue/th/8.wav')}}");
    var sound9  = new Audio("{{fileconfig('sound/queue/th/9.wav')}}");
    var soundA  = new Audio("{{fileconfig('sound/queue/th/A.wav')}}");
    var soundC  = new Audio("{{fileconfig('sound/queue/th/C.wav')}}");

    var calling = false;

    $('#btn_order_queue').click(function(){
        if(calling===false){Calling();}
    });




    $('.btn-call-top-queue').click(function(){
        var status = $(this).attr('status');
        // alert("status : "+status);
    });

    function Calling(){
        console.log("Calling");
        calling=true;
        $.post('{{url('queue')}}',{
            event:"calling",
        },function(data,status){
            var json = JSON.parse(data);
            if(json.agian==true){
                socket.emit('queue','{"calling":"'+json.queuenumber+'"}');
                // QueueCALL();
                setTimeout(() => {
                   Calling();
                }, 7000);
            }else{
                calling = false;
            }
        });
    }


    function QueueCALL(number){
        const myArr = number.split("");
        ขอเชิญหมายเลข.play();
        setTimeout(() => {myArr.forEach(numberQUEUE);}, 1000);
    }

    function numberQUEUE(item, index) {
        var time = (1+index)*1000;
        setTimeout(() => {
            if(item=="A"){soundA.play()}
            if(item=="C"){soundC.play()}
            if(item=="0"){sound0.play()}
            if(item=="1"){sound1.play()}
            if(item=="2"){sound2.play()}
            if(item=="3"){sound3.play()}
            if(item=="4"){sound4.play()}
            if(item=="5"){sound5.play()}
            if(item=="6"){sound6.play()}
            if(item=="7"){sound7.play()}
            if(item=="8"){sound8.play()}
            if(item=="9"){sound9.play()}
        }, time);
    }

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

@component('EndoQUEUE.component.script')@endcomponent

<script>
    var count_time  = 0;
    var hour        = 0;
    var minute      = 0;
    setInterval(function(){
        count_time = $(".q_start").length;
        for(x=0;x<count_time;x++){
            hour = parseInt($($(".q_start")[x]).attr('hour'));
            minute = parseInt($($(".q_start")[x]).attr('minute'));
            if(minute>=60){
                hour = hour+1;
                minute = 0;
            }else{
                minute = minute+1;
            }
            $($(".q_start")[x]).attr('hour',hour);
            $($(".q_start")[x]).attr('minute',minute);
            $($(".q_start")[x]).text(hour+' ชั่วโมง '+minute+' นาที');
            hour = 0;
            minute = 0;
        }
     }, 60000);
</script>



<script>



    setInterval(() => {
        $.post('queue',{event:"send2cloud"},function(data,stutus){
            console.log('send2cloud',data);
        });
    }, 10000);


</script>

@endsection