<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="kes" 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">
                    <h4 class="title">Senarai Kes</h4>
                    <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">
                        <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>Negeri</b></th>
                            <th><b>Bil. Pegawai</b></th>
                            <th>[Tindakan]</th>
                        </thead>
                        <tbody>
                            <!-- jquery to fill -->
                        </tbody>
                    </table>

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

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

            //globals
            var url = "";
            url = url + "http://myori.afxtechnologies.com/";

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


            function getData(){
                $.ajax({
                    type: "get",
                    url: url + "/k/ws/get_reports.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.rpt_txn+ "</td>";
                            tr = tr + "    <td>" +v.id+ "</td>";
                            tr = tr + "    <td>" +v.status+  "</td>";
                            tr = tr + "    <td>" +v.officer+ "</td>";
                            tr = tr + "    <td></td>";
                            tr = tr + "    <td>";
                            tr = tr + "        <a href='show_kes.php?id=" +v.id+ "'>";
                            tr = tr + "            <i class='ti-info-alt' title='Papar Maklumat'></i>&nbsp;&nbsp;&nbsp;";
                            tr = tr + "        </a>";
                            tr = tr + "    </td>";
                            tr = tr + "</tr>";
                            $("#products tbody").append(tr);
                        });
                        $("#totalrow").html(loop).change();
                    }        
                });	
            }

        });
</script>


