<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>
            Data Pasien
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Pendaftaran</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="box">
            <div class="box-body">

                <a href="" data-toggle="modal" data-target="#baru" class="btn btn-sm btn-primary bg-blue-gradient"><i class="fa fa-fw fa-plus"></i> Pasien Baru</a>
                <a href="" data-toggle="modal" data-target="#caripasien" class="btn btn-sm btn-success bg-green-gradient"><i class="fa fa-fw fa-search"></i> Cari</a>
                <!-- <a href="<?= base_url("Pasien/viewnomr"); ?>" class="btn btn-sm btn-success bg-green-gradient"><i class="fa fa-fw fa-eye"></i> View No Mr</a> -->
                <input type="text" id="search" class="form-control" style="margin-top: 5px;" placeholder="Pencarian...">
                <div class="auto">
                    <table id="table" class="table1">
                        <tr style="font-weight: bolder;">
                            <td>No.MR</td>
                            <td>Nama</td>
                            <td>Jenis Kelamin</td>
                            <td>Telp / Hp</td>
                            <td>No.BPJS / ID</td>
                            <td>Alamat</td>
                            <td>Tanggal Lahir</td>
                        </tr>
                        </thead>
                        <tbody>
                            <?php
                            foreach ($cari as $data) :
                            ?>
                                <tr>
                                    <td>
                                        <a style="color: gray;" href="<?= base_url('pasien/detailPasien/' . $data['PatientCode']); ?>"><button><?= $data['PatientCode']; ?></button></a>
                                    </td>
                                    <td><?= $data['FirstName'] . ' ' . $data['LastName']; ?></td>
                                    <td>
                                        <?php
                                        if ($data['Sex'] == 1) {
                                            echo "Perempuan";
                                        } else {
                                            echo "Laki-laki";
                                        }
                                        ?>
                                    </td>
                                    <td><?= $data['CellPhone']; ?></td>
                                    <td>
                                        <?= $data['EmployeeID']; ?>
                                    </td>
                                    <td><?= $data['HomeAddress1'] ?></td>
                                    <td><?= date("d/m/Y", strtotime($data['DOB'])); ?></td>
                                </tr>
                            <?php
                            endforeach;
                            ?>
                        </tbody>

                    </table>
                </div>

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

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

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

<!-- Modal -->
<div class="modal fade" id="baru" 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"><i class="fa fa-fw fa-pencil"></i> PASIEN BARU</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <form action="<?= base_url('pasien/formNik'); ?>" method="get">
                    <input type="text" placeholder="NIK..." class="form-control" required name="nik">
                    <button style="width: 100%; border-radius: 0px;" type="submit" class="btn btn-sm bg-green-gradient btn-success">Daftar By NIK</button>
                </form>

                <div style="margin-top: 5px; text-align:right">
                    <a href="">Daftar Biasa</a>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="caripasien" 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"><i class="fa fa-fw fa-search"></i> CARI PASIEN</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <form action="<?= base_url('pasien/cari'); ?>" method="get">
                    <select name="jenis" style="margin-bottom: 5px;" class="form-control" onchange="DisableMenu()" id="status" required>
                        <option value=""></option>
                        <option value="1">No MR</option>
                        <option value="5">NIK</option>
                        <option value="6">BPJS</option>
                        <option value="2">Nama Depan</option>
                        <option value="3">Nama Belakang</option>
                        <option value="4">Tanggal Lahir</option>
                        <!-- <option value="4">Tanggal Lahir</option> -->
                    </select>
                    <input type="text" style="margin-bottom: 5px;" placeholder="KETIK JENIS..." class="form-control" id="progres" name="pencarian">

                    <label>Tanggal Lahir</label>
                    <input type="date" style="margin-bottom: 5px;" placeholder="PILIH TANGGAL" class="form-control" id="progress" required name="pencarian" disabled>
                    <button style="width: 100%; border-radius: 0px;" type="submit" class="btn btn-sm btn-success bg-green-gradient">Cari</button>
                </form>

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

<script>
    function DisableMenu() {

        if (document.getElementById("status").value == "4" || document.getElementById("status").value == "4") {
            document.getElementById("progress").disabled = false;

        } else {

            document.getElementById("progress").disabled = true;
        }

    }
</script>

<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>