<style>
    td {
        font-size: 10pt;
    }

    th {
        font-size: 10pt;
    }

    .blink_me {
        animation: blinker 1s linear infinite;
    }

    @keyframes blinker {
        60% {
            opacity: 0;
        }
    }

    .ulclass {
        background-color: #E5F4FC;
        cursor: pointer;
        z-index: 1;
        position: absolute;
        width: 60%;
        overflow: scroll;
    }

    .liclass {
        font-size: 14px;
        font-weight: bold;
        padding: 12px;
        text-align: left;
        border: thin solid #F0F8FF;
    }

    .liclass:hover {
        background-color: #64CBFF;
    }
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Transaction
            <small><?= $abdulradjak['NamaPerusahaan']; ?> - <?= $abdulradjak['KodePPK']; ?></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> HIS</a></li>
            <li class="active">Data Pasien</li>
        </ol>
    </section>
<?php
 $caseid       = $this->uri->segment(3);
 $pasienDetail = $this->db->query("Select * from Cases where [Case ID] = '$caseid' ")->row_array();
?>

    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="box">
            <div class="box-body">
                <small>
                    <form action="<?= base_url('Transaction/save'); ?>" method="post">
                        <table class="table table-striped" id="tab_obat">
                            <tr>
                                <th colspan="2"><input type="text" name="" value="Add New Transaction" class="form-control" readonly disabled></th>
                                <th>Pilih Group Tindakan :  <select name="category" id="kategori"" class="teanganData kategori" required data-live-search="true" require>
                                        <?php foreach($category as $d) : ?>
                                        <option value="<?= $d['ActivityClass']; ?>"><?= $d['ActivityClass']; ?></option>
                                        <?php endforeach; ?>
                                     </select>
                                </th>
                                <th>Pilih Dokter Pengirim :  <select name="doktername" id="kategori"" class="teanganData kategori" required data-live-search="true" require>
                                        <?php foreach($dokter as $d) : ?>
                                        <option value="<?= $d['DoctorID']; ?>"><?= $d['FirstName']; ?></option>
                                        <?php endforeach; ?>
                                     </select>
                                </th>
                                <th> <button id="add_obat" class="btn btn-primary btn-sm buka" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button></th>
                            </tr>
                            <tr>
                                <th>Treatment</th>
                                <th>Doctor</th>
                                <th>Harga</th>
                                <th>Coa</th>
                                <th>~</th>
                            </tr>
                            <tr>
                            <td style="display: none ;">
                                    <input type="text" name="caseID" class="form-control" value="<?= $pasienDetail['Case ID']; ?>">
                                    <input type="text" name="mr" class="form-control" value="<?= $pasienDetail['PatientCode']; ?>">
                                    <input type="text" name="class" class="form-control" value="<?= $pasienDetail['Category']; ?>">
                                    <input type="text" name="refrensi" class="form-control" value="<?= $pasienDetail['LastOP']; ?>">
                                    <input type="text" name="user" value="<?= $user['nama']; ?>">
                                    <input type="text" name="company" id="company" value="<?= $pasienDetail['CompanyCode']; ?>">
                                </td>
                            </tr>
                        </table>
                        <div style="display:none;" id="tampil">
                       <button type="submit" id="buka" class="btn btn-sm btn-success">Save Treatment</button>
                       <a href="<?= base_url('Transaction/detailheader/'.$pasienDetail['Case ID']); ?>" class="btn btn-sm btn-warning" >Back</a>
                     </div>
                    </form>
                </small>
            </div><!-- /.box-body -->
        </div><!-- /.box -->

        <!-- <div class="box">
            <div class="box-body">
                <small>
                    <table class="table table-striped">
                        <tr>
                            <th>Transaksi ID</th>
                            <th>Case ID</th>
                            <th>Patient</th>
                            <th>Penjamin</th>
                            <th>Date Create</th>
                            <th>Doctor</th>
                            <th>~</th>
                        </tr>
                       <?php foreach($trans as $trx) : ?>
                            <tr>
                                <td><?= $trx['TransactionID'] ?></td>
                                <td><?= $trx['Case ID'] ?></td>
                                <td><?= $trx['Description'] ?></td>
                                <td><?= $trx['CompanyName'] ?></td>
                                <td><?= $trx['DateCreated'] ?></td>
                                <td><?= $trx['FirstName'] ?></td>
                                <td>
                                    <a href="<?= base_url('Transaction/detailTransaction/'. $trx['Case ID'] .'/'. $trx['TransactionID']); ?>" class="btn btn-sm btn-primary">
                                    <i class="fa fa-eye"></i>
                                    </a>
                                    <a href="<?= base_url('Transaction/DeleteTransaction/'. $trx['TransactionID']) ?>" onclick="return confirm('Apakah anda yakin ingin menghapus transaksi?')" class="btn btn-sm btn-danger">
                                        <i class="fa fa-fw fa-trash"></i>
                                    </a>
                                </td>
                              
                            </tr>
                      <?php endforeach; ?>
                    </table>
                </small>
            </div><!-- /.box-body -->
        </div> -->

    </section><!-- /.content -->

</div><!-- /.content-wrapper -->

<!-- Modal Cari Tindakan -->
<div class="modal fade" id="ModalCariTindakan" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Daftar Treatment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <div class="col-ms-4">
            <select name="category" id="textCategory"" class="teanganData" required data-live-search="true">
                                <?php foreach($category as $d) : ?>
                                <option value="<?= $d['ActivityClass']; ?>"><?= $d['ActivityClass']; ?></option>
                                <?php endforeach; ?>
            </select>
            </div><br><br>
            <div class="col-ms-4">
                    <input type="text" class="form-control" id="textCaritindakan" placeholder="Ketik Nama Treatment"><br>
                </div>
                    <table class="table table-hover mt-3">
                        <thead>
                            <tr>
                                <th scope="col" width="50%">Kode Treatment</th>
                                <th scope="col" width="40%">Nama Treatment</th>
                                <th scope="col" width="40%">Harga Treatment</th>
                                <th scope="col" width="40%">COA</th>
                                <th scope="col" width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody id="ListTindakan">

                        </tbody>
                    </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
<!-- End of Modal Cari Diagnosa -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('.selectpicker').on('hidden.bs.select', function(e) {
                            $('.selectpicker').selectpicker({
                                style: 'btn-info',
                                size: 4,
                                liveSearch: true
                                });
                            });

        var i = 1;
        var dokter = "<option></option>";

        <?php foreach ($dokter as $d) { ?>
             var DataDokter = "<?php echo $d['FirstName']; ?>";
             var kodeDokter = "<?php echo $d['DoctorID']; ?>";
             dokter += "<option value='" + kodeDokter + "'" + " >" + DataDokter + "</option>"
        <?php } ?>

        $("#add_obat").click(function() {
            $('#tab_obat').append('<tr  id="addri' + i + '"></tr>');
            $('#addri' + i).html(
                "<td width='150px'  align='center'><div> <input required type='text' style='400px;' name='namatindakan[]' id=\"obat" + i + "\"  autocomplete='off' class='form-control' onkeydown=\"searchObat(" + i + ")\"  placeholder='Search Tindakan' /> <div id=\"obatList" + i + "\" > </div> </div></td> " +
                "<td width='150px' align='center'><select required class='selectpicker' data-live-search='true' name = 'dokter[]'>" +
                dokter +
                "<td width='80px'  align='center'><div><input type='text' name='harga[]' id=\"Price" + i + "\" required class='form-control' placeholder='Harga'>" +
                "<td width='150px'  align='center'><div><input type='text' name='Coa[]' id=\"Coa" + i + "\" required class='form-control'  placeholder='COA'>" +
                "<div style='display:none;' id=\"searchObat" + i + "\" class='spinner-border text-primary spinner-border-sm' role='status'>  <span class='sr-only'></span></div>" +
                "<td width='10px' align='center' ><button  type='button' id='btnDelete' style='font-size:12px;'  class='btn btn-danger btnDelete'>x</button></td>");
                $('.selectpicker').selectpicker('refresh');
            i++;
        });
    });

    $(document).ready(function() {
        $("#tab_obat").on('click', '#btnDelete', function() {
            $(this)
                .closest('tr')
                .remove();
                document.getElementById("tampil").style.display = "none";
            i--;
        });
    });


    function searchObat(e) {
        document
            .getElementById('Price' + e)
            .value = '';
        document
            .getElementById('Coa' + e)
            .value = '';
        var query = document
            .getElementById('obat' + e)
            .value;
        if (query.length < 2) {
            return true;
        }
        var kategori = $("#kategori").val();
        var company = $("#company").val();

        document.getElementById("searchObat" + e).style.display = "block";
        if (query != '') {
            $.ajax({
                url: '<?php echo base_url() ?>Transaction/searchTindakan',
                method: "POST",
                data: {
                    keyword: query,
                    kategori: kategori,
                    id: e,
                    company: company
                },
                dataType: 'json',
                success: function(data) {
                    var success = data.status;

                    if (success == '00') {

                        $('#obatList' + e).fadeIn();
                        $('#obatList' + e).html(data.data);

                    }
                    document.getElementById("searchObat" + e).style.display = "none";
                }
            });
        }
    }

    function setObatCode(text, id) {
        if (text == 'empty') {
            $('#obat' + id).val('');
            $('#obatList' + id).fadeOut();
            return;
        }

        let obat = text;
        const obatArray = obat.split(" # ");
        let Price = obatArray[2];
        let Coa   = obatArray[3];
        $('#obat' + id).val(obat);
        $('#Price' + id).val(Price);
        $('#Coa' + id).val(Coa);
        $('#obatList' + id).fadeOut();
    }
</script>
<script>
$( ".buka" ).click(function() {
    document.getElementById("tampil").style.display = "block";
});
</script>
