@extends('layouts.layout_kiosk')
@section('style')
<style>
    .text-queue{
        color: #197D6D;
        margin-top: 1em;
        padding: 1.2em;
        font-size: 2em;
    }
    .modal-content{
        border-radius: 40px;
        background: #fafafa;
    }
    .modal-body h1{
        color: #0d3f37;
    }
</style>
@endsection

@section('content')

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h1 class="display-3 mt-3 text-center">Print Queue</h1>
                    <img src="{{url('public/images/loading02.gif')}}" width="100%">
                </div>
            </div>
        </div>
    </div>



<div class="row m-0 p-4">
<div class="col-12">&nbsp;</div>
    <h1 class="text-light w-100 text-center display-4">
        กรุณาเลือกรายการเพื่อรับบัตรคิว
    </h1>
    <div class="col-12">&nbsp;</div>
    @foreach($tb_queuetype as $queuetype)
        <div class="col-12">
            <a  href_mockup ="{{url('mockup_queue4')}}"
                class       ="btn btn-light btn-lg w-100 text-queue add_queue callmodal"
                qtype_code  ="{{$queuetype->qtype_code}}"
                qtype_prefix="{{$queuetype->qtype_prefix}}"
            >
                <h1 class="display-3">{{$queuetype->qtype_textpatient}}</h1>
            </a>
        </div>
    @endforeach

</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.emit('queue','refreshdata');
    </script>

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

    $(".callmodal").click(function(){
        $('#exampleModal').modal('show');
    });

    $(".add_queue").click(function(){
        var qtype_code      = $(this).attr('qtype_code');
        var qtype_prefix    = $(this).attr('qtype_prefix');
        var value = "none";
        if(value!=null){
            $.post("{{url('queue')}}",{
                event           : "queue_new",
                self_ip         : "{{configTYPE('queue','queue_print_ip')}}",
                value           : value,
                qtype_code      : qtype_code,
                qtype_prefix    : qtype_prefix,
            },function(data, status){
                socket.emit('queue','refreshdata');
                setTimeout(() => {
                    $('#exampleModal').modal('hide');
                }, 1500);

            });
        }else{}

        $('#text_new_hn').val('');
        $('#text_old_hn').val('');

    });


    setTimeout(() => {
        location.reload();
    }, 300000);


    </script>
@endsection