@extends('layout.sbmain')
@section('title','Antrian Pendaftaran')

@section('Sidebar')
    @include('layout.sidebar.pendaftaran')
@endsection
@section('Topbar')
    @include('layout.topbar.pendaftaran')
@endsection

@section('Content')
<div class="container-fluid">

    <!-- Content Row -->
    <div class="row" id="ListAntrian">

    </div>

    <!-- Modal List Recent Patient-->
    <div class="modal fade" id="ListRecentPatientModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="ListRecentPatientModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title text-primary font-weight-bold" id="ListRecentPatientModalLabel"></h5>
            <input type="hidden" name="txtAliasPoliUlang" id="txtAliasPoliUlang">
            <button type="button" class="close btn-danger bg-danger" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <div class="card-group">
                    <div class="card">
                      <div class="card-body text-center">
                        <h5 class="card-title">Panggil</h5>
                        <input type="number" class="text-primary font-weight-bold text-center" min="1" id="PanggilUlang">
                      </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-block" id="ButtonPanggilUlangModal">Panggil Ulang</button>
            </div>
        </div>
        </div>
    </div>

</div>
@endsection

@section('Script')
    {{-- <script src="{{ asset('js/app.js') }}"></script> --}}
    <script>
        $(document).ready(function(){
            Pusher.logToConsole = true;

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

            var channel = pusher.subscribe('channel-update-operator');
            channel.bind('event-update-operator', function(data) {
                // alert(JSON.stringify(data));
                ListAntrian();
            });

            ListAntrian();
            function ListAntrian(){
                $.ajax({
                    type:'GET',
                    url:'{{ url('/listantrianbpjs') }}',
                    dataType: 'json',
                    success:function(data) {
                        var html = '';
                        var i;
                        if(data.CountAntrian ==  0){
                            html += '<div class="mx-auto d-block text-center">'+
                                    '<img src="{{ asset('img/empty_inbox_.svg') }}" class="img-fluid" width="300 rem">'+
                                    '<h2 class="mt-4">List Antrian BPJS Tidak Ada</h2>'+
                                '</div>';
                        }else{
                            // Merah
                            for(var Listnew = 0; Listnew < data.ListPoliNew.length; Listnew++){
                                html += '<div class="col-lg-12 mb-2">'+
                                    '<div class="card bg-danger text-white shadow h-100">'+
                                        '<div class="card-body py-2">'+
                                            '<div class="row no-gutters align-items-center">'+
                                                '<div class="col-6">'+
                                                    '<div class="h6 mb-0 font-weight-bold">'+ data.ListPoliNew[Listnew].NamaPoli +'</div>'+
                                                '</div>'+
                                                '<div class="col-2">'+
                                                    '<h5 class="mb-0">Antrian <span class="badge badge-primary">'+ data.ListPoliNew[Listnew].noAkhir +'</span></h5>'+
                                                '</div>'+
                                                '<div class="col-2">'+
                                                    '<h5 class="mb-0">Panggil <span class="badge badge-primary">'+ data.ListPoliNew[Listnew].B_no_panggil +'</span></h5>'+
                                                '</div>'+
                                                '<div class="col-2 text-right">'+
                                                    '<button type="button" class="btn btn-primary btn-panggil" data-aliaspoli="'+ data.ListPoliNew[Listnew].B_Alias +'" data-alias="'+ data.ListPoliNew[Listnew].Alias +'" data-nopanggil="'+ data.ListPoliNew[Listnew].B_no_panggil +'">Panggil</button>'+
                                                '</div>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                            // Kuning
                            for(var unbalance = 0; unbalance < data.ListPoliUnbalance.length; unbalance++){
                                html += '<div class="col-lg-12 mb-2">'+
                                    '<div class="card bg-warning text-white shadow h-100">'+
                                        '<div class="card-body py-2">'+
                                            '<div class="row no-gutters align-items-center">'+
                                                '<div class="col-6">'+
                                                    '<div class="h6 mb-0 font-weight-bold">'+ data.ListPoliUnbalance[unbalance].NamaPoli +'</div>'+
                                                '</div>'+
                                                '<div class="col-2">'+
                                                    '<h5 class="mb-0">Antrian <span class="badge badge-primary">'+ data.ListPoliUnbalance[unbalance].noAkhir +'</span></h5>'+
                                                '</div>'+
                                                '<div class="col-2">'+
                                                    '<h5 class="mb-0">Panggil <span class="badge badge-primary">'+ data.ListPoliUnbalance[unbalance].B_no_panggil +'</span></h5>'+
                                                '</div>'+
                                                '<div class="col-2 text-right">'+
                                                    '<button type="button" class="btn btn-primary mr-2 btn-panggil" data-aliaspoli="'+ data.ListPoliUnbalance[unbalance].B_Alias +'" data-alias="'+ data.ListPoliUnbalance[unbalance].Alias +'" data-nopanggil="'+ data.ListPoliUnbalance[unbalance].B_no_panggil +'">Panggil</button>'+
                                                    '<button type="button" class="btn btn-secondary btn-ulang-panggil" data-aliaspoli="'+ data.ListPoliUnbalance[unbalance].B_Alias +'" data-nopanggil="'+ data.ListPoliUnbalance[unbalance].B_no_panggil +'">Ulang</button>'+
                                                '</div>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                            // Hijau
                            for (var i = 0; i < data.ListNamaPoli.length; i++) {
                                html += '<div class="col-lg-12 mb-2">'+
                                    '<div class="card bg-success text-white shadow h-100">'+
                                        '<div class="card-body py-2">'+
                                            '<div class="row no-gutters align-items-center">'+
                                                '<div class="col-6">'+
                                                    '<div class="h6 mb-0 font-weight-bold">'+ data.ListNamaPoli[i].NamaPoli +'</div>'+
                                                '</div>'+
                                                '<div class="col-2">'+
                                                    '<h5 class="mb-0">Antrian <span class="badge badge-primary">'+ data.ListNamaPoli[i].noAkhir +'</span></h5>'+
                                                '</div>'+
                                                '<div class="col-2">'+
                                                    '<h5 class="mb-0">Panggil <span class="badge badge-primary">'+ data.ListNamaPoli[i].B_no_panggil +'</span></h5>'+
                                                '</div>'+
                                                '<div class="col-2 text-right">'+
                                                    '<button type="button" class="btn btn-secondary btn-ulang-panggil" data-aliaspoli="'+ data.ListNamaPoli[i].B_Alias +'" data-alias="'+ data.ListNamaPoli[i].Alias +'" data-nopanggil="'+ data.ListNamaPoli[i].B_no_panggil +'">Ulang</button>'+
                                                '</div>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                        }

                        // Notifikasi BPJS
                        var sisaBPJS = document.getElementById('SisaBPJS');
                        if(data.NotifikasiBPJS == 0){
                            sisaBPJS.classList.add("badge-success");
                            sisaBPJS.classList.remove("badge-danger");
                        }else{
                            sisaBPJS.classList.add("badge-danger");
                            sisaBPJS.classList.remove("badge-success");
                        }
                        sisaBPJS.innerHTML = data.NotifikasiBPJS;

                        // Notifikasi NonBPJS
                        for(var notif = 0; notif < data.NotifikasiNonBPJS.length; notif++){
                            var sisaNonBPJS = document.getElementById('sisaNonBPJS');
                            if(data.NotifikasiNonBPJS[notif].ListCount == 0){
                                sisaNonBPJS.classList.add("badge-success");
                                sisaNonBPJS.classList.remove("badge-danger");
                            }else{
                                sisaNonBPJS.classList.add("badge-danger");
                                sisaNonBPJS.classList.remove("badge-success");
                            }
                            sisaNonBPJS.innerHTML = data.NotifikasiNonBPJS[notif].ListCount;
                        }

                        if(data.StatusPanggil.P2D == 'edit'){
                            Swal.fire({
                                position: 'center',
                                icon: 'warning',
                                title: 'Tunggu!',
                                text: 'Antrian sedang memanggil',
                                showConfirmButton: false,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                            });
                        }else{
                            Swal.close();
                            $('.btn-panggil').prop('disabled', false);
                            document.getElementById('ButtonPanggilUlangModal').disabled = false;
                        }

                        $('#ListAntrian').html(html);
                    }
                });
                return false;
            }

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

            // Button Panggil Click
            $('#ListAntrian').on('click', '.btn-panggil', function(){
                $(this).prop('disabled', true);
                tunggu();
                var AliasPoli = $(this).data('aliaspoli');
                var Alias = $(this).data('alias');
                var NoPanggil = $(this).data('nopanggil');
                var Antrean = Alias+'.'+NoPanggil;
                $.ajax({
                    type:'POST',
                    url:'{{ url('/pendaftaran/eventpanggilanbpjs') }}',
                    async: true,
                    dataType: 'json',
                    data:{
                        '_token' : '{{ csrf_token() }}',
                        AliasPoli:AliasPoli,
                        Alias:Alias,
                        NoPanggil:NoPanggil
                    },
                });
            });

            // Button Ulang Panggil click
            $('#ListAntrian').on('click', '.btn-ulang-panggil', function(){
                $('#ListRecentPatientModal').modal('show');
                var AliasPoli = $(this).data('aliaspoli');
                var NomorPanggil = $(this).data('nopanggil');

                $('#txtAliasPoliUlang').val(AliasPoli);
                document.getElementById("ListRecentPatientModalLabel").innerHTML = AliasPoli;

                $('#PanggilUlang').val(NomorPanggil);
                $('#PanggilUlang').attr({
                    "max" : NomorPanggil,
                });
            });

            // Button Ulang Panggil In Modal
            $('#ButtonPanggilUlangModal').on('click', function(){
                document.getElementById('ButtonPanggilUlangModal').disabled = true;
                tunggu();
                $.ajax({
                    type:'POST',
                    url:'{{ url('/pendaftaran/eventulang') }}',
                    async: true,
                    dataType: 'json',
                    data:{
                        '_token' : '{{ csrf_token() }}',
                        AliasPoli : $('#txtAliasPoliUlang').val(),
                        Loket : $('#txtLoket').val(),
                        NomorPanggil : $('#PanggilUlang').val()
                    },
                });
            });


        });
    </script>
@endsection