@extends('layouts.layout_queue')
@section('style')
<link href="{{url('')}}/public/css/queues/queue.css" rel="stylesheet" type="text/css" />
<style>
    .bg-green-header{
        background: #197D6E;
        color: #fff;
    }
    .bg-green-body{
        background: #197d6e62;
    }
    .bg-green-header-s{
        background: #b2cfcb;
        color: #fff;
    }
    .bg-green-body-s{
        background: #d3d6d6;
    }

    .s-b:hover > .bg-green-header-s{
        transition: 0.6s;
        background: #197D6E;
        color: #fff;
    }
    .s-b:hover > .bg-green-body-s{
        transition: 0.6s;
        background: #197d6e62;
    }
    body{
        background: #fff;
    }
    td,th{
        font-size: x-small !important;
    }
</style>
@endsection

@section('content')
<div class="row m-0">
    <div class="col-lg">
        <a href="{{url('queue')}}" class="card text-center h-100">
            <div class="card-header bg-green-header p-3"><h2 class="m-0 text-light">ผู้ป่วยทั้งหมดวันนี้</h2></div>
            <div class="card-body bg-green-body p-5"><h1 class="m-0 text-dark">{{$queueall}}</h1></div>
        </a>
    </div>

    @foreach($tb_queuetype as $data)
        <div class="col-lg">
            <a href="{{url("queue")}}/{{$data['code']}}" class="card s-b text-center">
                <div class="card-header bg-green-header-s p-3"><h1 class="m-0 text-light">{{$data['name']}}</h1></div>
                <div class="card-body bg-green-body p-5"><h1 class="m-0 text-dark">{{$data['count']}}</h1></div>
            </a>
        </div>
    @endforeach

</div>

<div class="row m-0 mt-2">
    <div class="col-lg-6 mt-3">

        <h5 class="text-success">รายละเอียดรายการ</h5>
        <table class="table table-borderless">
            <thead class="border-bottom">
                <tr>
                    <th>รายการ</th>
                    <th>จำนวนทั้งหมด</th>
                    <th>จำนวนที่รอ</th>
                    <th>ระยะเวลารอคิวเฉลี่ย</th>
                    <th>ระยะเวลาเฉลี่ยในรายการ</th>
                </tr>
            </thead>
            <tbody>

                @foreach ($tb_queuetype as $data)
                <tr>
                    <td>{{$data['name']}}</td>
                    <td>{{$data['countall']}}</td>
                    <td>{{$data['count']}}</td>
                    <td>01:30 min.</td>
                    <td>15:30 min.</td>
                </tr>
                @endforeach

            </tbody>
            <tbody class="border-top">
                <tr>
                    <td colspan="2"></td>
                    <td>50</td>
                    <td>02.50 min.</td>
                    <td>11:10 min.</td>
                </tr>
            </tbody>
        </table>


    </div>

    <div class="col-lg-6 mt-3">

        <h5 class="text-success">Transection Detail</h5>
        <table class="table table-borderless">
            <thead class="border-bottom">
                <tr>
                    <th>เลขบัตรคิว</th>
                    <th>รายการ</th>
                    <th>ระยะเวลารอคิว</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($queuelast as $data)
                <tr>
                    <td>{{$data->q_number}}</td>
                    @php
                        $type = DB::table('tb_queuetype')->where('qtype_code',$data->q_type)->first();
                    @endphp
                    <td>{{@$type->qtype_name}}</td>
                    <td>{{$data->q_start}}</td>
                    <td>รอซักประวัติ</td>
                </tr>
                @endforeach
            </tbody>
        </table>

    </div>

    <div class="col-lg-6 mt-3">

        <h5 class="text-success">รายการข้ามคิวและยกเลิกคิว</h5>
        <table class="table table-borderless">
            <thead class="border-bottom">
                <tr>
                    <th>รายการ</th>
                    <th>การข้ามคิว</th>
                    <th>การยกเลิกคิว</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tb_queuetype as $data)
                <tr>
                    <td>{{$data['name']}}</td>
                    <td>{{$data['countskip']}}</td>
                    <td>{{$data['countcancel']}}</td>
                    <td><i class="far fa-folder"></i></td>
                </tr>
                @endforeach
            </tbody>
        </table>

    </div>


    <div class="col-lg-6 mt-3">

        <h5 class="text-success">รายละเอียดช่องบริการ</h5>
        <table class="table table-borderless">
            <thead class="border-bottom">
                <tr>
                    <th>ช่องบริการ</th>
                    <th>ชื่อผู้ให้บริการ</th>
                    <th>ระยะเวลาเข้าระบบ</th>
                    <th>Status</th>
                </tr>
            </thead>


            <tbody>
                @foreach ($queuehold as $data)
                <tr>
                    @php
                        $type = DB::table('tb_queuetype')->where('qtype_code',$data->q_type)->first();
                    @endphp
                    <td>{{$type->qtype_name}}</td>
                    <td>{{$data->q_number}}</td>
                    <td>{{$data->q_start}}</td>
                    <td>รอซักประวัติ</td>
                </tr>
                @endforeach
                {{-- <tr>
                    <td>ซักประวัติ01</td>
                    <td>พว.สดายุ ทองลอย</td>
                    <td>04:40 hr.</td>
                    <td>ซักประวัติ</td>
                </tr>
                <tr>
                    <td>ซักประวัติ02</td>
                    <td>พว.สมหญิง สมบูรณ์</td>
                    <td>02:40 hr.</td>
                    <td>เรียกคิว</td>
                </tr>
                <tr>
                    <td>นัดหมาย01</td>
                    <td>พว.สดายุ ทองคำดี</td>
                    <td>07:40 hr.</td>
                    <td>นัดหมาย</td>
                </tr>
                <tr>
                    <td>ซักประวัติ01</td>
                    <td>พว.สดายุ ทองลอย</td>
                    <td>04:40 hr.</td>
                    <td>ซักประวัติ</td>
                </tr> --}}
            </tbody>
        </table>

    </div>
</div>
@endsection



@section('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) {
        location.reload();
    });
</script>

@endsection