@extends('dashboard')
@section('content')
    <div>
        <h3>MONITORING CRON JOB</h3>
        <div class="row">
            <div class="col-md-12">
                <h5>BPJS KESEHATAN</h5>
            </div>
        </div>
        <div class="row mb-5 mt-2">
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="aplicares">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">APLICARES</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="add_antrean_jkn">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">ADD ANTREAN JKN</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="create_surkon">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">BUAT SURAT KONTROL </h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="update_bed_sirs">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">UPDATE BED SIRS </h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="send_waktu_antrean">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">SEND WAKTU ANTREAN</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h5>SATU SEHAT</h5>
            </div>
        </div>
        <div class="row mb-5 mt-2">
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_kunjungan">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">ENCOUNTER KUNJUNGAN</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_condition_final">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">CONDITION FINAL</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_procedure">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">PROCEDURE</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_ttv">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">OBSERVATION - TTV</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_lab_order">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">LABORATORIUM - Order</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_lab_specimen">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">LABORATORIUM - Specimen</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_lab_hasil">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">LABORATORIUM - Hasil</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_medication">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">MEDICATION</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_medication_request">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">MEDICATION - REQUEST</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="ss_medication_dispense">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">MEDICATION - DISPENSE</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h5>OTHER</h5>
            </div>
        </div>
        <div class="row mb-5 mt-2">
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="update_user_hotspot">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">UPDATE USER HOTSPOT</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="simpeg_masa_kerja">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">SIMPEG - MASA KERJA</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="font-size: 12px" id="simpeg_jabatan">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">SIMPEG - JABATAN</h5>
                        <div class="row">
                            <div class="col-md-4">Waktu Kirim </div>
                            <div class="col-md-8 font-weight-bold interval"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Last Hit</div>
                            <div class="col-md-8 font-italic font-weight-bold lastHit"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            //return json 
            /**
             * { name:getPasien,responseTime:4000ms,lastHit:23 November 2024 08:00:00,status:GOOD
             * }
             */
            // $("#getPasien").find("#responseTime").html('500 ms')
            // $("#getPasien").find("#lastUpdate").html('3 November 2024 08:07:05')
            // $("#getPasien").find("#status").html('GOOD') // good,bad, not available, 
            $.ajax({
                url: "{{ route('getMonitoringCronJobData') }}",
                method: 'GET',
                success: function(data) {
                    for (const key in data) {
                        const element = data[key];
                        let el = '#' + key
                        if (element.hasOwnProperty('create_at')) {
                            $(el).find(".lastHit").html(element.create_at)
                            $(el).find(".interval").html(element.interval)
                            $(el).children().removeClass(
                                'bg-success bg-danger bg-secondary')
                            // if (element.periode_kirim == 'daily') {
                            if (element.create_at > element.cek_date) {
                                $(el).children().addClass('bg-success')
                            } else {
                                $(el).children().addClass('bg-danger')
                            }
                            // }
                        } else {
                            $(el).find(".interval").html(element.interval)
                            $(el).find(".lastHit").html('Not Available')
                        }
                    }
                }
            })

            setInterval(() => {
                $.ajax({
                    url: "{{ route('getMonitoringCronJobData') }}",
                    method: 'GET',
                    success: function(data) {
                        for (const key in data) {
                            const element = data[key];
                            let el = '#' + key
                            if (element.hasOwnProperty('create_at')) {
                                $(el).find(".lastHit").html(element.create_at)
                                $(el).find(".interval").html(element.interval)
                                $(el).children().removeClass(
                                    'bg-success bg-danger bg-secondary')
                                // if (element.periode_kirim == 'daily') {
                                if (element.create_at > element.cek_date) {
                                    $(el).children().addClass('bg-success')
                                } else {
                                    $(el).children().addClass('bg-danger')
                                }
                                // }
                            } else {
                                $(el).find(".interval").html(element.interval)
                                $(el).find(".lastHit").html('Not Available')
                            }
                        }
                    }
                })
            }, 60000);
        })
    </script>
@endsection