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

@section('Content')
<section style="padding-top: 7.5rem;">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="fdb-box fdb-touch pt-3">
                <div class="row justify-content-center justify-content-between">
                    <img src="{{ asset('img/LogoRadjak.png') }}" width="150 rem" alt="Responsive image">
                    <p class="h4" id="clock">{{-- WaktuServer --}}</p>
                </div>
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <img src="{{ asset('img/health_.svg') }}" width="200 rem" class="img-fluid" alt="Responsive image">
                        <p class="lead mt-0">Selamat datang di Sistem Antrian Radjak Hospital Cileungsi.</p>
                    </div>
                </div>
                <div class="row justify-content-center mt-4">
                    <div class="col-12 text-center">
                        <button class="btn btn-outline-primary btn-lg font-weight-bold" id="btnAntrianBPJS" data-toggle="modal" data-penjamin="BPJS">BPJS</button>
                        <button class="btn btn-outline-dark ml-3 btn-lg font-weight-bold" id="btnAntrianNonBPJS" data-toggle="modal" data-penjamin="NON BPJS">NON BPJS</button>
                        <a href="http://192.168.1.49/cekin" class="btn btn-outline-primary btn-lg font-weight-bold ml-3">CHECKIN</a>
                        <!-- <a herf="http://192.168.1.49/CounterPendaftaran" class="btn btn-outline-success ml-3 btn-lg font-weight-bold">BOOKING</a> -->
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-12 col-lg-10">
                        <input type="hidden" name="txtDaySession" id="txtDaySession">
                        <input type="hidden" name="txtTime" id="txtTime">
                    </div>
                    <form id="printTiket">
                        <input type="hidden" name="txtNoAntrian" id="txtNoAntrian">
                        <input type="hidden" name="txtPoliklinik" id="txtPoliklinik">
                        <input type="hidden" name="txtIdDokter" id="txtIdDokter">
                    </form>
                </div>
          </div>
        </div>
      </div>
    </div>
</section>

<!-- Modal Etiket-->
<div class="modal fade" id="ListPoliModal"  data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="ListPoliLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title text-primary" id="ListPoliLabel"></h2>
          <input type="hidden" name="txtJenisJaminan" id="txtJenisJaminan">
          <button type="button" class="close text-white font-weight-bold bg-danger" id="btn-close-modal">
            <h2 aria-hidden="true">&times;</h2>
          </button>
        </div>
        <div class="modal-body">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators d-none">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row justify-content-center align-items-center d-flex flex-wrap" id="ListPoli">
                            {{-- List Poli --}}
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row justify-content-center align-items-center d-flex flex-wrap" id="ListDokter">
                            {{-- List Dokter --}}
                        </div>
                    </div>
                </div>

                <a href="#" class="carousel-control-prev justify-content-start d-none" id="btnBack">
                    <span class="display-4 text-danger ml-4 font-weight-bold"><i class="fas fa-arrow-alt-circle-left"></i></span>
                    <span class="sr-only">Previous</span>
                </a>

            </div>
        </div>
      </div>
    </div>
</div>

<!-- Modal Dashboard Room-->
<div class="modal fade" id="ModalDashboardRoom" tabindex="-1" aria-labelledby="ModalDashboardRoomLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title text-success" id="ModalDashboardRoomLabel">Dashboard Room Monitoring</h2>
          <button type="button" class="close text-white font-weight-bold bg-danger" data-dismiss="modal" aria-label="Close">
            <h2 aria-hidden="true">&times;</h2>
          </button>
        </div>
        <div class="modal-body">
            <div class="row justify-content-center">
                @foreach ($DashboardRoom as $room)
                    <div class="col-lg-4 mb-4">
                        <div class="fdb-box fdb-touch py-3">
                            <div class="row justify-content-center">
                                <div class="col-12 mb-3">
                                    <h2 style="font-size: 1.5rem;">{{ $room->Ruangan }} <span class="badge badge-primary">{{ $room->ISI +  $room->KOSONG + $room->RUSAK + $room->BOOKING}} Bed</span></h2>
                                </div>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    ISI
                                    <span class="badge badge-secondary">{{ $room->ISI }} Bed</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    KOSONG
                                    <span class="badge badge-success">{{ $room->KOSONG }} Bed</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    RUSAK
                                    <span class="badge badge-danger">{{ $room->RUSAK }} Bed</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    BOOKING
                                    <span class="badge badge-warning">{{ $room->BOOKING }} Bed</span>
                                </li>
                            </ul>
                        </div>

                    </div>
                @endforeach
            </div>
        </div>
      </div>
    </div>
</div>
@endsection

@section('Ajax')
    <script>
        $(document).ready(function() {
            
            // 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, 54, 49, 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("txtDaySession").value = DaySession;
                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.getElementById("txtTime").value = (sh.length == 1 ? "0" + sh : sh) + ":" + (sm.length == 1 ? "0" + sm : sm);
            }

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



            $('#btnBack').on('click', function(){
		        $('.carousel').carousel(0);
                $(this).addClass('d-none');
            });

            function ListPoli()
            {
                var HariPrakter = $('#txtDaySession').val();
                var Penjamin = $('#txtJenisJaminan').val();
                $.ajax({
                    type:'GET',
                    url:'{{ url('/etiket/listpoli') }}',
                    dataType: 'json',
                    data:{
                        HariPrakter:HariPrakter
                    },
                    success:function(data) {
                        var htmlListPoli = '';
                        if(Penjamin == 'NON BPJS'){
                            for (var i = 0; i < data.ListPoli.length; i++) {
                                htmlListPoli += '<div class="card col-3 mr-3 mb-3 shadow border-primary zoom-out">'+
                                    '<div class="card-body">'+
                                        '<div class="text-center">'+
                                            '<a href="#" class="stretched-link text-decoration-none text-primary h3 list-poli" data-aliaspoli='+ data.ListPoli[i].AliasCategory +'>'+ data.ListPoli[i].Category +'</a>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                        }else if(Penjamin == 'BPJS'){
                            for (var i = 0; i < data.ListPoliBPJS.length; i++){
                                htmlListPoli += '<div class="card col-3 mr-3 mb-3 shadow border-primary zoom-out">'+
                                    '<div class="card-body">'+
                                        '<div class="text-center">'+
                                            '<a href="#" class="stretched-link text-decoration-none text-primary h3 list-poli" data-aliaspoli='+ data.ListPoliBPJS[i].AliasCategory +'>'+ data.ListPoliBPJS[i].Category +'</a>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                        }
                        $('#ListPoli').html(htmlListPoli);

                    }
                });
                return false;
            }

            $('#btn-close-modal').on('click', function(){
                ListPoli();
                $('.carousel').carousel(0);
                $('#btnBack').addClass('d-none');
                $('#ListPoliModal').modal('hide');
            });

            $('#btnAntrianBPJS').on('click', function(){
                var TimeNow   = $('#txtTime').val();

                if(TimeNow < "06:00"){
                    Swal.fire(
                        'Perhatian!',
                        'Antrian dibuka pukul 06:00!',
                        'warning'
                    );
                }else {
                    $('#txtJenisJaminan').val($(this).data('penjamin'));
                    document.getElementById("ListPoliLabel").innerHTML = $(this).data('penjamin');
                    ListPoli();
                    $('#ListPoliModal').modal('show');
                }
            });

            $('#btnAntrianNonBPJS').on('click', function(){
                var TimeNow   = $('#txtTime').val();

                if(TimeNow < "06:00"){
                    Swal.fire(
                        'Perhatian!',
                        'Antrian dibuka pukul 06:00!',
                        'warning'
                    );
                }else {
                    $('#txtJenisJaminan').val($(this).data('penjamin'));
                    document.getElementById("ListPoliLabel").innerHTML = $(this).data('penjamin');
                    ListPoli();
                    $('#ListPoliModal').modal('show');
                }
            });

            $('#ListPoli').on('click', '.list-poli', function(){
                var HariPrakter = $('#txtDaySession').val();
                var AliasPoli = $(this).data('aliaspoli');
                var Penjamin = $('#txtJenisJaminan').val();
                $.ajax({
                    type:'GET',
                    url:'{{ url('/etiket/listpoli') }}',
                    dataType: 'json',
                    data:{
                        HariPrakter:HariPrakter,
                        AliasPoli:AliasPoli
                    },
                    success:function(data) {
                        var htmlListDokter = '';
                        if(Penjamin == 'NON BPJS'){
                            for (var i = 0; i < data.ListDokter.length; i++){
                                htmlListDokter += '<div class="card col-3 mr-3 mb-3 shadow border-info zoom-out">'+
                                    '<div class="card-body">'+
                                        '<div class="text-center">'+
                                            '<a href="#" class="stretched-link text-decoration-none text-info h4 text-nowrap btn-dokter-print" data-iddokter="'+ data.ListDokter[i].DoctorId +'" data-alias="'+ data.ListDokter[i].Alias +'" data-timestart="'+ data.ListDokter[i].TimeStart +'" data-timeend="'+ data.ListDokter[i].TimeEnd +'">'+ data.ListDokter[i].FirstName +'</a>'+
                                            '<p class="mb-0">'+ data.ListDokter[i].TimeStart +' - '+ data.ListDokter[i].TimeEnd +'</p>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                        }else if(Penjamin == 'BPJS'){
                            for (var i = 0; i < data.ListDokterBPJS.length; i++){
                                htmlListDokter += '<div class="card col-3 mr-3 mb-3 shadow border-info zoom-out">'+
                                    '<div class="card-body">'+
                                        '<div class="text-center">'+
                                            '<a href="#" class="stretched-link text-decoration-none text-info h4 text-nowrap btn-dokter-print" data-iddokter="'+ data.ListDokterBPJS[i].DoctorId +'" data-alias="'+ data.ListDokterBPJS[i].Alias +'" data-kodepoli="'+ data.ListDokterBPJS[i].KodePoli +'" data-timestart="'+ data.ListDokterBPJS[i].TimeStart +'" data-timeend="'+ data.ListDokterBPJS[i].TimeEnd +'">'+ data.ListDokterBPJS[i].FirstName +'</a>'+
                                            '<p class="mb-0">'+ data.ListDokterBPJS[i].TimeStart +' - '+ data.ListDokterBPJS[i].TimeEnd +'</p>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                            }
                        }

                        $('#ListDokter').html(htmlListDokter);
                        $('.carousel').carousel(1);
                        $('#btnBack').removeClass('d-none');
                    }
                });
                return false;
            });

            $('#ListDokter').on('click', '.btn-dokter-print', function(){
                var AliasPoli = $(this).data('alias');
                var IdDokter  = $(this).data('iddokter');
                var Penjamin  = $('#txtJenisJaminan').val();
                var KodePoli  = $(this).data('kodepoli');
                var TimeStart = $(this).data('timestart');
                var TimeEnd   = $(this).data('timeend');
                var TimeNow   = $('#txtTime').val();

                if(TimeNow > TimeEnd){
                    Swal.fire(
                        'Perhatian!',
                        'Dokter Sudah Tutup Jam Praktek!',
                        'warning'
                    );
                }else{
                    if(Penjamin == 'NON BPJS'){
                        $.ajax({
                            type:'GET',
                            url:'{{ url('/pendaftaran/printnonbpjs') }}',
                            dataType: 'json',
                            data:{
                                '_token'  : '{{ csrf_token() }}',
                                AliasPoli : AliasPoli,
                                IdDokter  : IdDokter
                            },
                            success:function(data) {
                                let objFra = document.createElement('iframe');
                                objFra.style.visibility = 'hidden';
                                objFra.src = "{{ url('/pendaftaran/tiketpdf') }}/"+ AliasPoli+ "/"+ IdDokter;
                                document.body.appendChild(objFra);
                                objFra.contentWindow.focus();
                                objFra.contentWindow.print();
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Tiket berhasil dicetak',
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                $('#ListPoliModal').modal('hide');
                                ListPoli();
                                $('.carousel').carousel(0);
                                $('#btnBack').addClass('d-none');
                            }
                        });
                    }else if(Penjamin == 'BPJS'){
                        $.ajax({
                            type:'GET',
                            url:'{{ url('/pendaftaran/printbpjs') }}',
                            dataType: 'json',
                            data:{
                                '_token'  : '{{ csrf_token() }}',
                                AliasPoli : AliasPoli,
                                IdDokter  : IdDokter,
                                KodePoli  : KodePoli
                            },
                            success:function(data) {
                                let objFra = document.createElement('iframe');
                                objFra.style.visibility = 'hidden';
                                objFra.src = "{{ url('/pendaftaran/tiketpdfbpjs') }}/"+ KodePoli+ "/"+ IdDokter;
                                document.body.appendChild(objFra);
                                objFra.contentWindow.focus();
                                objFra.contentWindow.print();
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Tiket berhasil dicetak',
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                $('#ListPoliModal').modal('hide');
                                ListPoli();
                            $('.carousel').carousel(0);
                            $('#btnBack').addClass('d-none');
                            }
                        });
                    }
                }

                return false;
            });

            // Dashboard Room
            $('#btnDashboardRoom').on('click', function(){
                $('#ModalDashboardRoom').modal('show');
            });
        });
    </script>
@endsection