<style>
    .table1 {
        color: #232323;
        border-collapse: collapse;
        font-size: 8pt;
        width: 100%;
        margin-top: 6px;
        text-align: center;
    }

    .table1,
    th,
    td {
        border: 0.5px solid #999;
        padding: 3px;
    }

    .auto {
        display: block;
        border: 1px solid #DCE6ED;
        padding: 5px;
        margin-top: 5px;
        width: 100%;
        height: 300px;
        overflow: auto;
    }
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Cases
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Vclaim</a></li>
            <li class="active">Cases</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">


        <div class="box">
            <div class="box-body">

                <div class="row" style="margin-bottom: 10px;">
                    <div class="col-md-8">
                        <i class="fa fa-fw fa-calendar"></i> Daftar Pasien
                    </div>
                    <div class="col-md-4" align="right">
                        <a href="" data-toggle="modal" data-target="#pencarian" class="btn btn-sm btn-primary bg-blue-gradient" data-backdrop="static" data-keyboard="false"><i class="fa fa-fw fa-search"></i> Cari</a>

                    </div>
                </div>
                <input type="text" id="search" class="form-control" placeholder="Pencarian...">
                <div class="auto">
                    <table id="table" class="table1">
                        <thead>
                            <tr style="font-weight: bold;">
                                <td>No.</td>
                                <td>Case</td>
                                <td>MR</td>
                                <td>Nama</td>
                                <td>Kategori</td>
                                <td>Kunjungan</td>
                                <td>Status</td>
                                <td>Penjamin</td>
                                <td>Dokter</td>
                                <td>NoSEP</td>
                                <td>User</td>
                                <td>No.FR</td>
                                <td>Opsi</td>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $teks = 8;
                            if ($teks > 5) {
                                $titik = "***";
                            } else {
                                $titik = "";
                            }
                            $no = 1;
                            foreach ($case as $pasien) :
                            ?>
                                <tr>
                                    <td><?= $no++; ?>.</td>
                                    <td><?= $pasien['Case ID']; ?></td>
                                    <td><?= $pasien['PatientCode']; ?></td>
                                    <td><?= $pasien['Description']; ?></td>
                                    <td><?= $pasien['Category']; ?></td>
                                    <td><?= date('d M Y', strtotime($pasien['Intake Date'])); ?></td>
                                    <td><?= $pasien['Case Status']; ?></td>

                                    <?php
                                    $cC = $pasien['CompanyCode'];
                                    $sCompany = $this->db->query("SELECT * FROM Company WHERE CompanyCode = '$cC'")->row_array();
                                    ?>
                                    <td>
                                        <?= substr($sCompany['CompanyName'], 0, $teks) . $titik; ?>
                                    </td>
                                    <td>
                                        <?= substr($pasien['FirstName'], 0, $teks) . $titik; ?>
                                    </td>
                                    <td>
                                        <?= substr($pasien['NoSEP'], 0, $teks) . $titik; ?>
                                    </td>
                                    <td>
                                        <?= $pasien['UserCreated']; ?>
                                    </td>
                                    <td><?= $pasien['FRNo']; ?></td>
                                    <td>
                                        <a style="color: black;" href="<?= base_url('pendaftaran/detailCaseUmum?case=' . $pasien['Case ID']); ?>"><button><i class="fa fa-fw fa-search"></i> Detail</button></a>

                                    </td>

                                </tr>
                            <?php
                            endforeach;
                            ?>
                        </tbody>
                    </table>
                </div>


            </div><!-- /.box-body -->
        </div><!-- /.box -->

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

<!-- Modal -->
<div class="modal fade" id="pencarian" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">FILTER</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="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab"></span> No. Kunjungan</a></li>
                        <li><a href="#tab_2" data-toggle="tab"></span> No.MR</a></li>
                        <li><a href="#tab_3" data-toggle="tab"></span> No.SEP</a></li>
                        <li><a href="#tab_5" data-toggle="tab"></span> Status</a></li>
                        <li><a href="#tab_6" data-toggle="tab"></span> Tanggal Masuk</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_1">
                            <form action="<?= base_url('cases/kunjungan'); ?>" method="get">
                                <input type="text" class="form-control" required placeholder="no kunjungan" name="src">
                                <button style="margin-top:10px" type="submit" class="btn btn-sm btn-primary"> Cari </button>
                            </form>
                        </div>
                        <div class="tab-pane" id="tab_2">
                            <form action="<?= base_url('cases/nomr'); ?>" method="get">
                                <input type="text" class="form-control" required placeholder="no mr" name="src">
                                <button style="margin-top:10px" type="submit" class="btn btn-sm btn-primary"> Cari </button>
                            </form>
                        </div>
                        <div class="tab-pane" id="tab_3">
                            <form action="<?= base_url('cases/nosep'); ?>" method="get">
                                <input type="text" class="form-control" required placeholder="no sep" name="src">
                                <button style="margin-top:10px" type="submit" class="btn btn-sm btn-primary"> Cari </button>
                            </form>
                        </div>
                        <div class="tab-pane" id="tab_5">
                            <form action="<?= base_url('cases/status'); ?>" method="get">
                                <select name="src" class="form-control" required>
                                    <option value=""></option>
                                    <option value="OPEN" selected>OPEN</option>
                                    <option value="CLOSED">CLOSED</option>
                                    <option value="Cancel">CANCEL</option>
                                </select>

                                <input type="date" style="margin-top: 5px" name="tgl" class="form-control" required>
                                <button style="margin-top:10px" type="submit" class="btn btn-sm btn-primary"> Cari </button>
                            </form>
                        </div>
                        <div class="tab-pane" id="tab_6">
                            <form action="<?= base_url('cases/tanggal'); ?>" method="get">
                                <input type="date" class="form-control" required value='<?= date('Y-m-d'); ?>' name="src">
                                <button style="margin-top:10px" type="submit" class="btn btn-sm btn-primary"> Cari </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    var $rows = $('#table >tbody >tr:visible');
    $('#search').keyup(function() {
        // fungsi untuk search
        var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
            reg = RegExp(val, 'i'),
            text;
        $rows.show().filter(function() {
            text = $(this).text().replace(/\s+/g, ' ');
            return !reg.test(text);
        }).hide();

        var value = $(this).val().toLowerCase();
        // fungsi untuk highlight
        $("#table >tbody >tr >td").each(function(index, elem) {
            var $elem = $(elem);
            if (value.length > 0 && $elem.text().toLowerCase().indexOf(value) != -1) {
                $elem.css('backgroundColor', '#DCE6ED');
            } else {
                $elem.css('backgroundColor', '');
            }
        });
    });
</script>

<script>
    function myFunction() {
        // Get the checkbox
        var checkBox = document.getElementById("myCheck");
        var text = document.getElementById("text");

        // If the checkbox is checked, display the output text
        if (checkBox.checked == true) {
            text.style.display = "block";
            text2.style.display = "block";
            text3.style.display = "block";
            text4.style.display = "block";
            text5.style.display = "block";
        } else {
            text.style.display = "none";
            text2.style.display = "none";
            text3.style.display = "none";
            text4.style.display = "none";
            text5.style.display = "none";
        }
    }
</script>