@extends('layout.base')
@section('title','Panggilan')

@section('Content')
<section class="pt-3">
    <div class="container-fluid">
        <div class="row pb-2">
            <div class="col-lg-8">
                <div class="fdb-box fdb-touch pt-3">
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <img src="{{ asset('img/LogoRadjak.png') }}" width="150 rem" class="img-fluid" alt="Responsive image">
                        <p class="h3" id="clock"></p>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-lg-12">
                            <div class="embed-responsive embed-responsive-16by9">
                                <video class="embed-responsive-item" loop autoplay muted>
                                    <source src="{{ asset('Video/P2D/Slide Antrian 13-10-2020.mp4') }}" type="video/mp4">
                                </video>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <form id="printTiket">
                            <input type="hidden" name="txtPanggilNoAntrian" id="txtPanggilNoAntrian">
                            <input type="hidden" name="txtPanggilPoliklinik" id="txtPanggilPoliklinik">
                            <input type="hidden" name="txtPanggilLoket" id="txtPanggilLoket">
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="col-lg-12 text-center mb-4">
                  <div class="fdb-box p-4" id="Loket1">
                    <h2>Loket 1</h2>
                    <h1 id="TampilPanggil1"></h1>
                  </div>
                </div>

                <div class="col-lg-12 text-center mb-4">
                  <div class="fdb-box p-4" id="Loket2">
                    <h2>Loket 2</h2>
                    <h2 id="TampilPanggil2"></h2>
                  </div>
                </div>

                <div class="col-lg-12 text-center mb-4">
                  <div class="fdb-box p-4" id="Loket3">
                    <h2>Loket 3</h2>
                    <h1 id="TampilPanggil3"></h1>
                  </div>
                </div>
            </div>
        </div>


    </div>
</section>
@endsection

@section('Ajax')
    <script>
        
        // hari, tanggal
        var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
        var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu'];
        var date = new Date();
        var day = date.getDate();
        var month = date.getMonth();
        var thisDay = date.getDay(),
            thisDay = myDays[thisDay];
        var yy = date.getYear();
        var year = (yy < 1000) ? yy + 1900 : yy;

        // waktu
        var serverTime = new Date(2025, 03, 15, 01, 57, 15, 0);
        var clientTime = new Date();
        var Diff = serverTime.getTime() - clientTime.getTime();

        function displayServerTime() {
            var clientTime = new Date();
            var time = new Date(clientTime.getTime() + Diff);
            var sh = time.getHours().toString();
            var sm = time.getMinutes().toString();
            var ss = time.getSeconds().toString();
            if(thisDay == 'Minggu'){
                DaySession = '1';
            }else if(thisDay == 'Senin'){
                DaySession = '2';
            }else if(thisDay == 'Selasa'){
                DaySession = '3';
            }else if(thisDay == 'Rabu'){
                DaySession = '4';
            }else if(thisDay == 'Kamis'){
                DaySession = '5';
            }else if(thisDay == 'Jum&#39;at'){
                DaySession = '6';
            }else if(thisDay == 'Sabtu'){
                DaySession = '7';
            }
            document.getElementById("clock").innerHTML = (thisDay + ', ' + day + ' ' + months[month] + ' ' + year) + " | <span class='text-primary'>" + (sh.length == 1 ? "0" + sh : sh) + ":" + (sm.length == 1 ? "0" + sm : sm) + "</span>";
        }

        $(document).ready(function(){

            /**Auto Refresh */
            setInterval(function() {
                displayServerTime();
            }, 1000);
            /**End of Auto Refresh */


            /**Sound */
            function terbilang() {
                // tunggu();
                var bilangan = $('#txtPanggilNoAntrian').val();
                var kalimat = "";
                var angka = new Array('0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0');
                var kata = new Array('', 'Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Tujuh', 'Delapan', 'Sembilan');
                var tingkat = new Array('', 'Ribu', 'Juta', 'Milyar', 'Triliun');
                var panjang_bilangan = bilangan.length;

                var nomor_urut = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "NomorUrut.mp3");
                var audio_2 = new Audio("{{ asset('Sound/Pendaftaran') }}/" + $('#txtPanggilNoAntrian').val() + ".mp3");
                var audio_silahkan = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "Loket.mp3");
                var audio_NamaPoli = new Audio("{{ asset('Sound/Pendaftaran') }}/" + $('#txtPanggilPoliklinik').val() + ".mp3");

                var satuan = new Audio("{{ asset('Sound/Pendaftaran') }}/" + bilangan.substr(1) + ".mp3");
                var satuanRatus = new Audio("{{ asset('Sound/Pendaftaran') }}/" + bilangan.substr(2) + ".mp3");

                var belasan = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "belas.mp3");

                var puluhan = new Audio("{{ asset('Sound/Pendaftaran') }}/" + bilangan.substr(0, 1) + ".mp3");
                var puluh = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "puluh.mp3");

                var ratusan = new Audio("{{ asset('Sound/Pendaftaran') }}/" + bilangan.substr(0, 1) + ".mp3");
                var seratus = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "seratus.mp3");
                var ratus = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "ratus.mp3");

                var seribu = new Audio("{{ asset('Sound/Pendaftaran') }}/" + "seribu.mp3");

                var loket = new Audio("{{ asset('Sound/Pendaftaran') }}/" + $('#txtPanggilLoket').val() + ".mp3");

                if (panjang_bilangan > 15) {
                    kalimat = "Diluar Batas";
                } else {
                    /* mengambil angka-angka yang ada dalam bilangan, dimasukkan ke dalam array */
                    for (i = 1; i <= panjang_bilangan; i++) {
                        angka[i] = bilangan.substr(-(i), 1);
                    }

                    var i = 1;
                    var j = 0;

                    /* mulai proses iterasi terhadap array angka */
                    while (i <= panjang_bilangan) {
                        subkalimat = "";
                        kata1 = "";
                        kata2 = "";
                        kata3 = "";

                        /* untuk Ratusan */
                        if (angka[i + 2] != "0") {
                            if (angka[i + 2] == "1") {
                                //kata1 = "Seratus";

                                nomor_urut.autoplay = true;
                                nomor_urut.load();
                                nomor_urut.addEventListener('ended', function() {
                                    audio_NamaPoli.autoplay = true;
                                    audio_NamaPoli.load();
                                    audio_NamaPoli.addEventListener('ended', function() {
                                        audio_NamaPoli.pause();
                                        kata1 = seratus.autoplay = true;
                                        kata1 = seratus.load();
                                        seratus.addEventListener('ended', function() {
                                            seratus.pause();
                                            audio_silahkan.autoplay = true;
                                            audio_silahkan.load();
                                            audio_silahkan.addEventListener('ended', function() {
                                                audio_silahkan.pause();
                                                loket.autoplay = true;
                                                loket.load();
                                                loket.addEventListener('ended', function(){
                                                    loket.pause();
                                                    selesai();
                                                });
                                            });
                                        });
                                    });
                                });
                            } else {
                                //kata1 = kata[angka[i + 2]] + " Ratus";
                                if (angka[i] != "0") {
                                    if (angka[i + 1] != "1") {
                                        nomor_urut.autoplay = true;
                                        nomor_urut.load();
                                        nomor_urut.addEventListener('ended', function() {
                                            audio_NamaPoli.autoplay = true;
                                            audio_NamaPoli.load();
                                            audio_NamaPoli.addEventListener('ended', function() {
                                                audio_NamaPoli.pause();
                                                kata1 = ratusan.autoplay = true;
                                                kata1 = ratusan.load();
                                                ratusan.addEventListener('ended', function() {
                                                    ratusan.pause();
                                                    ratus.autoplay = true;
                                                    ratus.load();
                                                });
                                                ratus.addEventListener('ended', function() {
                                                    ratus.pause();
                                                    satuanRatus.autoplay = true;
                                                    satuanRatus.load();
                                                    satuanRatus.addEventListener('ended', function() {
                                                        satuanRatus.pause();
                                                        audio_silahkan.autoplay = true;
                                                        audio_silahkan.load();
                                                        audio_silahkan.addEventListener('ended', function() {
                                                            audio_silahkan.pause();
                                                            loket.autoplay = true;
                                                            loket.load();
                                                            loket.addEventListener('ended', function(){
                                                                loket.pause();
                                                                selesai();
                                                            });
                                                        });
                                                    });
                                                });

                                            });
                                        });
                                    }
                                } else {
                                    nomor_urut.autoplay = true;
                                    nomor_urut.load();
                                    nomor_urut.addEventListener('ended', function() {
                                        audio_NamaPoli.autoplay = true;
                                        audio_NamaPoli.load();
                                        audio_NamaPoli.addEventListener('ended', function() {
                                            audio_NamaPoli.pause();
                                            kata1 = ratusan.autoplay = true;
                                            kata1 = ratusan.load();
                                            ratusan.addEventListener('ended', function() {
                                                ratusan.pause();
                                                ratus.autoplay = true;
                                                ratus.load();
                                            });
                                            ratus.addEventListener('ended', function() {
                                                ratus.pause();
                                                audio_silahkan.autoplay = true;
                                                audio_silahkan.load();
                                                audio_silahkan.addEventListener('ended', function() {
                                                    audio_silahkan.pause();

                                                });
                                            });
                                        });
                                    });
                                }

                            }
                        }

                        /* untuk Puluhan atau Belasan */
                        if (angka[i + 1] != "0") {
                            if (angka[i + 1] == "1") {
                                if (angka[i] == "0") {
                                    //kata2 = "Sepuluh";
                                    nomor_urut.autoplay = true;
                                    nomor_urut.load();
                                    nomor_urut.addEventListener('ended', function() {
                                        audio_NamaPoli.autoplay = true;
                                        audio_NamaPoli.load();
                                        audio_NamaPoli.addEventListener('ended', function() {
                                            audio_NamaPoli.pause();
                                            kata2 = audio_2.autoplay = true;
                                            kata2 = audio_2.load();
                                            audio_2.addEventListener('ended', function() {
                                                audio_2.pause();
                                                audio_silahkan.autoplay = true;
                                                audio_silahkan.load();
                                                audio_silahkan.addEventListener('ended', function() {
                                                    audio_silahkan.pause();
                                                    loket.autoplay = true;
                                                    loket.load();
                                                    loket.addEventListener('ended', function(){
                                                        loket.pause();
                                                        selesai();
                                                    });
                                                });
                                            });
                                        });

                                    });

                                } else if (angka[i] == "1") {
                                    //kata2 = "Sebelas";
                                    nomor_urut.autoplay = true;
                                    nomor_urut.load();
                                    nomor_urut.addEventListener('ended', function() {
                                        audio_NamaPoli.autoplay = true;
                                        audio_NamaPoli.load();
                                        audio_NamaPoli.addEventListener('ended', function() {
                                            audio_NamaPoli.pause();
                                            kata2 = audio_2.autoplay = true;
                                            kata2 = audio_2.load();
                                            audio_2.addEventListener('ended', function() {
                                                audio_2.pause();
                                                audio_silahkan.autoplay = true;
                                                audio_silahkan.load();
                                                audio_silahkan.addEventListener('ended', function() {
                                                    audio_silahkan.pause();
                                                    loket.autoplay = true;
                                                    loket.load();
                                                    loket.addEventListener('ended', function(){
                                                        loket.pause();
                                                        selesai();
                                                    });
                                                });
                                            });
                                        });
                                    });
                                } else {
                                    nomor_urut.autoplay = true;
                                    nomor_urut.load();
                                    nomor_urut.addEventListener('ended', function() {
                                        audio_NamaPoli.autoplay = true;
                                        audio_NamaPoli.load();
                                        audio_NamaPoli.addEventListener('ended', function() {
                                            audio_NamaPoli.pause();
                                            kata2 = satuan.autoplay = true;
                                            kata2 = satuan.load();
                                            satuan.addEventListener('ended', function() {
                                                satuan.pause();
                                                belasan.autoplay = true;
                                                belasan.load();
                                                belasan.addEventListener('ended', function() {
                                                    belasan.pause();
                                                    audio_silahkan.autoplay = true;
                                                    audio_silahkan.load();
                                                    audio_silahkan.addEventListener('ended', function() {
                                                        audio_silahkan.pause();
                                                        loket.autoplay = true;
                                                        loket.load();
                                                        loket.addEventListener('ended', function(){
                                                            loket.pause();
                                                            selesai();
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                }
                            } else {
                                //kata2 = kata[angka[i + 1]] + " Puluh";

                                if (angka[i] != "0") {
                                    if (angka[i + 1] != "1") {
                                        nomor_urut.autoplay = true;
                                        nomor_urut.load();
                                        nomor_urut.addEventListener('ended', function() {
                                            audio_NamaPoli.autoplay = true;
                                            audio_NamaPoli.load();
                                            audio_NamaPoli.addEventListener('ended', function() {
                                                audio_NamaPoli.pause();
                                                kata2 = puluhan.autoplay = true;
                                                kata2 = puluhan.load();
                                                puluhan.addEventListener('ended', function() {
                                                    puluhan.pause();
                                                    puluh.autoplay = true;
                                                    puluh.load();
                                                    puluh.addEventListener('ended', function() {
                                                        puluh.pause();
                                                        satuan.autoplay = true;
                                                        satuan.load();
                                                        satuan.addEventListener('ended', function() {
                                                            satuan.pause();
                                                            audio_silahkan.autoplay = true;
                                                            audio_silahkan.load();
                                                            audio_silahkan.addEventListener('ended', function() {
                                                                audio_silahkan.pause();
                                                                loket.autoplay = true;
                                                                loket.load();
                                                                loket.addEventListener('ended', function(){
                                                                    loket.pause();
                                                                    selesai();
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    }
                                } else {
                                    nomor_urut.autoplay = true;
                                    nomor_urut.load();
                                    nomor_urut.addEventListener('ended', function() {
                                        audio_NamaPoli.autoplay = true;
                                        audio_NamaPoli.load();
                                        audio_NamaPoli.addEventListener('ended', function() {
                                            audio_NamaPoli.pause();
                                            kata2 = puluhan.autoplay = true;
                                            kata2 = puluhan.load();
                                            puluhan.addEventListener('ended', function() {
                                                puluhan.pause();
                                                puluh.autoplay = true;
                                                puluh.load();
                                                puluh.addEventListener('ended', function() {
                                                    puluh.pause();
                                                    audio_silahkan.autoplay = true;
                                                    audio_silahkan.load();
                                                    audio_silahkan.addEventListener('ended', function() {
                                                        audio_silahkan.pause();
                                                        loket.autoplay = true;
                                                        loket.load();
                                                        loket.addEventListener('ended', function(){
                                                            loket.pause();
                                                            selesai();
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                }
                            }
                        }

                        /* untuk Satuan */
                        if (angka[i] != "0") {
                            if (angka[i + 1] != "1") {
                                nomor_urut.autoplay = true;
                                nomor_urut.load();
                                nomor_urut.addEventListener('ended', function() {
                                    audio_NamaPoli.autoplay = true;
                                    audio_NamaPoli.load();
                                    audio_NamaPoli.addEventListener('ended', function() {
                                        audio_NamaPoli.pause();
                                        kata3 = audio_2.autoplay = true;
                                        kata3 = audio_2.load();
                                        audio_2.addEventListener('ended', function() {
                                            audio_2.pause();
                                            audio_silahkan.autoplay = true;
                                            audio_silahkan.load();
                                            audio_silahkan.addEventListener('ended', function() {
                                                audio_silahkan.pause();
                                                loket.autoplay = true;
                                                loket.load();
                                                loket.addEventListener('ended', function(){
                                                    loket.pause();
                                                    selesai();
                                                });
                                            });
                                        });
                                    });
                                });

                                //kata3 = kata[angka[i]];
                                /*puluh.addEventListener(';
                                satuan.autoplay = true;ended', function() {
                                    katload satuan.play();
                                });*/
                            }
                        }

                        /* pengujian angka apakah tidak nol semua, lalu ditambahkan tingkat */
                        if ((angka[i] != "0") || (angka[i + 1] != "0") || (angka[i + 2] != "0")) {
                            subkalimat = kata1 + " " + kata2 + " " + kata3 + " " + tingkat[j] + " ";
                        }

                        /* gabungkan variabe sub kalimat (untuk Satu blok 3 angka) ke variabel kalimat */
                        kalimat = subkalimat + kalimat;
                        i = i + 3;
                        j = j + 1;
                    }

                    /* mengganti Satu Ribu jadi Seribu jika diperlukan */
                    if ((angka[5] == "0") && (angka[6] == "0")) {
                        //kalimat = kalimat.replace("Satu Ribu", "Seribu");
                        //kalimat = seribu.play();
                    }
                }
            }
            /**End of Sound */

            // function tunggu(){
            //     $.ajax({
            //         type:'GET',
            //         url:'{{ url('/pendaftaran/eventtunggu') }}',
            //         dataType: 'json',
            //     });
            //     return false;
            // }



            function selesai(){
                var txtLoket = $('#txtPanggilLoket').val();

                var Loket = document.getElementById("Loket" + txtLoket);
                Loket.classList.add("p-4");
                Loket.classList.remove('px-4', 'pt-5', 'text-primary', 'font-weight-bold');

                $.ajax({
                    type:'GET',
                    url:'{{ url('/pendaftaran/evenselesai') }}',
                    dataType: 'json',
                });
                return false;
            }





            Pusher.logToConsole = true;

            var pusher = new Pusher('8dae6364d37dbe7c8938', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('channel-panggilan-pendaftaran');
            channel.bind('event-panggilan-pendaftaran', function(data) {
                $('#txtPanggilPoliklinik').val(data.panggil.NamaPoli);
                $('#txtPanggilNoAntrian').val(data.panggil.Nomor);
                $('#txtPanggilLoket').val(data.panggil.Loket);

                var Loket = document.getElementById("Loket" + data.panggil.Loket);
                Loket.classList.add('px-4', 'pt-5', 'text-primary', 'font-weight-bold');
                Loket.classList.remove("p-4");

                document.getElementById("TampilPanggil" + data.panggil.Loket).innerHTML = data.panggil.NamaPoli+'.'+data.panggil.Nomor
                /**Sound */
                terbilang();
                /**End of Sound */
            });
        });
    </script>
@endsection