muadzmi02
/
sipadu_mbip
複製自 SwissLink/sipadu_mbip


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('mobile/jquery.mobile-1.4.5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('mobile/css/jqm-demos.css') }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="{{ asset('mobile/jquery.js') }}"></script>
    <script src="{{ asset('mobile/js/index.js') }}"></script>
    <script src="{{ asset('mobile/jquery.mobile-1.4.5.min.js') }}"></script>

    <style type="text/css">
        /* A bit custom styling */
        .my-page .ui-listview li a {
            background-color: #fff  !important;
        }

        .my-page .ui-listview li:active {
            border-color: #ccc !important;
        }

        .my-page .ui-listview li a:active {
            background-color: #fff !important;
            border-color: #ccc !important;
            color: #333 !important;
        }

        .ui-page-theme-a .ui-btn:focus,html .ui-bar-a .ui-btn:focus,html .ui-body-a .ui-btn:focus,html body .ui-group-theme-a .ui-btn:focus,html head+body .ui-btn.ui-btn-a:focus,.ui-page-theme-a .ui-focus,html .ui-bar-a .ui-focus,html .ui-body-a .ui-focus,html body .ui-group-theme-a .ui-focus,html head+body .ui-btn-a.ui-focus,html head+body .ui-body-a.ui-focus{
            -webkit-box-shadow:0 0 12px #ccc !important;
            -moz-box-shadow:0 0 12px #ccc !important;
            box-shadow:0 0 12px #ccc !important;
        }

        .ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head+body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active{
                background-color: #fff !important;
                border-color: #ccc !important;
                color: #333 !important;
                text-shadow: none !important;
        }

        .my-page .ui-listview li .ui-btn p {
            color: #333 !important;
        }

        .my-page .ui-listview li .ui-btn .ui-li-aside {
            color: #eee;
        }
        .ui-input-search.ui-input-has-clear .ui-btn.ui-input-clear, .ui-input-text.ui-input-has-clear .ui-btn.ui-input-clear{
            display:none !important;
        }
    </style>
</head>
<body>
    <div data-role="page" id="demo-page" class="my-page">
        <!-- <div data-role="header"><h1>List Compounds</h1></div> -->

    <div role="main" class="ui-content">
        <input type="text" data-type="search" name="searchD" id="searchD" value="">
    
        <div id="result">
            @if(count($compound) > 0)
                @foreach($compound as $c)
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="https://mpkb.sipadu.my/responsive/compound/{{ $c->kpd }}/view/details">
                            <h2>{{ $c->kpd }}</h2>
                            @if($c->jumlah_kemaskini_kompaun != '')
                            <p>Rm {{ $c->jumlah_kemaskini_kompaun }}</p>
                            <input type="hidden" name="amount" value="{{ $c->jumlah_kemaskini_kompaun }}">
                            @else
                            <p>Rm {{ $c->jumlah_asal_kompaun }}</p>
                            <input type="hidden" name="amount" value="{{ $c->jumlah_asal_kompaun }}">
                            @endif

                            @if($c->ConfidentialFile->status == 'Belum Bayar')
                            <p class="ui-li-aside"><input type="button" value="Pay"></p>
                            @endif
                        </a>
                    </li>
                </ul>
                @endforeach
            @else
            <p style="text-align: center"><code><b>No Result Found</b></code></p>
            @endif
        </div>

        <div id="search_result">
        </div>
    </div>
</body>
<script type="text/javascript">
    function delay(callback, ms) {
        var timer = 0;
        return function() {
            var context = this, args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                callback.apply(context, args);
            }, ms || 0);
        };
    }

    var typingTimer;             
    var doneTypingInterval = 5000;

    $("#searchD").keyup(delay(function (e) {

        if(this.value == '' || this.value == null){
            $("#result").show(); $("#search_result").hide();
            $('#search_result').empty();
        }else {
            var params = 'data='+$("#searchD").val();
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "{{ url('/api/search/compound') }}", true);
            xhr.withCredentials = true;
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200){
                    $('#search_result').empty();
                    $("#result").hide(); $("#search_result").show();
                    var response = JSON.parse(xhr.responseText);
                    if(response['success'] == true){
                        var c = response['data'];
                        if(c.length !== 0){
                            $.each(c, function(i,item) {
                                var tawaran = '';
                                if(c[i].jumlah_kemaskini_kompaun != ''){
                                    tawaran = c[i].jumlah_kemaskini_kompaun;
                                }else{
                                    tawaran = c[i].jumlah_asal_kompaun;
                                }

                                var html = '<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">';
                                html += '<li class="ui-first-child ui-last-child"><a href="https://mpkb.sipadu.my/responsive/compound/'+c[i].kpd+'/view/details" class="ui-btn ui-btn-icon-right ui-icon-carat-r">'; 
                                html += '<h2>'+c[i].kpd+'</h2><p>Rm '+tawaran+'</p><input type="hidden" name="amount" value="'+tawaran+'">'; 

                                $(c[i].ConfidentialFile).each(function(index, file) {
                                    if(file.status == 'Belum Bayar'){
                                        html += '<p class="ui-li-aside"><input type="button" value="Pay"></p>'; 
                                    }
                                })

                                $('#search_result').append(html);
                            });
                        }else{
                            $('#search_result').append('<p style="text-align: center"><code><b>No Result Found</b></code></p>');
                        }
                    }e
                }
                else if(xhr.readyState == 4){
                    location.reload();
                }
            }
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(params);
        }

    }, 700));
</script>
</html>