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

@section('modal')


<div class="modal fade" id="send_recuperate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success-o-90 border-n p-2">
                <h3 class="w-100 text-center m-0" id="exampleModalLongTitle">ส่งไปพักฟื้น</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>X
                </button>
            </div>
            <div class="modal-body">
                <div class="row v-center">
                    <input type="hidden" name="" id="recuperate_id">
                    <div class="col-6 text-center"><h2 id="recuperate_number"> </h2></div>
                    <div class="col-6"><h2 id="recuperate_hn"> </h2></div>
                </div>
            </div>
            <div class="modal-footer border-n">
                <button type="button" class="btn btn-success w-60" data-dismiss="modal" aria-label="Close" id="btn_recuperate">Confirm</button>
                <button type="button" class="btn btn-danger w-35" data-dismiss="modal" aria-label="Close">ยกเลิก</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="send_home" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success-o-90 border-n p-2">
                <h3 class="w-100 text-center m-0" id="exampleModalLongTitle">ส่งกลับบ้าน</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>X
                </button>
            </div>
            <div class="modal-body">
                <div class="row v-center">
                    <input type="hidden" name="" id="send_home_id">
                    <div class="col-6 text-center"><h2 id="send_home_number"> </h2></div>
                    <div class="col-6"><h2 id="send_home_hn"> </h2></div>
                </div>
            </div>
            <div class="modal-footer border-n">
                <button type="button" class="btn btn-success w-60" data-dismiss="modal" aria-label="Close" id="btn_send_home">Confirm</button>
                <button type="button" class="btn btn-danger w-35" data-dismiss="modal" aria-label="Close">ยกเลิก</button>
            </div>
        </div>
    </div>
</div>


@endsection

@section('content')
<div class="col-12">
    <div class="row m-0">
        <div class="col-lg-3">
            <div class="card-body bg-success text-white p-0 rounded-lg">
                <table class="table text-white table-borderless m-0">
                    <tr>
                        <th>&nbsp; ผู้ป่วยมาใหม่วันนี้</th>
                        <th></th>
                        <th class="text-right">ราย &nbsp;</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="row m-0 mt-3">
        <div class="col-6">
            <div class="row">
                <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>
                                <th class="text-dark">ทำหัตถการ / พักพื้น</th>
                                <th class="bg-success rounded-lg" style="width: 2em;"></th>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row m-0 mt-3">
        <div class="col-lg-12">
            <div class="card-body bg-success-o-90 text-dark rounded-lg">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-6">
                                <b>คิวที่กำลังทำหัตถการ</b><br>
                                <b v-for="q in queue_pcd_04"> &emsp;</b>
                            </div>
                            <div class="col-lg-6">
                                <b>คิวที่กำลังพักฟื้น</b><br>
                                <b v-for="q5 in queue_pcd_05"> &emsp;</b>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-borderless m-0 mt-5 table-green">
                    <thead>
                        <tr>
                            <th style="width: 8em;">เลขคิว</th>
                            <th style="width: 15em;">HN</th>
                            <th colspan="4">Status</th>
                        </tr>
                    </thead>
                    <tbody id="tb_procedure">
                        <tr v-for="q in queue_pcd_03">
                            <input type="hidden" name="">
                            <td>A01</td>
                            <td>HN123</td>
                            <td style="width: 15em;"><div class="bg-light text-dark rounded-lg text-center w-10 p-1">รอทำหัตถการ</div></td>
                            <td style="width: 15em;">
                                <div v-on:click="room_do(q.q_id,q.q_hn,q.q_number)" class="bg-success text-white rounded-lg text-center w-10 p-1">ทำหัตถการ</div>
                                </td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr v-for="q in queue_pcd_04">
                            <input type="hidden" name="">
                            <td>A01</td>
                            <td>HN123</td>
                            <td style="width: 15em;"><div class="bg-light text-dark rounded-lg text-center w-10 p-1">รอทำหัตถการ</div></td>
                            <td style="width: 15em;"><div class="bg-light text-dark rounded-lg text-center w-10 p-1">กำลังทำหัตถการ</div></td>
                            <td style="width: 15em;">
                                <div v-on:click="room_sleep(q.q_id,q.q_hn,q.q_number)" class="bg-success text-white rounded-lg text-center w-10 p-1">พักพื้น</div>
                            </td>
                            <td></td>
                        </tr>
                        <tr v-for="q in queue_pcd_05">
                            <td>A01</td>
                            <td>HN123</td>
                            <td style="width: 15em;"><div class="bg-light text-dark rounded-lg text-center w-10 p-1">รอทำหัตถการ</div></td>
                            <td style="width: 15em;"><div class="bg-light text-dark rounded-lg text-center w-10 p-1">กำลังทำหัตถการ</div></td>
                            <td style="width: 15em;"><div class="bg-light text-dark rounded-lg text-center w-10 p-1">พักพื้น</div></td>
                            <td>
                                <div v-on:click="wait_home(q.q_id,q.q_hn,q.q_numbe)" style="width: 15em;" class="bg-success text-white rounded-lg text-center w-10 p-1 ready">พร้อมกลับ</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>




@endsection



@section('script')

<script src='{{url('resources/box/js/box.js')}}'></script>


<script>
$(".ready").click(function(){
    alert();
});
</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();
        console.log('test');
    });


    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/q01.html')}}');
            box('#body_regis_appoint'           ,regis_appoint,             '{{url('resources/box/endoqueue/q01.html')}}');
            box('#body_operation_history'       ,operation_history,         '{{url('resources/box/endoqueue/q01.html')}}');
            box('#body_operation_before'        ,operation_before,          '{{url('resources/box/endoqueue/q01.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("{{ webconfig('store_url').'/config/sound/queue/th/เชิญหมายเลข.wav'}}");
    var sound0 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/0.wav'}}");
    var sound1 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/1.wav'}}");
    var sound2 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/2.wav'}}");
    var sound3 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/3.wav'}}");
    var sound4 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/4.wav'}}");
    var sound5 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/5.wav'}}");
    var sound6 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/6.wav'}}");
    var sound7 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/7.wav'}}");
    var sound8 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/8.wav'}}");
    var sound9 = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/9.wav'}}");
    var soundA = new Audio("{{ webconfig('store_url').'/config/sound/queue/th/A.wav'}}");
    var soundC = new Audio("{{ webconfig('store_url').'/config/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){
                QueueCALL(json.queuenumber);
                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>




@endsection