@extends('dashboard')
@section('content')
    <div>
        <h3>BPJS KESEHATAN - VCLAIM</h3>
        <div class="row mb-5 mt-4 justify-content-center">
            <div class="col-md-3 col-sm-4 col-12">
                <div class="card" style="font-size: 12px" id="getPeserta">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">GET PASIEN</h5>
                        <div class="row">
                            <div class="col-md-4 col-sm-6">Status </div>
                            <div class="col-md-8 col-sm-6 font-weight-bold status">Not Available</div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Time </div>
                            <div class="col-md-8 font-weight-bold responseTime"></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 col-sm-4 col-12">
                <div class="card" style="font-size: 12px" id="getRujukan">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left"> GET RUJUKAN</h5>
                        <div class="row">
                            <div class="col-md-4">Status </div>
                            <div class="col-md-8 font-weight-bold status"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Time </div>
                            <div class="col-md-8 font-weight-bold responseTime"></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 col-sm-4 col-12">
                <div class="card" style="font-size: 12px" id="createSep">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">CREATE SEP</h5>
                        <div class="row">
                            <div class="col-md-4">Status </div>
                            <div class="col-md-8 font-weight-bold status"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Time </div>
                            <div class="col-md-8 font-weight-bold responseTime"></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 col-sm-4 col-12">
                <div class="card" style="font-size: 12px" id="createSurkon">
                    <div class="card-body bg-secondary text-white">
                        <h5 class="card-title text-left">CREATE SURKON</h5>
                        <div class="row">
                            <div class="col-md-4">Status </div>
                            <div class="col-md-8 font-weight-bold status"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">Time </div>
                            <div class="col-md-8 font-weight-bold responseTime"></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 col-sm-4 col-12">
            <div class="card" style="font-size: 12px">
                <div class="card-body bg-secondary text-white" id="aplicares">
                    <h5 class="card-title text-left">UPDATE BED (APLICARES)</h5>
                    <div class="row">
                        <div class="col-md-4">Status </div>
                        <div class="col-md-8 font-weight-bold status"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">Time </div>
                        <div class="col-md-8 font-weight-bold responseTime"></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-4 col-sm-12">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <h4>Pencarian Langsung</h4>
                        <form id="formVclaim">
                            @csrf
                            <table>
                                <tr>
                                    <td style="width: 40%">Service Name</td>
                                    <td>
                                        <select name='service_name'>
                                            <option value='all'>PILIH</option>
                                            <option value='sep-cari' selected>SEP -> NO SEP</option>
                                            <option value='peserta-no-kartu'>PESERTA -> NO KARTU</option>
                                            <option value='peserta-nik'>PESERTA -> NIK</option>
                                            <option value='rujukan-no-rujukan-faskes1'>RUJUKAN -> NO RUJUKAN PCARE
                                            </option>
                                            <option value='rujukan-no-rujukan-faskes2'> RUJUKAN -> NO RUJUKAN RS
                                            </option>
                                            <option value='rencana-kontrol-cari'> SURKON -> CARI</option>
                                        </select>
                                    </td>
                                </tr>


                                <tr>
                                    <td>Nomor</td>
                                    <td><input type="text" name="url[]" style="width: 100%"></td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-right">
                                        <input type="hidden" name="method" value="GET">
                                        <button type=button name='kirim' class="btn btn-primary">Cari</button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a href="{{ url(route('vclaimv2.decrypt.view')) }}">DECRYPT</a>
                        <table class="table table-bordered">
                            <tr>
                                <th>Service</th>
                                <th>Parameter</th>
                            </tr>
                            <tr>
                                <td>
                                    SEP -> NO SEP
                                </td>
                                <td>
                                    Nomor SEP <br>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Rujukan -> Nomor Rujukan (Pcare)
                                </td>
                                <td>
                                    Nomor Rujukan <br>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Rujukan -> Nomor Rujukan (RS)
                                </td>
                                <td>
                                    Nomor Rujukan <br>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Peserta -> Nomor Kartu
                                </td>
                                <td>
                                    Nomor Kartu <br>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Peserta -> NIK
                                </td>
                                <td>
                                    Nomor NIK <br>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Surat Kontrol -> No Surkon
                                </td>
                                <td>
                                    Nomor Surat Kontrol <br>
                                </td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-sm-12">
                <h4>Result</h4>
                <div class="row">
                    <div class="col-md-12 col-sm-12"
                        style="background: rgb(191, 240, 255);border-radius: 5px;min-height:40vh;max-height: 60vh;width: 100%">
                        <div class="row" style="min-height: 50px;background: rgb(0, 54, 105);color: whitesmoke">
                            <div class="col-md-12" id="status">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12" style="max-height: 50vh; overflow-y:scroll;">
                                <pre id="hasilPencarian"></pre>
                            </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('getDataHitWsVclaim') }}",
                method: 'GET',
                success: function(data) {
                    for (const key in data) {
                        const element = data[key];
                        let el = '#' + key

                        $(el).find(".responseTime").html(element.responseTime)
                        $(el).find(".lastHit").html(element.lastHit)
                        $(el).find(".status").html(element.status)
                        $(el).children().removeClass(
                            'bg-success bg-danger bg-secondary')
                        if (element.status == 'GOOD') {
                            $(el).children().addClass('bg-success')
                        } else if (element.status == 'SLOW') {
                            $(el).children().addClass('bg-danger')
                        } else {
                            $(el).children().addClass('bg-secondary')
                        }
                    }
                }
            })

            setInterval(() => {
                $.ajax({
                    url: "{{ route('getDataHitWsVclaim') }}",
                    method: 'GET',
                    success: function(data) {
                        for (const key in data) {
                            const element = data[key];
                            let el = '#' + key

                            $(el).find(".responseTime").html(element.responseTime)
                            $(el).find(".lastHit").html(element.lastHit)
                            $(el).find(".status").html(element.status)
                            $(el).children().removeClass(
                                'bg-success bg-danger bg-secondary')
                            if (element.status == 'GOOD') {
                                $(el).children().addClass('bg-success')
                            } else if (element.status == 'SLOW') {
                                $(el).children().addClass('bg-danger')
                            } else {
                                $(el).children().addClass('bg-secondary')
                            }
                        }
                    }
                })
            }, 60000);
        })

        $("button[name=kirim]").click(function() {
            let formData = $("#formVclaim").serializeArray()
            formData.push({
                name: "url[]",
                value: '{{ date('Y-m-d') }}'
            })
            console.log(formData)

            $.ajax({
                url: "{{ route('vclaimv2.get') }}",
                method: 'POST',
                data: formData,
                beforeSend: function() {
                    $("button[name=kirim]").html('Processing')
                },
                complete: function() {
                    $("button[name=kirim]").html('Cari')
                },
                success: function(response) {
                    $("#hasilPencarian").html(JSON.stringify(response.response, undefined, 4))
                    $("#status").html('Code: ' + response.metaData.code +
                        ' <br> Message: ' + response.metaData.message +
                        ' <br> Time: ' + response.transaction_time)
                }
            })
        })
    </script>
@endsection