@extends('layouts.app')

@section('content')
    <section class="pcoded-main-container">
        <div class="pcoded-wrapper">
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <div class="main-body">
                        <div class="page-wrapper">
                        <!-- [ breadcrumb ] start -->
                        <div class="page-header" style="padding-top:10px">
                                <div class="page-block">
                                    <div class="row align-items-center">
                                        <div class="col-md-12">                                                      
                                        <div class="page-header-title">
                                            <!-- <h5 class="m-b-10">Intellix</h5> -->
                                        </div>
                                        <ul class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="{{ route('home') }}"><i
                                                    class="feather icon-home"></i></a></li>
                                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Intellix</a></li>
                                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Pengurusan Aduan</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ breadcrumb ] end -->

                            {{-- table index start --}}
                            <div class="col-sm-12">
                                <div class="card">
                                   
                                    <div class="card-header">
                                        <div class="row align-items-center">
                                            <div class="col-md-4 col-12 mt-2 mt-md-0">
                                                <input type="text" id="searchInput" class="form-control"
                                                    placeholder="Cari Aduan...">
                                            </div>
                                            <div class="col-md-8 col-8 mt-8 mt-md-8">
                                                <a class="btn btn-success btn-sm btn-rounded float-right"
                                                    href="{{ route('aduan.create') }}">
                                                    Daftar Aduan
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="dt-responsive table-responsive">
                                            <table id="dom-table" class="table table-striped table-bordered nowrap ">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>Tarikh Aduan</th>
                                                        <th>No. Aduan</th>
                                                        <th>Maklumat Aduan</th>
                                                        <th>Nama Pengaduan</th>
                                                        <th>Pegawai</th>
                                                        <th class="col-2 text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="aduanTable">
                                                    @if ($model->isNotEmpty())
                                                        @php $counter = 1 @endphp
                                                        @foreach ($model as $aduan)
                                                            <tr>
                                                                <td class="col-1">{{ $counter++ }}</td>
                                                                <td>{{ date('d-m-Y H:i A', strtotime($aduan->tarikh)) }}</td>
                                                                <td>{{ $aduan->noaduan }}</td>
                                                                <td style="word-wrap:break-word;overflow-wrap: break-word;white-space: normal;">{{ $aduan->infoaduan }}</td>
                                                                <td>{{ $aduan->namapengadu }}</td>
                                                                <td>{{ $aduan->createdBy->name }}</td>
                                                                <td class="col-2 text-center">
                                                                    <a href="{{ route('aduan.show', ['id' => $aduan->id]) }}"
                                                                        class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span>
                                                                        View</a>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="10" class="text-center">No Data Found</td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- table index end --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        document.getElementById('searchInput').addEventListener('keyup', function() {
            var input = this.value.toLowerCase();
            var rows = document.querySelectorAll('#aduanTable tr');
            rows.forEach(function(row) {
                var cells = row.querySelectorAll('td');
                var match = false;
                cells.forEach(function(cell) {
                    if (cell.textContent.toLowerCase().includes(input)) {
                        match = true;
                    }
                });
                if (match) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    </script>
@endsection