<div style="padding: 7px; background-color: rgb(248, 248, 248);">
    <div class="row">
        <div class="col-md-4">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">No.Lab</span>
                <input type="text" id="h_nolab" readonly class="form-control" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">No.MR</span>
                <input type="text" id="h_mr" readonly class="form-control" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">Nama</span>
                <input type="text" id="h_nama" readonly class="form-control" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">Tanggal</span>
                <input type="text" id="h_tanggal" readonly class="form-control" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">Dokter</span>
                <input type="text" id="h_dokter" readonly class="form-control" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">Ruangan</span>
                <input type="text" id="h_ruang" readonly class="form-control" autocomplete="off">
            </div>
        </div>
    </div>
</div>
<div class="pageContent2">
    <table class="tableStyle table-condensed" style="font-size:9pt">
        <thead style="background-color: #57A700; color: white; font-weight: bold;">
            <tr>
                <td>ID.ORDER</td>
                <td>KATEGORI</td>
                <td>TINDAKAN</td>
                <td>NORMAL VALUE*</td>
                <td>VALUE</td>
            </tr>
        </thead>
        <tbody id="formDetail" style="font-size:8pt"></tbody>
    </table>
</div>
<div style="padding: 7px; background-color: rgb(248, 248, 248);">
    <div class="row">
        <div class="col-md-7">
            <div class="input-group" style="margin-bottom: 5px;">
                <span class="input-group-addon">Diagnosa</span>
                <input type="text" id="h_diagnosa" class="form-control" autocomplete="off">
            </div>
        </div>
        <div class="col-md-5" style="text-align: right;">
            <button type="button" onclick="batal()" class="btn btn-danger"><i class="fa fa-fw fa-remove"></i> Batal</button>
            <button type="button" onclick="btnCetak()" id="btnCetak" class="btn btn-success"><i class="fa fa-fw fa-print"></i> Cetak Preview</button>
            <button type="button" id="btnAnalis" style="width: 37%;" class="btn btn-primary"><i class="fa fa-fw fa-refresh"></i> Analis Value</button>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCetak" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-blue-gradient">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="modal-title" id="staticBackdropLabel"><i class="fa fa-fw fa-print"></i> Preview Cetak Hasil Lab</h5>
                    </div>
                    <div class="col-md-6" style="text-align: right;">
                        <i>Perhatikan jika ada kesalahan data**</i>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="pageContent3">
                    <div id="pdfHasil"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="redirectPage()" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-remove"></i> Tutup</button>
            </div>
        </div>
    </div>
</div>

<script>
    function getForm(data) {
        $("#data").hide()
        $("#form").show()
        var noLab = data.getAttribute("data-nolab");
        showDetail(noLab)
    }

    function showDetail(noLab) {
        $.ajax({
            url: "<?= base_url('worklist/dataLabHeader'); ?>",
            method: "POST",
            data: {
                noLab: noLab
            },
            async: true,
            dataType: "json",
            success: function(data) {
                if (data.jumlahData > 0) {
                    setForm(data.body)
                } else {
                    Swal.fire({
                        title: 'Oooops!',
                        text: "Data kosong !",
                        icon: 'warning'
                    });
                }
            }
        })
    }

    function setForm(dataHeader) {
        $.ajax({
            url: "<?= base_url('worklist/dataLabDetail'); ?>",
            method: "POST",
            data: {
                noLab: dataHeader.LabNo
            },
            async: true,
            dataType: "json",
            success: function(data) {
                if (data.jumlahData > 0) {
                    dataFormHeader(dataHeader)
                    dataFormDetail(data.jumlahData, data.body)
                } else {
                    Swal.fire({
                        title: 'Oooops!',
                        text: "Data kosong !",
                        icon: 'warning'
                    });
                    $("#data").show()
                    $("#form").hide()
                }
            }
        })
    }

    function dataFormHeader(dataHeader) {
        document.getElementById("h_nolab").value = dataHeader.LabNo
        document.getElementById("h_mr").value = dataHeader.MR
        document.getElementById("h_nama").value = dataHeader.PatientName
        document.getElementById("h_tanggal").value = dataHeader.ReceiptDate
        document.getElementById("h_dokter").value = dataHeader.FirstName
        document.getElementById("h_ruang").value = dataHeader.Ruangan
        document.getElementById("h_diagnosa").value = dataHeader.Diagnosa
    }

    function dataFormDetail(row, data) {
        var html = '';
        var i;
        var no = 1;
        for (i = 0; i < row; i++) {
            if (data[i].CharValue == 'TEXT') {
                if (data[i].NormalValue == '' || data[i].NormalValue == null) {
                    var inputValue = '<input type="text" value="' + data[i].ResultValue + '" autocomplete="off" name="ResultValue[]" class="form-control">';
                    var n_up = ''
                    var n_down = ''
                } else {
                    getPilihan(data[i].ID, data[i].ResultValue)
                    var inputValue = '<select name="ResultValue[]" id="pilihan_' + data[i].ID + '" class="form-control"></option>';
                    var n_up = ''
                    var n_down = ''
                }
            } else {
                var inputValue = '<input type="number" value="' + data[i].ResultValue + '" autocomplete="off" name="ResultValue[]" class="form-control">';

                if (data[i].NormalValue && data[i].NormalValue.includes("-")) {
                    var n_char = data[i].NormalValue.split("-");
                    var n_up = n_char[0].trim();
                    var n_down = n_char[1].trim();

                    if (n_up) {
                        n_up = n_up.replace(" ", "");
                    }
                    if (n_down) {
                        n_down = n_down.replace(" ", "");
                    }

                } else {
                    console.error("Invalid NormalValue format or value is empty.");
                }
            }

            if (data[i].ColorValue == 'white' || data[i].ColorValue == '' || data[i].ColorValue == null) {
                var trBg = '<tr>'
            } else {
                var trBg = '<tr class="bg-danger">'
            }

            html += trBg +
                '<td style="display:none"><input type="text" name="up[]" value="' + n_up + '" autocomplete="off" readonly class="form-control"></td>' +

                '<td style="display:none"><input type="text" name="down[]" value="' + n_down + '" autocomplete="off" readonly class="form-control"></td>' +

                '<td style="display:none"><input type="text" name="CharValue[]" value="' + data[i].CharValue + '" autocomplete="off" readonly class="form-control"></td>' +

                '<td><input type="text" value="' + data[i].ID + '" autocomplete="off" name="ID[]" readonly class="form-control"></td>' +
                '<td><input type="text" value="' + data[i].kategoriLab + '" autocomplete="off" readonly class="form-control"></td>' +
                '<td><input type="text" value="' + data[i].Bahasa + '" autocomplete="off" readonly class="form-control"></td>' +
                '<td><input type="text" onclick="editNormal(this)" data-id="' + data[i].ID + '" data-normal="' + data[i].NormalValue + '" data-char="' + data[i].CharValue + '" name="NormalValue[]" value="' + data[i].NormalValue + '" autocomplete="off" readonly class="form-control"></td>' +
                '<td>' + inputValue + '</td>' +
                '</tr>';
        }
        $('#formDetail').html(html);
    }

    function getPilihan(id, pilihan) {
        $.ajax({
            url: '<?= base_url('worklist/getPilihan'); ?>',
            method: 'POST',
            data: {},
            async: true,
            dataType: 'json',
            success: function(data) {
                var html = '';
                var i;
                html += '<option value=""></option>';
                for (i = 0; i < data.length; i++) {
                    if (pilihan == data[i].PilihResult) {
                        html += '<option selected value="' + data[i].PilihResult + '">' + data[i].PilihResult + '</option>';
                    } else {
                        html += '<option value="' + data[i].PilihResult + '">' + data[i].PilihResult + '</option>';
                    }
                }
                $('#pilihan_' + id).html(html);
            }
        })
    }

    function batal() {
        $("#data").show()
        $("#form").hide()
    }

    $("#btnAnalis").click(function() {
        var noLab = document.getElementById("h_nolab").value;
        var h_diagnosa = document.getElementById("h_diagnosa").value;

        let ID = $('input[name="ID[]"]').map(function() {
            return this.value;
        }).get();

        let up = $('input[name="up[]"]').map(function() {
            return this.value;
        }).get();

        let down = $('input[name="down[]"]').map(function() {
            return this.value;
        }).get();

        let ResultValue = $('input[name="ResultValue[]"], select[name="ResultValue[]"]').map(function() {
            return this.value;
        }).get();

        let NormalValue = $('input[name="NormalValue[]"]').map(function() {
            return this.value;
        }).get();

        let CharValue = $('input[name="CharValue[]"]').map(function() {
            return this.value;
        }).get();

        $.ajax({
            url: '<?= base_url('worklist/updateHasilLab'); ?>',
            method: 'POST',
            data: {
                ID: ID,
                up: up,
                down: down,
                ResultValue: ResultValue,
                NormalValue: NormalValue,
                CharValue: CharValue,
                noLab: noLab,
                diagnosa: h_diagnosa
            },
            async: true,
            dataType: 'json',
            success: function(data) {
                // Swal.fire({
                //     title: 'Oke!',
                //     text: 'Berhasil diupdate.',
                //     icon: 'success'
                // }).then((result) => {
                showDetail(noLab)
                btnCetak()
                // });
            },
            error: function(data) {
                Swal.fire({
                    title: 'Oooops!',
                    text: "Data Gagal !",
                    icon: 'error'
                });
            }
        })
    });

    function btnCetak() {
        var noLab = document.getElementById("h_nolab").value;
        $("#modalCetak").modal("show");
        var baseUrl = "<?= base_url('worklist/cetak/'); ?>" + noLab;
        var html = '';
        html += '<iframe id="if1" width="100%" height="900" style="visibility:visible" src="' + baseUrl + '"></iframe>'
        $("#pdfHasil").html(html)
    }

    $(document).ready(function() {
        $(document).ajaxStart(function() {
            // $("#btnSimpan").prop("disabled", true);
            $("#btnAnalis").prop("disabled", true);
            $("#btnCetak").prop("disabled", true);
        }).ajaxStop(function() {
            // $("#btnSimpan").prop("disabled", false);
            $("#btnAnalis").prop("disabled", false);
            $("#btnCetak").prop("disabled", false);
        });
    });

    function editNormal(data) {
        var id = data.getAttribute("data-id");
        var normal = data.getAttribute("data-normal");
        var charValue = data.getAttribute("data-char");
        if (charValue == 'TEXT') {
            $("#i_editNormal").hide();
            $("#i_editNormalPilihan").show();
            document.getElementById("idDetail").innerHTML = id;
            getEditNormalPilihan(normal)
        } else if (charValue == 'NUM') {
            $("#i_editNormal").show();
            $("#i_editNormalPilihan").hide();
            document.getElementById("idDetail").innerHTML = id;
            document.getElementById("editNormal").value = normal
        } else {

        }

    }

    function getEditNormalPilihan(normal) {
        $.ajax({
            url: '<?= base_url('worklist/getPilihan'); ?>',
            method: 'POST',
            data: {},
            async: true,
            dataType: 'json',
            success: function(data) {
                var html = '';
                var i;
                html += '<option value=""></option>';
                for (i = 0; i < data.length; i++) {
                    if (normal == data[i].PilihResult) {
                        html += '<option selected value="' + data[i].PilihResult + '">' + data[i].PilihResult + '</option>';
                    } else {
                        html += '<option value="' + data[i].PilihResult + '">' + data[i].PilihResult + '</option>';
                    }
                }
                $('#editNormalPilihan').html(html);
            }
        })
    }

    function batalEdit() {
        $("#i_editNormal").hide();
        $("#i_editNormalPilihan").hide();
    }

    function simpanEditNormal() {
        var id = document.getElementById("idDetail").innerHTML
        var normal = document.getElementById("editNormal").value
        var noLab = document.getElementById("h_nolab").value
        $.ajax({
            url: '<?= base_url('worklist/simpanEditNormal'); ?>',
            method: 'POST',
            data: {
                id: id,
                normal: normal,
                noLab: noLab
            },
            async: true,
            dataType: 'json',
            success: function(data) {
                showDetail(noLab)
            },
            error: function(data) {
                Swal.fire({
                    title: 'Oooops!',
                    text: "Data Gagal !",
                    icon: 'error'
                });
            }
        })
    }

    function simpanEditNormalPilihan() {
        var id = document.getElementById("idDetail").innerHTML
        var normal = document.getElementById("editNormalPilihan").value
        var noLab = document.getElementById("h_nolab").value
        $.ajax({
            url: '<?= base_url('worklist/simpanEditNormal'); ?>',
            method: 'POST',
            data: {
                id: id,
                normal: normal,
                noLab: noLab
            },
            async: true,
            dataType: 'json',
            success: function(data) {
                showDetail(noLab)
            },
            error: function(data) {
                Swal.fire({
                    title: 'Oooops!',
                    text: "Data Gagal !",
                    icon: 'error'
                });
            }
        })
    }
</script>