<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <div class="card card-plain">
                <div class="header">
                    <h4 class="title">Carian</h4>
                </div>

                <div class="content">
                    <form>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>No. Kes </label>
                                    <input id="search_text" type="text" class="form-control border-input" placeholder="Nombor Kes" value="" >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label >Industri</label>
                                    <select id="industri" class="form-control border-input" >
                                        <option value="-" selected>SEMUA</option>
                                        <option value="001">TOYS</option>
                                        <option value="002">LED</option>
                                        <option value="003">ELECTRONIC</option>
                                        <option value="004">AUTOMOTIVE</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label >Negeri</label>
                                    <select id="negeri" class="form-control border-input" >
                                        <option value="-" selected>SEMUA</option>
                                        <option value="SEL">SELANGOR</option>
                                        <option value="NGS">NEGRI SEMBILAN</option>
                                        <option value="MLK">MELAKA</option>
                                        <option value="PRK">PERAK</option>
                                        <option value="PAH">PAHANG</option>
                                        <option value="JOH">JOHOR</option>
                                        <option value="KED">KEDAH</option>
                                        <option value="PER">PERLIS</option>   
                                        <option value="KEL">KELANTAN</option>
                                        <option value="TGG">TERENGGANU</option>
                                        <option value="SRK">SARAWAK</option>                                                                             
                                        <option value="SBH">SABAH</option>                                                                             
                                        <option value="WP1">W.PERSEKUTUAN (K.LUMPUR)</option>                                                                             
                                        <option value="WP2">W.PERSEKUTUAN (PUTRAJAYA)</option>                                                                             
                                        <option value="WP3">W.PERSEKUTUAN (LABUAN)</option>                                                                             
                                    </select>
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-info btn-fill btn-wd btn-carian">Carian</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <hr/>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-plain">
                <div class="header">
                    <p class="category">Jumlah Rekod: <span id="totalrow">0</span></p>
                </div>
                <div class="content table-responsive table-full-width">
                    <table id="products" class="table table-hover listing">
                        <thead>
                            <th>#</th>
                            <th><b>Tarikh Laporan</b></th>
                            <th><b>Tarikh Assign</b></th>
                            <th><b>No. Kes</b></th>
                            <th><b>Industri</b></th>
                            <th><b>Lokasi</b></th>
                            <th><b>Pegawai</b></th>
                            <th>[Tindakan]</th>
                        </thead>
                        <tbody>
                            <!-- jquery to fill -->
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

    <!--   Core JS Files   -->
    <script src="/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="/assets/js/bootstrap-checkbox-radio.js"></script>

    <!--  Notifications Plugin    -->
    <script src="/assets/js/bootstrap-notify.js"></script>

    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
	<script src="/assets/js/paper-dashboard.js"></script>

	<script src="/assets/js/app.js"></script>

<script type="text/javascript">
    	$(document).ready(function(){

            //globals
            var url = "";
            url = getBase();

            //app starts here...
            getData();


            function getData(){
                $.ajax({
                    type: "get",
                    url: url + "/k/ws/get_reports_assigned.php"
                    }).done(function(json) { 
                    //console.log(json);
                    var data = $.parseJSON(json);
                    //console.log('data...', data);
                    
                    if (data && data.length > 0) {

                        var loop = 0;
                        $.each(data, function(k, v) {
                            //console.log('loop...', loop);
                            //console.log('val...', v);
                            var tr = "";
                            loop++;
                            tr = tr + "<tr>";
                            tr = tr + "    <td>" +loop+ "</td>";
                            tr = tr + "    <td>" +v.rpt_txn+ "</td>";
                            tr = tr + "    <td>" +(v.assigndt?v.assigndt:'')+ "</td>";
                            tr = tr + "    <td>" +v.id+ "</td>";
                            tr = tr + "    <td>" +v.type+  "</td>";
                            tr = tr + "    <td>" +""+  "</td>";
                            tr = tr + "    <td>" +v.officer+ "</td>";
                            tr = tr + "    <td>";
                            tr = tr + "        <span style='cursor:pointer;'>";
                            tr = tr + "        <i class='ti-info-alt show-case' data1='" + v.id + "' title='Paparan Kes'></i>&nbsp;&nbsp;&nbsp;";
                            tr = tr + "        </span>";                            
                            tr = tr + "    </td>";
                            tr = tr + "</tr>";
                            $("#products tbody").append(tr);
                        });
                        $("#totalrow").html(loop).change();
                    }        
                });	
            }

            $(document).on('click', '.show-case' , function() {
                event.preventDefault();
                $(document).off('click', '.show-case');
                var data1 = $(this).attr('data1');
                //console.log('data1:', data1);
                setPage(this, 'Paparan Kes (Dalam Siasatan)', './show_kes_action.php?id='+data1);
            });             

            $('#search_text').keyup(function() {
                var txtVal = this.value;
                //$("#output").text("You have entered " + txtVal);
                //console.log("You have entered " + txtVal);
                searchFilter(txtVal);
            });

            function searchFilter(input) {
                var rex = new RegExp(input, 'i');
                //var rows = $('.clients tr');
                var rows = $('.listing').find('tr').not(':first') 

                rows.hide();
                rows.filter(function() {
                    var tester = true;
                    tester = rex.test($(this).text());
                    //tester = tester && filterOnDays(this);
                    return tester;
                }).show();
            } 



        });

</script>


